/* Project Solomon design system A civic publication rather than a dashboard: a serif for the things that are said, the system sans for the things that are counted, warm off-white paper in place of clinical white, and motion that stays out of the way. Every colour is declared once with light-dark(). Which half applies is decided by `color-scheme`, so the theme toggle changes one property on rather than swapping a parallel set of variables. */ :root { color-scheme: light dark; /* Headings are set in the system serif — New York on Apple platforms — which is drawn to sit beside the system sans rather than against it. */ --font-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* A municipal blue: dark enough to read as ink on paper, light enough in the dark theme to stay legible without glowing. */ --accent: light-dark(#1b4f82, #7db4e6); --accent-hover: light-dark(#24629f, #9bc7ef); --accent-soft: light-dark(rgba(27, 79, 130, 0.09), rgba(125, 180, 230, 0.16)); /* Text on a filled accent surface. The dark theme's accent is pale, so white on it would sit at about 2:1. */ --on-accent: light-dark(#ffffff, #0f2033); --positive: light-dark(#a3372f, #e8908a); /* spending increases read as pressure */ --negative: light-dark(#2c6a4a, #6cc196); --bg: light-dark(#f7f5f0, #161512); --bg-elevated: light-dark(#fffefa, #1f1e1a); --bg-sunken: light-dark(#eeebe3, #100f0d); --bg-tint: light-dark(#f2efe7, #1a1916); --nav-bg: light-dark(rgba(247, 245, 240, 0.82), rgba(22, 21, 18, 0.82)); --text: light-dark(#1a1815, #f3f0e9); --text-secondary: light-dark(#57534b, #b4ada0); /* Dark enough to clear 4.5:1 on the tinted card as well as on the page; it carries table headers and metric notes, which are small. */ --text-tertiary: light-dark(#6e6759, #948d80); --border: light-dark(rgba(58, 48, 33, 0.14), rgba(255, 248, 232, 0.12)); --border-strong: light-dark(rgba(58, 48, 33, 0.26), rgba(255, 248, 232, 0.22)); /* Warm-tinted rather than neutral, so a card lifts off paper instead of looking like a grey rectangle laid on cream. */ --shadow-sm: 0 1px 2px light-dark(rgba(60, 50, 33, 0.05), rgba(0, 0, 0, 0.4)); --shadow-md: 0 4px 16px light-dark(rgba(60, 50, 33, 0.08), rgba(0, 0, 0, 0.5)), 0 1px 3px light-dark(rgba(60, 50, 33, 0.05), rgba(0, 0, 0, 0.35)); --shadow-lg: 0 12px 40px light-dark(rgba(60, 50, 33, 0.13), rgba(0, 0, 0, 0.65)), 0 2px 8px light-dark(rgba(60, 50, 33, 0.06), rgba(0, 0, 0, 0.4)); --radius-sm: 6px; --radius: 9px; --radius-lg: 12px; --radius-xl: 16px; --nav-height: 56px; --content-width: 1120px; /* The bar carries nine sections, a search field and two buttons, which will not fit the column the prose is set in. Eighty pixels wider reads as the band having a little more air than the page, rather than as a bar that has come loose from what is underneath it. */ --nav-width: 1200px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 0.32s; } /* The toggle writes one of these onto ; absent, the OS decides. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.5; letter-spacing: -0.011em; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* no page should scroll sideways on a phone */ } h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.012em; line-height: 1.16; /* Georgia and several fallbacks default to old-style figures, which set the 0 and 5 of "$255M" below the baseline. A headline is usually a number here, so lining figures are not optional. */ font-variant-numeric: lining-nums; font-feature-settings: "lnum"; } h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.1; } h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); } h3 { font-size: 1.24rem; } h4 { font-size: 1.04rem; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-secondary); } .tertiary { color: var(--text-tertiary); } .small { font-size: 0.86rem; } .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .mono { font-family: var(--font-mono); font-size: 0.85em; } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--nav-width); height: var(--nav-height); margin: 0 auto; padding: 0 max(22px, env(safe-area-inset-left)) 0 max(22px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; } .nav-brand { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; letter-spacing: 0; color: var(--text); margin-right: 18px; white-space: nowrap; } .nav-brand:hover { text-decoration: none; opacity: 0.7; } .nav-brand .brand-full { display: inline; } .nav-brand .brand-short { display: none; } .nav-links { display: flex; gap: 1px; flex: 1; min-width: 0; } .nav-link { padding: 6px 7px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 450; color: var(--text-secondary); white-space: nowrap; transition: color 0.2s, background 0.2s; } .nav-link:hover { color: var(--text); background: var(--accent-soft); text-decoration: none; } .nav-link.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); } /* A round icon button, used for the theme toggle and the mobile menu. */ .nav-icon-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .nav-icon-btn:hover { color: var(--text); background: var(--accent-soft); } .nav-icon-btn svg { width: 17px; height: 17px; display: block; } /* Theme menu: the trigger shows the current preference; the panel lists all three so System stays an obvious choice after locking light or dark. */ .theme-menu { position: relative; flex: none; } .theme-toggle .icon-light, .theme-toggle .icon-dark, .theme-toggle .icon-auto { display: none; } :root[data-theme-preference="system"] .theme-toggle .icon-auto { display: block; } :root[data-theme-preference="light"] .theme-toggle .icon-light { display: block; } :root[data-theme-preference="dark"] .theme-toggle .icon-dark { display: block; } .theme-menu.is-open .theme-toggle { color: var(--text); background: var(--accent-soft); } .theme-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; min-width: 168px; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-md); } .theme-menu-panel[hidden] { display: none; } .theme-menu-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 450; text-align: left; cursor: pointer; transition: color 0.15s, background 0.15s; } .theme-menu-option svg { width: 16px; height: 16px; flex: none; color: var(--text-secondary); } .theme-menu-option:hover { background: var(--bg-tint); } .theme-menu-option[aria-checked="true"] { color: var(--accent); font-weight: 600; background: var(--accent-soft); } .theme-menu-option[aria-checked="true"] svg { color: var(--accent); } .theme-menu-option[aria-checked="true"]::after { content: "\2713"; margin-left: auto; font-size: 0.95rem; line-height: 1; } .nav-menu-btn { display: none; } /* Small screens: the nine sections do not fit a bar, and a bar that scrolls sideways hides most of them behind an edge nobody thinks to drag. */ .nav-sheet { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; z-index: 99; padding: 10px max(14px, env(safe-area-inset-left)) calc(18px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); background: var(--bg-elevated); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); } .nav-sheet a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: var(--radius); font-size: 1rem; font-weight: 450; color: var(--text); } .nav-sheet a:hover { text-decoration: none; background: var(--bg-tint); } .nav-sheet a.active { color: var(--accent); font-weight: 600; background: var(--accent-soft); } .nav-sheet a.active::after { content: "\2022"; font-size: 1.2rem; line-height: 1; } .nav-scrim { display: none; position: fixed; inset: var(--nav-height) 0 0; z-index: 98; background: light-dark(rgba(40, 33, 22, 0.28), rgba(0, 0, 0, 0.5)); } /* ---------- Search ---------- */ /* In the bar it is a field, because that is what a search looks like. It is a button underneath: the results need a surface of their own, and one that is the same on a phone, where there is no room for a field in the bar at all. */ .nav-search { flex: none; display: flex; align-items: center; gap: 7px; width: 210px; height: 32px; padding: 0 8px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: light-dark(rgba(255, 254, 250, 0.7), rgba(255, 248, 232, 0.05)); color: var(--text-tertiary); font: inherit; font-size: 0.85rem; text-align: left; cursor: text; transition: border-color 0.2s, background 0.2s, color 0.2s; } .nav-search:hover { border-color: var(--border-strong); color: var(--text-secondary); } .nav-search .magnifier { width: 14px; height: 14px; flex: none; } .nav-search-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav-search-key { flex: none; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-sans); font-size: 0.7rem; line-height: 1.4; color: var(--text-tertiary); } .search-overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; padding: min(11vh, 96px) 16px 24px; background: light-dark(rgba(40, 33, 22, 0.3), rgba(0, 0, 0, 0.58)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.18s ease; } .search-overlay.open { opacity: 1; } .search-overlay[hidden] { display: none; } body.search-open { overflow: hidden; } .search-dialog { display: flex; flex-direction: column; width: min(660px, 100%); max-height: 100%; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transform: translateY(-8px); transition: transform 0.18s ease; } .search-overlay.open .search-dialog { transform: none; } .search-field { display: flex; align-items: center; gap: 11px; flex: none; padding: 0 14px; height: 54px; border-bottom: 1px solid var(--border); } .search-field .magnifier { width: 17px; height: 17px; flex: none; color: var(--text-tertiary); } .search-input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.02rem; color: var(--text); outline: none; } .search-input::placeholder { color: var(--text-tertiary); } .search-input::-webkit-search-cancel-button { display: none; } .search-dismiss { flex: none; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; background: none; font: inherit; font-size: 0.7rem; color: var(--text-tertiary); cursor: pointer; } .search-dismiss:hover { color: var(--text-secondary); background: var(--bg-tint); } .search-results { overflow-y: auto; padding: 8px; overscroll-behavior: contain; } .search-group + .search-group { margin-top: 4px; } .search-group-label { padding: 10px 10px 5px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } .search-more { font-weight: 450; letter-spacing: 0.03em; text-transform: none; opacity: 0.75; } .search-result { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius); color: var(--text); } .search-result:hover { text-decoration: none; } /* One highlight, whether the keyboard or the pointer moved it: two rows lit at once would be two answers to the question of what Enter does. */ .search-result.active { background: light-dark(rgba(27, 79, 130, 0.13), rgba(125, 180, 230, 0.2)); box-shadow: inset 2px 0 0 var(--accent); } .search-result.active .search-result-title { color: var(--accent); } .search-result-text { flex: 1; min-width: 0; display: block; } .search-result-title { display: block; font-size: 0.94rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-sub, .search-result-def { display: block; margin-top: 2px; font-size: 0.79rem; color: var(--text-tertiary); } .search-result-def { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } .search-result-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-result-amount { flex: none; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--text-secondary); } /* Marking the typed letters is the difference between scanning forty Section G addresses and reading them, so it has to be visible at a glance without turning the row into a stripe. */ .search-result mark { background: light-dark(rgba(212, 160, 60, 0.34), rgba(226, 167, 96, 0.3)); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px light-dark(rgba(212, 160, 60, 0.34), rgba(226, 167, 96, 0.3)); } .search-result-ask .search-result-title, .search-result-all .search-result-title { color: var(--accent); } .search-empty, .search-hint { margin: 0; padding: 18px 12px; font-size: 0.88rem; color: var(--text-tertiary); } .search-hint { padding-top: 4px; } /* A row arrived at from search. The sticky bar would otherwise cover whatever the anchor scrolled to, and the reader would be looking at the row above. */ :target, .row-highlight { scroll-margin-top: calc(var(--nav-height) + 16px); } tr:target > td, .row-highlight > td { background: var(--accent-soft); } /* The full results page. Ten headings down a page of results want less air between them than ten sections of an argument do. */ .result-group { margin-bottom: 26px; } .result-group-title { font-size: 1.1rem; margin: 0; } .result-list { display: flex; flex-direction: column; } .result { display: flex; align-items: center; gap: 16px; padding: 13px 20px; color: var(--text); border-top: 1px solid var(--border); } .result:first-child { border-top: 0; } .result:hover { text-decoration: none; background: var(--bg-tint); } .result-text { flex: 1; min-width: 0; display: block; } .result-title { display: block; font-weight: 500; } .result-sub, .result-def { display: block; margin-top: 3px; font-size: 0.84rem; color: var(--text-tertiary); } .result-amount { flex: none; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; } /* ---------- Layout ---------- */ .container { max-width: var(--content-width); margin: 0 auto; padding: 0 22px; } .section { padding: 56px 0; } .section-tight { padding: 32px 0; } /* Jersey City skyline on the overview; theme picks the plate. */ .overview-skyline { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 36px 40px 20px; line-height: 0; box-sizing: border-box; } .overview-skyline img { display: block; width: 82%; max-width: 860px; height: auto; margin: 0 auto; } .overview-skyline .skyline-dark { display: none; } :root[data-theme="dark"] .overview-skyline .skyline-light { display: none; } :root[data-theme="dark"] .overview-skyline .skyline-dark { display: block; } .page-header { padding: 60px 0 28px; } .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .lead { font-size: 1.14rem; color: var(--text-secondary); max-width: 62ch; } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } /* ---------- Cards ---------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* clip rather than hidden: hidden makes the card a scroll container, and a sticky table header then sticks to the top of the card instead of the top of the window — which parks it 56px down, on top of the first row. */ .card-flush { padding: 0; overflow: clip; } .card-tint { background: var(--bg-tint); } .founder-photo { display: block; width: 168px; height: 168px; margin: 22px auto 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .founder-bio { text-align: left; } .founder-bio p { margin-bottom: 1em; } .founder-bio p:last-child { margin-bottom: 0; } .metric-label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.01em; margin-bottom: 6px; } .metric-value { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; line-height: 1.05; } .metric-value.hero { font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -0.035em; } .metric-note { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 6px; } .delta { font-size: 0.86rem; font-weight: 500; font-variant-numeric: tabular-nums; } .delta.up { color: var(--positive); } .delta.down { color: var(--negative); } /* Revenue moves the other way round - less revenue is not good news - so it is left uncoloured rather than given the opposite meaning. */ .delta.neutral { color: var(--text); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 980px; font-size: 0.74rem; font-weight: 500; background: var(--bg-sunken); color: var(--text-secondary); border: 1px solid var(--border); white-space: nowrap; } .badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .badge-small { padding: 1px 7px; font-size: 0.68rem; margin-left: 8px; vertical-align: 2px; } .badge-warn { background: light-dark(rgba(176, 108, 20, 0.14), rgba(230, 160, 60, 0.16)); color: light-dark(#8a4a06, #eaa94f); border-color: transparent; } a.badge { text-decoration: none; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } a.badge:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: var(--radius); border: 1px solid transparent; background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.2s, transform 0.14s var(--ease-spring), opacity 0.2s; } .btn:hover { background: var(--accent-hover); text-decoration: none; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-secondary { background: var(--bg-sunken); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--border); } .btn-ghost { background: transparent; color: var(--accent); padding: 6px 10px; } .btn-ghost:hover { background: var(--accent-soft); } .btn-sm { padding: 5px 12px; font-size: 0.8rem; } /* The contextual "ask" affordance that appears throughout the UI. */ .ask-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.2s var(--ease-out); white-space: nowrap; } .ask-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .ask-btn svg { width: 13px; height: 13px; } /* ---------- Forms ---------- */ .input, .select { width: 100%; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-family: inherit; font-size: 0.92rem; transition: border-color 0.2s, box-shadow 0.2s; } .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); } .input::placeholder { color: var(--text-tertiary); } .search-wrap { position: relative; flex: 1; min-width: 220px; } .search-wrap .input { padding-left: 38px; } .search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-tertiary); pointer-events: none; } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table th { text-align: left; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.045em; text-transform: uppercase; color: var(--text-tertiary); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-tint); position: sticky; top: var(--nav-height); z-index: 2; } .table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; } .table tbody tr { transition: background 0.15s; } .table tbody tr:hover { background: var(--bg-tint); } .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .row-expandable { cursor: pointer; } .row-expandable .chevron { display: inline-block; width: 9px; margin-right: 9px; color: var(--text-tertiary); transition: transform 0.24s var(--ease-out); } .row-expandable[aria-expanded="true"] .chevron { transform: rotate(90deg); } .detail-row > td { padding: 0; border-bottom: 1px solid var(--border); background: var(--bg-tint); } .detail-inner { padding: 20px 22px 22px 41px; animation: slideDown 0.3s var(--ease-out); } @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 14px; } .detail-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 5px; } /* ---------- AI surfaces ---------- */ .ai-block { border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-soft), transparent 60%), var(--bg-elevated); padding: 24px; } .ai-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .ai-kicker svg { width: 13px; height: 13px; } .ai-headline { font-family: var(--font-serif); font-size: 1.34rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; font-variant-numeric: lining-nums; margin-bottom: 12px; } .ai-body { color: var(--text-secondary); font-size: 0.98rem; } .ai-body p + p { margin-top: 0.85em; } .ai-points { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; } .ai-points li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--text-secondary); line-height: 1.45; } .ai-points li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--accent); } .ai-inline { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.5; } .ai-empty { font-size: 0.88rem; color: var(--text-tertiary); font-style: italic; } /* ---------- Charts ---------- */ .chart { width: 100%; height: 380px; } .chart-sm { height: 220px; } .chart-lg { height: 520px; } .sparkline { width: 100%; height: 54px; } .chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } /* ---------- Ask panel ---------- */ .ask-overlay { position: fixed; inset: 0; background: light-dark(rgba(40, 33, 22, 0.3), rgba(0, 0, 0, 0.5)); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); z-index: 200; backdrop-filter: blur(2px); } .ask-overlay.open { opacity: 1; pointer-events: auto; } .ask-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--bg-elevated); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--dur) var(--ease-out); z-index: 201; display: flex; flex-direction: column; } .ask-panel.open { transform: none; } .ask-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .ask-title { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; } .ask-scope { font-size: 0.8rem; color: var(--text-secondary); margin-top: 3px; } .ask-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg-sunken); color: var(--text-secondary); cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.2s; } .ask-close:hover { background: var(--border); } .ask-body { flex: 1; overflow-y: auto; padding: 20px; } .ask-suggestions { display: grid; gap: 8px; } .ask-suggestion { text-align: left; padding: 12px 15px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-tint); color: var(--text); font-family: inherit; font-size: 0.89rem; cursor: pointer; transition: all 0.2s var(--ease-out); } .ask-suggestion:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); } .ask-message { margin-bottom: 22px; animation: fadeUp 0.34s var(--ease-out); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ask-question { font-weight: 500; font-size: 0.95rem; padding: 11px 15px; background: var(--accent-soft); border-radius: var(--radius); margin-bottom: 4px; } .ask-question-actions { margin: 0 0 14px; } .ask-answer { font-size: 0.95rem; line-height: 1.58; color: var(--text); } .ask-answer p { margin-bottom: 0.8em; } .ask-answer p:last-child, .ask-answer ul:last-child { margin-bottom: 0; } .ask-answer strong { font-weight: 600; color: var(--text); } .ask-list { margin: 0 0 0.8em; padding-left: 18px; } .ask-list li { margin-bottom: 0.35em; } .ask-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ask-answer-actions { margin-top: 8px; } .ask-icon-action { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out); } .ask-icon-action svg { width: 15px; height: 15px; display: block; } .ask-icon-action:hover:not(:disabled) { color: var(--text); background: var(--bg-sunken); } .ask-icon-action:disabled { opacity: 0.4; cursor: default; } .ask-footer { padding: 14px 20px 18px; border-top: 1px solid var(--border); } .ask-form { display: flex; gap: 8px; align-items: flex-end; } .ask-input { flex: 1; resize: none; max-height: 130px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.92rem; line-height: 1.4; } .ask-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); } .ask-send { flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--accent); color: var(--on-accent); cursor: pointer; display: grid; place-items: center; transition: background 0.2s, transform 0.14s var(--ease-spring); } .ask-send:hover { background: var(--accent-hover); } .ask-send:active { transform: scale(0.92); } .ask-send:disabled { opacity: 0.4; cursor: not-allowed; } .ask-send svg { width: 16px; height: 16px; } /* Typing indicator */ .thinking { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; } .thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: pulse 1.3s infinite ease-in-out; } .thinking span:nth-child(2) { animation-delay: 0.16s; } .thinking span:nth-child(3) { animation-delay: 0.32s; } @keyframes pulse { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } } /* ---------- Misc ---------- */ .divider { height: 1px; background: var(--border); border: 0; margin: 34px 0; } .footer { border-top: 1px solid var(--border); padding: 34px 0 46px; margin-top: 60px; font-size: 0.82rem; color: var(--text-tertiary); background: var(--bg-tint); } .footer a { color: var(--text-secondary); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; } .empty-state { padding: 56px 20px; text-align: center; color: var(--text-secondary); } .bar-track { height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; margin-top: 7px; } .bar-fill { height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.6s var(--ease-out); } /* Breakdown beside a donut. A charting library's own legend truncates these labels and hides the figures, which is the part worth reading. */ .mix-list { list-style: none; margin: 18px 0 0; padding: 0; } .mix-list li { display: grid; grid-template-columns: 9px 1fr auto 44px; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.85rem; } .mix-list li:first-child { border-top: none; } .mix-swatch { width: 9px; height: 9px; border-radius: 2px; align-self: center; } .mix-name { color: var(--text-secondary); } .mix-value { font-variant-numeric: tabular-nums; font-weight: 590; } .mix-share { font-variant-numeric: tabular-nums; text-align: right; color: var(--text-tertiary); } .reveal { opacity: 0; transform: translateY(14px); } .reveal.visible { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Small screens ---------- */ /* The field needs about 210px, and has them nearly everywhere. Not in the band where the nine links are still in the bar and have already spent them, and not on a phone, where the bar has room for an icon and little else. Both collapse to the icon, which opens the same overlay. */ @media (min-width: 1061px) and (max-width: 1130px), (max-width: 700px) { .nav-search { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; border-color: transparent; background: none; } .nav-search-label, .nav-search-key { display: none; } .nav-search .magnifier { width: 17px; height: 17px; } .nav-search:hover { color: var(--text); background: var(--accent-soft); } } /* The bar holds nine sections plus two buttons, which stops fitting at about 1060px. Below that the links move into a sheet rather than being squeezed, truncated, or hidden behind a sideways scroll nobody thinks to drag. */ @media (max-width: 1060px) { .nav-links { display: none; } .nav-menu-btn { display: grid; } body.nav-open .nav-sheet, body.nav-open .nav-scrim { display: block; } body.nav-open { overflow: hidden; } .nav-sheet { animation: sheetDown 0.26s var(--ease-out); } } @keyframes sheetDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { body { font-size: 16px; } .container { padding: 0 max(18px, env(safe-area-inset-left)); } .overview-skyline { padding: 24px 22px 12px; } .overview-skyline img { width: 88%; } .section { padding: 38px 0; } .section-tight { padding: 24px 0; } .page-header { padding: 32px 0 20px; } .card { padding: 18px; } .grid { gap: 14px; } .lead { font-size: 1.06rem; } /* A wide table cannot be made narrow honestly, so it scrolls sideways inside its card. The header cannot stay stuck to the viewport once the card is itself a scroll container, and on a short screen it is not worth the confusion of a header that scrolls with the wrong axis. */ .card-flush { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { font-size: 0.86rem; } .table th { position: static; } .table th, .table td { padding: 11px 12px; } .detail-inner { padding: 16px; } .chart { height: 300px; } .chart-sm { height: 200px; } .chart-lg { height: 440px; } /* Anything tappable clears the 44px Apple recommends. */ .btn { padding: 11px 18px; } .ask-btn { padding: 8px 12px; } .ask-close { width: 36px; height: 36px; } .footer { padding: 30px 0 calc(40px + env(safe-area-inset-bottom)); } .footer-grid { gap: 22px; } .ask-panel { width: 100%; border-left: none; } .ask-footer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); } /* Near enough the whole screen: the keyboard takes the lower half, so every pixel above it is a result the reader can see without scrolling. */ .search-overlay { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); } .search-dialog { border-radius: var(--radius-lg); } .search-field { height: 50px; } .search-input { font-size: 1rem; } .result { padding: 13px 16px; } } @media (max-width: 420px) { .nav-brand .brand-full { display: none; } .nav-brand .brand-short { display: inline; } .nav-inner { gap: 4px; } .chart-lg { height: 400px; } }