/* ========================================================= RSI20 / 台股工具站 — Design Tokens v1 Drop this into every page's as the FIRST stylesheet, then write page-level CSS using these variables only. ========================================================= */ :root { /* ---------- COLOR / INK SCALE (背景與文字) ---------- */ --ink-950: #07090d; /* 最深，全頁背景頂層漸層 */ --ink-900: #0b0e14; /* 頁面主背景 */ --ink-850: #11151d; /* 區塊背景 (section) */ --ink-800: #161b25; /* 卡片底色 */ --ink-750: #1c222d; /* 卡片 hover */ --ink-700: #232a37; /* 內嵌容器 / chip */ --ink-600: #2d3543; /* 分隔線、邊框 strong */ --ink-500: #3a4458; /* 邊框 default */ --ink-400: #5d6878; /* 圖示弱、placeholder */ --ink-300: #8794a8; /* 次要文字、label */ --ink-200: #b4bdcc; /* 一般正文 */ --ink-100: #dde3ec; /* 主要文字 */ --ink-50: #f4f7fb; /* 高亮純白文字 */ /* ---------- BRAND ---------- */ --brand: #5ac8fa; /* 青藍：站點主色 */ --brand-strong: #29b6f6; --brand-light: #80deea; --brand-deep: #0288d1; --brand-glow: rgba(90, 200, 250, 0.22); --brand-tint: rgba(90, 200, 250, 0.10); /* ---------- SEMANTIC (台股慣例：紅漲綠跌) ---------- */ --up: #ff5a5a; --up-strong: #ef3b3b; --up-soft: rgba(255, 90, 90, 0.12); --up-glow: rgba(255, 90, 90, 0.28); --down: #2dd4a4; --down-strong: #14b884; --down-soft: rgba(45, 212, 164, 0.12); --warn: #fbbf24; /* 黃：注意 */ --warn-soft: rgba(251, 191, 36, 0.14); --gold: #ffd54f; /* 金：精選、AI 推薦 */ --gold-soft: rgba(255, 213, 79, 0.14); --info: #818cf8; /* 紫藍：中性資訊 */ --info-soft: rgba(129, 140, 248, 0.14); /* ---------- BORDER ---------- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-brand: rgba(90, 200, 250, 0.45); /* ---------- TYPOGRAPHY ---------- */ --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale — 統一階梯，禁止在元件裡寫死數值 */ --fs-micro: 11px; /* 角標、極小字 */ --fs-xs: 12px; /* caption */ --fs-sm: 13px; /* label / table head */ --fs-base: 15px; /* body */ --fs-md: 17px; /* emphasized body / button */ --fs-lg: 20px; /* card title */ --fs-xl: 24px; /* section title */ --fs-2xl: 32px; /* page title */ --fs-3xl: 44px; /* hero / big number */ --fs-display: 64px; /* homepage hero */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --lh-relax: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* ---------- SPACING (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- RADIUS ---------- */ --r-xs: 4px; /* chip */ --r-sm: 6px; /* button / input */ --r-md: 10px; /* small card */ --r-lg: 14px; /* card */ --r-xl: 18px; /* hero card */ --r-2xl: 24px; /* big hero */ --r-pill: 999px; /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.45); --shadow-glow-brand: 0 0 0 1px var(--border-brand), 0 8px 24px var(--brand-glow); --shadow-glow-up: 0 0 0 1px rgba(255,90,90,0.35), 0 6px 18px var(--up-glow); /* ---------- LAYOUT ---------- */ --content-max: 1280px; /* 一般內容寬度 */ --content-wide: 1440px; /* 戰情室 / 表格寬度 */ --content-text: 720px; /* 文字段落寬 */ --nav-h: 60px; /* 頂部導航 */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 0.7, 0.2); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; } /* ========================================================= GLOBAL RESET + BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(90,200,250,0.08), transparent 60%), linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%); background-attachment: fixed; color: var(--ink-100); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Numbers (股價/RSI/PE) 一律走 mono 對齊 */ .num, .stat-num, .price, .rsi-val, .ma-val, .pe-val, .metric-chip .value, .indicator-value, .stock-id, .stock-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } a { color: var(--brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--brand-strong); } ::selection { background: var(--brand-glow); color: var(--ink-50); } /* 共用文字工具 */ .t-mute { color: var(--ink-300); } .t-dim { color: var(--ink-400); } .t-up { color: var(--up); } .t-down { color: var(--down); } .t-brand { color: var(--brand); } .t-gold { color: var(--gold); } /* ========================================================= COMPONENTS — Atoms ========================================================= */ /* ---- Top Nav ---- */ .ds-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--sp-6); background: rgba(11, 14, 20, 0.78); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--border-subtle); } .ds-nav__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-black); font-size: var(--fs-md); color: var(--ink-50); letter-spacing: 0.5px; } .ds-nav__brand-mark { width: 28px; height: 28px; border-radius: 8px; background: radial-gradient(circle at 30% 30%, var(--brand) 0%, var(--brand-deep) 70%); position: relative; box-shadow: 0 4px 12px var(--brand-glow); } .ds-nav__brand-mark::after { content: ""; position: absolute; inset: 6px; border: 2px solid rgba(255,255,255,0.92); border-radius: 4px; border-top-color: transparent; border-right-color: transparent; } .ds-nav__brand small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-300); margin-left: 2px; } .ds-nav__links { display: flex; align-items: center; gap: var(--sp-1); } .ds-nav__link { padding: var(--sp-2) var(--sp-3); color: var(--ink-300); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-sm); transition: all var(--dur-fast) var(--ease-out); } .ds-nav__link:hover { color: var(--ink-50); background: rgba(255,255,255,0.04); } .ds-nav__link.is-active { color: var(--brand); background: var(--brand-tint); } .ds-nav__search { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); width: 280px; height: 36px; padding: 0 var(--sp-3); background: var(--ink-800); border: 1px solid var(--border-default); border-radius: var(--r-sm); color: var(--ink-200); font-family: var(--font-mono); font-size: var(--fs-sm); } .ds-nav__search input { flex: 1; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; } .ds-nav__search kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; background: var(--ink-700); border: 1px solid var(--border-default); border-radius: 3px; color: var(--ink-300); } /* ---- Button ---- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-bold); border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; } .ds-btn--primary { background: var(--brand); color: #001a26; box-shadow: 0 4px 14px var(--brand-glow); } .ds-btn--primary:hover { background: var(--brand-strong); transform: translateY(-1px); } .ds-btn--secondary { background: var(--ink-700); color: var(--ink-100); border-color: var(--border-default); } .ds-btn--secondary:hover { background: var(--ink-600); } .ds-btn--ghost { background: transparent; color: var(--ink-200); } .ds-btn--ghost:hover { background: rgba(255,255,255,0.04); color: var(--ink-50); } .ds-btn--sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-xs); } .ds-btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-md); } /* ---- Chip / Tag ---- */ .ds-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-xs); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.3px; background: var(--ink-700); color: var(--ink-200); border: 1px solid var(--border-subtle); } .ds-chip--up { background: var(--up-soft); color: var(--up); border-color: rgba(255,90,90,0.3); } .ds-chip--down { background: var(--down-soft); color: var(--down); border-color: rgba(45,212,164,0.3); } .ds-chip--brand { background: var(--brand-tint); color: var(--brand); border-color: var(--border-brand); } .ds-chip--gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(255,213,79,0.3); } .ds-chip--warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(251,191,36,0.3); } .ds-chip--info { background: var(--info-soft); color: var(--info); border-color: rgba(129,140,248,0.3); } /* ---- Card ---- */ .ds-card { background: var(--ink-800); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-card--hover:hover { border-color: var(--border-brand); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .ds-card--hero { background: radial-gradient(circle at 100% 0%, var(--brand-tint), transparent 60%), var(--ink-800); border-color: var(--border-default); border-radius: var(--r-xl); padding: var(--sp-8); } .ds-card--accent { border-color: var(--border-brand); background: linear-gradient(135deg, var(--brand-tint), transparent 50%), var(--ink-800); } /* ---- Section title ---- */ .ds-section-title { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); } .ds-section-title h2 { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--ink-50); } .ds-section-title small { color: var(--ink-300); font-size: var(--fs-sm); } .ds-section-title .ds-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-default), transparent); } /* ---- Stat / KPI ---- */ .ds-stat { display: flex; flex-direction: column; gap: 2px; } .ds-stat__label { font-size: var(--fs-xs); color: var(--ink-300); letter-spacing: 0.5px; text-transform: uppercase; } .ds-stat__value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-black); color: var(--ink-50); line-height: 1; font-variant-numeric: tabular-nums; } .ds-stat__delta { font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* ---- Table ---- */ .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ds-table th { text-align: left; padding: var(--sp-3) var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-300); letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--border-default); background: var(--ink-850); } .ds-table td { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-sm); color: var(--ink-100); border-bottom: 1px solid var(--border-subtle); } .ds-table tr:hover td { background: rgba(255,255,255,0.02); } .ds-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- Focus ring (a11y) ---- */ :where(button, a, input, select, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }