/* Peer Revenue design system (SPEC §4, DECISIONS D-017, D-041). Two styles share one set of tokens: newspaper News, How it works, splash, sign-in. Follows the device's light/dark. terminal Markets, word pages, portfolio, leaderboards. Dark unless the viewer picks light. (data-theme only when the viewer chose one). Components use the semantic tokens only, never raw colours. */ /* --- Fonts (self-hosted, OFL; see static/fonts) --------------------------------------- */ @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-weight: 200 800; font-style: italic; font-display: swap; src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2"); } /* --- Tokens ---------------------------------------------------------------------------- */ :root { --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.9rem; --text-hero: clamp(1.9rem, 5vw, 3.1rem); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --gutter: 1rem; /* The site bar is the same in every style and theme. */ --bar-bg: #0b0e11; --bar-fg: #eef1f4; --bar-muted: #8b97a3; --bar-accent: #f5b301; } /* Newspaper, light (also the fallback before data-style is read). */ :root, :root[data-style="newspaper"] { --bg: #faf8f3; --surface: #ffffff; --surface-2: #f2efe7; --fg: #151412; --muted: #5d5a53; --faint: #8c887f; --line: #e3dfd4; --line-strong: #151412; --accent: #1d4f91; --accent-fg: #ffffff; --accent-soft: #e4ecf7; --up: #11743f; --down: #b3261e; --flat: #6b6860; --up-soft: #e3f2e9; --down-soft: #f8e5e3; --focus: #1d4f91; --tape-bg: #151412; --tape-fg: #f4f1ea; --tape-ticker: #f5b301; --flash: #e3f2e9; --devbox: #fbf1d3; --font-body: var(--font-sans); --font-display: var(--font-serif); --font-num: var(--font-sans); --radius: 3px; --glow: none; color-scheme: light; } /* Newspaper, dark: when the device prefers dark and the viewer hasn't picked light, or the viewer picked dark. */ @media (prefers-color-scheme: dark) { :root[data-style="newspaper"]:not([data-theme="light"]) { --bg: #121212; --surface: #1a1a19; --surface-2: #222220; --fg: #ecebe7; --muted: #a8a59d; --faint: #7b786f; --line: #2f2e2b; --line-strong: #ecebe7; --accent: #8fb4ea; --accent-fg: #0e1620; --accent-soft: #1d2a3b; --up: #4cc38a; --down: #f07167; --flat: #a8a59d; --up-soft: #16301f; --down-soft: #3a1c1a; --focus: #8fb4ea; --tape-bg: #000000; --flash: #16301f; --devbox: #3a321a; color-scheme: dark; } } :root[data-style="newspaper"][data-theme="dark"] { --bg: #121212; --surface: #1a1a19; --surface-2: #222220; --fg: #ecebe7; --muted: #a8a59d; --faint: #7b786f; --line: #2f2e2b; --line-strong: #ecebe7; --accent: #8fb4ea; --accent-fg: #0e1620; --accent-soft: #1d2a3b; --up: #4cc38a; --down: #f07167; --flat: #a8a59d; --up-soft: #16301f; --down-soft: #3a1c1a; --focus: #8fb4ea; --tape-bg: #000000; --flash: #16301f; --devbox: #3a321a; color-scheme: dark; } /* Terminal, dark (its default). */ :root[data-style="terminal"] { --bg: #0b0e11; --surface: #10151a; --surface-2: #151c23; --fg: #d9e0e7; --muted: #8391a0; --faint: #56636f; --line: #1d2731; --line-strong: #2c3a47; --accent: #f5b301; --accent-fg: #0b0e11; --accent-soft: #2b2310; --up: #3ddc84; --down: #ff5f5f; --flat: #8391a0; --up-soft: #0f2a1b; --down-soft: #2e1414; --focus: #f5b301; --tape-bg: #05070a; --tape-fg: #d9e0e7; --tape-ticker: #f5b301; --flash: #0f2a1b; --devbox: #2b2310; --font-body: var(--font-sans); --font-display: var(--font-sans); --font-num: var(--font-mono); --radius: 2px; --glow: 0 0 10px; color-scheme: dark; } /* Terminal, light: only when the viewer picks it. */ :root[data-style="terminal"][data-theme="light"] { --bg: #f3f5f7; --surface: #ffffff; --surface-2: #eaeef2; --fg: #0f1720; --muted: #52606d; --faint: #8a96a2; --line: #d8dee4; --line-strong: #aab5bf; --accent: #9a6400; --accent-fg: #ffffff; --accent-soft: #f7ecd6; --up: #0c7a3d; --down: #c0262d; --flat: #52606d; --up-soft: #e0f3e8; --down-soft: #fae3e4; --focus: #9a6400; --tape-bg: #0f1720; --flash: #e0f3e8; --devbox: #f7ecd6; --glow: none; color-scheme: light; } /* --- Base ------------------------------------------------------------------------------ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 15px/1.5 var(--font-body); color: var(--fg); background: var(--bg); } a { color: var(--accent); text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.15; margin: var(--space-1) 0 var(--space-3); letter-spacing: -.01em; } h2 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-3); } h3 { font-size: var(--text-md); } code { font-family: var(--font-mono); font-size: .92em; } .muted { color: var(--muted); } .small { font-size: var(--text-xs); font-weight: normal; } .error { color: var(--down); } form.inline { display: inline; } button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Terminal pages: uppercase section labels, figures in mono. */ [data-style="terminal"] h1 { font-weight: 600; letter-spacing: -.02em; } [data-style="terminal"] h2 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } /* --- Site chrome ----------------------------------------------------------------------- */ .wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .site-bar { background: var(--bar-bg); color: var(--bar-fg); } .site-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 56px; padding-top: var(--space-2); padding-bottom: var(--space-2); } .brand { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; color: inherit; text-decoration: none; } .tagline { color: var(--bar-muted); font-family: var(--font-serif); font-style: italic; font-size: .95rem; } .account { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); } .account a, .site-bar button.link { color: var(--bar-fg); text-decoration: none; } .account a:hover, .site-bar button.link:hover { text-decoration: underline; } .account .me { color: var(--bar-muted); } .account .me b { color: var(--bar-accent); font-family: var(--font-mono); font-weight: 600; } .account .soon { color: var(--bar-muted); font-style: italic; } .account .btn { background: var(--bar-fg); color: var(--bar-bg); } .menu-bar { background: var(--surface); border-bottom: 1px solid var(--line); } .menu-inner { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; } .menu-inner::-webkit-scrollbar { display: none; } .menu-inner a { flex: none; padding: var(--space-3) 0 calc(var(--space-3) - 3px); border-bottom: 3px solid transparent; color: var(--fg); text-decoration: none; font-weight: 600; font-size: var(--text-sm); } .menu-inner a:hover { border-bottom-color: var(--line-strong); } .menu-inner a.active { border-bottom-color: var(--accent); } [data-style="newspaper"] .menu-inner a.active { border-bottom-color: var(--fg); } main.wrap { padding-top: var(--space-5); padding-bottom: var(--space-4); } .site-foot { background: var(--bar-bg); color: var(--bar-muted); margin-top: var(--space-7); padding: var(--space-6) 0; font-size: var(--text-sm); } .site-foot .brand { color: var(--bar-fg); font-size: 1.2rem; } .site-foot p { margin: var(--space-2) 0 0; } .site-foot a { color: var(--bar-fg); } .theme-switch { display: inline-flex; gap: 2px; margin-top: var(--space-4); border: 1px solid #2c3a47; border-radius: 999px; padding: 2px; } .theme-switch button { background: none; border: 0; color: var(--bar-muted); font: inherit; font-size: var(--text-xs); padding: .2rem .7rem; border-radius: 999px; cursor: pointer; } .theme-switch button[aria-pressed="true"] { background: var(--bar-fg); color: var(--bar-bg); } @media (max-width: 600px) { .tagline { display: none; } .brand { font-size: 1.3rem; } .account { gap: var(--space-3); } } /* --- Page head ------------------------------------------------------------------------- */ .page-head { margin-bottom: var(--space-4); } .page-head h1 { margin-bottom: var(--space-1); } .lede { margin: 0; color: var(--muted); max-width: 70ch; } .section-title { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-2); border-top: 3px solid var(--line-strong); } [data-style="terminal"] .section-title { font-size: var(--text-xs); border-top: 1px solid var(--line); color: var(--muted); padding-top: var(--space-3); } [data-style="terminal"] .section-title::before { content: "▌"; color: var(--accent); margin-right: .35em; } /* --- Components: delta, sparkline, ticker, tag ----------------------------------------- */ .delta { display: inline-flex; align-items: baseline; gap: .25em; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; } .delta .arrow { font-size: .72em; } .delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--flat); } [data-style="terminal"] .delta.up { text-shadow: var(--glow) color-mix(in srgb, var(--up) 45%, transparent); } [data-style="terminal"] .delta.down { text-shadow: var(--glow) color-mix(in srgb, var(--down) 45%, transparent); } .spark { display: inline-block; vertical-align: middle; overflow: visible; } .spark polyline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .spark polygon { fill: currentColor; opacity: .12; stroke: none; } .spark.up { color: var(--up); } .spark.down { color: var(--down); } .spark.flat { color: var(--flat); } .spark.empty { width: 96px; height: 24px; border-bottom: 1px dashed var(--line); } .ticker { font-family: var(--font-mono); font-weight: 600; text-decoration: none; color: var(--accent); letter-spacing: .02em; } [data-style="newspaper"] .ticker { color: var(--fg); } a.ticker:hover { text-decoration: underline; } .tag { font-size: var(--text-xs); color: var(--down); border: 1px solid currentColor; border-radius: 3px; padding: 0 .3rem; } .tag.bot { color: var(--accent); } /* --- Components: stat tiles ------------------------------------------------------------ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); min-width: 0; } .stat .label { display: block; font-size: var(--text-xs); color: var(--muted); } .stat .value { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(1.05rem, 4.4vw, var(--text-xl)); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .stat { padding: var(--space-2) var(--space-3); } } .stat .sub { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; } [data-style="terminal"] .stat .label { text-transform: uppercase; letter-spacing: .06em; } [data-style="newspaper"] .stat { background: none; border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; padding: var(--space-2) 0 0; } /* --- Components: tables ---------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } table.data { width: 100%; border-collapse: collapse; } .data th, .data td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; } .data tbody tr:last-child td { border-bottom: 0; } .data th { font-weight: 600; font-size: var(--text-xs); color: var(--muted); background: var(--surface-2); position: sticky; top: 0; } [data-style="terminal"] .data th { text-transform: uppercase; letter-spacing: .06em; } .data tbody tr:hover td { background: var(--surface-2); } .data.compact td, .data.compact th { padding: var(--space-1) var(--space-2); } .data.compact td { font-size: var(--text-sm); } .num { text-align: right !important; font-family: var(--font-num); font-variant-numeric: tabular-nums; } .data td.spark-cell { padding-top: 0; padding-bottom: 0; } .empty { color: var(--muted); text-align: center !important; padding: var(--space-5) !important; white-space: normal !important; } tr.mine td { background: var(--accent-soft) !important; } /* Keep the ticker column visible while a wide table scrolls sideways on a phone. */ .data td.sticky, .data th.sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; } .data th.sticky { background: var(--surface-2); z-index: 2; } /* --- Components: cards, boards, tape --------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); margin-top: var(--space-4); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); min-width: 0; } .card h2 { margin-top: 0; } .card.narrow { max-width: 440px; margin: var(--space-6) auto; } .board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); align-items: start; } .board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .board h2 { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .board-list { list-style: none; margin: 0; padding: 0; } .board-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); } .board-list li:last-child { border-bottom: 0; } .board-list a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-list a:hover .ticker { text-decoration: underline; } .board-list .term { color: var(--muted); margin-left: .4em; } .board-list .empty { justify-content: center; padding: var(--space-3) !important; } .tape-wrap { overflow: hidden; background: var(--tape-bg); border-radius: var(--radius); margin-bottom: var(--space-5); } .tape { display: flex; width: max-content; gap: var(--space-6); padding: .5rem 0; animation: tape-scroll 60s linear infinite; } .tape-wrap:hover .tape { animation-play-state: paused; } .tape-item { flex: none; padding: 0 var(--space-3); font: 13px/1 var(--font-mono); color: var(--tape-fg); white-space: nowrap; display: flex; gap: var(--space-2); align-items: baseline; } .tape-item .ticker { color: var(--tape-ticker); } @keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Components: forms, buttons, messages ---------------------------------------------- */ .btn { display: inline-block; background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; border-radius: var(--radius); padding: .5rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { filter: brightness(1.08); } .btn.small { padding: .2rem .7rem; } .btn.ghost { background: none; border-color: var(--fg); color: var(--fg); } .btn:disabled { opacity: .5; cursor: default; } .stack { display: flex; flex-direction: column; gap: var(--space-3); } .field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); } input, select { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .5rem .65rem; } [data-style="terminal"] input { font-family: var(--font-mono); } .flash { background: var(--flash); border-radius: var(--radius); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); } .devbox { background: var(--devbox); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-4); } /* --- Charts (ECharts, only on chart pages) --------------------------------------------- */ .chart { position: relative; height: 240px; } .chart-loading { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: var(--text-sm); } /* --- Word page ------------------------------------------------------------------------- */ .word-head { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: flex-end; } .word-head h1 .ticker { font-size: 1em; } .word-head h1 .term { color: var(--muted); font-weight: 400; } .word-head .stats { flex: 1 1 min(100%, 420px); max-width: 640px; margin: 0; } .query { display: block; color: var(--muted); font-size: var(--text-sm); } .trade { display: flex; flex-direction: column; gap: var(--space-3); } .seg { display: flex; gap: var(--space-4); } .quote { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-4) 0; } .quote dt { color: var(--muted); } .quote dd { margin: 0; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* --- Markets: index strip, market map, listings controls --------------------------------- */ .index-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .index-tile { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-2) var(--space-3); color: var(--fg); text-decoration: none; min-width: 0; } .index-tile:hover { border-color: var(--accent); } .index-tile .label { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-tile .label b { color: var(--accent); font-family: var(--font-mono); margin-right: .3em; } .index-tile .value { font: 600 var(--text-lg) var(--font-num); font-variant-numeric: tabular-nums; } .index-tile .row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: var(--text-sm); } .index-tile .spark { width: 72px; } .index-tile:first-child { border-color: var(--line-strong); } .market-map { margin-bottom: var(--space-2); } .map-canvas { position: relative; width: 100%; background: var(--bg); } .map-wide { aspect-ratio: 2.4 / 1; } .map-tall { aspect-ratio: 0.8 / 1; display: none; } @media (max-width: 700px) { .map-wide { display: none; } .map-tall { display: block; } } .map-sector { position: absolute; display: flex; flex-direction: column; padding: 1px; } .map-sector-name { flex: 0 0 18px; min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; padding: 0 .4em; font-size: clamp(.55rem, 1vw, .72rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface); text-decoration: none; } a.map-sector-name:hover { color: var(--accent); } .map-body { position: relative; flex: 1; } .map-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; overflow: hidden; background: var(--tone); border: 1px solid var(--bg); color: var(--fg); text-decoration: none; line-height: 1.1; text-align: center; } .map-tile:hover { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; } .map-tile .t { font-family: var(--font-mono); font-weight: 600; } .map-tile .c { font-family: var(--font-num); opacity: .85; } .map-tile.lg .t { font-size: clamp(.9rem, 2vw, 1.5rem); } .map-tile.lg .c { font-size: clamp(.7rem, 1.2vw, .95rem); } .map-tile.md .t { font-size: clamp(.75rem, 1.4vw, 1.05rem); } .map-tile.md .c { font-size: clamp(.6rem, .9vw, .78rem); } .map-tile.sm .t { font-size: clamp(.6rem, 1vw, .8rem); } .map-tile.sm .c { font-size: .62rem; } .map-tile.xs .t { font-size: .6rem; } .map-tile.xs .c { display: none; } [data-theme="light"] .map-tile.strong, :root[data-style="newspaper"]:not([data-theme="dark"]) .map-tile.strong { color: #fff; } .map-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--space-5); } .map-legend .scale { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-num); } .map-legend .bar { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--down), var(--surface-2), var(--up)); } .filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } .filter-chips a { border: 1px solid var(--line); border-radius: 999px; padding: .2rem .75rem; font-size: var(--text-sm); color: var(--muted); text-decoration: none; background: var(--surface); } .filter-chips a:hover { color: var(--fg); border-color: var(--line-strong); } .filter-chips a[aria-current] { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); } .data th a.sort { color: inherit; text-decoration: none; } .data th a.sort:hover, .data th a.sort.active { color: var(--fg); } .sector-link { font: 600 var(--text-xs) var(--font-mono); color: var(--muted); text-decoration: none; letter-spacing: .04em; } .sector-link:hover { color: var(--accent); } /* Word page layout: chart and ticket side by side, then evidence below. */ .word-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); grid-template-areas: "price trade" "hits fields" "papers related" "dividends trades"; } .area-price { grid-area: price; } .area-trade { grid-area: trade; } .area-hits { grid-area: hits; } .area-fields { grid-area: fields; } .area-papers { grid-area: papers; } .area-related { grid-area: related; } .area-dividends { grid-area: dividends; } .area-trades { grid-area: trades; } @media (max-width: 900px) { .word-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "price" "trade" "hits" "fields" "papers" "related" "dividends" "trades"; } } .card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); } .card-head h2 { margin: 0; } .caption { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--muted); } .caption .key { display: inline-block; width: 10px; height: 10px; margin: 0 .3em 0 .8em; vertical-align: -1px; background: var(--accent); } .caption .key:first-child { margin-left: 0; } .caption .key.faded { opacity: .35; } .caption .key.line { height: 2px; vertical-align: 3px; background: var(--fg); opacity: .7; } .range { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .range button { background: none; border: 0; color: var(--muted); font: 600 var(--text-xs) var(--font-mono); padding: .25rem .6rem; cursor: pointer; } .range button + button { border-left: 1px solid var(--line); } .range button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); } .field-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .field-bars li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); font-size: var(--text-sm); } .field-bars .field-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field-bars .bar { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .field-bars .bar span { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .paper-feed { list-style: none; margin: 0; padding: 0; } .paper-feed li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); } .paper-feed li:first-child { padding-top: 0; } .paper-feed li:last-child { border-bottom: 0; padding-bottom: 0; } .paper-feed .title { display: block; color: var(--fg); font-weight: 600; line-height: 1.35; text-decoration: none; } .paper-feed .title:hover { text-decoration: underline; } .paper-feed .meta { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--muted); } .paper-feed .snippet { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.5; } mark { background: var(--accent-soft); color: var(--fg); padding: 0 .12em; border-radius: 2px; } [data-style="terminal"] mark { color: var(--accent); } .related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .related li { display: inline-flex; align-items: baseline; gap: .45em; border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; font-size: var(--text-sm); background: var(--surface-2); } .related a { color: var(--fg); text-decoration: none; } .related a:hover { text-decoration: underline; } .related .ticker { font-size: var(--text-xs); } .related .lift { font: var(--text-xs) var(--font-mono); color: var(--muted); } .stats.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; } .stats.compact .stat { padding: var(--space-2) var(--space-3); } .stats.compact .value { font-size: var(--text-lg); } /* The trade ticket */ .ticket { display: flex; flex-direction: column; gap: var(--space-3); } .side-toggle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .side-toggle label { position: relative; cursor: pointer; } .side-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .side-toggle span { display: block; text-align: center; padding: .5rem; font-weight: 600; color: var(--muted); } .side-toggle label + label { border-left: 1px solid var(--line); } .side-toggle .buy input:checked + span { background: var(--up-soft); color: var(--up); } .side-toggle .sell input:checked + span { background: var(--down-soft); color: var(--down); } .side-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; } .ticket input[name=amount] { font-size: var(--text-lg); } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chips button { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font: var(--text-xs) var(--font-mono); padding: .2rem .65rem; cursor: pointer; } .chips button:hover { border-color: var(--accent); } .btn.buy { background: var(--up); color: var(--bg); } .btn.sell { background: var(--down); color: var(--bg); } /* --- News ------------------------------------------------------------------------------ */ .lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); padding-bottom: var(--space-5); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); } .dateline { display: block; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .lead-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; margin: var(--space-2) 0 var(--space-3); font-weight: 700; letter-spacing: -.015em; } .dek { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.4; color: var(--muted); } .lead-body p { margin: var(--space-3) 0 0; line-height: 1.65; } .byline { display: block; margin-top: var(--space-4); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .lead-papers { border-left: 1px solid var(--line); padding-left: var(--space-5); } .lead-papers h2 { margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .paper-list { margin: 0 0 var(--space-3); padding-left: 1.2rem; display: flex; flex-direction: column; gap: var(--space-3); } .paper-list a { color: var(--fg); font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.35; text-decoration: none; } .paper-list a:hover { text-decoration: underline; } .cat { font: 12px/1 var(--font-mono); color: var(--muted); white-space: nowrap; } .more { font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .more:hover { text-decoration: underline; } @media (max-width: 760px) { .lead { grid-template-columns: 1fr; gap: var(--space-4); } .lead-papers { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-4); } } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .news-card { border-top: 2px solid var(--line-strong); padding-top: var(--space-2); min-width: 0; } .news-card .kicker { display: flex; gap: .4em; align-items: baseline; flex-wrap: wrap; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: var(--space-1); } .news-card .kicker a { color: inherit; } .news-card h3 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; } .news-card h3 a { color: inherit; text-decoration: none; } .news-card h3 a:hover { text-decoration: underline; } .news-card p { margin: 0; font-size: var(--text-sm); color: var(--muted); } .news-card .example { margin-top: var(--space-2); font-size: .82rem; } .news-card .example a { color: var(--fg); } /* --- Splash ---------------------------------------------------------------------------- */ .hero { text-align: center; padding: var(--space-7) var(--space-4) var(--space-6); } .hero h1 { font-size: var(--text-hero); line-height: 1.1; margin: 0 auto var(--space-3); max-width: 22ch; } .hero-sub { color: var(--muted); font-family: var(--font-serif); font-size: 1.25rem; margin: 0 auto var(--space-5); } .hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .hero-tape { margin: var(--space-6) 0; } .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .trust-item { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .trust-icon { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-serif); } .trust-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fine-print { text-align: center; color: var(--muted); font-size: .8rem; max-width: 60ch; margin: 0 auto var(--space-6); } .fine-print p { margin: var(--space-1) 0; } /* --- Prose (How it works) -------------------------------------------------------------- */ .prose { max-width: 68ch; } .prose h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-2); } .prose p, .prose li { line-height: 1.7; } .prose ul { padding-left: 1.2rem; } .prose .dek { margin-bottom: var(--space-4); } /* --- Live market and the bell (M5) ---------------------------------------------------- */ .live-dot { margin-left: auto; align-self: center; flex: none; display: inline-flex; align-items: center; gap: .4em; font: 600 var(--text-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); } .live-dot.on { color: var(--up); } .live-dot.on::before { background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); animation: live-pulse 2s infinite; } @keyframes live-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .flash-up { animation: flash-up 1.2s ease-out; } .flash-down { animation: flash-down 1.2s ease-out; } @keyframes flash-up { from { background-color: color-mix(in srgb, var(--up) 45%, transparent); } } @keyframes flash-down { from { background-color: color-mix(in srgb, var(--down) 45%, transparent); } } .map-tile.flash-up, .map-tile.flash-down { animation-name: tile-flash; } @keyframes tile-flash { from { filter: brightness(1.8); } } .toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 20; display: flex; flex-direction: column; gap: var(--space-2); max-width: min(420px, calc(100vw - 2rem)); } .toast { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; background: var(--bar-bg); color: var(--bar-fg); border: 1px solid var(--bar-accent); border-radius: var(--radius); padding: var(--space-3) var(--space-4); box-shadow: 0 8px 30px rgb(0 0 0 / .35); font-size: var(--text-sm); } .toast a { color: var(--bar-accent); font-weight: 600; } .toast button { margin-left: auto; background: none; border: 0; color: var(--bar-muted); font-size: 1.1rem; cursor: pointer; } .account .notif { position: relative; display: inline-flex; color: var(--bar-fg); } .account .notif .badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bar-accent); color: var(--bar-bg); font: 700 10px/16px var(--font-mono); text-align: center; } .bell-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--muted); } .bell-bar b { color: var(--accent); } .map-tile.ringing { background: color-mix(in srgb, var(--accent) var(--heat, 40%), var(--surface-2)); color: var(--accent-fg); transition: background .35s ease-out; } .map-tile.ringing .c { opacity: 1; font-weight: 600; } .replay-note { display: none; } .market-map.replaying + .map-legend .replay-note { display: inline; } .bell-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-4) var(--space-6); align-items: center; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); } .bell-card .kicker { font: 600 var(--text-xs) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .bell-card h2 { margin: var(--space-1) 0; font-size: var(--text-xl); color: var(--fg); text-transform: none; letter-spacing: 0; } .bell-card p { margin: 0 0 var(--space-2); font-size: var(--text-sm); } @media (max-width: 700px) { .bell-card { grid-template-columns: 1fr; } } .notif-list { list-style: none; margin: 0; padding: 0; max-width: 720px; } .notif-list li { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-2); } .notif-list li.unread { border-left: 3px solid var(--accent); } .notif-list .when { display: block; font: var(--text-xs) var(--font-mono); color: var(--muted); } .notif-list a { color: var(--fg); font-weight: 600; } .notif-list p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); } /* --- Players: welcome, account, profile (M6) ------------------------------------------ */ .welcome h1 { margin-top: var(--space-2); } .name-preview { margin: 0; font-size: var(--text-sm); color: var(--muted); } .name-preview b { color: var(--fg); font-family: var(--font-serif); font-size: 1.1rem; } .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); align-items: start; } .card.danger { border-color: color-mix(in srgb, var(--down) 45%, var(--line)); } .check { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); } .check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); } a.player { color: var(--fg); text-decoration: none; } a.player:hover { color: var(--accent); text-decoration: underline; } .page-head .dateline { margin-bottom: var(--space-1); } /* --- Onboarding (M8) ------------------------------------------------------------------ */ .tour { border: 1px solid var(--accent); border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); } .tour-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .tour-head h2 { margin: 0; font-size: var(--text-lg); color: var(--fg); text-transform: none; letter-spacing: 0; } .tour-steps { margin: var(--space-3) 0; padding-left: 1.3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-2) var(--space-6); } .tour-steps li { font-size: var(--text-sm); color: var(--muted); line-height: 1.55; } .tour-steps b { color: var(--fg); } .tour-foot { margin: 0; display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--text-sm); } .first-trade { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-3); } /* --- Motion ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tape, .live-dot.on::before, .flash-up, .flash-down { animation: none; } * { scroll-behavior: auto !important; transition: none !important; } }