/* ========================================================================= BatQuant ETF Monitor — Editorial Finance Desk ========================================================================= */ :root { /* === Apple system tokens — dark mode (default) === */ /* Backgrounds */ --bg: #000000; --bg-elevated: #1C1C1E; --bg-tertiary: #2C2C2E; --bg-quaternary: #3A3A3C; --bg-card: rgba(28, 28, 30, 0.72); /* materialThick */ --bg-card-solid: #1C1C1E; /* Separators */ --separator: rgba(84, 84, 88, 0.65); --separator-opaque: #38383A; /* Labels — iOS hierarchy */ --label: #FFFFFF; --label-secondary: rgba(235, 235, 245, 0.60); --label-tertiary: rgba(235, 235, 245, 0.30); --label-quaternary: rgba(235, 235, 245, 0.18); /* Brand + semantic */ --accent: #D4A574; --accent-deep: #8E6B40; --accent-glow: rgba(212, 165, 116, 0.16); --green: #32D74B; --red: #FF453A; --orange: #FF9F0A; --yellow: #FFD60A; --gray: #8E8E93; /* === Backward-compat aliases (app.js + legacy selectors read these) === */ --bg-deep: var(--bg); --line: var(--separator); --line-strong: var(--separator-opaque); --hairline: rgba(235, 235, 245, 0.08); --ink: var(--label); --ink-soft: rgba(235, 235, 245, 0.60); --ink-mute: rgba(235, 235, 245, 0.40); --ink-faint: rgba(235, 235, 245, 0.18); --whisky: var(--accent); --whisky-deep: var(--accent-deep); --whisky-glow: var(--accent-glow); --bronze: var(--accent); --paper: var(--label); --pos: var(--green); --pos-deep: #2BB347; --neg: var(--red); --neg-deep: #C03A30; /* Geometry — 8pt grid + iOS continuous corner radius */ --rad-card: 14px; --rad-pill: 999px; --rad-sm: 8px; /* Type stacks — Apple system fonts everywhere */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-cn-serif: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", -apple-system, sans-serif; /* Page container — caps top-level layouts on ultrawide and provides a fluid horizontal gutter that scales from mobile to 4K. */ --page-max: 1680px; --page-pad: clamp(16px, 4vw, 64px); } /* ========================================================================= Light theme — opt-in via (default = dark). Apple iOS / macOS light system palette. ========================================================================= */ [data-theme="light"] { /* Backgrounds */ --bg: #FFFFFF; --bg-elevated: #F2F2F7; --bg-tertiary: #E5E5EA; --bg-quaternary: #D1D1D6; --bg-card: rgba(255, 255, 255, 0.72); --bg-card-solid: #FFFFFF; /* Separators */ --separator: rgba(60, 60, 67, 0.29); --separator-opaque: #C6C6C8; /* Labels — iOS hierarchy on light */ --label: #000000; --label-secondary: rgba(60, 60, 67, 0.60); --label-tertiary: rgba(60, 60, 67, 0.30); --label-quaternary: rgba(60, 60, 67, 0.18); /* Brand + semantic — slightly darker for AAA on white */ --accent: #B8884A; --accent-deep: #6E5028; --accent-glow: rgba(184, 136, 74, 0.18); --green: #34C759; --red: #FF3B30; --orange: #FF9500; --yellow: #FFCC00; --gray: #8E8E93; /* Backward-compat aliases */ --bg-deep: var(--bg); --line: var(--separator); --line-strong: var(--separator-opaque); --hairline: rgba(60, 60, 67, 0.10); --ink: var(--label); --ink-soft: rgba(60, 60, 67, 0.60); --ink-mute: rgba(60, 60, 67, 0.40); --ink-faint: rgba(60, 60, 67, 0.20); --whisky: var(--accent); --whisky-deep: var(--accent-deep); --whisky-glow: var(--accent-glow); --bronze: var(--accent); --paper: var(--label); --pos: var(--green); --pos-deep: #28A745; --neg: var(--red); --neg-deep: #C82016; } /* Tone the decorative atmosphere down for the light theme. */ [data-theme="light"] .grain { opacity: 0.018; mix-blend-mode: multiply; } [data-theme="light"] .bg-mesh { opacity: 0.16; } [data-theme="light"] .bg-vignette { display: none; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "ss02", "cv11"; font-variant-numeric: tabular-nums; overflow-x: hidden; } button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } button:focus-visible { outline: 1px dashed var(--whisky); outline-offset: 3px; } a { color: inherit; } /* ========================================================================= Background atmosphere ========================================================================= */ /* Background atmosphere — toned down for Apple's clean surface aesthetic. Materials on cards provide the visual layering; the page background stays calm. */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .bg-mesh { position: fixed; inset: -20vh -10vw; pointer-events: none; z-index: 0; filter: blur(100px) saturate(1.05); opacity: 0.22; background: radial-gradient(55% 45% at 20% 10%, rgba(212, 165, 116, 0.22) 0%, transparent 65%), radial-gradient(40% 35% at 82% 88%, rgba(212, 165, 116, 0.10) 0%, transparent 70%); } .bg-vignette { display: none; /* Apple HIG avoids vignettes; materials do the layering. */ } main, header, nav, footer { position: relative; z-index: 3; } /* ========================================================================= Masthead ========================================================================= */ .masthead { max-width: var(--page-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; padding: 58px var(--page-pad) 28px; position: relative; align-items: end; } .masthead__rule { position: absolute; left: var(--page-pad); right: var(--page-pad); top: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); } .masthead__monogram { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--ink-soft); text-transform: uppercase; padding-bottom: 14px; } .masthead__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 6.6vw, 96px); line-height: 0.92; letter-spacing: -0.035em; color: var(--label); } .masthead__title-bat { display: block; } .masthead__title-bat .acc { color: var(--accent); font-weight: 800; } .masthead__title-sub { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: clamp(12px, 0.9vw, 14px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-secondary); } .masthead__tag { margin-top: 18px; max-width: 540px; font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: 14px; letter-spacing: 0.01em; line-height: 1.6; } .masthead__right { display: grid; gap: 18px; justify-items: end; } .masthead__controls { display: inline-flex; align-items: center; gap: 12px; } .masthead__clock { text-align: right; display: grid; gap: 4px; } .clock__tz { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); } .clock__time { font-family: var(--font-mono); font-size: 28px; letter-spacing: -0.02em; color: var(--ink); font-weight: 500; font-feature-settings: "tnum"; } .masthead__asof { display: flex; align-items: baseline; gap: 10px; } .asof__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-mute); } .asof__value { font-family: var(--font-mono); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: var(--whisky); font-feature-settings: "tnum"; } /* Apple capsule button: filled background, single-row content, subtle hover. */ .refresh { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--separator); border-radius: var(--rad-pill); background: var(--bg-elevated); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transition: transform 0.15s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .refresh svg { width: 16px; height: 16px; color: var(--accent); transition: transform 0.4s ease; } .refresh__label { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--label); } .refresh__hint { display: none; /* Apple capsules carry one short label only. */ } .refresh:hover { border-color: var(--accent); background: var(--bg-tertiary); } .refresh:active { transform: scale(0.97); } .refresh:hover svg { transform: rotate(180deg); } .refresh.is-spinning svg { animation: spin 1.1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================= Strategy switcher ========================================================================= */ /* Apple iOS segmented control — one rounded container, active tab as an elevated "pill", smooth transitions, no separator lines. */ .switcher { max-width: calc(var(--page-max) - 2 * var(--page-pad)); width: calc(100% - 2 * var(--page-pad)); margin: 28px auto 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 4px; background: var(--bg-elevated); border-radius: var(--rad-sm); border: 1px solid var(--separator); } .switcher__tab { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 14px; align-items: baseline; padding: 12px 16px; background: transparent; color: var(--label-secondary); text-align: left; border-radius: 6px; transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s ease, transform 0.18s ease; } .switcher__tab.is-active { background: var(--bg-tertiary); color: var(--label); box-shadow: 0 0 0 0.5px var(--separator-opaque) inset, 0 1px 2px rgba(0, 0, 0, 0.25); } .switcher__tab:hover:not(.is-active) { background: rgba(255, 255, 255, 0.04); color: var(--label); } [data-theme="light"] .switcher__tab:hover:not(.is-active) { background: rgba(0, 0, 0, 0.04); } [data-theme="light"] .switcher__tab.is-active { background: #FFFFFF; box-shadow: 0 0 0 0.5px var(--separator) inset, 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04); } .switcher__num { grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--accent); align-self: center; line-height: 1; letter-spacing: -0.01em; } .switcher__name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--label); } .switcher__cn { grid-row: 2; grid-column: 2; font-family: var(--font-cn-serif); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: var(--label-secondary); } .switcher__meta { grid-row: span 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-tertiary); align-self: center; text-align: right; } /* ========================================================================= Stage / views ========================================================================= */ .stage { max-width: var(--page-max); margin-inline: auto; padding: 44px var(--page-pad) 60px; } .view { display: none; animation: rise 0.6s cubic-bezier(0.16, 0.6, 0.2, 1) both; } .view.is-active { display: block; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= Dashboard layout ========================================================================= */ .dash { display: grid; gap: 36px; } .dash__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .dash__roman { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .dash__title { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; } .dash__title-en { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4.6vw, 68px); line-height: 0.94; color: var(--label); letter-spacing: -0.03em; } .dash__title-cn { font-family: var(--font-cn-serif); font-weight: 600; font-size: 20px; color: var(--label-secondary); letter-spacing: 0.04em; } .dash__subtitle { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-tertiary); } .dash__position { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pos-card { position: relative; padding: 16px 18px 18px; border: 1px solid var(--separator); border-radius: var(--rad-card); background: var(--bg-card); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); overflow: hidden; } .pos-card::before { content: none; /* Apple HIG: materials replace gradient washes. */ } .pos-card--next { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-glow), transparent 55%), var(--bg-card); } .pos-card__label { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--label-tertiary); margin-bottom: 6px; } .pos-card__value { display: block; font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--label); line-height: 1.4; letter-spacing: -0.01em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; /* Server emits one sub-book per line for multi-book positions (Full, Complex). Honor the newlines so the position card stays readable on every viewport. */ white-space: pre-line; word-break: break-word; } .pos-card__date { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-soft); font-feature-settings: "tnum"; } .pos-card__date:empty { display: none; } .pos-card__hint { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--whisky); } .pos-card__hint:empty { display: none; } /* ========================================================================= Metrics row ========================================================================= */ .dash__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--separator); border: 1px solid var(--separator); border-radius: var(--rad-card); overflow: hidden; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .metric { position: relative; padding: 18px 20px; background: var(--bg-card-solid); display: grid; gap: 8px; align-content: start; } .metric__label { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; text-transform: none; color: var(--label-tertiary); line-height: 1.3; } .metric__hint { font-family: var(--font-cn-serif); font-weight: 400; font-size: 11px; letter-spacing: 0.02em; color: var(--label-tertiary); text-transform: none; } .metric__value { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.022em; line-height: 1.05; color: var(--label); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .metric__value.is-pos { color: var(--pos); } .metric__value.is-neg { color: var(--neg); } .metric__value.is-warm { color: var(--whisky); } .metric__sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.08em; } /* ========================================================================= Cards & chart grids ========================================================================= */ .card { border: 1px solid var(--separator); border-radius: var(--rad-card); background: var(--bg-card); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 20px; display: flex; flex-direction: column; min-width: 0; } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); } .card__title { font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--label); } .card__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .card__body { flex: 1; min-height: 0; } .dash__chart-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } .card--equity .card__body { height: 420px; } .card--dd .card__body { height: 240px; } .card--rsi .card__body { height: 180px; } .dash.is-pro .card--equity .card__body { height: 540px; } .dash.is-pro .card--dd .card__body { height: 200px; } /* Theme toggle — sun / moon, same capsule treatment as .refresh. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--separator); border-radius: var(--rad-pill); background: var(--bg-elevated); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); color: var(--label-secondary); transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.15s ease; } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-tertiary); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .theme-toggle__sun { display: none; } [data-theme="light"] .theme-toggle .theme-toggle__sun { display: block; } [data-theme="light"] .theme-toggle .theme-toggle__moon { display: none; } /* PRO / BASIC — Apple iOS segmented control mini variant. */ .proswitch { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--rad-pill); padding: 3px; align-self: center; } .proswitch__btn { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--label-secondary); padding: 4px 12px; border-radius: var(--rad-pill); background: transparent; border: 0; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .proswitch__btn:hover { color: var(--label); } .proswitch__btn.is-active { background: var(--bg-tertiary); color: var(--label); box-shadow: 0 0 0 0.5px var(--separator-opaque) inset, 0 1px 2px rgba(0, 0, 0, 0.20); } [data-theme="light"] .proswitch__btn.is-active { background: #FFFFFF; box-shadow: 0 0 0 0.5px var(--separator) inset, 0 1px 2px rgba(0, 0, 0, 0.08); } .dash__col-grid { display: grid; /* 3-col on wide screens; gracefully reflows to 2 then 1 via auto-fit. */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .dash__col-grid--three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card--year .card__body, .card--contrib .card__body { height: 290px; } .dash__monthly { display: grid; grid-template-columns: 1fr; } .card--monthly .card__body { min-height: 320px; } /* HTML `hidden` is otherwise overridden by `.card { display: flex }`. */ .card[hidden] { display: none !important; } /* ========================================================================= Factor weights ========================================================================= */ .factors { display: grid; gap: 14px; } .factor-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; } .factor-row__label { font-family: var(--font-cn-serif); font-size: 13px; color: var(--ink); letter-spacing: 0.08em; } .factor-row__value { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--whisky); font-feature-settings: "tnum"; } .factor-row__bar { grid-column: span 2; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--whisky), var(--whisky-deep)); position: relative; overflow: hidden; } .factor-row__bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 50%, transparent); animation: sheen 6s linear infinite; } .factor-row__bar-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); position: relative; grid-column: span 2; } .factor-row__bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--bronze), var(--whisky)); } @keyframes sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ========================================================================= Universe & KV lists ========================================================================= */ .universe { list-style: none; display: grid; gap: 8px; } .universe__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--hairline); } .universe__row:last-child { border-bottom: none; } .universe__code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.06em; } .universe__name { font-family: var(--font-cn-serif); font-size: 14px; color: var(--paper); } .universe__chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--whisky); border: 1px solid var(--line-strong); border-radius: var(--rad-pill); padding: 2px 8px; background: rgba(212, 165, 116, 0.08); } .universe__chip--muted { color: var(--ink-mute); background: transparent; border-color: var(--hairline); } .kv { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 10px; } .kv dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .kv dd { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--paper); text-align: right; font-feature-settings: "tnum"; } /* ========================================================================= Tables ========================================================================= */ .dash__tables { border: 1px solid var(--line); border-radius: var(--rad-card); background: var(--bg-card); backdrop-filter: blur(10px); } .tables__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 26px 14px; border-bottom: 1px solid var(--hairline); gap: 24px; flex-wrap: wrap; } .tables__title { font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--label); } .tables__nav { display: flex; gap: 4px; background: rgba(255, 255, 255, 0.025); border-radius: var(--rad-pill); padding: 4px; } .tables__tab { padding: 8px 18px; font-family: var(--font-cn-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--ink-soft); border-radius: var(--rad-pill); transition: background 0.2s ease, color 0.2s ease; } .tables__tab:hover { color: var(--ink); } .tables__tab.is-active { background: var(--whisky); color: #1a140c; font-weight: 700; } .tables__body { padding: 0; max-height: 460px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--separator-opaque) transparent; } .tables__body::-webkit-scrollbar { width: 8px; height: 8px; } .tables__body::-webkit-scrollbar-thumb { background: var(--separator-opaque); border-radius: 8px; } .tables__body::-webkit-scrollbar-track { background: transparent; } .tables__pane { display: none; } .tables__pane.is-active { display: block; } table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); } .data-table thead th { position: sticky; top: 0; z-index: 2; text-align: left; background: var(--bg-card-solid); padding: 14px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .data-table tbody td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); white-space: nowrap; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } .data-table tbody tr:hover td { background: var(--whisky-glow); } .data-table td.num, .data-table th.num { text-align: right; } .data-table td.pos { color: var(--pos); background: rgba(50, 215, 75, 0.05); } .data-table td.neg { color: var(--neg); background: rgba(255, 69, 58, 0.05); } .data-table tbody tr:hover td.pos { background: rgba(50, 215, 75, 0.10); } .data-table tbody tr:hover td.neg { background: rgba(255, 69, 58, 0.10); } .data-table td.cn { font-family: var(--font-cn-serif); letter-spacing: 0.06em; } /* Sticky first column on mobile: keep the date/year anchored when the user scrolls horizontally through the wide data tables. */ @media (max-width: 900px) { .data-table tbody td:first-child, .data-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card-solid); } .data-table thead th:first-child { z-index: 3; } } /* ========================================================================= Compare view ========================================================================= */ .compare { display: grid; gap: 32px; } .compare__head { padding-bottom: 28px; border-bottom: 1px solid var(--line); } .compare__roman { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .compare__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 4.4vw, 64px); letter-spacing: -0.03em; color: var(--label); line-height: 0.95; } .compare__sub { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); } .compare__metrics { border: 1px solid var(--line); border-radius: var(--rad-card); background: var(--bg-card); backdrop-filter: blur(10px); overflow: hidden; } .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; } .compare-table thead th { text-align: left; padding: 16px 20px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-mute); background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--line); } .compare-table tbody td { padding: 16px 20px; border-bottom: 1px solid var(--hairline); font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--label); font-feature-settings: "tnum"; line-height: 1.2; letter-spacing: -0.01em; } .compare-table tbody td.label { font-family: var(--font-cn-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-soft); } .compare-table tbody td .num-suffix { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-left: 4px; letter-spacing: 0.04em; } .compare-table tbody td.pos { color: var(--pos); } .compare-table tbody td.neg { color: var(--neg); } /* 4-way comparison highlights — best (leader) and worst (laggard) per row get a faint background tint so the eye can track the winner across metrics without re-reading every number. Tint is colour-coordinated with the pos/neg palette so it composes with existing pos/neg cells. */ .compare-table tbody td.compare-best { background: color-mix(in srgb, var(--pos) 12%, transparent); border-radius: 4px; } .compare-table tbody td.compare-worst { background: color-mix(in srgb, var(--neg) 10%, transparent); border-radius: 4px; } .compare__chart .card__body, .compare__yearly .card__body { height: 380px; } .compare__chart, .compare__yearly { border: 1px solid var(--line); border-radius: var(--rad-card); background: var(--bg-card); backdrop-filter: blur(10px); padding: 22px 24px 24px; } /* ========================================================================= Colophon ========================================================================= */ .colophon { max-width: var(--page-max); margin: 36px auto 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 32px var(--page-pad) 40px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); } .colophon__label { display: block; color: var(--ink-faint); margin-bottom: 4px; } .colophon__value { color: var(--ink-soft); } .colophon__col--end { text-align: right; } /* Data-quality banner — sits between the switcher and the dashboard, surfaces partial TuShare fetches and short-circuited refreshes. */ .dq-banner { max-width: var(--page-max); margin: 0 auto; padding: 10px var(--page-pad) 0; } .dq-banner[hidden] { display: none; } .dq-banner p { margin: 6px 0; padding: 10px 14px; border: 1px solid var(--accent); background: var(--accent-glow, var(--whisky-glow)); border-radius: var(--rad-sm); font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--label); } .dq-banner code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.18); color: var(--accent); } @media (max-width: 600px) { .dq-banner { padding: 8px 16px 0; } .dq-banner p { padding: 10px 12px; font-size: 12.5px; } } .colophon__signature { font-family: var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } /* ========================================================================= Overlay (loading / refreshing) ========================================================================= */ .overlay { position: fixed; inset: 0; z-index: 50; background: rgba(7, 8, 11, 0.78); backdrop-filter: blur(14px); display: grid; place-items: center; } .overlay[hidden] { display: none !important; } .overlay__pane { width: min(520px, 88vw); padding: 36px 40px 32px; border: 1px solid var(--line-strong); border-radius: var(--rad-card); background: linear-gradient(160deg, rgba(212, 165, 116, 0.08), rgba(20, 22, 28, 0.92)); text-align: center; display: grid; gap: 14px; } .overlay__rule { width: 60px; height: 1px; margin: 0 auto 4px; background: var(--whisky); } .overlay__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--whisky); } .overlay__line { font-family: var(--font-body); font-weight: 600; font-size: 18px; color: var(--paper); line-height: 1.45; } .overlay__bar { height: 3px; margin: 6px auto 4px; width: 70%; background: rgba(255, 255, 255, 0.06); overflow: hidden; border-radius: 4px; } .overlay__bar span { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--whisky), var(--bronze)); animation: bar-slide 1.6s ease-in-out infinite; } @keyframes bar-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } } .overlay__small { font-family: var(--font-cn-serif); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); } /* ========================================================================= Responsive — five tiers ========================================================================= */ /* Compact desktop / iPad landscape (≤ 1280): col-grids already reflow via auto-fit; we mostly need to make sure section gaps feel right. */ @media (max-width: 1280px) { .dash { gap: 28px; } .dash__head { gap: 28px; grid-template-columns: 1fr; align-items: start; } .dash__position { margin-top: 16px; } } /* Tablet portrait (≤ 900): masthead stacks, switcher becomes a single vertical column — five tabs in a 3-col grid produces an awkward 3+2 layout and the labels truncate; one column is cleaner and gives full tap targets. */ @media (max-width: 900px) { .masthead { grid-template-columns: 1fr; gap: 24px; padding-top: 44px; } .masthead__right { justify-items: start; } .switcher { grid-template-columns: 1fr; } .switcher__tab { padding: 16px 20px; min-height: 44px; } .colophon { grid-template-columns: 1fr 1fr; gap: 22px; } .colophon__col--end { text-align: left; } .dash__position { grid-template-columns: 1fr; } .compare { gap: 28px; } /* Charts get a bit shorter to keep the page reasonable to scroll. */ .card--equity .card__body { height: 360px; } .card--dd .card__body { height: 200px; } .card--rsi .card__body { height: 160px; } .card--monthly .card__body { min-height: 280px; } .card--year .card__body, .card--contrib .card__body { height: 260px; } .dash.is-pro .card--equity .card__body { height: 440px; } } /* Mobile (≤ 600): everything single column, tighter chrome but maintain the 15px floor so Chinese characters stay legible. */ @media (max-width: 600px) { body { font-size: 15px; line-height: 1.5; } .masthead { padding-top: 36px; gap: 20px; } .masthead__title { font-size: clamp(48px, 11vw, 72px); } .switcher { grid-template-columns: 1fr; } .switcher__tab { padding: 16px 20px; } .switcher__num { font-size: 28px; } .switcher__name { font-size: 22px; } .stage { padding-top: 32px; padding-bottom: 40px; } .dash { gap: 24px; } .colophon { grid-template-columns: 1fr; gap: 16px; padding-top: 24px; padding-bottom: 32px; } /* Card padding tightens for narrow screens. */ .card { padding: 16px 16px 18px; } .pos-card { padding: 14px 16px 16px; } .pos-card__label { font-size: 10px; margin-bottom: 6px; } .pos-card__value { font-size: 17px; line-height: 1.45; } .pos-card__date { margin-top: 8px; font-size: 10.5px; } .pos-card__hint { font-size: 11.5px; } .metric { padding: 14px 14px 16px; } .metric__value { font-size: 24px; } .metric__label { font-size: 11px; } .metric__hint { font-size: 10.5px; } .metric__sub { font-size: 10.5px; } /* Force 2-col metrics grid — auto-fit at 180px min was leaking to 3 half-rendered columns at iPhone-Pro widths. */ .dash__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Chart heights compressed further. */ .card--equity .card__body { height: 260px; } .card--dd .card__body { height: 160px; } .card--rsi .card__body { height: 130px; } .card--monthly .card__body { min-height: 220px; } .card--year .card__body, .card--contrib .card__body { height: 220px; } .dash.is-pro .card--equity .card__body { height: 320px; } /* Table panes — keep tappable nav, compress body height. */ .tables__body { max-height: 360px; } .tables__nav { flex-wrap: wrap; gap: 6px; } .tables__tab { min-height: 40px; padding: 8px 14px; font-size: 13px; } .data-table thead th { padding: 12px 14px; } .data-table tbody td { padding: 11px 14px; } /* Dashboard header — drop the orphan Roman numeral (it's already on the active switcher tab), stack EN + CN cleanly, tighten letter spacing on the mono subtitle so it stops overflowing. */ .dash__roman { display: none; } .dash__head { padding-bottom: 16px; gap: 14px; } .dash__title { flex-direction: column; gap: 6px; align-items: flex-start; } .dash__title-en { font-size: clamp(34px, 10vw, 52px); line-height: 0.92; } .dash__title-cn { font-size: 16px; letter-spacing: 0.16em; } .dash__subtitle { letter-spacing: 0.06em; font-size: 10.5px; word-spacing: 0.04em; line-height: 1.55; } /* Card head + PRO toggle stack vertically on narrow screens. */ .card__head { flex-wrap: wrap; gap: 8px 12px; } .proswitch { padding: 2px; } .proswitch__btn { padding: 6px 12px; font-size: 10px; min-height: 32px; } /* Theme toggle + refresh tappable to ≥ 40 px. */ .theme-toggle { width: 40px; height: 40px; } .refresh { min-height: 40px; padding: 10px 18px; } } /* ========================================================================= Tiny utilities ========================================================================= */ .num { font-family: var(--font-mono); font-feature-settings: "tnum"; } .muted { color: var(--ink-mute); } .pos { color: var(--pos); } .neg { color: var(--neg); } .warm { color: var(--whisky); }