/* ============================================================ stock-vision 設計 token 設計：美編夥伴定調，馬斯克整合 用法：在每個 HTML 的 加 ============================================================ */ /* ---- Google Fonts ---- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---- Phosphor Icons ---- */ @import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css'); :root { /* ===== 色彩 ===== */ --color-primary: #E8E4D9; /* 冷白金，主標題、強調 */ --color-accent: #4A9EBB; /* 霧藍，互動色 */ --color-neutral: #6B7E8F; /* 中性灰藍，輔助 */ /* 背景階層 */ --color-bg-base: #0F1117; /* 午夜藍黑，最底 */ --color-bg-card: #181C25; /* 卡片底 */ --color-bg-card-nested: #1E2330; /* 巢狀卡片、hover */ --color-bg-quote: #1A1E2E; /* AI 洞察建議卡用，帶藍紫偏移 */ /* 邊框與分隔 */ --color-divider: #2A303F; /* 表格線、區塊分隔 */ --color-border: #333B4F; /* 卡片邊框（主用）*/ --color-border-hover: #4A9EBB; /* hover 換成輔色 */ /* 文字 */ --color-text-primary: #E8E4D9; --color-text-secondary: #9AA3B2; --color-text-disabled: #4E5668; --color-text-label: #6B7E8F; /* 漲跌色（台股風格：紅漲綠跌，統一不切換） */ --color-up: #E85D5D; /* 降飽和紅 */ --color-down: #3DAB7A; /* 中性綠 */ --color-flat: #6B7E8F; /* 平盤 */ /* ===== 字型 ===== */ --font-zh: 'Noto Sans TC', system-ui, -apple-system, sans-serif; --font-en: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; --font-base: var(--font-zh), var(--font-en); /* ===== 字級 ===== */ --fs-display: 32px; /* 大數字（股價）*/ --fs-h1: 24px; --fs-h2: 18px; --fs-h3: 15px; /* 卡片標題 */ --fs-body: 14px; --fs-small: 12px; /* 次要資訊 */ --fs-tiny: 11px; /* AI 免責、label */ /* ===== 圓角 ===== */ --radius-sm: 4px; --radius-md: 6px; /* 卡片預設 */ --radius-lg: 8px; --radius-pill: 999px; /* ===== 間距 ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* 卡片預設 */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ===== 卡片 ===== */ --card-padding: var(--space-4) var(--space-5); --card-border: 1px solid var(--color-border); --card-border-dashed: 1px dashed var(--color-border); /* AI 建議卡專用 */ /* ===== 動效 ===== */ --transition-fast: 0.15s ease; --transition: 0.2s ease; } /* ============================================================ 基礎重置 ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--font-base); font-size: var(--fs-body); line-height: 1.5; color: var(--color-text-primary); background: var(--color-bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary); } button { font-family: inherit; cursor: pointer; border: none; background: transparent; color: inherit; } input, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* ============================================================ 常用 utility class ============================================================ */ /* 數字等寬（報價用） */ .font-mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* 漲跌色 */ .up { color: var(--color-up); } .down { color: var(--color-down); } .flat { color: var(--color-flat); } /* 卡片 */ .card { background: var(--color-bg-card); border: var(--card-border); border-radius: var(--radius-md); padding: var(--card-padding); } .card-ai { background: var(--color-bg-quote); border: var(--card-border-dashed); border-radius: var(--radius-md); padding: var(--card-padding); position: relative; } .card-ai::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--color-accent); border-radius: var(--radius-md) 0 0 var(--radius-md); } /* 標題層級 */ .h1 { font-size: var(--fs-h1); font-weight: 700; color: var(--color-primary); } .h2 { font-size: var(--fs-h2); font-weight: 600; color: var(--color-primary); } .h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--color-primary); } .label { font-size: var(--fs-small); color: var(--color-text-label); text-transform: uppercase; letter-spacing: 0.5px; } /* Pill 按鈕（預設問題用） */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--color-text-secondary); background: var(--color-bg-card); transition: all var(--transition-fast); } .pill:hover { border-color: var(--color-accent); color: var(--color-primary); background: var(--color-bg-card-nested); } /* 主按鈕 */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-bg-base); border-radius: var(--radius-md); font-weight: 500; transition: all var(--transition-fast); } .btn-primary:hover { filter: brightness(1.1); } /* AI 名言區塊 */ .quote-block { font-style: italic; padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; background: var(--color-bg-card-nested); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-primary); } .quote-source { display: block; margin-top: var(--space-2); font-style: normal; font-size: var(--fs-small); color: var(--color-text-label); } /* Loading 動畫 */ .thinking::after { content: ''; display: inline-block; width: 12px; text-align: left; animation: dots 1.4s infinite; } @keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } } /* 卷軸（深色版） */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg-base); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } /* 響應式斷點 */ @media (max-width: 768px) { :root { --fs-display: 24px; --fs-h1: 20px; --card-padding: var(--space-3) var(--space-4); } }