/* Glassmorphism + RGB theme. * * - Dark navy base, large blurred colour blobs bleed through frosted glass. * - Accent colours follow Taiwan market convention: 紅漲綠跌 (red = up, * green = down). The semantic CSS vars (`--inc`/`--dec`) carry the * role; the underlying RGB triplets are swapped to honour TW custom. * - Backdrop blur is the only effect that actually requires modern browser * support; the rest degrades cleanly on older engines. */ :root { /* Base palette */ --bg-base: #07091a; --fg: #e9ecff; --muted: rgba(233, 236, 255, 0.55); --border-soft: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.14); /* Glass surfaces */ --glass-bg: rgba(20, 23, 50, 0.42); --glass-bg-strong: rgba(28, 32, 65, 0.55); --glass-highlight: rgba(255, 255, 255, 0.07); /* Accent RGB — used for the four change types. * * Taiwan market convention: 紅漲綠跌 (red = up, green = down) — opposite * of the West. Variable names map to ROLE not literal colour: `--rgb-r` * is the "decrease" hue (now green), `--rgb-g` is the "increase" hue * (now red). Swap is contained here; nothing else in the stylesheet * needs to know. */ --rgb-r: 51, 255, 168; /* DECREASE — neon green (TW: 跌) */ --rgb-g: 255, 64, 129; /* INCREASE — hot pink (TW: 漲) */ --rgb-b: 92, 195, 255; /* NEW */ --rgb-v: 196, 121, 255; /* REMOVED */ --new: rgb(var(--rgb-b)); --inc: rgb(var(--rgb-g)); --dec: rgb(var(--rgb-r)); --rem: rgb(var(--rgb-v)); --warn-bg: rgba(255, 213, 79, 0.12); --warn-fg: #ffe082; --warn-border: rgba(255, 213, 79, 0.35); /* Chart-specific tokens — exposed so charts.js can read them, so the * light theme can override colours without touching JS. */ --chart-grid: rgba(255, 255, 255, 0.06); --chart-tooltip-bg: rgba(20, 23, 50, 0.92); --chart-tooltip-border: rgba(255, 255, 255, 0.14); --chart-inc: rgb(var(--rgb-g)); --chart-dec: rgb(var(--rgb-r)); --chart-new: rgb(var(--rgb-b)); --chart-rem: rgb(var(--rgb-v)); --chart-accent: rgb(var(--rgb-b)); --chart-inc-alpha: rgba(var(--rgb-g), 0.18); --chart-dec-alpha: rgba(var(--rgb-r), 0.18); --chart-accent-alpha: rgba(var(--rgb-b), 0.18); /* Background blob intensity — light theme dials this way down so the * pastel halos don't fight white text/cards. */ --blob-saturate: 115%; --blob-blur: 60px; --blob-alpha-r: 0.38; --blob-alpha-g: 0.32; --blob-alpha-b: 0.42; --blob-alpha-v: 0.22; --scroll-track: rgba(255, 255, 255, 0.035); --scroll-thumb: rgba(var(--rgb-b), 0.42); --scroll-thumb-strong: rgba(var(--rgb-b), 0.68); } /* ─── Light theme ────────────────────────────────────────────────── * Default = dark (data-theme="dark" or attr absent). Manual switch via * inline pre-paint script in . Light mode is deliberately not a * pale copy of the neon dark theme: it uses a bright glass-desk palette * with cool blue interaction colour and Taiwan market convention preserved * (red rises, green falls). */ :root[data-theme="light"] { --bg-base: #edf4fb; --fg: #172033; --muted: rgba(48, 63, 87, 0.68); --border-soft: rgba(52, 71, 103, 0.10); --border: rgba(52, 71, 103, 0.16); --glass-bg: rgba(255, 255, 255, 0.58); --glass-bg-strong: rgba(255, 255, 255, 0.76); --glass-highlight: rgba(255, 255, 255, 0.68); /* 跌 = green / 漲 = red; tuned for white cards, not neon glow. */ --rgb-r: 0, 137, 112; --rgb-g: 204, 54, 64; --rgb-b: 35, 111, 190; --rgb-v: 118, 88, 194; --warn-bg: rgba(217, 119, 6, 0.10); --warn-fg: #9a5a00; --warn-border: rgba(217, 119, 6, 0.28); --chart-grid: rgba(52, 71, 103, 0.10); --chart-tooltip-bg: rgba(255, 255, 255, 0.98); --chart-tooltip-border: rgba(52, 71, 103, 0.18); --blob-saturate: 95%; --blob-blur: 58px; --blob-alpha-r: 0.12; --blob-alpha-g: 0.10; --blob-alpha-b: 0.16; --blob-alpha-v: 0.08; --scroll-track: rgba(255, 255, 255, 0.42); --scroll-thumb: rgba(35, 111, 190, 0.34); --scroll-thumb-strong: rgba(35, 111, 190, 0.58); } /* ─── Comfort daytime theme ──────────────────────────────────────── * A lower-stimulus daytime mode for long sessions: still bright enough * for tables, but warmer, lower contrast, and less saturated than light. */ :root[data-theme="comfort"] { --bg-base: #eef3ec; --fg: #1d2924; --muted: rgba(45, 62, 55, 0.64); --border-soft: rgba(67, 91, 78, 0.10); --border: rgba(67, 91, 78, 0.16); --glass-bg: rgba(249, 251, 244, 0.60); --glass-bg-strong: rgba(250, 252, 246, 0.78); --glass-highlight: rgba(255, 255, 255, 0.66); --rgb-r: 0, 124, 102; --rgb-g: 181, 68, 72; --rgb-b: 67, 112, 150; --rgb-v: 116, 98, 150; --warn-bg: rgba(181, 126, 36, 0.10); --warn-fg: #806120; --warn-border: rgba(181, 126, 36, 0.24); --chart-grid: rgba(67, 91, 78, 0.10); --chart-tooltip-bg: rgba(250, 252, 246, 0.98); --chart-tooltip-border: rgba(67, 91, 78, 0.18); --blob-saturate: 74%; --blob-blur: 64px; --blob-alpha-r: 0.09; --blob-alpha-g: 0.07; --blob-alpha-b: 0.10; --blob-alpha-v: 0.06; --scroll-track: rgba(250, 252, 246, 0.48); --scroll-thumb: rgba(67, 112, 150, 0.32); --scroll-thumb-strong: rgba(67, 112, 150, 0.54); } * { box-sizing: border-box; } /* 只給 html 100%,body 用 min-height 隨內容撐高;雙方都鎖 height 會把 sticky header 的 anchor 弄歪(scroll container 變 body 不是 viewport)。 */ html { height: 100%; } html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); } * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: linear-gradient(180deg, transparent, var(--scroll-track), transparent); border-radius: 999px; } ::-webkit-scrollbar-thumb { min-height: 46px; border: 3px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--scroll-thumb-strong), var(--scroll-thumb)) padding-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 0 12px rgba(var(--rgb-b), 0.10); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--rgb-b), 0.78), var(--scroll-thumb-strong)) padding-box; } ::-webkit-scrollbar-corner { background: transparent; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Noto Sans TC", sans-serif; color: var(--fg); background: var(--bg-base); line-height: 1.55; min-height: 100vh; position: relative; /* 用 `clip` 不用 `hidden`:hidden 會把 body 變成 scroll container,讓 header `position: sticky; top:0` 黏附目標跑到 body 而非 viewport, 長頁面捲到一定深度就見不到 header。clip 只負責視覺裁切橫向溢出, 不建立 scroll container。Chrome 90+ / Firefox 81+ / Safari 16+ 支援。 */ overflow-x: clip; } /* The RGB blobs. Three large radial gradients fixed to the viewport so the * background stays alive while the page scrolls. `filter: blur` is overkill * here (radial-gradient is already soft) but it adds the dreamy halo. */ body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; } body::before { inset: -25%; background: radial-gradient(45% 55% at 12% 22%, rgba(var(--rgb-r), var(--blob-alpha-r)), transparent 60%), radial-gradient(50% 60% at 88% 18%, rgba(var(--rgb-g), var(--blob-alpha-g)), transparent 62%), radial-gradient(60% 70% at 50% 95%, rgba(var(--rgb-b), var(--blob-alpha-b)), transparent 65%), radial-gradient(40% 50% at 70% 55%, rgba(var(--rgb-v), var(--blob-alpha-v)), transparent 60%); filter: blur(var(--blob-blur)) saturate(var(--blob-saturate)); animation: blob-drift 28s ease-in-out infinite alternate; } body::after { display: none; } :root:not([data-theme="light"]):not([data-theme="comfort"]) body::after { display: block; inset: 0; background: url("/static/market-bg-dark.svg") center top / min(1620px, 120vw) auto no-repeat, linear-gradient(180deg, transparent 0 64%, rgba(7, 9, 26, 0.30) 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 5%, #000 96%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 5%, #000 96%, transparent 100%); -webkit-mask-composite: source-in; opacity: 0.72; filter: saturate(112%); animation: market-line-drift 46s ease-in-out infinite alternate; } @keyframes blob-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -3%, 0) scale(1.04); } 100% { transform: translate3d(-2%, 2%, 0) scale(0.97); } } /* ---- Header / nav ---- */ header { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 10; } header .brand { font-weight: 700; text-decoration: none; font-size: 1.05rem; background: linear-gradient(90deg, rgb(var(--rgb-r)) 0%, rgb(var(--rgb-g)) 50%, rgb(var(--rgb-b)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Logo variant: image chip + text. The logo image has a light background, * so wrap it in a white pill so it reads against the dark glass header. */ header .brand-logo { display: inline-flex; align-items: center; gap: 10px; /* override the gradient-clip text trick from .brand */ background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--fg); } header .brand-logo img { height: 36px; width: 36px; max-width: 36px; display: block; object-fit: contain; background: transparent; padding: 0; border-radius: 9px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); } header .brand-logo .brand-text { font-weight: 700; font-size: 1rem; background: linear-gradient(90deg, rgb(var(--rgb-r)) 0%, rgb(var(--rgb-g)) 50%, rgb(var(--rgb-b)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.5px; } @media (max-width: 600px) { header .brand-logo img { height: 30px; width: 30px; max-width: 30px; } header .brand-logo .brand-text { font-size: 0.88rem; } header .brand-logo { gap: 7px; } } /* Phones too narrow — drop the gradient text and keep just the logo chip. */ @media (max-width: 380px) { header .brand-logo .brand-text { display: none; } } header nav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-soft); border-radius: 999px; background: rgba(255, 255, 255, 0.04); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 var(--glass-highlight); } header nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; color: var(--fg); border: 1px solid transparent; border-radius: 999px; text-decoration: none; opacity: 0.78; line-height: 1; white-space: nowrap; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } header nav a:hover { opacity: 1; color: rgb(var(--rgb-b)); background: rgba(var(--rgb-b), 0.10); border-color: rgba(var(--rgb-b), 0.24); text-decoration: none; transform: translateY(-1px); } header nav a.is-active { opacity: 1; color: var(--fg); background: linear-gradient(135deg, rgba(var(--rgb-b), 0.22), rgba(var(--rgb-g), 0.13)), rgba(255, 255, 255, 0.08); border-color: rgba(var(--rgb-b), 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(var(--rgb-b), 0.10); } main { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; } footer { padding: 32px 24px; text-align: center; color: var(--muted); font-size: 0.85rem; } footer small { display: block; margin: 2px 0; } footer .footer-legal { margin-top: 10px; font-size: 0.82rem; } footer .footer-legal a { color: var(--muted); } footer .footer-legal a:hover { color: var(--fg); } /* ---- Legal pages (免責聲明 / 使用條款 / 隱私權政策) ---- */ .legal-page h1 { margin: 0 0 4px; } .legal-page > .muted { margin: 0 0 24px; font-size: 0.86rem; } .legal-body { line-height: 1.75; font-size: 0.96rem; } .legal-body h2 { margin-top: 28px; margin-bottom: 8px; font-size: 1.1rem; color: var(--fg); border-left: 3px solid var(--inc); padding-left: 10px; } .legal-body p { margin: 8px 0; color: var(--fg); } .legal-body ul { margin: 6px 0 12px; padding-left: 24px; } .legal-body li { margin: 4px 0; color: var(--fg); } .legal-body hr { margin: 28px 0 16px; border: 0; border-top: 1px solid var(--border-soft); } .legal-body code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; } .legal-nav { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 0.9rem; } .legal-nav a { color: var(--muted); margin: 0 4px; } .legal-nav a:hover { color: var(--fg); } /* ---- Sections (glass cards) ---- */ main > section { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; margin-bottom: 22px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.35); } .hero h1 { margin: 0 0 8px; font-size: 1.6rem; letter-spacing: 0.5px; background: linear-gradient(135deg, rgb(var(--rgb-r)) 0%, rgb(var(--rgb-g)) 55%, rgb(var(--rgb-b)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--muted); } .warn { background: var(--warn-bg); color: var(--warn-fg); padding: 12px 16px; border-radius: 10px; border: 1px solid var(--warn-border); } code { background: rgba(0, 0, 0, 0.35); padding: 2px 7px; border-radius: 5px; font-size: 0.88em; border: 1px solid var(--border-soft); color: rgb(var(--rgb-g)); } a { color: rgb(var(--rgb-b)); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } a:hover { color: var(--fg); text-decoration: none; } :where(main, footer) :where(p, li, small, .legal-nav, .trade-events-empty) > a:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.news-title), .hero-status-link, .tab-pane-link, .dash-card-link { display: inline-flex; align-items: center; gap: 0.28em; max-width: 100%; padding: 2px 8px; margin: -2px 0; border: 1px solid rgba(var(--rgb-b), 0.16); border-radius: 999px; background: linear-gradient(135deg, rgba(var(--rgb-b), 0.075), rgba(var(--rgb-g), 0.04)), rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 14px rgba(var(--rgb-b), 0.06); color: rgb(var(--rgb-b)); line-height: 1.55; vertical-align: baseline; } :where(main, footer) :where(p, li, small, .legal-nav, .trade-events-empty) > a:not(.btn-primary):not(.btn-secondary):not(.btn-link):not(.news-title):hover, .hero-status-link:hover, .tab-pane-link:hover, .dash-card-link:hover { color: var(--fg); border-color: rgba(var(--rgb-b), 0.34); background: linear-gradient(135deg, rgba(var(--rgb-b), 0.16), rgba(var(--rgb-g), 0.08)), var(--glass-highlight); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(var(--rgb-b), 0.10); transform: translateY(-1px); } :where(main, footer) :where(p, li, small, .legal-nav, .trade-events-empty) > a code { margin: -1px 0; } /* ---- Tables ---- */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 8px; font-size: 14px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.18); } th, td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; } th { background: rgba(255, 255, 255, 0.05); font-weight: 600; letter-spacing: 0.3px; text-transform: none; color: rgba(233, 236, 255, 0.85); } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.15s ease; } tbody tr:hover { background: rgba(var(--rgb-b), 0.07); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* RGB-coloured class accents (NEW / INCREASE / DECREASE / REMOVED). * The slight text-shadow gives the neon feel without hurting legibility. */ .new, td.num.new, th.num.new, h3.new { color: var(--new); text-shadow: 0 0 10px rgba(var(--rgb-b), 0.45); } .inc, td.num.inc, th.num.inc, h3.inc { color: var(--inc); text-shadow: 0 0 10px rgba(var(--rgb-g), 0.45); } .dec, td.num.dec, th.num.dec, h3.dec { color: var(--dec); text-shadow: 0 0 10px rgba(var(--rgb-r), 0.45); } .rem, td.num.rem, th.num.rem, h3.rem { color: var(--rem); text-shadow: 0 0 10px rgba(var(--rgb-v), 0.45); } /* ---- ETF list grid ---- */ .etf-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 18px; margin: 0; } .etf-list li { padding: 10px 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 10px; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .etf-list li:hover { transform: translateY(-1px); border-color: rgba(var(--rgb-b), 0.45); background: rgba(var(--rgb-b), 0.06); } .etf-list a { font-weight: 600; } /* ---- Date picker ---- */ .date-picker { margin-bottom: 18px; } .date-picker label { color: var(--muted); } .date-picker select, .date-picker input[type="date"] { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass-bg-strong); color: var(--fg); font: inherit; margin-left: 6px; /* Native date input has its own height/baseline — normalize to match select. */ line-height: 1.2; min-width: 150px; /* Hide the spinner / dropdown arrow webkit appendage for cleaner look. */ -webkit-appearance: none; -moz-appearance: textfield; } .date-picker select:focus, .date-picker input[type="date"]:focus { outline: 2px solid rgba(var(--rgb-b), 0.55); outline-offset: 1px; } .date-picker option { background: #14172e; /* native dropdowns inherit poorly; force readable bg */ color: var(--fg); } /* Calendar icon for date input — invert to fit dark theme. */ .date-picker input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7) brightness(1.4); cursor: pointer; margin-left: 4px; } .hero-date-picker input[type="date"]::-webkit-calendar-picker-indicator, .holdings-date input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.7) brightness(1.4); } /* ---- Headings inside cards ---- */ h2 { margin-top: 0; padding-top: 0; border-top: none; font-size: 1.2rem; letter-spacing: 0.4px; } h3 { margin: 22px 0 10px; font-size: 1rem; letter-spacing: 0.3px; } /* Section dividers between cards already come from the gap between * glass surfaces, so we kill the old border-top on h2. */ /* ---- Capital flow ranking ---- */ .flow-rank tbody tr:hover { background: rgba(255, 255, 255, 0.04); } /* #1 leader gets a neon highlight matching its kind (inc / dec). * Box-shadow renders inside the row via inset; outer glow on the tr is * clipped by the table's overflow:hidden, so we use a strong inset. */ .flow-rank tr.rank-leader.in { background: linear-gradient( 90deg, rgba(var(--rgb-g), 0.18), rgba(var(--rgb-g), 0.06) 60%, transparent ); box-shadow: inset 4px 0 0 rgb(var(--rgb-g)), inset 0 0 24px rgba(var(--rgb-g), 0.25); } .flow-rank tr.rank-leader.in td:first-of-type + td strong { text-shadow: 0 0 14px rgba(var(--rgb-g), 0.55); } .flow-rank tr.rank-leader.out { background: linear-gradient( 90deg, rgba(var(--rgb-r), 0.18), rgba(var(--rgb-r), 0.06) 60%, transparent ); box-shadow: inset 4px 0 0 rgb(var(--rgb-r)), inset 0 0 24px rgba(var(--rgb-r), 0.25); } .flow-rank tr.rank-leader.out td:first-of-type + td strong { text-shadow: 0 0 14px rgba(var(--rgb-r), 0.55); } /* Crown / "1" badge in the leader's # cell — pure CSS, no extra markup. */ .flow-rank tr.rank-leader td:first-child { font-weight: 800; font-size: 1.05em; position: relative; } .flow-rank tr.rank-leader td:first-child::after { content: "👑"; margin-left: 4px; filter: drop-shadow(0 0 6px rgba(255, 220, 100, 0.65)); } /* Status pill */ .status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.4px; border: 1px solid currentColor; background: rgba(255, 255, 255, 0.04); } .status-pill.inc { color: var(--inc); } .status-pill.dec { color: var(--dec); } .status-pill.mixed { color: var(--rem); border-color: rgba(var(--rgb-v), 0.6); } /* ---- Chart cards (Chart.js wrapped in glass) ---- */ .chart-card .chart-wrap { position: relative; height: 320px; margin-top: 12px; } @media (max-width: 700px) { .chart-card .chart-wrap { height: 240px; } } /* ---- Stock detail: news board ---- */ .news-card { overflow: hidden; } .news-card h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; } .news-card h2 .muted { font-size: 0.7em; font-weight: 500; color: var(--muted); } .news-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .news-item { position: relative; min-height: 116px; padding: 16px 46px 16px 18px; overflow: hidden; background: linear-gradient(135deg, rgba(var(--rgb-b), 0.075), transparent 62%), rgba(255, 255, 255, 0.035); border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px rgba(0, 0, 0, 0.08); transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .news-item:nth-child(1) { grid-column: 1 / -1; min-height: 132px; padding-right: 58px; background: radial-gradient(circle at 100% 0%, rgba(var(--rgb-g), 0.14), transparent 42%), linear-gradient(135deg, rgba(var(--rgb-b), 0.11), rgba(var(--rgb-v), 0.065) 52%, transparent), rgba(255, 255, 255, 0.045); } .news-item::before { content: ""; position: absolute; inset: 14px auto 14px 0; width: 3px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, rgb(var(--rgb-b)), rgb(var(--rgb-g))); opacity: 0.70; } .news-item::after { content: "↗"; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; color: rgb(var(--rgb-b)); background: rgba(var(--rgb-b), 0.10); border: 1px solid rgba(var(--rgb-b), 0.22); font-size: 0.82rem; line-height: 1; opacity: 0.82; transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .news-item:hover { transform: translateY(-2px); border-color: rgba(var(--rgb-b), 0.36); background: linear-gradient(135deg, rgba(var(--rgb-b), 0.14), rgba(var(--rgb-g), 0.05) 70%), rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(var(--rgb-b), 0.11); } .news-item:hover::after { transform: translate(2px, -2px); background: rgba(var(--rgb-b), 0.18); border-color: rgba(var(--rgb-b), 0.38); } .news-title { display: block; margin-top: 8px; color: var(--fg); font-weight: 700; font-size: 0.98rem; line-height: 1.48; text-decoration: none; overflow-wrap: anywhere; } .news-item:nth-child(1) .news-title { max-width: 820px; font-size: 1.08rem; line-height: 1.5; } .news-title:hover { color: rgb(var(--rgb-b)); text-decoration: none; } .news-meta { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .news-source { display: inline; max-width: 100%; padding: 0; color: rgba(233, 236, 255, 0.78); background: none; border: 0; font-weight: 700; line-height: 1.4; } .news-time { color: var(--muted); font-weight: 600; } .news-source + .news-time::before { content: "·"; margin-right: 8px; color: var(--muted); } @media (max-width: 760px) { .news-list { grid-template-columns: 1fr; } .news-item, .news-item:nth-child(1) { grid-column: auto; min-height: auto; padding: 13px 42px 14px 15px; } .news-title, .news-item:nth-child(1) .news-title { font-size: 0.96rem; } } /* ---- Stock detail: market metric cards ---- */ .market-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; } @media (max-width: 900px) { .market-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .market-grid { grid-template-columns: repeat(2, 1fr); } } .metric { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; text-align: center; } .metric-label { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.3px; margin-bottom: 4px; white-space: nowrap; } .metric-value { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- ETF detail: NAV / 市價 / 溢價 + 警示 ---- */ .premium-bar { margin: 12px 0 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.03); } .premium-bar.premium-warn { background: rgba(255, 196, 0, 0.08); border-color: rgba(255, 196, 0, 0.45); } .premium-bar.premium-danger { background: rgba(255, 80, 80, 0.10); border-color: rgba(255, 80, 80, 0.55); } .premium-bar.premium-discount { background: rgba(80, 200, 120, 0.08); border-color: rgba(80, 200, 120, 0.40); } .premium-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .premium-label { font-size: 0.78rem; letter-spacing: 0.5px; margin-bottom: 4px; } .premium-value { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; } .premium-warn-msg { margin-top: 10px; padding: 10px 12px; font-size: 0.9rem; line-height: 1.5; border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: rgba(255, 230, 200, 0.92); } .premium-bar.premium-danger .premium-warn-msg { color: rgba(255, 220, 220, 0.96); background: rgba(120, 0, 0, 0.30); } .premium-bar.premium-discount .premium-warn-msg { color: rgba(220, 255, 230, 0.92); background: rgba(0, 60, 30, 0.30); } .premium-note { margin-top: 10px; font-size: 0.78rem; line-height: 1.55; opacity: 0.85; } .premium-sub { margin-top: 3px; font-size: 0.72rem; line-height: 1.3; opacity: 0.7; } /* Inline summary above the holders table */ .totals { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; font-size: 0.92rem; color: var(--muted); } .totals strong { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums; } /* History table: tint the 動作 cell by action class */ .action-new { color: var(--new); font-weight: 600; } .action-increase { color: var(--inc); font-weight: 600; } .action-decrease { color: var(--dec); font-weight: 600; } .action-removed { color: var(--rem); font-weight: 600; } /* ----- ETF 建倉紀錄 (stock detail trade section) ----- */ .trade-section .trade-block { margin-top: 18px; } .trade-section .trade-block:first-of-type { margin-top: 8px; } .trade-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; } .trade-block-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; } .trade-block-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.92rem; font-variant-numeric: tabular-nums; } .trade-block-sum strong { font-weight: 700; } /* Primary trade row (open + closed tables) — click to expand drawer. * Mirrors the .flow-row pattern on /flow but a cell-prepended caret instead * of a trailing one, since trade tables don't have a "參與 ETF" cell. */ .trade-row { cursor: pointer; transition: background 0.15s; } .trade-row:hover { background: rgba(var(--rgb-b), 0.07); } .trade-row.is-open { background: rgba(var(--rgb-b), 0.10); } .trade-caret { display: inline-block; margin-right: 6px; font-size: 0.85em; color: var(--muted); transition: transform 0.15s, color 0.15s; } .trade-row.is-open .trade-caret { transform: rotate(90deg); color: var(--fg); } /* Highlight ETF rows whose holdings on this stock changed in the latest * published basket. Subtle inset border on the left + warmer hover tint — * the visual cue should read "fresh activity" without competing with the * inc/dec coloring on the P&L cells. Applies to: * - .trade-row (trade-table rows, open + closed) * - plain in 持股總覽 (no .trade-row class — fall through to generic * .has-today-change selector below) */ .trade-row.has-today-change, tr.has-today-change { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.16) 0%, rgba(var(--rgb-g), 0.04) 24%, transparent 60%); box-shadow: inset 3px 0 0 var(--inc); } .trade-row.has-today-change:hover, tr.has-today-change:hover { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.22) 0%, rgba(var(--rgb-g), 0.07) 24%, transparent 60%); } .trade-row.has-today-change.is-open { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.24) 0%, rgba(var(--rgb-g), 0.09) 24%, transparent 60%); } .today-change-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 0.72rem; font-weight: 600; color: var(--inc); background: rgba(var(--rgb-g), 0.14); border: 1px solid rgba(var(--rgb-g), 0.35); border-radius: 10px; vertical-align: middle; letter-spacing: 0.04em; } /* 今日異動三色燈:新增(藍)/ 加碼(粉,漲)/ 減碼(綠,跌)/ 出清(灰)。 * 顏色語意沿用全站 --new/--inc/--dec(台股反向配色)。 */ .today-change-badge.tcb-new { color: var(--new); background: rgba(var(--rgb-b), 0.14); border-color: rgba(var(--rgb-b), 0.38); } .today-change-badge.tcb-inc { color: var(--inc); background: rgba(var(--rgb-g), 0.14); border-color: rgba(var(--rgb-g), 0.38); } .today-change-badge.tcb-dec { color: var(--dec); background: rgba(var(--rgb-r), 0.14); border-color: rgba(var(--rgb-r), 0.38); } .today-change-badge.tcb-rm { color: var(--muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); } /* Drawer row: full-width cell holding the per-day events table. */ .trade-detail > td { padding: 14px 18px; background: rgba(0, 0, 0, 0.18); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .trade-events-head { font-size: 0.88rem; margin-bottom: 8px; } .trade-events-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .trade-events-table th, .trade-events-table td { padding: 6px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } .trade-events-table thead th { font-size: 0.78rem; font-weight: 600; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); } .trade-events-table thead th.num, .trade-events-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } .trade-events-table tbody tr:last-child td { border-bottom: none; } .trade-events-empty { padding: 8px 0; } /* ---- Home: today-active ETF cards ---- */ .active-grid { display: grid; /* 200px min lets 5 cards fit per row inside the section's content width * (~1096px on desktop). Drops gracefully to 4/3/2/1 on narrower screens * via auto-fill. */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .active-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .active-card:hover { transform: translateY(-2px); border-color: rgba(var(--rgb-b), 0.55); background: rgba(var(--rgb-b), 0.06); } .active-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .active-ticker { font-size: 1.05rem; font-weight: 700; } .active-total { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .active-name { font-size: 0.95rem; margin-top: 2px; /* Allow long fund names to wrap; the card grows to fit. */ } .active-issuer, .active-meta { font-size: 0.78rem; margin-top: 2px; } .active-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .lag-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: rgb(var(--rgb-v)); border: 1px solid rgba(var(--rgb-v), 0.55); background: rgba(var(--rgb-v), 0.08); } .lag-badge.ahead { color: rgb(var(--rgb-g)); border-color: rgba(var(--rgb-g), 0.55); background: rgba(var(--rgb-g), 0.08); } .active-stats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .active-stats .stat { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; background: rgba(0, 0, 0, 0.2); letter-spacing: 0.5px; } .active-stats .stat.new { color: var(--new); } .active-stats .stat.inc { color: var(--inc); } .active-stats .stat.dec { color: var(--dec); } .active-stats .stat.rem { color: var(--rem); } /* Top-rank highlight for the leader card on the home page inflow preview. */ .active-card.rank-leader-card { border-color: rgba(var(--rgb-g), 0.55); background: linear-gradient(135deg, rgba(var(--rgb-g), 0.14), transparent 70%), rgba(255, 255, 255, 0.04); box-shadow: 0 0 18px rgba(var(--rgb-g), 0.20); } .active-card.rank-leader-card .active-ticker { text-shadow: 0 0 10px rgba(var(--rgb-g), 0.55); } .active-total.inc { color: var(--inc); font-weight: 700; font-size: 0.85rem; } /* ---- Home: tracked ETFs ranked by 1m perf ---- */ .perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .perf-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .perf-card:hover { transform: translateY(-2px); border-color: rgba(var(--rgb-b), 0.55); background: rgba(var(--rgb-b), 0.06); } .perf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .perf-ticker { font-size: 1.05rem; font-weight: 700; } .perf-1m { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; } .perf-name { font-size: 0.95rem; margin-top: 2px; } .perf-meta { font-size: 0.78rem; margin-top: 4px; } .more-etfs { margin-top: 14px; } .more-etfs > summary { cursor: pointer; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.03); list-style: none; font-weight: 600; color: rgba(var(--rgb-b), 1); width: fit-content; } .more-etfs > summary::-webkit-details-marker { display: none; } .more-etfs > summary:hover { background: rgba(var(--rgb-b), 0.10); border-color: rgba(var(--rgb-b), 0.5); } .more-etfs > summary::after { content: " ▾"; font-size: 0.85em; } .more-etfs[open] > summary::after { content: " ▴"; } .more-etfs[open] > summary { margin-bottom: 12px; } /* ---- Signals page (consensus radar cards) ---- */ .signal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .signal-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .signal-card.buy { border-color: rgba(var(--rgb-g), 0.35); background: linear-gradient(135deg, rgba(var(--rgb-g), 0.10), transparent 70%), rgba(255, 255, 255, 0.04); } .signal-card.sell { border-color: rgba(var(--rgb-r), 0.35); background: linear-gradient(135deg, rgba(var(--rgb-r), 0.10), transparent 70%), rgba(255, 255, 255, 0.04); } .signal-card:hover { transform: translateY(-2px); } .signal-card.buy:hover { border-color: rgb(var(--rgb-g)); } .signal-card.sell:hover { border-color: rgb(var(--rgb-r)); } .signal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .signal-stock { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .signal-code { font-size: 1.05rem; font-weight: 700; } .signal-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .signal-badge { padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid currentColor; background: rgba(0, 0, 0, 0.2); } .signal-badge.buy { color: var(--inc); } .signal-badge.sell { color: var(--dec); } .signal-badge.days { color: rgb(var(--rgb-v)); border-color: rgba(var(--rgb-v), 0.6); } .signal-body { display: flex; flex-direction: column; gap: 8px; } .signal-shares { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .signal-shares.buy { color: var(--inc); text-shadow: 0 0 10px rgba(var(--rgb-g), 0.45); } .signal-shares.sell { color: var(--dec); text-shadow: 0 0 10px rgba(var(--rgb-r), 0.45); } .signal-chips { display: flex; flex-wrap: wrap; gap: 5px; } .signal-chip { font-size: 0.78rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft); color: var(--fg); text-decoration: none; } .signal-chip:hover { background: rgba(var(--rgb-b), 0.18); border-color: rgba(var(--rgb-b), 0.55); text-decoration: none; } /* ---- Compare page ---- */ .compare-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; } .compare-picker label { display: flex; align-items: center; gap: 8px; color: var(--muted); } .compare-picker select { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass-bg-strong); color: var(--fg); font: inherit; min-width: 280px; } .compare-picker option { background: #14172e; color: var(--fg); } .compare-picker .vs { color: var(--muted); font-style: italic; letter-spacing: 1px; } .compare-picker button { padding: 8px 22px; border-radius: 8px; border: 1px solid rgba(var(--rgb-b), 0.55); background: rgba(var(--rgb-b), 0.18); color: var(--fg); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .compare-picker button:hover { background: rgba(var(--rgb-b), 0.32); } .compare-picker button:active { transform: translateY(1px); } .summary-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; } .summary-half { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 18px; } .summary-vs { font-size: 1.3rem; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-align: center; } .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } .summary-pair { grid-template-columns: 1fr; } } /* ---- Clickable rows / list items (whole-card click target) ---- */ tr.clickable, li.clickable { cursor: pointer; } tr.clickable:hover { background: rgba(var(--rgb-b), 0.10); } li.clickable:hover { /* the existing .etf-list li:hover already shifts + tints, this is a no-op * placeholder to keep the rule local to clickability if .etf-list ever * gets a non-clickable variant. */ } /* ---- Admin (/admin/etfs) ---- */ /* 共用 admin 導航列(admin/_nav.html)*/ .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding: 8px; background: var(--glass-bg); border: 1px solid var(--border); border-radius: 12px; } .admin-nav a { padding: 7px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: var(--fg); text-decoration: none; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .admin-nav a:hover { background: rgba(var(--rgb-b), 0.12); text-decoration: none; } .admin-nav a.is-active { background: rgba(var(--rgb-b), 0.22); border-color: rgba(var(--rgb-b), 0.5); } .admin-nav a.admin-nav-home { margin-left: auto; color: var(--muted); } /* /admin/site 參數列 + /admin/tg 文案列共用 */ .site-setting-row, .tg-setting-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } /* /admin/site 底部儲存列 — sticky 黏在視窗底,切任何分頁都按得到 */ .site-save-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px 18px; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.22); } .admin-flash { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-weight: 500; border: 1px solid; } .admin-flash.ok { color: var(--inc); border-color: rgba(var(--rgb-g), 0.5); background: rgba(var(--rgb-g), 0.10); } .admin-flash.err { color: var(--dec); border-color: rgba(var(--rgb-r), 0.5); background: rgba(var(--rgb-r), 0.10); } .btn-primary, .btn-secondary { display: inline-block; padding: 8px 18px; border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--border); margin-right: 6px; } .btn-primary { background: rgba(var(--rgb-b), 0.20); color: var(--fg); border-color: rgba(var(--rgb-b), 0.55); } .btn-primary:hover { background: rgba(var(--rgb-b), 0.32); } .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--fg); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.10); } .btn-link { background: none; border: none; color: rgb(var(--rgb-b)); cursor: pointer; font: inherit; padding: 2px 6px; margin: 0 2px; border-radius: 4px; } .btn-link:hover:not(:disabled) { background: rgba(var(--rgb-b), 0.10); } .btn-link:disabled { opacity: 0.35; cursor: not-allowed; } .btn-link.danger { color: var(--dec); } .btn-link.danger:hover { background: rgba(var(--rgb-r), 0.10); } .admin-table { width: 100%; } .admin-table .actions { white-space: nowrap; } .admin-table tr.row-disabled { opacity: 0.45; } .admin-table tr.row-disabled td:first-child { text-decoration: line-through; } .toggle-btn { border: 1px solid currentColor; background: rgba(0,0,0,0.2); color: var(--inc); font-weight: 700; width: 32px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 1rem; } .toggle-btn.off { color: var(--dec); } /* Form */ .admin-form { display: flex; flex-direction: column; gap: 14px; max-width: 520px; } .admin-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; } .admin-form label.radio, .admin-form label.checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; } .admin-form input[type="text"], .admin-form select { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--glass-bg-strong); color: var(--fg); font: inherit; } .admin-form input[readonly] { opacity: 0.6; cursor: not-allowed; } .admin-form select option { background: #14172e; color: var(--fg); } .admin-form fieldset { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 14px; } .admin-form fieldset legend { padding: 0 8px; color: var(--muted); } .admin-form .radios { display: flex; gap: 18px; } .admin-form .hint { font-size: 0.78rem; } .admin-form .form-actions { display: flex; gap: 10px; margin-top: 10px; } /* ---- etfinfo dashboard ---- */ .etfinfo-hero { margin: 18px 0 28px; padding: 18px 22px; background: var(--glass-bg, rgba(255,255,255,.04)); border: 1px solid var(--border-soft, rgba(255,255,255,.08)); border-radius: 14px; } .etfinfo-hero-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 16px; flex-wrap: wrap; } .etfinfo-hero-head h1, .etfinfo-hero-head h2 { margin: 0; } .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .hero-stat { padding: 10px 14px; background: var(--glass-bg-strong, rgba(0,0,0,.18)); border-radius: 10px; text-align: center; } .hero-stat-num { font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .hero-stat-num.inc { color: var(--inc, #ff6b6b); } .hero-stat-num.dec { color: var(--dec, #4dabf7); } .hero-stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 4px; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* ---- Tabbed card (homepage) ---- * Tab nav sits flush at the top of the same card as the body; active button * shares background with the body so they read as one continuous surface. */ main > section.tab-card { padding: 0; overflow: hidden; } .tab-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; background: rgba(0, 0, 0, 0.18); border-bottom: 1px solid var(--border); } .tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: transparent; border: 0; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; border-radius: 12px 12px 0 0; position: relative; transition: color 0.15s, background 0.15s; } .tab-btn:hover { color: var(--fg); background: var(--glass-highlight); } .tab-btn.is-active { color: var(--fg); background: var(--glass-bg); } .tab-btn.is-active::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--inc), var(--new)); border-radius: 2px; } .tab-btn:focus-visible { outline: 2px solid var(--inc); outline-offset: -4px; } .tab-badge { min-width: 22px; padding: 2px 8px; font-size: 0.78rem; font-weight: 700; color: var(--fg); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-soft); border-radius: 999px; text-align: center; line-height: 1.4; } .tab-btn.is-active .tab-badge { background: rgba(var(--rgb-g), 0.18); border-color: rgba(var(--rgb-g), 0.4); color: var(--inc); } .tab-body { padding: 22px 28px 26px; } .tab-pane[hidden] { display: none; } .tab-pane-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--border-soft); } /* 單一 ETF 獨家 — push the per-ETF filter to the right of the description */ .tab-pane-head.solo-head { justify-content: space-between; } .solo-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; } .solo-filter select { padding: 5px 10px; background: var(--glass-bg-strong); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 0.85rem; max-width: 220px; } .solo-filter select:focus { outline: 2px solid rgba(var(--rgb-b), 0.55); outline-offset: 1px; } .solo-filter option { background: #14172e; color: var(--fg); } .tab-pane-date { font-size: 1.05rem; font-weight: 700; color: var(--fg); letter-spacing: 0.3px; } .tab-pane-link { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 0.92rem; } .tab-pane-link:hover { color: var(--fg); } .tab-empty { padding: 32px 4px; text-align: center; } /* tab-card 本身 padding:0(tab-nav 貼齊頂端),所以放在 tab-nav 之前的 * 卡片標題要自己補與 tab-body 同步的內距,才不會緊貼左上角。 */ section.tab-card > h2 { margin: 0; padding: 22px 28px 0; } @media (max-width: 600px) { .tab-nav { padding: 4px 4px 0; } .tab-btn { padding: 10px 12px; font-size: 0.92rem; } .tab-body { padding: 16px 14px 20px; } section.tab-card > h2 { padding: 16px 14px 0; } } /* ---- Hero card layout (homepage top: title + live status + stats + footer) ---- */ .hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); } .hero-title h1 { margin: 0 0 4px; } .hero-sub { margin: 0; font-size: 0.88rem; } .hero-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .live-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 0.92rem; font-weight: 600; color: var(--fg); background: rgba(var(--rgb-g), 0.12); border: 1px solid rgba(var(--rgb-g), 0.35); border-radius: 999px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--inc); box-shadow: 0 0 0 0 rgba(var(--rgb-g), 0.6); animation: status-pulse 2.2s ease-out infinite; } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--rgb-g), 0.55); } 70% { box-shadow: 0 0 0 8px rgba(var(--rgb-g), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-g), 0); } } .hero-status-link { font-size: 0.86rem; color: var(--muted); text-decoration: none; } .hero-status-link:hover { color: var(--fg); } .hero-disclaimer { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--border-soft); font-size: 0.82rem; color: var(--muted); text-align: center; } /* ---- Universal search (homepage hero) ---- */ .hero-search { display: flex; align-items: center; gap: 8px; margin: 22px auto 0; max-width: 640px; padding: 6px 8px 6px 16px; background: var(--glass-bg-strong); border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.15s, box-shadow 0.15s; } .hero-search:focus-within { border-color: rgba(var(--rgb-b), 0.6); box-shadow: 0 0 0 4px rgba(var(--rgb-b), 0.15); } .hero-search-label { font-size: 1.1rem; line-height: 1; color: var(--muted); user-select: none; } .hero-search input[type="search"] { flex: 1; min-width: 0; padding: 10px 6px; background: transparent; border: 0; color: var(--fg); font: inherit; font-size: 0.98rem; outline: none; /* Strip native search styling so it blends into the pill */ -webkit-appearance: none; appearance: none; } .hero-search input[type="search"]::placeholder { color: var(--muted); opacity: 0.7; } .hero-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: linear-gradient(45deg, transparent 45%, var(--muted) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--muted) 45% 55%, transparent 55%); cursor: pointer; } .hero-search button { padding: 8px 22px; background: linear-gradient(135deg, rgb(var(--rgb-b)), rgba(var(--rgb-b), 0.7)); color: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; transition: filter 0.15s, transform 0.05s; } .hero-search button:hover { filter: brightness(1.1); } .hero-search button:active { transform: scale(0.97); } .hero-nohit { margin: 12px auto 0; max-width: 640px; text-align: center; font-size: 0.88rem; } @media (max-width: 480px) { .hero-search { padding: 4px 6px 4px 12px; gap: 4px; } .hero-search input[type="search"] { padding: 9px 4px; font-size: 0.95rem; } .hero-search button { padding: 7px 14px; font-size: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } } @media (max-width: 600px) { .hero-top { align-items: flex-start; } .hero-status { align-items: flex-start; } } /* ---- ETF detail page: hero card layout ---- */ .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .hero-action-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.88rem; font-weight: 500; color: var(--fg); background: var(--glass-bg-strong); border: 1px solid var(--border-soft); border-radius: 999px; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .hero-action-link:hover { background: var(--glass-highlight); border-color: var(--border); } .perf-section { margin-top: 4px; } .perf-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .perf-section-head h2 { margin: 0; } .perf-section-head .muted { font-size: 0.9rem; } /* ---- Holdings tab-card toolbar (date picker top-right) ---- */ .holdings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 28px 12px; border-bottom: 1px solid var(--border-soft); } .holdings-toolbar-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .holdings-toolbar-title h2 { margin: 0; } .holdings-date { margin: 0; } .holdings-date select, .holdings-date input[type="date"] { margin-left: 6px; padding: 6px 10px; background: var(--glass-bg-strong); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; font: inherit; min-width: 150px; } @media (max-width: 600px) { .holdings-toolbar { padding: 14px 14px 10px; } } /* ---- Flow page: hero stat sub-line + inline date picker ---- */ .hero-stat-sub { font-size: 0.72rem; margin-top: 4px; line-height: 1.3; } .hero-date-picker { margin: 0; } .hero-date-picker label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; } .hero-date-picker select, .hero-date-picker input[type="date"] { padding: 4px 10px; font: inherit; font-size: 0.88rem; color: var(--fg); background: var(--glass-bg-strong); border: 1px solid var(--border); border-radius: 8px; min-width: 140px; } /* ---- Flow rank: expandable row + ETF chips drawer ---- */ .flow-row { cursor: pointer; transition: background 0.15s; } .flow-row:hover { background: rgba(var(--rgb-b), 0.07); } .flow-row.is-open { background: rgba(var(--rgb-b), 0.10); } .flow-row .flow-stock-link { text-decoration: none; margin-right: 4px; margin-left: -5px; padding: 1px 5px; border-radius: 7px; color: var(--fg); border: 1px solid transparent; } .flow-row .flow-stock-link.muted { color: var(--muted); font-weight: 500; } .flow-row .flow-stock-link:hover { color: rgb(var(--rgb-b)); background: rgba(var(--rgb-b), 0.10); border-color: rgba(var(--rgb-b), 0.18); text-decoration: none; } :where(td, th) a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link), .stock-card a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link), .compare-card a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link), .summary-half a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link) { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 6px; margin: -1px 0; border-radius: 8px; color: var(--fg); background: rgba(var(--rgb-b), 0.055); border: 1px solid rgba(var(--rgb-b), 0.12); line-height: 1.45; } :where(td, th) a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link):hover, .stock-card a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link):hover, .compare-card a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link):hover, .summary-half a:not(.btn-link):not(.btn-primary):not(.btn-secondary):not(.etf-chip):not(.flow-stock-link):hover { color: rgb(var(--rgb-b)); background: rgba(var(--rgb-b), 0.12); border-color: rgba(var(--rgb-b), 0.24); text-decoration: none; } /* ---- Signal taxonomy tags (signals page rows) ---- */ .sig-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 6px; vertical-align: middle; } .sig-tag { display: inline-block; padding: 1px 8px; font-size: 0.7rem; font-weight: 600; border-radius: 10px; letter-spacing: 0.02em; cursor: help; white-space: nowrap; } .sig-tag.sig-streak { color: var(--inc); background: rgba(var(--rgb-g), 0.14); border: 1px solid rgba(var(--rgb-g), 0.35); } .sig-tag.sig-rebound { color: rgb(var(--rgb-b)); background: rgba(var(--rgb-b), 0.14); border: 1px solid rgba(var(--rgb-b), 0.38); } .sig-tag.sig-spreading { color: rgb(var(--rgb-v)); background: rgba(var(--rgb-v), 0.14); border: 1px solid rgba(var(--rgb-v), 0.38); } @media (max-width: 600px) { .sig-tags { margin-left: 0; margin-top: 3px; } .sig-tag { font-size: 0.66rem; padding: 1px 6px; } } .flow-funds-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .flow-funds-badge { font-weight: 600; font-variant-numeric: tabular-nums; } .flow-funds-caret { display: inline-block; color: var(--muted); transition: transform 0.2s; font-size: 0.9rem; } .flow-row.is-open .flow-funds-caret { transform: rotate(180deg); color: var(--fg); } .flow-detail > td { background: rgba(0, 0, 0, 0.25); padding: 14px 18px; } .etf-chips-wrap { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .etf-chips-label { font-size: 0.82rem; padding-top: 6px; white-space: nowrap; } .etf-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .etf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 0.85rem; color: var(--fg); background: var(--glass-bg-strong); border: 1px solid var(--border-soft); border-radius: 999px; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .etf-chip:hover { background: rgba(var(--rgb-b), 0.12); border-color: rgba(var(--rgb-b), 0.45); text-decoration: none; transform: translateY(-1px); } .etf-chip strong { font-weight: 700; } .etf-chip .etf-chip-amt { margin-left: 4px; font-variant-numeric: tabular-nums; font-size: 0.8rem; } /* ---- /changes /dashboard 多檔 ETF 異動 picker + per-ETF stacked cards ---- */ /* picker section 卡片皮 — 在 /dashboard 跟 /changes 兩處都套 main>section glass chrome,只額外設置 anchor scroll-margin 避免被 sticky header 蓋住 */ .changes-picker-card { scroll-margin-top: 80px; } .multi-picker { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 6px; } .multi-picker-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .multi-picker-date-group { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; } .multi-picker-date { display: inline-flex; align-items: center; font-size: 0.86rem; } .multi-picker-date input[type="date"] { /* color-scheme 讓瀏覽器原生 picker 弹窗用 dark theme,且 calendar icon 的顏色自動跟著 theme 反轉 — 比 invert filter 乾淨,不會影響 輸入框其他字色。light/comfort theme 自動切換(下方有 override)。 */ color-scheme: dark; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(var(--rgb-b), 0.35); background: rgba(var(--rgb-b), 0.10); color: var(--fg); font: inherit; font-variant-numeric: tabular-nums; } .multi-picker-date input[type="date"]:hover, .multi-picker-date input[type="date"]:focus-visible { border-color: rgba(var(--rgb-b), 0.65); background: rgba(var(--rgb-b), 0.18); outline: none; } /* Light / comfort theme:用對應的 color-scheme 讓 calendar icon 變深色可見 */ :root[data-theme="light"] .multi-picker-date input[type="date"], :root[data-theme="comfort"] .multi-picker-date input[type="date"] { color-scheme: light; } /* 前一日 / 後一日 快速按鈕 — 與日期 input 同高,小膠囊 */ .date-nav-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--glass-bg); color: var(--fg); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .date-nav-pill:hover { background: rgba(var(--rgb-b), 0.18); border-color: rgba(var(--rgb-b), 0.55); transform: translateY(-1px); text-decoration: none; color: var(--fg); } .date-nav-pill.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .multi-picker-hint { font-size: 0.82rem; } .multi-picker-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; } .multi-picker-snapshot { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(var(--rgb-g), 0.55); background: rgba(var(--rgb-g), 0.15); color: var(--fg); font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .multi-picker-snapshot:hover { background: rgba(var(--rgb-g), 0.28); transform: translateY(-1px); text-decoration: none; color: var(--fg); } .multi-picker-clear { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--glass-bg); color: var(--muted); font-size: 0.82rem; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .multi-picker-clear:hover { background: rgba(var(--rgb-r), 0.18); border-color: rgba(var(--rgb-r), 0.55); color: var(--fg); text-decoration: none; } /* ETF chip 規則網格:固定 cell 寬度 → 每列等寬、每排齊頭。23 檔 ETF 在主寬度約 1100px 的 hero 裡會排出 6~7 欄 × 3~4 列的乾淨網格。 */ .multi-picker-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; } /* chip 在 grid 裡用 flex(非 inline-flex)才會撐滿 cell 寬度;名稱長度 不同的 chip 視覺寬度仍一致,只用 overflow ellipsis 截短溢出。 */ .etf-chip-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.84rem; color: var(--fg); background: var(--glass-bg); border: 1px solid var(--border-soft); border-radius: 999px; cursor: pointer; user-select: none; min-width: 0; /* 允許子元素 overflow:hidden 生效 */ white-space: nowrap; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .etf-chip-toggle:hover { border-color: rgba(var(--rgb-b), 0.45); transform: translateY(-1px); } /* 名稱 span 縮減溢出 — 代號永遠完整顯示,名稱 ellipsis */ .etf-chip-toggle > .muted { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .etf-chip-toggle.is-on { background: rgba(var(--rgb-b), 0.22); border-color: rgba(var(--rgb-b), 0.65); box-shadow: 0 0 0 1px rgba(var(--rgb-b), 0.35) inset; } /* is-lit:當日有異動 — 邊框加重 + 小光點 */ .etf-chip-toggle.is-lit { border-color: rgba(var(--rgb-g), 0.55); box-shadow: 0 0 0 1px rgba(var(--rgb-g), 0.20) inset, 0 0 8px rgba(var(--rgb-g), 0.18); } .etf-chip-toggle.is-lit.is-on { /* 雙條件同時成立 — 兩種視覺感都保留(藍色選中底 + 紅色亮燈邊), 此時光點仍顯示讓使用者知道這選中的有真實異動。 */ background: rgba(var(--rgb-b), 0.22); border-color: rgba(var(--rgb-g), 0.70); } .chip-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--rgb-g)); box-shadow: 0 0 6px rgba(var(--rgb-g), 0.65); margin-right: 2px; flex-shrink: 0; } .etf-chip-toggle input[type="checkbox"] { /* 隱藏 native checkbox,整個 chip 即是觸控目標 */ position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .etf-chip-toggle strong { font-weight: 700; } .multi-empty { margin: 22px 0; padding: 24px 28px; background: var(--glass-bg); border: 1px dashed var(--border); border-radius: 14px; text-align: center; } /* 卡片 grid:auto-fit + minmax 自動排版 — 寬螢幕 4 張一排, ~900px 3 張,~600px 2 張,行動裝置 1 張。 */ /* 用 CSS 多欄(masonry-like)而非 grid:grid 逐列排,一長兩短會在短卡下方 留大片空白;多欄會讓短卡往上堆填滿垂直空間(column-fill:balance 把高度 平均到各欄,獨高的長卡自成一欄、短卡擠在另一欄)。break-inside:avoid 讓每張卡不被切斷。 */ .multi-etf-grid { columns: 320px 3; /* 每欄最小 320px、最多 3 欄;窄螢幕自動降欄數 */ column-gap: 14px; margin-top: 18px; margin-bottom: 22px; } /* `main > section` 的 glass 背景失效(這些 section 不是 main 直接子)→ 在此 補回卡片視覺。多欄下用 break-inside:avoid 保整卡 + margin-bottom 當垂直間距。 */ .multi-etf-block { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; min-width: 0; background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 8px 22px rgba(0, 0, 0, 0.28); } .multi-etf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 14px 4px; } .multi-etf-title h2 { margin: 0; font-size: 0.98rem; } .multi-etf-title h2 strong { font-weight: 700; } .multi-etf-meta { margin: 2px 0 0; font-size: 0.74rem; line-height: 1.4; } .multi-etf-link { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 0.72rem; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--glass-bg); color: var(--muted); text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; } .multi-etf-link:hover { background: rgba(var(--rgb-b), 0.15); border-color: rgba(var(--rgb-b), 0.5); color: var(--fg); text-decoration: none; } /* 卡內 tab 縮緊;表格字級小一級避免被擠壞 */ .multi-etf-block .tab-nav { padding: 0 10px; } .multi-etf-block .tab-btn { padding: 8px 8px; font-size: 0.82rem; gap: 4px; } .multi-etf-block .tab-badge { font-size: 0.72rem; padding: 1px 6px; } .multi-etf-block .tab-body { padding: 0; } .multi-etf-block .tab-pane { padding: 6px 0; } .multi-etf-block table.changes { font-size: 0.82rem; } .multi-etf-block table.changes th, .multi-etf-block table.changes td { padding: 5px 10px; } .multi-etf-block .tab-empty { padding: 14px 14px; font-size: 0.84rem; } /* 動作徽章 — 名稱前綴標示加碼/新增/減碼/刪除 */ .kind-chip { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 4px; margin-right: 4px; white-space: nowrap; font-weight: 600; vertical-align: middle; letter-spacing: 0.02em; } .kc-inc { background: rgba(var(--rgb-g), 0.18); color: rgb(var(--rgb-g)); } .kc-new { background: rgba(var(--rgb-b), 0.18); color: rgb(var(--rgb-b)); } .kc-dec { background: rgba(var(--rgb-r), 0.18); color: rgb(var(--rgb-r)); } .kc-rem { background: rgba(var(--rgb-v), 0.18); color: rgb(var(--rgb-v)); } @media (max-width: 720px) { .multi-etf-grid { columns: 1; } .multi-picker-actions { margin-left: 0; width: 100%; justify-content: flex-end; } } /* ---- Signals page: in-card sub-section heading ---- */ .signals-section { margin-top: 4px; } .signals-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .signals-section-head h2 { margin: 0; } .signal-count { margin-left: 4px; padding: 2px 10px; font-size: 0.78rem; font-weight: 700; color: var(--fg); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-soft); border-radius: 999px; vertical-align: middle; } /* ---- Sortable table headers ---- */ .sortable-table th.th-sortable { cursor: pointer; user-select: none; position: relative; white-space: nowrap; padding-right: 18px; } .sortable-table th.th-sortable:hover { background: rgba(255, 255, 255, 0.10); } .sortable-table th.th-sortable::after { content: "↕"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.7em; color: var(--muted); opacity: 0.5; } .sortable-table th.th-sortable[aria-sort="ascending"]::after { content: "▲"; color: var(--inc); opacity: 1; } .sortable-table th.th-sortable[aria-sort="descending"]::after { content: "▼"; color: var(--inc); opacity: 1; } /* ---- Industry heatmap (ETF detail page) ---- * Flex-based pseudo-treemap: each cell's flex-grow is the industry's weight, * so larger industries take more horizontal space within their row. Color * intensity (--intensity 0..1) controls background opacity. */ .industry-heatmap-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .industry-heatmap-head h2 { margin: 0 0 2px; } .industry-heatmap-head .hero-sub { margin: 0; } .industry-heatmap-note { font-size: 0.78rem; } .treemap-container { display: flex; flex-wrap: wrap; gap: 6px; } .treemap-cell { flex: var(--flex, 1) 1 180px; min-height: 96px; padding: 12px 14px; background: rgba(var(--rgb-g), calc(var(--intensity, 0) * 0.55 + 0.06)); border: 1px solid rgba(var(--rgb-g), calc(var(--intensity, 0) * 0.45 + 0.18)); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s, border-color 0.15s; } .treemap-cell:hover { transform: translateY(-1px); border-color: var(--inc); } .treemap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .treemap-name { font-size: 0.98rem; color: var(--fg); letter-spacing: 0.3px; } .treemap-weight { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); } .treemap-stocks { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.78rem; line-height: 1.4; } .treemap-stock { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 6px; color: var(--fg); background: rgba(0, 0, 0, 0.18); border-radius: 4px; text-decoration: none; font-variant-numeric: tabular-nums; } .treemap-stock:hover { background: rgba(0, 0, 0, 0.3); text-decoration: none; } .treemap-stock-more { padding: 1px 6px; font-size: 0.75rem; } /* ---- Responsive: wide tables get horizontal scroll on narrow screens ---- * Wrap any table that may overflow with
to confine * the scroll to the table itself instead of breaking the parent card. * Also auto-applied to known wide table classes site-wide. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding-bottom: 2px; scrollbar-color: var(--scroll-thumb) transparent; scrollbar-gutter: stable; } .table-scroll table { margin-top: 0; margin-bottom: 0; } .table-scroll::-webkit-scrollbar { height: 10px; } .table-scroll::-webkit-scrollbar-track { margin: 0 8px; background: var(--scroll-track); border-radius: 999px; } .table-scroll::-webkit-scrollbar-thumb { border: 3px solid transparent; background: linear-gradient(90deg, var(--scroll-thumb), var(--scroll-thumb-strong)) padding-box; } @media (max-width: 700px) { /* Tighten card padding on mobile so the table has more breathing room. */ main > section { padding: 18px 16px; } .holdings-toolbar { padding: 14px 14px 10px; } /* Wide tables: keep cell content from wrapping mid-cell on narrow screens * (so the row stays on a single line and the parent scroll container * provides horizontal overflow instead of breaking table layout). */ table.changes td, table.holdings td, table.flow-rank td { white-space: nowrap; } } /* ===================================================================== Dashboard page styles ===================================================================== */ /* ---- Multi-column row container (auto wraps on narrow) ---- */ .dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; } /* ---- Reusable dash card (same glass card style as section) ---- */ .dash-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: 10px; } .dash-card[data-href] { cursor: pointer; transition: transform 0.15s, border-color 0.15s; } .dash-card[data-href]:hover { transform: translateY(-2px); border-color: var(--inc); } .dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .dash-card-title { font-weight: 700; font-size: 1rem; } .dash-card-subtitle { font-size: 0.82rem; } .dash-card-link { font-size: 0.85rem; text-decoration: none; } .dash-card-link:hover { color: var(--fg); } /* ---- Top mover cards (gainer / loser) ---- */ .mover-card { padding: 20px 22px; position: relative; overflow: hidden; } .mover-card.inc { background: linear-gradient(135deg, rgba(var(--rgb-g), 0.18), var(--glass-bg) 70%); border-color: rgba(var(--rgb-g), 0.4); } .mover-card.dec { background: linear-gradient(135deg, rgba(var(--rgb-r), 0.18), var(--glass-bg) 70%); border-color: rgba(var(--rgb-r), 0.4); } .mover-badge { font-size: 0.82rem; font-weight: 600; color: var(--muted); letter-spacing: 0.3px; } .mover-ticker { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.5px; color: var(--fg); margin: 4px 0 -4px; } .mover-name { font-size: 0.88rem; } .mover-pct { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; margin: 4px 0; } .mover-stats { font-size: 0.78rem; } /* ---- Market breadth bar ---- */ .breadth-card { padding: 18px 20px; } .breadth-bar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } .breadth-seg { height: 100%; transition: width 0.3s ease; } .breadth-seg.inc { background: rgba(var(--rgb-g), 0.85); } .breadth-seg.dec { background: rgba(var(--rgb-r), 0.85); } .breadth-seg.flat { background: rgba(255, 255, 255, 0.18); } .breadth-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; } .breadth-leg { font-variant-numeric: tabular-nums; } .breadth-summary { font-size: 0.95rem; font-weight: 700; margin-top: 4px; } /* ---- Capital flow gauge ---- */ .flow-gauge-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 22px 26px; margin-bottom: 22px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.35); } .flow-gauge-card .flow-row { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 12px; margin-top: 10px; } .flow-label { font-weight: 600; color: var(--fg); font-size: 0.9rem; } .flow-bar-track { height: 18px; background: rgba(0, 0, 0, 0.3); border-radius: 9px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } .flow-bar { display: block; height: 100%; transition: width 0.3s; } .flow-bar.inc { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.7), rgba(var(--rgb-g), 1)); box-shadow: 0 0 12px rgba(var(--rgb-g), 0.5); } .flow-bar.dec { background: linear-gradient(90deg, rgba(var(--rgb-r), 0.7), rgba(var(--rgb-r), 1)); box-shadow: 0 0 12px rgba(var(--rgb-r), 0.5); } .flow-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; } .flow-pct { font-variant-numeric: tabular-nums; font-size: 0.85rem; min-width: 50px; text-align: right; } .flow-net { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border-soft); font-size: 1.05rem; font-weight: 600; text-align: center; } .flow-net strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; } /* ---- Industry distribution bars ---- */ .industry-bars-card { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 22px 26px; margin-bottom: 22px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.35); } .industry-bar-list { margin-top: 12px; } .industry-bar-row { display: grid; grid-template-columns: minmax(120px, 160px) 1fr auto auto; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .industry-bar-row:last-child { border-bottom: none; } .industry-bar-name { font-size: 0.9rem; font-weight: 600; } .industry-bar-track { height: 14px; background: rgba(0, 0, 0, 0.22); border-radius: 7px; overflow: hidden; } .industry-bar { display: block; height: 100%; transition: width 0.4s; } .industry-bar.inc { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.6), rgba(var(--rgb-g), 0.95)); } .industry-bar.dec { background: linear-gradient(90deg, rgba(var(--rgb-r), 0.6), rgba(var(--rgb-r), 0.95)); } .industry-bar-value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; font-size: 0.92rem; } .industry-bar-count { font-size: 0.78rem; min-width: 48px; text-align: right; } /* ---- Consensus split (buy/sell side-by-side) ---- */ .consensus-card { padding: 18px 20px; } .consensus-list { list-style: none; margin: 6px 0 0; padding: 0; } .consensus-item { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; grid-template-areas: "rank stock signal" "rank meta meta"; align-items: center; gap: 4px 10px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.15s; } .consensus-item:last-child { border-bottom: none; } .consensus-item:hover { background: rgba(var(--rgb-b), 0.05); } .consensus-rank { grid-area: rank; font-weight: 700; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; } .consensus-stock { grid-area: stock; font-size: 0.92rem; } .consensus-stock strong { margin-right: 4px; } .consensus-signal { grid-area: signal; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; } .consensus-meta { grid-area: meta; font-size: 0.78rem; } .signal-badge { padding: 1px 7px; font-size: 0.72rem; font-weight: 700; border-radius: 999px; letter-spacing: 0.5px; } .signal-badge.buy { color: var(--inc); background: rgba(var(--rgb-g), 0.14); border: 1px solid rgba(var(--rgb-g), 0.4); } .signal-badge.sell { color: var(--dec); background: rgba(var(--rgb-r), 0.14); border: 1px solid rgba(var(--rgb-r), 0.4); } @media (max-width: 700px) { .flow-gauge-card .flow-row { grid-template-columns: 48px 1fr auto; gap: 8px; } .flow-pct { display: none; } .industry-bar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; } .industry-bar-count { display: none; } .mover-pct { font-size: 1.8rem; } } /* ---- Dashboard: ETF performance bar chart with period tabs ---- */ .etf-bar-section { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px 16px; margin-bottom: 22px; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 12px 32px rgba(0, 0, 0, 0.35); } .bar-tab-nav { display: flex; gap: 6px; margin: 14px 0 16px; padding: 4px; background: rgba(0, 0, 0, 0.22); border-radius: 10px; width: fit-content; } .bar-tab-btn { padding: 6px 16px; background: transparent; border: 0; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; border-radius: 7px; transition: color 0.15s, background 0.15s; } .bar-tab-btn:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); } .bar-tab-btn.is-active { color: var(--fg); background: rgba(var(--rgb-g), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--rgb-g), 0.4); } .bar-chart-wrap { position: relative; /* Height set dynamically by JS based on ETF count (~34px per row). */ min-height: 400px; } @media (max-width: 700px) { .bar-tab-btn { padding: 6px 12px; font-size: 0.88rem; } } /* ---- Investor alert cards (dashboard) ---- */ .alert-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .alert-card { padding: 16px 18px; } .alert-card.alert-warn { border-left: 3px solid var(--inc); } .alert-card.alert-info { border-left: 3px solid var(--dec); } .alert-card.alert-caution { border-left: 3px solid #ffe082; } .alert-card.alert-hot { border-left: 3px solid var(--new); } .alert-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; } .alert-icon { font-size: 1.3rem; line-height: 1.1; flex-shrink: 0; } .alert-title-wrap { flex: 1; min-width: 0; } .alert-title { font-weight: 700; font-size: 0.98rem; } .alert-sub { font-size: 0.74rem; margin-top: 1px; line-height: 1.3; } .alert-list { list-style: none; margin: 8px 0 0; padding: 0; } .alert-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.15s; } .alert-item:last-child { border-bottom: none; } .alert-item:hover { background: rgba(var(--rgb-b), 0.06); } .alert-code { font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; } .alert-name { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-value { font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .alert-empty { font-size: 0.85rem; padding: 14px 4px 4px; } /* ---- AUM growth table ---- */ .aum-growth-section { padding: 22px 26px; } .aum-table tbody tr { cursor: pointer; } .aum-table tbody tr:hover { background: rgba(var(--rgb-b), 0.08); } .aum-table-note { margin-top: 10px; font-size: 0.78rem; line-height: 1.5; } /* ---- Dashboard: 跌深訊號 ---- */ .drawdown-section { padding: 22px 26px; } .drawdown-section .dd-note { margin: 6px 0 14px; font-size: 0.8rem; line-height: 1.6; } .drawdown-section .tab-card { margin-top: 4px; } .dd-table tbody tr { cursor: pointer; } .dd-table tbody tr:hover { background: rgba(var(--rgb-b), 0.08); } .dd-table td small { font-size: 0.7rem; } .dd-table tbody tr.dd-rule35 { background: rgba(var(--rgb-r), 0.07); } .dd-table tbody tr.dd-rule35:hover { background: rgba(var(--rgb-r), 0.13); } .dd-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 0.66rem; font-weight: 600; border-radius: 999px; color: var(--dec); background: rgba(var(--rgb-r), 0.14); border: 1px solid rgba(var(--rgb-r), 0.35); vertical-align: middle; letter-spacing: 0.04em; } .dd-badge.dd-badge-fresh { color: var(--inc); background: rgba(var(--rgb-g), 0.14); border-color: rgba(var(--rgb-g), 0.35); } /* ---- Dashboard: dividend calendar ---- */ .dividend-section { padding: 22px 26px; } .div-upcoming { background: rgba(var(--rgb-g), 0.08); border: 1px solid rgba(var(--rgb-g), 0.3); border-radius: 12px; padding: 14px 16px; margin-top: 12px; } .div-upcoming-head { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; color: var(--fg); } .div-upcoming-list { list-style: none; margin: 0; padding: 0; } .div-upcoming-item { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 10px 18px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.15s; } .div-upcoming-item:last-child { border-bottom: none; } .div-upcoming-item:hover { background: rgba(var(--rgb-b), 0.06); } .div-upcoming-item.div-past { opacity: 0.55; } .div-row-stock { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .div-row-dates { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 0.86rem; } .div-date-cell, .div-amount { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .div-date-cell strong, .div-amount strong { font-variant-numeric: tabular-nums; } .div-badge { padding: 1px 8px; font-size: 0.74rem; font-weight: 700; border-radius: 999px; border: 1px solid var(--border-soft); } .div-badge.div-today { background: rgba(var(--rgb-g), 0.2); border-color: rgba(var(--rgb-g), 0.5); color: var(--inc); } .div-badge.div-soon { background: rgba(255, 213, 79, 0.15); border-color: rgba(255, 213, 79, 0.4); color: #ffe082; } .div-upcoming-empty { padding: 16px; text-align: center; font-size: 0.92rem; margin-top: 12px; border: 1px dashed var(--border-soft); border-radius: 12px; } .div-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; } .div-group { background: rgba(0, 0, 0, 0.18); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; } .div-group-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .div-group-name { font-weight: 800; font-size: 1.05rem; color: var(--fg); } .div-group-count { margin-left: auto; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; border-radius: 999px; background: rgba(var(--rgb-g), 0.15); border: 1px solid rgba(var(--rgb-g), 0.3); color: var(--inc); } .div-group-list { list-style: none; margin: 0; padding: 0; } .div-group-list li { display: flex; gap: 8px; align-items: baseline; padding: 5px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 0.88rem; } .div-group-list li:last-child { border-bottom: none; } .div-group-list li:hover { background: rgba(var(--rgb-b), 0.06); } .div-group-list li strong { font-variant-numeric: tabular-nums; } .div-group-empty { font-size: 0.85rem; padding: 8px 4px; } /* ---- Dashboard: dividend pattern small tag (其他組顯示) ---- */ .div-pattern-tag { margin-left: auto; padding: 1px 7px; font-size: 0.7rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-soft); border-radius: 999px; } /* ---- Admin ETF table: dividend pattern cell ---- */ .div-pattern-cell { display: inline-block; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; color: var(--fg); background: rgba(var(--rgb-g), 0.12); border: 1px solid rgba(var(--rgb-g), 0.3); border-radius: 999px; white-space: nowrap; } /* ───────────────────────────────────────────────────────────────── * Theme toggle + hamburger + mobile drawer nav * * Behaviour: * - header right side: inline nav (desktop), then theme toggle, * then hamburger. * - Below 720px the inline nav collapses and the hamburger opens a * full-width drawer that slides down from the sticky header. * - Theme toggle is visible on both desktop and mobile (outside the * drawer) so changing theme doesn't require opening the menu. * - data-theme is set by an inline pre-paint script in to avoid * flash-of-wrong-theme; the toggle just flips it and persists. * ───────────────────────────────────────────────────────────────── */ .header-right { display: flex; align-items: center; gap: 4px; } .icon-btn { appearance: none; background: transparent; color: var(--fg); border: 1px solid transparent; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.78; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; font-size: 18px; line-height: 1; padding: 0; } .icon-btn:hover, .icon-btn:focus-visible { opacity: 1; background: var(--glass-highlight); border-color: var(--border-soft); outline: none; } /* Theme icon: current mode indicator. */ .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-comfort { display: none; } .theme-toggle .ti-moon { display: inline; } :root[data-theme="light"] .theme-toggle .ti-sun { display: inline; } :root[data-theme="light"] .theme-toggle .ti-moon { display: none; } :root[data-theme="comfort"] .theme-toggle .ti-comfort { display: inline; } :root[data-theme="comfort"] .theme-toggle .ti-moon, :root[data-theme="comfort"] .theme-toggle .ti-sun { display: none; } /* Hamburger — three thin bars, animates to ✕ when drawer open. */ .menu-toggle { display: none; } /* hidden on desktop; shown via media query */ .menu-toggle .mt-bar { display: block; width: 20px; height: 2px; margin: 4px 0; background: var(--fg); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .mt-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Drawer — slides down under sticky header on mobile. Hidden on desktop. */ .drawer-nav { display: none; } .drawer-nav.is-open { display: block; } .drawer-nav { position: fixed; left: 0; right: 0; top: 64px; /* sized to header height; tuned to actual layout via media */ z-index: 9; background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; max-height: calc(100vh - 64px); overflow-y: auto; animation: drawer-slide-in 0.18s ease-out; } @keyframes drawer-slide-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .drawer-nav a { display: block; padding: 14px 12px; color: var(--fg); text-decoration: none; border-radius: 10px; font-size: 1rem; border: 1px solid transparent; } .drawer-nav a:hover, .drawer-nav a:focus-visible { background: var(--glass-highlight); border-color: var(--border-soft); outline: none; } .drawer-nav a.is-active { background: linear-gradient(135deg, rgba(var(--rgb-b), 0.18), rgba(var(--rgb-g), 0.10)), var(--glass-highlight); border-color: rgba(var(--rgb-b), 0.32); font-weight: 700; } .drawer-nav a + a { margin-top: 2px; } .drawer-nav .drawer-divider { height: 1px; background: var(--border-soft); margin: 8px 4px; } /* Mobile/tablet breakpoint: collapse inline text links, reveal hamburger + drawer. */ @media (max-width: 900px) { .header-right > nav { display: none !important; } .menu-toggle { display: inline-flex; flex-direction: column; } } /* Phone breakpoint: keep the header as icon-only controls. */ @media (max-width: 720px) { header { padding: 12px 16px; } header .brand-logo .brand-text { display: none; } .drawer-nav { top: 60px; max-height: calc(100vh - 60px); } } /* ─── Light theme finish pass ───────────────────────────────────── * Most rules above were born in a dark glass UI and intentionally use * transparent black/white. These overrides make light mode feel native: * bright frosted surfaces, clear table hierarchy, restrained shadows, and * no neon text glow. */ :root[data-theme="light"] body { background: linear-gradient(180deg, #fbfdff 0%, #eef7fb 42%, #e5f0f7 100%); } :root[data-theme="light"] body::before { inset: -24%; background: radial-gradient(42% 48% at 14% 18%, rgba(var(--rgb-b), 0.18), transparent 64%), radial-gradient(44% 52% at 88% 20%, rgba(var(--rgb-g), 0.12), transparent 64%), radial-gradient(58% 60% at 50% 100%, rgba(var(--rgb-r), 0.13), transparent 68%), radial-gradient(34% 40% at 76% 58%, rgba(var(--rgb-v), 0.08), transparent 66%); filter: blur(54px) saturate(95%); animation: blob-drift 34s ease-in-out infinite alternate; } :root[data-theme="light"] body::after { display: block; inset: 0; background: url("/static/market-bg.svg") center top / min(1600px, 118vw) auto no-repeat, linear-gradient(180deg, transparent 0 60%, rgba(255, 255, 255, 0.24) 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 94%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 86%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; filter: saturate(112%); opacity: 0.86; animation: market-line-drift 42s ease-in-out infinite alternate; } @keyframes market-line-drift { from { transform: translate3d(-2%, 0, 0) scale(1.02); } to { transform: translate3d(2%, 1.2%, 0) scale(1.04); } } :root[data-theme="light"] header { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)); border-bottom-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 36px rgba(30, 42, 62, 0.13); } :root[data-theme="light"] header .brand-logo img { background: transparent; box-shadow: 0 0 0 1px rgba(52, 71, 103, 0.08), 0 8px 18px rgba(30, 42, 62, 0.12); } :root[data-theme="light"] header .brand-text, :root[data-theme="light"] .hero h1 { background: linear-gradient(135deg, rgb(var(--rgb-g)) 0%, rgb(var(--rgb-b)) 58%, rgb(var(--rgb-v)) 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] header nav { background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)); border-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 24px rgba(30, 42, 62, 0.10); } :root[data-theme="light"] header nav a { color: rgba(23, 32, 51, 0.72); } :root[data-theme="light"] header nav a:hover { color: rgb(var(--rgb-b)); background: rgba(255, 255, 255, 0.58); border-color: rgba(var(--rgb-b), 0.22); box-shadow: 0 8px 18px rgba(30, 42, 62, 0.08); } :root[data-theme="light"] header nav a.is-active { color: #122037; background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)), linear-gradient(135deg, rgba(var(--rgb-b), 0.18), rgba(var(--rgb-r), 0.09)); border-color: rgba(255, 255, 255, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(30, 42, 62, 0.10); } :root[data-theme="light"] main > section, :root[data-theme="light"] .dash-card, :root[data-theme="light"] .flow-gauge-card, :root[data-theme="light"] .industry-bars-card, :root[data-theme="light"] .etf-bar-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.26); -webkit-backdrop-filter: blur(28px) saturate(165%); backdrop-filter: blur(28px) saturate(165%); border-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(52, 71, 103, 0.06), 0 24px 52px rgba(30, 42, 62, 0.16); } :root[data-theme="light"] .drawer-nav { background: linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.34)); border-bottom-color: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 34px rgba(30, 42, 62, 0.12); } :root[data-theme="light"] .drawer-nav a:hover, :root[data-theme="light"] .drawer-nav a:focus-visible, :root[data-theme="light"] .icon-btn:hover, :root[data-theme="light"] .icon-btn:focus-visible { background: rgba(var(--rgb-b), 0.08); border-color: rgba(var(--rgb-b), 0.18); } :root[data-theme="light"] .drawer-nav a.is-active { background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.34)), rgba(var(--rgb-b), 0.08); border-color: rgba(255, 255, 255, 0.70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); } :root[data-theme="light"] .news-item { background: linear-gradient(135deg, rgba(var(--rgb-b), 0.075), transparent 62%), rgba(255, 255, 255, 0.38); border-color: rgba(52, 71, 103, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 24px rgba(30, 42, 62, 0.06); } :root[data-theme="light"] .news-item:nth-child(1) { background: radial-gradient(circle at 100% 0%, rgba(var(--rgb-g), 0.10), transparent 42%), linear-gradient(135deg, rgba(var(--rgb-b), 0.10), rgba(var(--rgb-v), 0.045) 52%, transparent), rgba(255, 255, 255, 0.42); } :root[data-theme="light"] .news-source { color: rgba(23, 32, 51, 0.76); } :root[data-theme="light"] .news-item:hover { background: linear-gradient(135deg, rgba(var(--rgb-b), 0.12), rgba(var(--rgb-g), 0.045) 70%), rgba(255, 255, 255, 0.54); border-color: rgba(var(--rgb-b), 0.24); } :root[data-theme="light"] code, :root[data-theme="light"] .legal-body code { background: #eef3f8; border-color: rgba(52, 71, 103, 0.12); color: #8f3040; } :root[data-theme="light"] table { background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(255, 255, 255, 0.58); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset; } :root[data-theme="light"] th { background: rgba(232, 241, 248, 0.72); color: rgba(23, 32, 51, 0.76); } :root[data-theme="light"] tbody tr:hover, :root[data-theme="light"] tr.clickable:hover, :root[data-theme="light"] .sortable-table th.th-sortable:hover { background: rgba(var(--rgb-b), 0.08); } :root[data-theme="light"] .new, :root[data-theme="light"] td.num.new, :root[data-theme="light"] th.num.new, :root[data-theme="light"] h3.new, :root[data-theme="light"] .inc, :root[data-theme="light"] td.num.inc, :root[data-theme="light"] th.num.inc, :root[data-theme="light"] h3.inc, :root[data-theme="light"] .dec, :root[data-theme="light"] td.num.dec, :root[data-theme="light"] th.num.dec, :root[data-theme="light"] h3.dec, :root[data-theme="light"] .rem, :root[data-theme="light"] td.num.rem, :root[data-theme="light"] th.num.rem, :root[data-theme="light"] h3.rem, :root[data-theme="light"] .signal-shares.buy, :root[data-theme="light"] .signal-shares.sell, :root[data-theme="light"] .active-card.rank-leader-card .active-ticker { text-shadow: none; } :root[data-theme="light"] .etf-list li, :root[data-theme="light"] .metric, :root[data-theme="light"] .premium-bar, :root[data-theme="light"] .active-card, :root[data-theme="light"] .perf-card, :root[data-theme="light"] .signal-card, :root[data-theme="light"] .summary-half, :root[data-theme="light"] .hero-stat, :root[data-theme="light"] .div-group { background: rgba(255, 255, 255, 0.40); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); border-color: rgba(255, 255, 255, 0.56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); } :root[data-theme="light"] .etf-list li:hover, :root[data-theme="light"] .active-card:hover, :root[data-theme="light"] .perf-card:hover, :root[data-theme="light"] .more-etfs > summary:hover, :root[data-theme="light"] .alert-item:hover, :root[data-theme="light"] .dd-table tbody tr:hover, :root[data-theme="light"] .aum-table tbody tr:hover, :root[data-theme="light"] .div-upcoming-item:hover, :root[data-theme="light"] .div-group-list li:hover, :root[data-theme="light"] .consensus-item:hover, :root[data-theme="light"] .flow-row:hover, :root[data-theme="light"] .trade-row:hover { background: rgba(var(--rgb-b), 0.08); border-color: rgba(var(--rgb-b), 0.26); } :root[data-theme="light"] .status-pill, :root[data-theme="light"] .active-stats .stat, :root[data-theme="light"] .signal-badge, :root[data-theme="light"] .tab-badge, :root[data-theme="light"] .signal-count, :root[data-theme="light"] .div-pattern-tag { background: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.56); } :root[data-theme="light"] .today-change-badge.tcb-rm { background: rgba(52, 71, 103, 0.06); border-color: rgba(52, 71, 103, 0.18); } :root[data-theme="light"] .date-picker option, :root[data-theme="light"] .compare-picker option, :root[data-theme="light"] .admin-form select option, :root[data-theme="light"] .solo-filter option { background: #ffffff; color: var(--fg); } :root[data-theme="light"] .date-picker input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="light"] .hero-date-picker input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="light"] .holdings-date input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } :root[data-theme="light"] .trade-detail > td, :root[data-theme="light"] .flow-detail > td { background: rgba(232, 241, 248, 0.58); } :root[data-theme="light"] .tab-nav, :root[data-theme="light"] .bar-tab-nav { background: rgba(232, 241, 248, 0.54); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } :root[data-theme="light"] .tab-btn:hover, :root[data-theme="light"] .bar-tab-btn:hover { background: rgba(var(--rgb-b), 0.08); } :root[data-theme="light"] .tab-btn.is-active, :root[data-theme="light"] .bar-tab-btn.is-active { background: rgba(255, 255, 255, 0.68); color: var(--fg); box-shadow: 0 1px 0 rgba(52, 71, 103, 0.08); } :root[data-theme="light"] .hero-search { background: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 28px rgba(30, 42, 62, 0.08); } :root[data-theme="light"] .hero-search button, :root[data-theme="light"] .compare-picker button, :root[data-theme="light"] .btn-primary { background: linear-gradient(135deg, rgb(var(--rgb-b)), #1f8a9e); border-color: transparent; color: #fff; } :root[data-theme="light"] .btn-secondary, :root[data-theme="light"] .toggle-btn { background: rgba(255, 255, 255, 0.46); color: var(--fg); } :root[data-theme="light"] .flow-rank tr.rank-leader.in, :root[data-theme="light"] .trade-row.has-today-change, :root[data-theme="light"] tr.has-today-change { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.12), rgba(var(--rgb-g), 0.035) 58%, transparent); } :root[data-theme="light"] .flow-rank tr.rank-leader.out, :root[data-theme="light"] .dd-table tbody tr.dd-rule35 { background: linear-gradient(90deg, rgba(var(--rgb-r), 0.11), rgba(var(--rgb-r), 0.035) 58%, transparent); } :root[data-theme="light"] .premium-warn-msg { background: rgba(255, 255, 255, 0.55); color: rgba(119, 74, 0, 0.92); } :root[data-theme="light"] .premium-bar.premium-danger .premium-warn-msg { background: rgba(255, 255, 255, 0.58); color: rgba(132, 33, 43, 0.96); } :root[data-theme="light"] .premium-bar.premium-discount .premium-warn-msg { background: rgba(255, 255, 255, 0.58); color: rgba(0, 102, 85, 0.94); } :root[data-theme="light"] .breadth-bar, :root[data-theme="light"] .flow-bar-track, :root[data-theme="light"] .industry-bar-track { background: rgba(203, 216, 228, 0.66); box-shadow: inset 0 1px 2px rgba(30, 42, 62, 0.10); } :root[data-theme="light"] .breadth-seg.flat { background: #b9c6d4; } :root[data-theme="light"] .treemap-stock { background: rgba(255, 255, 255, 0.48); } :root[data-theme="light"] .treemap-stock:hover { background: rgba(255, 255, 255, 0.76); } :root[data-theme="light"] #etf-bar-chart { filter: saturate(0.72); } :root[data-theme="light"] .mover-card.inc, :root[data-theme="light"] .signal-card.buy { background: linear-gradient(135deg, rgba(var(--rgb-g), 0.11), transparent 72%), rgba(255, 255, 255, 0.46); } :root[data-theme="light"] .mover-card.dec, :root[data-theme="light"] .signal-card.sell { background: linear-gradient(135deg, rgba(var(--rgb-r), 0.11), transparent 72%), rgba(255, 255, 255, 0.46); } :root[data-theme="light"] .active-card.rank-leader-card { background: linear-gradient(135deg, rgba(var(--rgb-g), 0.12), transparent 70%), rgba(255, 255, 255, 0.46); box-shadow: 0 12px 26px rgba(204, 54, 64, 0.10); } :root[data-theme="light"] .div-badge.div-soon, :root[data-theme="light"] .alert-card.alert-caution { color: #9a5a00; border-color: rgba(217, 119, 6, 0.30); } /* ─── Comfort theme finish pass ─────────────────────────────────── */ :root[data-theme="comfort"] body { background: linear-gradient(180deg, #f6f8f1 0%, #edf3ea 46%, #e5eee7 100%); } :root[data-theme="comfort"] body::before { inset: -24%; background: radial-gradient(42% 48% at 14% 18%, rgba(var(--rgb-b), 0.12), transparent 64%), radial-gradient(44% 52% at 88% 20%, rgba(var(--rgb-g), 0.08), transparent 64%), radial-gradient(58% 60% at 50% 100%, rgba(var(--rgb-r), 0.10), transparent 68%), radial-gradient(34% 40% at 76% 58%, rgba(var(--rgb-v), 0.06), transparent 66%); filter: blur(64px) saturate(76%); animation: blob-drift 40s ease-in-out infinite alternate; } :root[data-theme="comfort"] body::after { display: block; inset: 0; background: url("/static/market-bg.svg") center top / min(1600px, 118vw) auto no-repeat, linear-gradient(180deg, transparent 0 62%, rgba(246, 248, 241, 0.32) 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; filter: saturate(58%) sepia(0.08); opacity: 0.42; animation: market-line-drift 52s ease-in-out infinite alternate; } :root[data-theme="comfort"] header { background: linear-gradient(135deg, rgba(250, 252, 246, 0.74), rgba(250, 252, 246, 0.42)); border-bottom-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 30px rgba(42, 58, 51, 0.09); } :root[data-theme="comfort"] header .brand-logo img { background: transparent; box-shadow: 0 0 0 1px rgba(67, 91, 78, 0.08), 0 8px 18px rgba(42, 58, 51, 0.10); } :root[data-theme="comfort"] header .brand-text, :root[data-theme="comfort"] .hero h1 { background: linear-gradient(135deg, rgb(var(--rgb-g)) 0%, rgb(var(--rgb-b)) 62%, rgb(var(--rgb-v)) 100%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="comfort"] header nav { background: linear-gradient(135deg, rgba(250, 252, 246, 0.74), rgba(250, 252, 246, 0.40)); border-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(42, 58, 51, 0.08); } :root[data-theme="comfort"] header nav a { color: rgba(29, 41, 36, 0.72); } :root[data-theme="comfort"] header nav a:hover { color: rgb(var(--rgb-b)); background: rgba(250, 252, 246, 0.58); border-color: rgba(var(--rgb-b), 0.18); box-shadow: 0 7px 16px rgba(42, 58, 51, 0.07); } :root[data-theme="comfort"] header nav a.is-active { color: #18271f; background: linear-gradient(135deg, rgba(250, 252, 246, 0.84), rgba(250, 252, 246, 0.56)), linear-gradient(135deg, rgba(var(--rgb-b), 0.12), rgba(var(--rgb-r), 0.07)); border-color: rgba(255, 255, 255, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 9px 18px rgba(42, 58, 51, 0.08); } :root[data-theme="comfort"] main > section, :root[data-theme="comfort"] .dash-card, :root[data-theme="comfort"] .flow-gauge-card, :root[data-theme="comfort"] .industry-bars-card, :root[data-theme="comfort"] .etf-bar-section { background: linear-gradient(135deg, rgba(250, 252, 246, 0.72), rgba(250, 252, 246, 0.36)), rgba(250, 252, 246, 0.34); -webkit-backdrop-filter: blur(24px) saturate(118%); backdrop-filter: blur(24px) saturate(118%); border-color: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(67, 91, 78, 0.04), 0 18px 42px rgba(42, 58, 51, 0.10); } :root[data-theme="comfort"] .drawer-nav { background: linear-gradient(135deg, rgba(250, 252, 246, 0.76), rgba(250, 252, 246, 0.44)); border-bottom-color: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 30px rgba(42, 58, 51, 0.10); } :root[data-theme="comfort"] .drawer-nav a:hover, :root[data-theme="comfort"] .drawer-nav a:focus-visible, :root[data-theme="comfort"] .icon-btn:hover, :root[data-theme="comfort"] .icon-btn:focus-visible { background: rgba(var(--rgb-b), 0.07); border-color: rgba(var(--rgb-b), 0.16); } :root[data-theme="comfort"] .drawer-nav a.is-active { background: linear-gradient(135deg, rgba(250, 252, 246, 0.64), rgba(250, 252, 246, 0.38)), rgba(var(--rgb-b), 0.07); border-color: rgba(255, 255, 255, 0.70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76); } :root[data-theme="comfort"] .news-item { background: linear-gradient(135deg, rgba(var(--rgb-b), 0.065), transparent 62%), rgba(250, 252, 246, 0.38); border-color: rgba(67, 91, 78, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 22px rgba(42, 58, 51, 0.055); } :root[data-theme="comfort"] .news-item:nth-child(1) { background: radial-gradient(circle at 100% 0%, rgba(var(--rgb-g), 0.075), transparent 42%), linear-gradient(135deg, rgba(var(--rgb-b), 0.082), rgba(var(--rgb-v), 0.04) 52%, transparent), rgba(250, 252, 246, 0.42); } :root[data-theme="comfort"] .news-source { color: rgba(29, 41, 36, 0.74); } :root[data-theme="comfort"] .news-item:hover { background: linear-gradient(135deg, rgba(var(--rgb-b), 0.10), rgba(var(--rgb-g), 0.035) 70%), rgba(250, 252, 246, 0.52); border-color: rgba(var(--rgb-b), 0.20); } :root[data-theme="comfort"] code, :root[data-theme="comfort"] .legal-body code { background: rgba(233, 239, 229, 0.72); border-color: rgba(67, 91, 78, 0.12); color: #7a3c42; } :root[data-theme="comfort"] table { background: rgba(250, 252, 246, 0.64); border: 1px solid rgba(255, 255, 255, 0.58); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84) inset; } :root[data-theme="comfort"] th { background: rgba(226, 235, 222, 0.74); color: rgba(29, 41, 36, 0.74); } :root[data-theme="comfort"] tbody tr:hover, :root[data-theme="comfort"] tr.clickable:hover, :root[data-theme="comfort"] .sortable-table th.th-sortable:hover { background: rgba(var(--rgb-b), 0.065); } :root[data-theme="comfort"] .new, :root[data-theme="comfort"] td.num.new, :root[data-theme="comfort"] th.num.new, :root[data-theme="comfort"] h3.new, :root[data-theme="comfort"] .inc, :root[data-theme="comfort"] td.num.inc, :root[data-theme="comfort"] th.num.inc, :root[data-theme="comfort"] h3.inc, :root[data-theme="comfort"] .dec, :root[data-theme="comfort"] td.num.dec, :root[data-theme="comfort"] th.num.dec, :root[data-theme="comfort"] h3.dec, :root[data-theme="comfort"] .rem, :root[data-theme="comfort"] td.num.rem, :root[data-theme="comfort"] th.num.rem, :root[data-theme="comfort"] h3.rem, :root[data-theme="comfort"] .signal-shares.buy, :root[data-theme="comfort"] .signal-shares.sell, :root[data-theme="comfort"] .active-card.rank-leader-card .active-ticker { text-shadow: none; } :root[data-theme="comfort"] .etf-list li, :root[data-theme="comfort"] .metric, :root[data-theme="comfort"] .premium-bar, :root[data-theme="comfort"] .active-card, :root[data-theme="comfort"] .perf-card, :root[data-theme="comfort"] .signal-card, :root[data-theme="comfort"] .summary-half, :root[data-theme="comfort"] .hero-stat, :root[data-theme="comfort"] .div-group { background: rgba(250, 252, 246, 0.48); -webkit-backdrop-filter: blur(16px) saturate(112%); backdrop-filter: blur(16px) saturate(112%); border-color: rgba(255, 255, 255, 0.56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76); } :root[data-theme="comfort"] .etf-list li:hover, :root[data-theme="comfort"] .active-card:hover, :root[data-theme="comfort"] .perf-card:hover, :root[data-theme="comfort"] .more-etfs > summary:hover, :root[data-theme="comfort"] .alert-item:hover, :root[data-theme="comfort"] .dd-table tbody tr:hover, :root[data-theme="comfort"] .aum-table tbody tr:hover, :root[data-theme="comfort"] .div-upcoming-item:hover, :root[data-theme="comfort"] .div-group-list li:hover, :root[data-theme="comfort"] .consensus-item:hover, :root[data-theme="comfort"] .flow-row:hover, :root[data-theme="comfort"] .trade-row:hover { background: rgba(var(--rgb-b), 0.065); border-color: rgba(var(--rgb-b), 0.20); } :root[data-theme="comfort"] .status-pill, :root[data-theme="comfort"] .active-stats .stat, :root[data-theme="comfort"] .signal-badge, :root[data-theme="comfort"] .tab-badge, :root[data-theme="comfort"] .signal-count, :root[data-theme="comfort"] .div-pattern-tag { background: rgba(250, 252, 246, 0.48); border-color: rgba(255, 255, 255, 0.56); } :root[data-theme="comfort"] .today-change-badge.tcb-rm { background: rgba(67, 91, 78, 0.055); border-color: rgba(67, 91, 78, 0.16); } :root[data-theme="comfort"] .date-picker option, :root[data-theme="comfort"] .compare-picker option, :root[data-theme="comfort"] .admin-form select option, :root[data-theme="comfort"] .solo-filter option { background: #fbfcf7; color: var(--fg); } :root[data-theme="comfort"] .date-picker input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="comfort"] .hero-date-picker input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="comfort"] .holdings-date input[type="date"]::-webkit-calendar-picker-indicator { filter: none; } :root[data-theme="comfort"] .trade-detail > td, :root[data-theme="comfort"] .flow-detail > td { background: rgba(226, 235, 222, 0.58); } :root[data-theme="comfort"] .tab-nav, :root[data-theme="comfort"] .bar-tab-nav { background: rgba(226, 235, 222, 0.56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70); } :root[data-theme="comfort"] .tab-btn:hover, :root[data-theme="comfort"] .bar-tab-btn:hover { background: rgba(var(--rgb-b), 0.065); } :root[data-theme="comfort"] .tab-btn.is-active, :root[data-theme="comfort"] .bar-tab-btn.is-active { background: rgba(250, 252, 246, 0.70); color: var(--fg); box-shadow: 0 1px 0 rgba(67, 91, 78, 0.08); } :root[data-theme="comfort"] .hero-search { background: rgba(250, 252, 246, 0.60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 10px 22px rgba(42, 58, 51, 0.08); } :root[data-theme="comfort"] .hero-search button, :root[data-theme="comfort"] .compare-picker button, :root[data-theme="comfort"] .btn-primary { background: linear-gradient(135deg, rgb(var(--rgb-b)), #4f8b80); border-color: transparent; color: #fff; } :root[data-theme="comfort"] .btn-secondary, :root[data-theme="comfort"] .toggle-btn { background: rgba(250, 252, 246, 0.48); color: var(--fg); } :root[data-theme="comfort"] .flow-rank tr.rank-leader.in, :root[data-theme="comfort"] .trade-row.has-today-change, :root[data-theme="comfort"] tr.has-today-change { background: linear-gradient(90deg, rgba(var(--rgb-g), 0.10), rgba(var(--rgb-g), 0.03) 58%, transparent); } :root[data-theme="comfort"] .flow-rank tr.rank-leader.out, :root[data-theme="comfort"] .dd-table tbody tr.dd-rule35 { background: linear-gradient(90deg, rgba(var(--rgb-r), 0.10), rgba(var(--rgb-r), 0.03) 58%, transparent); } :root[data-theme="comfort"] .premium-warn-msg { background: rgba(250, 252, 246, 0.58); color: rgba(103, 77, 28, 0.92); } :root[data-theme="comfort"] .premium-bar.premium-danger .premium-warn-msg { background: rgba(250, 252, 246, 0.60); color: rgba(115, 42, 45, 0.94); } :root[data-theme="comfort"] .premium-bar.premium-discount .premium-warn-msg { background: rgba(250, 252, 246, 0.60); color: rgba(0, 92, 76, 0.92); } :root[data-theme="comfort"] .breadth-bar, :root[data-theme="comfort"] .flow-bar-track, :root[data-theme="comfort"] .industry-bar-track { background: rgba(199, 214, 204, 0.66); box-shadow: inset 0 1px 2px rgba(42, 58, 51, 0.09); } :root[data-theme="comfort"] .breadth-seg.flat { background: #b5c4ba; } :root[data-theme="comfort"] .treemap-stock { background: rgba(250, 252, 246, 0.48); } :root[data-theme="comfort"] .treemap-stock:hover { background: rgba(250, 252, 246, 0.72); } :root[data-theme="comfort"] #etf-bar-chart { filter: saturate(0.58); } :root[data-theme="comfort"] .mover-card.inc, :root[data-theme="comfort"] .signal-card.buy { background: linear-gradient(135deg, rgba(var(--rgb-g), 0.09), transparent 72%), rgba(250, 252, 246, 0.46); } :root[data-theme="comfort"] .mover-card.dec, :root[data-theme="comfort"] .signal-card.sell { background: linear-gradient(135deg, rgba(var(--rgb-r), 0.09), transparent 72%), rgba(250, 252, 246, 0.46); } :root[data-theme="comfort"] .active-card.rank-leader-card { background: linear-gradient(135deg, rgba(var(--rgb-g), 0.10), transparent 70%), rgba(250, 252, 246, 0.46); box-shadow: 0 10px 22px rgba(181, 68, 72, 0.08); } :root[data-theme="comfort"] .div-badge.div-soon, :root[data-theme="comfort"] .alert-card.alert-caution { color: #806120; border-color: rgba(181, 126, 36, 0.26); } /* News meta colour final pass. Kept at the end so the daylight themes do * not inherit the dark-mode white source label. */ :root[data-theme="light"] .news-card .news-source, :root[data-theme="light"] .news-card .news-time, :root[data-theme="light"] .news-card .news-source + .news-time::before { color: rgba(47, 65, 88, 0.72); } :root[data-theme="light"] .news-card .news-source { color: rgba(30, 45, 66, 0.84); } :root[data-theme="comfort"] .news-card .news-source, :root[data-theme="comfort"] .news-card .news-time, :root[data-theme="comfort"] .news-card .news-source + .news-time::before { color: rgba(54, 73, 64, 0.70); } :root[data-theme="comfort"] .news-card .news-source { color: rgba(31, 48, 40, 0.82); }