/* --- css/tokens.css --- */ /* Design tokens — the single source of truth for colour, type and spacing. * * Nothing else in the stylesheets may hold a raw colour. Components reference * these by their semantic name, so the light/dark swap happens in exactly one * place and a palette change is a one-file edit. * * Dark is the default and the one tuned first; light is a selected palette, not * an automatic inversion. Both respond to an explicit `data-theme` on * (the toggle) and, absent that, to the OS setting. * * The violet accent is the site's original `#712cf9`, retuned for contrast on * near-black — the same value the iOS app carries in `Theme.swift`. */ :root { color-scheme: dark; /* ---- Surfaces ------------------------------------------------------- */ --canvas: #08090b; --surface: #111317; --surface-raised: #181b21; --surface-sunken: #0c0e11; --hairline: rgb(255 255 255 / 9%); --hairline-strong: rgb(255 255 255 / 16%); /* ---- Ink ------------------------------------------------------------ */ --text: #f2f4f7; --text-muted: #8a9099; --text-faint: #5d636c; /* ---- Accents -------------------------------------------------------- */ --accent: #7c5cff; --accent-soft: rgb(124 92 255 / 16%); --accent-ink: #0b0b12; --accent-alt: #22d3ee; /* ---- Signed values -------------------------------------------------- * Reserved: these mean gain and loss, never "series 3". A yield *rise* * costs the holder money, so it takes --negative — see `tint_yield` in * includes/_ui.html. */ --positive: #3ddc97; --positive-soft: rgb(61 220 151 / 14%); --negative: #ff5c7a; --negative-soft: rgb(255 92 122 / 14%); --warning: #f5b841; --warning-soft: rgb(245 184 65 / 14%); /* ---- Categorical series -------------------------------------------- * Fixed order, never cycled; a seventh category folds into --series-other. * Validated against these surfaces: worst adjacent CVD ΔE 8.4 dark / * 9.1 light, worst adjacent normal-vision ΔE 19.3 / 19.6. */ --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-other: #4a515c; /* ---- Type ----------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-brand: "Monoton", var(--font-sans); --text-xs: 0.6875rem; /* 11px — tracked labels */ --text-sm: 0.8125rem; /* 13px — captions */ --text-base: 0.9375rem; /* 15px — body */ --text-md: 1.0625rem; /* 17px — card titles */ --text-lg: 1.375rem; /* 22px — figures */ --text-xl: 1.75rem; /* 28px — page titles */ --text-hero: clamp(2rem, 1.2rem + 3vw, 3rem); /* ---- Space ---------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* ---- Shape ---------------------------------------------------------- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* In dark mode elevation reads from surface lightness and a hairline, not from a shadow — a shadow over near-black only muddies the edge. */ --shadow: none; --shadow-raised: none; /* Wider than the stocks site: the gilt tables carry more columns. */ --content-width: 1360px; --header-height: 60px; --ease: cubic-bezier(0.32, 0.72, 0, 1); --duration: 180ms; } /* Light is redefined here, not derived: the accent darkens for contrast on white and the categorical steps move with it. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --canvas: #f6f7f9; --surface: #ffffff; --surface-raised: #f1f3f6; --surface-sunken: #eceff3; --hairline: rgb(11 13 16 / 9%); --hairline-strong: rgb(11 13 16 / 16%); --text: #0b0d10; --text-muted: #5f6672; --text-faint: #8d95a1; --accent: #6532e8; --accent-soft: rgb(101 50 232 / 10%); --accent-ink: #ffffff; --accent-alt: #0e9bb8; --positive: #0a9a63; --positive-soft: rgb(10 154 99 / 12%); --negative: #d02648; --negative-soft: rgb(208 38 72 / 10%); --warning: #a06800; --warning-soft: rgb(160 104 0 / 12%); --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-other: #b6bcc6; --shadow: 0 1px 2px rgb(11 13 16 / 6%); --shadow-raised: 0 8px 24px -12px rgb(11 13 16 / 22%); } } /* The toggle wins over the OS in both directions. */ :root[data-theme="light"] { color-scheme: light; --canvas: #f6f7f9; --surface: #ffffff; --surface-raised: #f1f3f6; --surface-sunken: #eceff3; --hairline: rgb(11 13 16 / 9%); --hairline-strong: rgb(11 13 16 / 16%); --text: #0b0d10; --text-muted: #5f6672; --text-faint: #8d95a1; --accent: #6532e8; --accent-soft: rgb(101 50 232 / 10%); --accent-ink: #ffffff; --accent-alt: #0e9bb8; --positive: #0a9a63; --positive-soft: rgb(10 154 99 / 12%); --negative: #d02648; --negative-soft: rgb(208 38 72 / 10%); --warning: #a06800; --warning-soft: rgb(160 104 0 / 12%); --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-other: #b6bcc6; --shadow: 0 1px 2px rgb(11 13 16 / 6%); --shadow-raised: 0 8px 24px -12px rgb(11 13 16 / 22%); } /* --- css/base.css --- */ /* Reset, typography and layout primitives. * Everything here is element-level or a layout utility; named components live * in components.css. */ /* ---- Reset ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100dvh; display: flex; flex-direction: column; background: var(--canvas); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, canvas { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* ---- The brand face --------------------------------------------------- * Monoton is an inline display face: its glyphs are drawn as parallel * strokes, which is what gives the [G] wordmark its concentric-line look. It * is used for the mark and nothing else, so it is loaded lazily via swap. * Self-hosted rather than pulled from Google Fonts: one fewer third party on * the critical path, and the file is 50 KB. */ @font-face { font-family: "Monoton"; /* Absolute: the stylesheet is served from /assets/app.css, so a path relative to it would miss /static/. */ src: url("/static/fonts/Monoton-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } /* ---- Type ------------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); } a { color: var(--accent); text-decoration: none; transition: color var(--duration) var(--ease); } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Every figure that can change is tabular, so columns of numbers line up and a value never jitters as it updates. */ .num, td.num, th.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* The small tracked uppercase label that sits above every figure. */ .label { display: block; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } .caption { font-size: var(--text-sm); color: var(--text-muted); } /* The ink utilities — .pos, .neg, .muted and friends — live in utilities.css, which is concatenated last. A colour utility is a statement about the value and has to outrank whatever component the value sits inside. */ /* ---- Layout ----------------------------------------------------------- */ .shell { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--space-5); } /* The dense gilt tables want the whole window; prose does not. */ .shell--wide { max-width: 1600px; } /* Between the two: a page that is mostly prose but carries a chart or a wide table along with it, and would waste the window at reading width. */ .shell--medium { max-width: 1180px; } .shell--narrow { max-width: 860px; } @media (max-width: 640px) { .shell { padding-inline: var(--space-4); } } .page { flex: 1 0 auto; padding-block: var(--space-6) var(--space-7); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-lg { display: flex; flex-direction: column; gap: var(--space-5); } .stack-sm { display: flex; flex-direction: column; gap: var(--space-2); } .row { display: flex; align-items: center; gap: var(--space-3); } .row-wrap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .row-baseline { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .spacer { flex: 1 1 auto; } /* Auto-fitting grid: the column count follows the width rather than a set of breakpoints, which keeps the card decks honest on every screen. */ .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } .grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } .grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .split { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } .hide-sm { display: revert; } @media (max-width: 720px) { .hide-sm { display: none !important; } } @media (max-width: 1080px) { .hide-md { display: none !important; } } .text-end { text-align: right; } .text-center { text-align: center; } .full { width: 100%; } /* ---- Entrance --------------------------------------------------------- * A short, small rise on first paint. Cards declare their own delay via * --i so a deck arrives in sequence rather than all at once. */ @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .reveal { animation: rise 380ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); } /* --- css/components.css --- */ /* Components — every named piece the templates assemble pages from. * All colour comes from tokens.css. */ /* ====================================================================== Header ====================================================================== */ .masthead { position: sticky; top: 0; z-index: 40; height: var(--header-height); display: flex; align-items: center; background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--hairline); } /* The masthead spans the widest page rather than the default measure, so the nav does not shift left and right as you move between a dense gilt table and a page of prose. */ .masthead > .shell { display: flex; align-items: center; gap: var(--space-4); max-width: 1600px; } .brand { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--text); text-decoration: none; flex: 0 0 auto; } .brand:hover { text-decoration: none; } /* Monoton's inline strokes merge into a smudge below ~18px, so the mark holds a fixed size rather than scaling with the type ramp. */ .brand__mark { font-family: var(--font-brand); font-size: 19px; line-height: 1; color: var(--accent); } /* In the masthead the mark stands alone, so it takes the ink colour and more size. The standalone hero marks on the sign-in and landing pages keep the accent — there it is the only brand element on the screen. */ .brand .brand__mark { font-size: 27px; color: var(--text); } .brand__name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; } /* Deliberately *not* a scroll container. A dropdown panel is positioned against its own
, and any overflow other than `visible` here would clip it — which is exactly what happened when this nav scrolled sideways. Narrow screens get `.mainnav-compact` instead of a scrollbar. */ .mainnav { display: flex; align-items: center; gap: var(--space-1); } .mainnav-compact { display: none; } @media (max-width: 960px) { .mainnav { display: none; } .mainnav-compact { display: block; } } .mainnav a, .mainnav summary { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-base); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--duration) var(--ease), background var(--duration) var(--ease); } .mainnav a:hover, .mainnav summary:hover { color: var(--text); background: var(--surface-raised); text-decoration: none; } .mainnav [aria-current="page"], .mainnav .menu[data-current] > summary { color: var(--text); background: var(--surface-raised); } .mainnav [aria-current="page"]::after, .mainnav .menu[data-current] > summary::after { content: ""; position: absolute; inset-inline: 30%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); } /* ====================================================================== Footer ====================================================================== */ .sitefoot { flex: 0 0 auto; border-top: 1px solid var(--hairline); background: var(--surface-sunken); padding-block: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); } .sitefoot__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .sitefoot h3 { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-3); } .sitefoot ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sitefoot a { color: var(--text-muted); } .sitefoot a:hover { color: var(--text); } .sitefoot__legal { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--text-faint); max-width: 68ch; } /* ====================================================================== Buttons ====================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.5rem 0.9rem; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-size: var(--text-base); font-weight: 500; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease); } .btn:hover { background: color-mix(in srgb, var(--surface-raised) 70%, var(--text) 6%); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); } .btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-raised); color: var(--text); } .btn--danger { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 35%, transparent); background: transparent; } .btn--danger:hover { background: var(--negative-soft); } .btn--sm { padding: 0.3rem 0.6rem; font-size: var(--text-sm); } .btn--icon { padding: 0.45rem; width: 2.1rem; height: 2.1rem; } .btn--block { width: 100%; } .btn-group { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } /* ====================================================================== Segmented control, tabs & chips ====================================================================== */ .segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--radius); overflow-x: auto; scrollbar-width: none; max-width: 100%; } .segmented::-webkit-scrollbar { display: none; } .segmented a, .segmented button { padding: 0.4rem 0.85rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .segmented a:hover, .segmented button:hover { color: var(--text); text-decoration: none; } .segmented [aria-current="page"], .segmented [aria-pressed="true"], .segmented .is-active { background: var(--surface-raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--hairline); } /* Section tabs: the same idea as `.segmented`, sized for a page-level switch and carrying an optional count badge. */ .tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs a { position: relative; padding: var(--space-3) var(--space-4); color: var(--text-muted); font-size: var(--text-base); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); } .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.55rem; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--hairline); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .chip--pos { background: var(--positive-soft); border-color: transparent; color: var(--positive); } .chip--neg { background: var(--negative-soft); border-color: transparent; color: var(--negative); } .chip--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); } .chip--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); } .chip--sm { font-size: var(--text-xs); padding: 0.1rem 0.45rem; } /* A count riding inside a filter button. */ .count { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center; } [aria-pressed="true"] > .count { background: var(--accent-soft); color: var(--accent); } /* ====================================================================== Card ====================================================================== */ .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); } .card__title { font-size: var(--text-md); font-weight: 600; } .card__body { padding: var(--space-5); } .card__body--flush { padding: 0; } .card__foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--hairline); background: var(--surface-sunken); font-size: var(--text-sm); color: var(--text-muted); } /* A card that is also a link: lifts and warms its border on hover. */ .card--link { display: block; color: inherit; transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .card--link:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: var(--shadow-raised); } /* ====================================================================== Stats ====================================================================== */ .stat__label { display: block; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.2rem; } .stat__value { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.01em; } .stat__value--sm { font-size: var(--text-md); } .stat__detail { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text-muted); } /* A row of stats separated by hairlines rather than boxes. * * Every cell carries its own rule, including the first. Exempting the first * child looks tidier only while the row fits on one line: the moment it wraps, * the first cell of each later row keeps its rule and its padding, so it sits * a full step to the right of the cell above it. Giving all of them the same * treatment is what keeps the columns aligned however many rows it takes. */ .statbar { display: grid; column-gap: var(--space-4); /* No row gap: the rules of stacked cells meet, so a wrapped statbar draws one continuous line per column rather than a ladder of short dashes. The breathing room between rows comes from the cells' own padding. */ row-gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .statbar > * { padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: 1px solid var(--hairline); } /* The boxed variant used as a page-leading summary strip. */ .statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; } .statstrip > * { background: var(--surface); padding: var(--space-4) var(--space-5); } /* The one number a screen leads with. */ .hero-figure { font-size: var(--text-hero); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.05; } /* ====================================================================== Table ====================================================================== */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .table th, .table td { padding: 0.7rem var(--space-4); text-align: left; white-space: nowrap; } .table--dense th, .table--dense td { padding: 0.5rem 0.7rem; font-size: var(--text-sm); } .table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--hairline); vertical-align: bottom; } .table tbody tr { border-bottom: 1px solid var(--hairline); transition: background var(--duration) var(--ease); } .table tbody tr:last-child { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-raised); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table tr.is-total { font-weight: 600; background: var(--surface-sunken); border-top: 1px solid var(--hairline-strong); } .table tr.is-total:hover { background: var(--surface-sunken); } /* Sortable headers, driven by table.js. */ .table th[data-sort] { cursor: pointer; user-select: none; } .table th[data-sort]:hover { color: var(--text); } .table th[data-sort]::after { content: ""; display: inline-block; width: 0.6em; margin-left: 0.35em; opacity: 0.55; } .table th[data-sort][aria-sort="ascending"]::after { content: "\2191"; opacity: 1; } .table th[data-sort][aria-sort="descending"]::after { content: "\2193"; opacity: 1; } .table__primary { font-weight: 500; } .table__sub { display: block; font-size: var(--text-sm); color: var(--text-muted); } /* The day-on-day move under a price or a yield. Its own component rather than a tinted `.table__sub`, so it never inherits a muted colour it has to fight, and so the arrow cannot wrap away from the number it belongs to. */ .change { display: block; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-faint); } .change__dir { font-size: 0.8em; margin-right: 0.15em; vertical-align: 0.05em; } /* The positions tables run past twelve columns, so the identifying column is pinned while the figures scroll under it. */ .table--pinned th:first-child, .table--pinned td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--hairline); } .table--pinned thead th:first-child { z-index: 3; } .table--pinned tbody tr:hover th:first-child, .table--pinned tbody tr:hover td:first-child { background: var(--surface-raised); } .table--pinned tr.is-total td:first-child { background: var(--surface-sunken); } /* Something that carries an explanation: the dotted underline is the affordance, tooltip.js supplies the explanation. */ .hint { border-bottom: 1px dotted var(--text-faint); cursor: help; } .hint:hover { border-bottom-color: var(--text-muted); color: var(--text); } /* ====================================================================== Bars — allocation, weight, diverging ====================================================================== */ /* The chart legend: a swatch and a label, never colour alone. Three of the light-mode series steps sit under 3:1 on white, which is legal only alongside a visible label — so the label is not optional. */ .legend-inline { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); } .legend-inline span { display: inline-flex; align-items: center; gap: 0.4rem; } .legend-inline i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } /* A weight bar behind a table cell — context without a column of its own. */ .weight { position: relative; display: block; height: 4px; width: 100%; min-width: 46px; max-width: 60px; border-radius: 2px; background: var(--surface-raised); overflow: hidden; } .weight__fill { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: 0.75; } /* Weight bar inside a right-aligned figure cell. */ .weight-cell { display: inline-flex; align-items: center; gap: 0.4rem; justify-content: flex-end; } /* Signed bar growing from a centre line: the diverging form, for figures whose sign is the first thing you read. */ .dbar { /* A span is inline by default, and width/height do nothing to an inline box — which left every diverging bar invisible. */ display: block; position: relative; height: 10px; min-width: 60px; width: 100%; } .dbar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hairline-strong); } .dbar__fill { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; background: var(--positive); opacity: 0.8; } .dbar__fill--neg { background: var(--negative); } /* ====================================================================== Charts ====================================================================== */ .chart { position: relative; width: 100%; height: 340px; } .chart--tall { height: 440px; } .chart--short { height: 240px; } @media (max-width: 720px) { .chart, .chart--tall { height: 260px; } } /* Skeleton shown until the async chart data lands. */ .chart__pending { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: var(--text-sm); background: linear-gradient( 90deg, var(--surface) 0%, var(--surface-raised) 50%, var(--surface) 100% ); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius); } @keyframes shimmer { to { background-position: -200% 0; } } /* ====================================================================== Forms ====================================================================== */ .form { display: flex; flex-direction: column; gap: var(--space-4); } .form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field > label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } .field input, .field select, .field textarea, .input { width: 100%; padding: 0.6rem 0.75rem; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); } .field input[type="number"], .field input[inputmode="decimal"] { font-variant-numeric: tabular-nums; } .field input[type="file"] { padding: 0.45rem 0.6rem; } .field__error { font-size: var(--text-sm); color: var(--negative); } .field__hint { font-size: var(--text-sm); color: var(--text-muted); } .switch { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--text-muted); cursor: pointer; } .switch input { width: 1rem; height: 1rem; accent-color: var(--accent); } .form-panel { width: min(520px, 100%); margin-inline: auto; } .form-panel--wide { width: min(760px, 100%); } /* A labelled control sitting in a toolbar: the label is part of the box. */ .inline-field { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface-raised); overflow: hidden; } .inline-field:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); } .inline-field > span { display: inline-flex; align-items: center; padding: 0.3rem 0.6rem; background: var(--surface-sunken); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .inline-field > input, .inline-field > select { border: 0; border-radius: 0; background: transparent; padding: 0.3rem 0.55rem; font-size: var(--text-sm); font-variant-numeric: tabular-nums; width: 5.5rem; min-width: 0; } .inline-field > select { width: auto; min-width: 8rem; } .inline-field > input:focus, .inline-field > select:focus { outline: none; box-shadow: none; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); } .toolbar__group { display: flex; align-items: center; gap: var(--space-2); } .toolbar__label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); } /* ====================================================================== Alerts & notes ====================================================================== */ .alert { /* Block, not flex. In flex layout every child *element* becomes its own item and the text around it becomes anonymous items, so an inline mid-sentence picks up the container's gap on both sides — which is how a space appeared before the full stop after a link. Nothing here needs the children laid out in a row. */ display: block; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-left: 3px solid var(--text-muted); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-base); } .alert--success { border-left-color: var(--positive); background: var(--positive-soft); } .alert--danger { border-left-color: var(--negative); background: var(--negative-soft); } .alert--warning { border-left-color: var(--warning); background: var(--warning-soft); } .alert--primary, .alert--info { border-left-color: var(--accent); background: var(--accent-soft); } /* The quieter form: a hairline rule and muted text, for the standing explanations that sit on nearly every page and should not shout. */ .note { /* Block for the same reason as .alert: these sentences carry inline links. */ display: block; padding: 0.35rem 0 0.35rem var(--space-3); border-left: 2px solid var(--hairline-strong); font-size: var(--text-sm); color: var(--text-muted); } .note--accent { border-left-color: var(--accent); } .note--warning { border-left-color: var(--warning); } .note ul { margin: 0.35rem 0 0; padding-left: 1.1rem; } /* ====================================================================== Tooltip ====================================================================== */ .tooltip { position: fixed; z-index: 200; max-width: 280px; padding: 0.45rem 0.65rem; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; box-shadow: 0 12px 32px -12px rgb(0 0 0 / 55%); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration); } .tooltip[data-open] { opacity: 1; visibility: visible; transform: none; } /* ====================================================================== Empty state ====================================================================== */ .empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-4); text-align: center; color: var(--text-muted); } .empty__title { font-size: var(--text-md); font-weight: 600; color: var(--text); } /* ====================================================================== Page header ====================================================================== */ .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-4); margin-bottom: var(--space-5); border-bottom: 1px solid var(--hairline); } .pagehead__title { font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.02em; } .pagehead__sub { font-size: var(--text-sm); color: var(--text-muted); } /* When tabs follow the header they carry the rule instead. */ .pagehead--flush { border-bottom: 0; padding-bottom: var(--space-3); margin-bottom: var(--space-3); } /* ====================================================================== Menu (dropdowns) ====================================================================== */ .menu { position: relative; } .menu__panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: var(--space-2); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgb(0 0 0 / 55%); display: none; z-index: 50; } .menu--left .menu__panel { right: auto; left: 0; } .menu[open] .menu__panel { display: block; } .menu__item { display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-base); white-space: nowrap; } .menu__item:hover { background: var(--surface-raised); text-decoration: none; } .menu__item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); } .menu__sep { height: 1px; margin: var(--space-2) 0; background: var(--hairline); } /* A panel holding a list that can outgrow the screen. */ .menu__panel--scroll { min-width: 19rem; max-height: 60vh; overflow-y: auto; } /* The caret that marks a summary as opening something, flipped while open. */ .caret { opacity: 0.6; flex: 0 0 auto; transition: transform var(--duration) var(--ease); } [open] > summary .caret { transform: rotate(180deg); } /* Group heading inside the compact menu, where the sections are flattened. */ .menu__label { padding: 0.35rem 0.6rem; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); } /* Native
arrow removed; the button styling carries the affordance. */ .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } /* ====================================================================== Search box & command palette ====================================================================== */ .search { position: relative; flex: 1 1 220px; max-width: 340px; } .search input { width: 100%; padding: 0.45rem 0.75rem 0.45rem 2rem; background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--radius-pill); color: var(--text); font-size: var(--text-sm); } .search input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 3px var(--accent-soft); } .search__icon { position: absolute; left: 0.65rem; top: 50%; translate: 0 -50%; color: var(--text-faint); pointer-events: none; } /* The ⌘K palette. It lives in the masthead rather than floating over the bottom-right corner, where it used to collide with the theme switch. */ .palette-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.4rem 0.7rem; border: 1px solid var(--hairline); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--text-muted); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; } .palette-trigger:hover { color: var(--text); border-color: var(--hairline-strong); } .kbd { padding: 1px 5px; border: 1px solid var(--hairline-strong); border-radius: 4px; background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); } .palette { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; background: rgb(0 0 0 / 55%); backdrop-filter: blur(4px); } .palette[data-open] { display: flex; } .palette__panel { display: flex; flex-direction: column; width: min(620px, calc(100% - 2rem)); max-height: 70vh; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 60%); animation: rise 160ms var(--ease); } .palette__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--hairline); } .palette__head svg { color: var(--text-faint); flex: 0 0 auto; } .palette__head input { flex: 1 1 auto; border: 0; background: transparent; color: var(--text); font-size: var(--text-md); } .palette__head input:focus { outline: none; } .palette__results { overflow-y: auto; padding: var(--space-2); } .palette__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); color: var(--text); } .palette__item:hover, .palette__item.is-active { background: var(--surface-raised); text-decoration: none; } .palette__name { font-weight: 500; } .palette__sub { display: block; font-size: var(--text-sm); color: var(--text-muted); } .palette__foot { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); background: var(--surface-sunken); font-size: var(--text-sm); color: var(--text-faint); } .palette__hints { display: flex; gap: var(--space-4); } .palette__hints span { display: inline-flex; align-items: center; gap: 0.3rem; } @media (max-width: 720px) { .palette__hints { display: none; } } /* ====================================================================== Modal (the sign-in prompt) ====================================================================== */ .modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: rgb(0 0 0 / 55%); backdrop-filter: blur(4px); } .modal[data-open] { display: flex; } .modal__panel { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 60%); animation: rise 160ms var(--ease); } .modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--hairline); } .modal__body { padding: var(--space-5); } /* ====================================================================== Disclosure (details/summary as an accordion) ====================================================================== */ .disclosure { border-bottom: 1px solid var(--hairline); } .disclosure:last-child { border-bottom: 0; } .disclosure > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; transition: background var(--duration) var(--ease); } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure > summary:hover { background: var(--surface-raised); } .disclosure > summary::before { content: "\25B8"; color: var(--text-faint); transition: transform var(--duration) var(--ease); flex: 0 0 auto; } .disclosure[open] > summary::before { transform: rotate(90deg); } .disclosure[open] > summary { background: var(--surface-raised); } .disclosure--flag { background: var(--negative-soft); } /* ====================================================================== Code / key display ====================================================================== */ .keyline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; } .keyline code { flex: 1 1 auto; color: var(--text-muted); } /* The arithmetic strip under the pricer: clean + accrued = dirty. */ .formula { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; } .formula__op { color: var(--text-faint); } .formula__term { padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); background: var(--surface-raised); border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: var(--text-sm); } .formula__term--result { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; } /* ====================================================================== Prose — article bodies and the long-form policy pages ====================================================================== */ .prose { max-width: 76ch; font-size: var(--text-base); line-height: 1.7; color: var(--text); } .prose > * + * { margin-top: var(--space-4); } .prose h1, .prose h2, .prose h3, .prose h4 { margin-top: var(--space-6); line-height: 1.25; } .prose h2 { font-size: var(--text-lg); } .prose h3 { font-size: var(--text-md); } .prose ul, .prose ol { padding-left: 1.4rem; } .prose li + li { margin-top: 0.3rem; } .prose blockquote { padding-left: var(--space-4); border-left: 2px solid var(--hairline-strong); color: var(--text-muted); } .prose code { padding: 0.1rem 0.35rem; border-radius: 4px; background: var(--surface-raised); font-family: var(--font-mono); font-size: 0.9em; } .prose pre { padding: var(--space-4); border-radius: var(--radius); background: var(--surface-sunken); border: 1px solid var(--hairline); overflow-x: auto; } .prose img { border-radius: var(--radius); } /* Prose that also holds cards, grids and wide tables — the help guide. The measure is set on the running text instead of the container. */ .prose--wide { max-width: none; } .prose--wide > p, .prose--wide > ul, .prose--wide > ol, .prose--wide > dl { max-width: 76ch; } /* Numbered sections read better with the rule the old markup drew by hand. */ .prose--wide > h2 { padding-bottom: var(--space-3); border-bottom: 1px solid var(--hairline); } /* Term/definition pairs: two columns where there is room, stacked below it. */ .deflist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem var(--space-5); } .deflist dt { font-weight: 600; } .deflist dd { margin: 0; color: var(--text-muted); } @media (min-width: 720px) { .deflist { grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr); align-items: baseline; } .deflist dt, .deflist dd { padding-block: 0.35rem; border-top: 1px solid var(--hairline); } } /* Article bodies are stored HTML written against the old Bootstrap classes; these keep them legible without editing the stored copy. */ .prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .prose th, .prose td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--hairline); text-align: left; } .prose hr { border: 0; border-top: 1px solid var(--hairline); } /* ====================================================================== Chat — GiltsQuery and the admin transcript view ====================================================================== */ .chat { display: flex; flex-direction: column; gap: var(--space-4); height: 55vh; min-height: 320px; overflow-y: auto; padding: var(--space-5); } .chat__msg { display: flex; max-width: 100%; } .chat__msg--user { justify-content: flex-end; } .chat__msg--assistant { justify-content: flex-start; } .chat__bubble { max-width: 85%; /* A flex item refuses to shrink below its content by default, so one wide table would otherwise push the whole conversation sideways instead of scrolling inside its own frame. */ min-width: 0; padding: 0.75rem 1rem; border-radius: var(--radius); line-height: 1.6; } .chat__msg--user .chat__bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; white-space: pre-wrap; word-break: break-word; } .chat__msg--user .chat__bubble a { color: var(--accent-ink); text-decoration: underline; } /* An answer carries charts and schedules, so it takes the full column; a question is a sentence, and stays a bubble against the right-hand side. */ .chat__msg--assistant .chat__bubble { width: 100%; max-width: 100%; background: var(--surface-raised); border: 1px solid var(--hairline); border-bottom-left-radius: 4px; } /* …but only the charts and tables want that width. Running text is held at a measure you can read without losing the start of the next line — at any depth, since an answer may arrive wrapped in a div or two. */ .chat__msg--assistant .chat__bubble p, .chat__msg--assistant .chat__bubble ul, .chat__msg--assistant .chat__bubble ol, .chat__msg--assistant .chat__bubble h2, .chat__msg--assistant .chat__bubble h3, .chat__msg--assistant .chat__bubble h4, .chat__msg--assistant .chat__bubble blockquote, .chat__msg--assistant .chat__bubble .chat__raw { max-width: 78ch; } /* A cell sets its own width, and a measure inside one only fights the table. */ .chat__msg--assistant .chat__bubble table p, .chat__msg--assistant .chat__bubble table ul, .chat__msg--assistant .chat__bubble table ol { max-width: none; } .chat__bubble p:last-child { margin-bottom: 0; } /* Charts arrive from the agent as a bare canvas; query.js drops each one in here so it has a parent with a height to be measured against. */ .chat__chart { position: relative; width: 100%; /* The height the rest of the site gives a chart, so one in an answer reads like one on a page. */ height: 340px; margin: var(--space-4) 0; } /* Nothing sizes the canvas itself: Chart.js measures the box above and writes the pixels, and a competing rule here is what a resize loop is made of. */ .chat__chart canvas { display: block; max-width: 100%; } .chat__bubble .table-wrap { max-width: 100%; margin: var(--space-4) 0; } @media (max-width: 720px) { .chat__chart { height: 220px; } } .chat__bubble img { max-width: 100%; height: auto; } .chat__bubble table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .chat__bubble th, .chat__bubble td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--hairline); text-align: left; } .chat__role { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.35rem; } .chat__raw { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); } .chat__empty { margin: auto; text-align: center; color: var(--text-muted); } .typing { display: inline-flex; gap: 0.25rem; } .typing span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--text-faint); animation: typing-bounce 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; } /* ====================================================================== Saved conversations ====================================================================== The list inside the GiltsQuery history menu. It is a real component rather than inline styles on generated elements: an inline `background` beats any class selector, which is how these rows ended up with no hover state at all. ====================================================================== */ .history { display: flex; flex-direction: column; gap: 1px; } .history__row { display: flex; align-items: center; border-radius: var(--radius-sm); transition: background var(--duration) var(--ease); } .history__row:hover { background: var(--surface-raised); } .history__row[aria-current="true"] { background: var(--accent-soft); } .history__open { flex: 1 1 auto; min-width: 0; max-width: 16rem; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font-size: var(--text-base); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .history__row[aria-current="true"] .history__open { color: var(--accent); font-weight: 500; } /* Muted until wanted: a column of red "Delete"s reads as a warning about the list rather than an action available on each row. */ .history__delete { flex: 0 0 auto; padding: 0.35rem 0.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-faint); font-size: var(--text-sm); cursor: pointer; opacity: 0; transition: color var(--duration) var(--ease), opacity var(--duration) var(--ease); } .history__row:hover .history__delete, .history__delete:focus-visible { opacity: 1; } .history__delete:hover { color: var(--negative); } /* Touch has no hover, so the control cannot be hidden behind one. */ @media (hover: none) { .history__delete { opacity: 1; } } .history__clear { width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-base); text-align: left; cursor: pointer; transition: background var(--duration) var(--ease), color var(--duration) var(--ease); } .history__clear:hover { background: var(--negative-soft); color: var(--negative); } .history__empty { padding: var(--space-4) var(--space-3); text-align: center; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.35rem); opacity: 1; } } /* ====================================================================== Favourite star ====================================================================== */ .star { display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; transition: color var(--duration) var(--ease), transform var(--duration) var(--ease); } .star:hover { color: var(--warning); transform: scale(1.15); } .star[aria-pressed="true"] { color: var(--warning); } .star svg { fill: none; stroke: currentColor; stroke-width: 1.4; } .star[aria-pressed="true"] svg { fill: currentColor; } /* --- css/utilities.css --- */ /* Utilities — concatenated last, and last for a reason. * * These are statements about a *value*, not about the box it happens to sit * in: this figure is a gain, that one is secondary. So they have to outrank * the component styles. * * They did not, and it was silent. `.pos` and `.table__sub` both weigh one * class, so the cascade fell back to source order — and `.table__sub` sets a * muted colour. Every day-on-day change on the gilt tables rendered grey, and * so did every signed detail line under a portfolio stat. Nothing looked * broken; the colour simply never arrived. * * Ordering the layers tokens → base → components → utilities fixes the whole * class of collision rather than the two instances that were noticed. */ /* ---- Ink -------------------------------------------------------------- */ .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } /* Green and red mean gain and loss. A yield movement runs the other way — see `tint_yield` in includes/_ui.html. */ .pos { color: var(--positive); } .neg { color: var(--negative); } .accent { color: var(--accent); } /* ---- Type ------------------------------------------------------------- */ .mono { font-family: var(--font-mono); } .strong { font-weight: 600; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; }