/* Thunderpolt shared chart/dashboard styles — hand-rolled, no framework. * * Color follows the dataviz skill's method verbatim (reference palette, * palette.md): categorical hues in fixed order, one ordinal ramp for staged * data (funnel / tier), a fixed status scale, and chart chrome tokens that * swap between light and dark without changing the chart body markup. * `--theme` is resolved three ways, in this precedence: * 1. `` — the manual toggle (persisted). * 2. `prefers-color-scheme: dark` — the OS default, when no manual choice. * 3. light — the fallback default. */ /* Paychannels demo skin (2026-09): Avi's kit fonts + dark-purple palette. */ @import url("https://fonts.googleapis.com/css2?family=Lora:wght@450..650&family=Hanken+Grotesk:wght@300..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap"); :root { --surface-1: #fcfcfb; /* chart surface */ --page-plane: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --baseline: #c3c2b7; --success-text: #006300; --border: rgba(11, 11, 11, 0.10); --accent: #6d2df4; --sans: "Hanken Grotesk", -apple-system, system-ui, "Segoe UI", sans-serif; --serif: "Lora", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Categorical — 8 hues, fixed order, never cycled. */ --series-1: #2a78d6; /* blue */ --series-2: #1baf7a; /* aqua */ --series-3: #eda100; /* yellow */ --series-4: #008300; /* green */ --series-5: #4a3aa7; /* violet */ --series-6: #e34948; /* red */ --series-7: #e87ba4; /* magenta */ --series-8: #eb6834; /* orange */ /* Ordinal ramp (funnel / tier stage order) — one hue, monotone lightness. Light-mode floor is step 250 (2.06:1 min per palette.md's ordinal rule). */ --ord-1: #86b6ef; /* step 250 — earliest stage */ --ord-2: #2a78d6; /* step 450 — middle stage */ --ord-3: #104281; /* step 650 — final stage */ /* Status — fixed scale, never themed, always paired with icon + label. */ --status-good: #0ca30c; --status-warning: #fab219; --status-serious: #ec835a; --status-critical: #d03b3b; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-1: #171226; --page-plane: #0e0a17; --text-primary: #e7eef5; --text-secondary: #9db0c2; --text-muted: #657a8e; --gridline: #2c2144; --baseline: #3b2d5e; --success-text: #4ade80; --border: rgba(231, 238, 245, 0.10); --accent: #b18cff; --series-1: #3987e5; --series-2: #199e70; --series-3: #c98500; --series-4: #008300; --series-5: #9085e9; --series-6: #e66767; --series-7: #d55181; --series-8: #d95926; /* Dark-mode ordinal ceiling is step 600 (2.15:1 min per palette.md). */ --ord-1: #b7d3f6; /* step 150 */ --ord-2: #5598e7; /* step 350 */ --ord-3: #1c5cab; /* step 550 */ color-scheme: dark; } } :root[data-theme="dark"] { --surface-1: #171226; --page-plane: #0e0a17; --text-primary: #e7eef5; --text-secondary: #9db0c2; --text-muted: #657a8e; --gridline: #2c2144; --baseline: #3b2d5e; --success-text: #4ade80; --border: rgba(231, 238, 245, 0.10); --accent: #b18cff; --series-1: #3987e5; --series-2: #199e70; --series-3: #c98500; --series-4: #008300; --series-5: #9085e9; --series-6: #e66767; --series-7: #d55181; --series-8: #d95926; --ord-1: #b7d3f6; --ord-2: #5598e7; --ord-3: #1c5cab; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--page-plane); color: var(--text-primary); font-family: var(--sans); } body { padding: 24px; } a { color: var(--accent); } .tp-page { max-width: 1180px; margin: 0 auto; } .tp-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .tp-title { font-family: var(--serif); font-size: 24px; font-weight: 550; letter-spacing: -0.01em; margin: 0; } .tp-subtitle { color: var(--text-secondary); font-size: 13px; margin: 4px 0 0; } .tp-header-controls { display: flex; align-items: center; gap: 8px; } .tp-btn { font: inherit; font-size: 13px; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; cursor: pointer; } .tp-btn:hover { border-color: var(--baseline); } .tp-btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } /* ---------------------------------------------------------------- filters */ /* One row, above everything it scopes (interaction.md). */ .tp-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; font-size: 13px; } .tp-filter-row label { color: var(--text-secondary); margin-right: 4px; } .tp-filter-row select, .tp-filter-row input[type="file"] { font: inherit; font-size: 13px; background: var(--page-plane); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; } .tp-filter-sep { width: 1px; align-self: stretch; background: var(--border); } .tp-source-label { color: var(--text-muted); font-size: 12px; } /* -------------------------------------------------------------- stat tile */ .tp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; } .tp-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .tp-tile-label { font-size: 12px; color: var(--text-secondary); margin: 0 0 6px; } .tp-tile-value { font-size: 30px; font-weight: 600; font-variant-numeric: proportional-nums; line-height: 1.1; margin: 0; } .tp-tile.tp-hero .tp-tile-value { font-size: 48px; } .tp-tile-sub { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; } .tp-tile-delta { font-size: 13px; font-weight: 600; } .tp-tile-delta.tp-good { color: var(--success-text); } .tp-tile-delta.tp-bad { color: var(--status-critical); } .tp-tile.tp-optimistic { border-style: dashed; border-color: var(--status-warning); } /* -------------------------------------------------------------- sections */ .tp-section { margin-bottom: 28px; } .tp-section-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; } .tp-section-note { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; } /* ---------------------------------------------------------------- charts */ .tp-figure { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px 10px; margin-bottom: 14px; } .tp-figure-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tp-figure-title { font-size: 14px; font-weight: 600; margin: 0; } .tp-figure-subtitle { font-size: 12px; color: var(--text-secondary); margin: 2px 0 8px; } .tp-figure-footer { font-size: 11px; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; line-height: 1.5; } .tp-table-toggle { font-size: 11px; background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-secondary); padding: 2px 8px; cursor: pointer; } .tp-table-toggle:hover { color: var(--text-primary); border-color: var(--baseline); } .tp-figure svg { display: block; width: 100%; height: auto; overflow: visible; } .tp-figure .tp-table-view { display: none; } .tp-figure.tp-show-table .tp-table-view { display: block; } .tp-figure.tp-show-table .tp-chart-view { display: none; } /* series fill/stroke — color assigned by job, never by hand */ .tp-s1 { fill: var(--series-1); } .tp-s1-stroke { stroke: var(--series-1); } .tp-s2 { fill: var(--series-2); } .tp-s2-stroke { stroke: var(--series-2); } .tp-s3 { fill: var(--series-3); } .tp-s3-stroke { stroke: var(--series-3); } .tp-s4 { fill: var(--series-4); } .tp-s4-stroke { stroke: var(--series-4); } .tp-s5 { fill: var(--series-5); } .tp-s5-stroke { stroke: var(--series-5); } .tp-s6 { fill: var(--series-6); } .tp-s6-stroke { stroke: var(--series-6); } .tp-s7 { fill: var(--series-7); } .tp-s7-stroke { stroke: var(--series-7); } .tp-s8 { fill: var(--series-8); } .tp-s8-stroke { stroke: var(--series-8); } .tp-ord1 { fill: var(--ord-1); } .tp-ord1-stroke { stroke: var(--ord-1); } .tp-ord2 { fill: var(--ord-2); } .tp-ord2-stroke { stroke: var(--ord-2); } .tp-ord3 { fill: var(--ord-3); } .tp-ord3-stroke { stroke: var(--ord-3); } /* background-color equivalents, for plain HTML swatches (legend keys, tooltip line-keys) where SVG fill/stroke don't apply. */ .tp-swatch-s1 { background: var(--series-1); } .tp-swatch-s2 { background: var(--series-2); } .tp-swatch-s3 { background: var(--series-3); } .tp-swatch-s4 { background: var(--series-4); } .tp-swatch-s5 { background: var(--series-5); } .tp-swatch-s6 { background: var(--series-6); } .tp-swatch-s7 { background: var(--series-7); } .tp-swatch-s8 { background: var(--series-8); } .tp-swatch-ord1 { background: var(--ord-1); } .tp-swatch-ord2 { background: var(--ord-2); } .tp-swatch-ord3 { background: var(--ord-3); } /* De-emphasis gray — for context marks that aren't the series being compared (e.g. an informational T4 bar beside the T1-T3 ordinal stages). */ .tp-muted { fill: var(--text-muted); } .tp-muted-stroke { stroke: var(--text-muted); } .tp-swatch-muted { background: var(--text-muted); } .tp-grid { stroke: var(--gridline); stroke-width: 1; } .tp-axis { stroke: var(--baseline); stroke-width: 1; } .tp-mark-text { fill: var(--text-secondary); font-size: 11px; } .tp-mark-text-strong { fill: var(--text-primary); font-size: 11px; font-weight: 600; } .tp-label-text { fill: var(--text-muted); font-size: 10px; } .tp-bar { rx: 4; } .tp-bar-gap { fill: var(--surface-1); } .tp-hit { fill: transparent; cursor: pointer; } .tp-hit:hover ~ .tp-bar-visual, .tp-bar-row:hover .tp-bar { filter: brightness(1.08); } /* --------------------------------------------------------------- legend */ .tp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin: 6px 0 10px; } .tp-legend-item { display: flex; align-items: center; gap: 6px; } .tp-legend-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .tp-legend-swatch.tp-swatch-bar { height: 10px; border-radius: 2px; } /* -------------------------------------------------------------- tooltip */ .tp-tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 80ms ease; max-width: 260px; } .tp-tooltip.tp-visible { opacity: 1; } .tp-tooltip-title { color: var(--text-secondary); margin-bottom: 4px; } .tp-tooltip-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; gap: 10px; } .tp-tooltip-key { width: 12px; height: 2px; border-radius: 1px; flex: none; } .tp-tooltip-name { color: var(--text-secondary); } .tp-tooltip-value { color: var(--text-primary); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- tables */ table.tp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .tp-table th, .tp-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .tp-table th { color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; } .tp-table tbody tr:hover { background: var(--page-plane); } .tp-table .tp-num { text-align: right; } .tp-table-wrap { overflow-x: auto; } .tp-mono { font-family: var(--mono); font-size: 12px; } /* --------------------------------------------------------------- status */ .tp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid currentColor; } .tp-status.tp-status-good { color: var(--status-good); } .tp-status.tp-status-warning { color: var(--status-warning); } .tp-status.tp-status-serious { color: var(--status-serious); } .tp-status.tp-status-critical { color: var(--status-critical); } .tp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } /* ----------------------------------------------------------- empty state */ .tp-empty { color: var(--text-muted); font-size: 13px; padding: 22px 10px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; } /* ------------------------------------------------------------- funnel UI */ .tp-funnel-row { margin-bottom: 18px; } .tp-funnel-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } .tp-funnel-merchant { font-family: var(--mono); color: var(--text-primary); } .tp-funnel-pending { color: var(--text-secondary); } .tp-funnel-pending strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } footer.tp-foot { color: var(--text-muted); font-size: 11px; margin: 28px 0 8px; text-align: center; } @media (max-width: 640px) { .tp-tile.tp-hero .tp-tile-value { font-size: 36px; } }