/* Word on the Street -- front-end styles. Editorial newspaper feel: serif nameplate, big cover headline, drop cap, ruled section heads, a movers leaderboard, papers in flowing columns. All system fonts, zero dependencies. */ :root { --bg:#f6f5f1; --panel:#fffffe; --ink:#1a1c1e; --muted:#585d64; --faint:#8a8f96; --line:#e3e2db; --line-2:#cfcec6; --accent:#1b6b5f; --accent-weak:#ebf2ef; --up:#1b6b5f; --down:#b0572f; --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,ui-serif,serif; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"Cascadia Code","Segoe UI Mono","SF Mono",Menlo,Consolas,monospace; } /* Light is the default. Dark is opt-in via the toggle (data-theme on ), remembered in localStorage. We intentionally do NOT follow prefers-color-scheme, so light is the default for all. */ :root[data-theme="dark"] { --bg:#16171a; --panel:#1d1f23; --ink:#eae9e3; --muted:#a6abb2; --faint:#7b818a; --line:#2a2c31; --line-2:#3c3f45; --accent:#5cbaa8; --accent-weak:#1e2c29; --up:#5cbaa8; --down:#d98a60; } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap { max-width:960px; margin:0 auto; padding:0 28px; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; text-underline-offset:2px; } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .small { font-size:13px; color:var(--muted); } .hidden { display:none; } /* ---------- light/dark toggle ---------- */ .theme-toggle { position:fixed; top:14px; right:14px; z-index:20; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel); color:var(--muted); border:1px solid var(--line-2); border-radius:50%; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; transition:color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-weak); } .theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .theme-toggle svg { display:block; width:18px; height:18px; } .theme-toggle .icon-sun { display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display:block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display:none; } @media (max-width:760px) { .theme-toggle { top:10px; right:10px; } } /* ---------- nameplate ---------- */ .nameplate { text-align:center; padding:30px 0 16px; } .np-rule { height:2px; background:var(--ink); } .np-rule.thin { height:1px; background:var(--line-2); } .np-title { font-family:var(--serif); font-weight:700; font-size:clamp(33px,7vw,62px); letter-spacing:-.025em; line-height:1; margin:13px 0; } .np-standfirst { font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted); margin:12px 0 0; } .np-dateline { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:7px 0 0; } /* ---------- section nav (under the masthead, on every page) ---------- */ .topnav { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin:16px auto 0; padding:11px 0 0; max-width:560px; border-top:1px solid var(--line); } .topnav a { color:var(--muted); padding:5px 12px; border-radius:6px; } .topnav a:hover { color:var(--accent); } .topnav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .topnav a[aria-current="page"] { color:var(--ink); background:var(--accent-weak); } .notice { background:var(--accent-weak); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:8px; } .notice .wrap { padding:9px 28px; font-size:13.5px; color:var(--accent); text-align:center; } /* ---------- cover feature ---------- */ .cover { padding:38px 0 40px; border-bottom:1px solid var(--line-2); } .kicker { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); text-align:center; margin:0 0 16px; } .kicker .reset-link { cursor:pointer; } .kicker .reset-link:hover { text-decoration:underline; } .cover-head { font-family:var(--serif); font-weight:600; font-size:clamp(34px,6.6vw,62px); line-height:1.02; letter-spacing:-.015em; text-align:center; margin:0 auto 30px; max-width:17ch; } .cover-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:44px; align-items:start; } .lede { font-family:var(--serif); font-size:18.5px; line-height:1.52; color:var(--ink); margin:0; } .dropcap { float:left; font-family:var(--serif); font-weight:700; font-size:62px; line-height:.78; padding:6px 10px 0 0; color:var(--accent); } .pullstat { margin:22px 0 0; display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; } .ps-num { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:36px; font-weight:600; } .ps-num.up { color:var(--up); } .ps-num.down { color:var(--down); } .ps-num.flat { color:var(--faint); } .ps-lab { color:var(--muted); font-size:14.5px; } .cover-cap { font-size:12px; color:var(--faint); margin:9px 0 0; } /* ---------- chart ---------- */ .hero-chart { position:relative; } .hero-chart svg { width:100%; height:auto; display:block; } .chart-guide { position:absolute; top:0; width:1px; background:var(--line-2); pointer-events:none; opacity:0; transition:opacity .12s; } .chart-dot { position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; opacity:0; box-shadow:0 0 0 2px var(--panel); } .chart-tip { position:absolute; top:4px; transform:translateX(-50%); background:var(--panel); border:1px solid var(--line-2); border-radius:6px; padding:6px 9px; font-size:12px; line-height:1.5; color:var(--ink); pointer-events:none; opacity:0; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:3; } .chart-tip .tip-date { font-family:var(--mono); color:var(--faint); margin-bottom:2px; } .chart-tip .tip-row { display:flex; align-items:center; gap:8px; } .chart-tip .tip-val { font-family:var(--mono); font-variant-numeric:tabular-nums; margin-left:12px; } .hero-chart.active .chart-guide, .hero-chart.active .chart-dot, .hero-chart.active .chart-tip { opacity:1; } @media (prefers-reduced-motion: no-preference) { .hero-chart svg path.draw { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1s ease forwards; } @keyframes draw { to { stroke-dashoffset:0; } } } /* ---------- ruled section heads ---------- */ .feature { padding:34px 0; border-bottom:1px solid var(--line); } .rule-head { display:flex; align-items:center; gap:18px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 24px; } .rule-head::before, .rule-head::after { content:""; height:1px; background:var(--line-2); flex:1; } /* ---------- movers leaderboard ---------- */ .movers-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; } .col-label { font-family:var(--sans); font-size:13px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px; } .col-label.up { color:var(--up); } .col-label.down { color:var(--down); } .lboard { list-style:none; margin:0; padding:0; } .lb-row { display:grid; grid-template-columns:1.6em 1fr auto; align-items:baseline; gap:14px; padding:11px 8px; margin:0 -8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:6px; transition:background .12s; } .lb-row:last-child { border-bottom:none; } .lb-row:hover, .lb-row.active { background:var(--accent-weak); } .lb-rank { font-family:var(--serif); font-size:21px; color:var(--faint); } .lb-name { font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lb-name a { color:inherit; text-decoration:none; } .lb-name a:hover, .lb-name a:focus-visible { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .lb-delta { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; } .lb-delta.up { color:var(--up); } .lb-delta.down { color:var(--down); } /* ---------- briefs (papers in columns) ---------- */ .briefs { list-style:none; margin:0; padding:0; columns:2; column-gap:44px; } .brief { break-inside:avoid; padding:0 0 16px; } .brief-title { font-weight:500; font-size:15px; line-height:1.38; } .brief-meta { font-size:12.5px; color:var(--muted); margin-top:3px; } .brief-oa { color:var(--accent); white-space:nowrap; } .brief-oa:hover { text-decoration:underline; } .brief-cites { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--accent); margin-top:3px; } .empty { color:var(--faint); font-style:italic; } /* ---------- underserved niches (gap finder) ---------- */ .gap-list { list-style:none; margin:0; padding:0; } .gap-row { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding:11px 8px; margin:0 -8px; border-bottom:1px solid var(--line); } .gap-row:last-child { border-bottom:none; } .gap-row:hover { background:var(--accent-weak); } .gap-row a { color:var(--ink); text-decoration:none; font-size:15.5px; } .gap-row a:hover, .gap-row a:focus-visible { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .gap-vol { display:block; font-size:12.5px; color:var(--faint); margin-top:2px; } .gap-lift { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent); white-space:nowrap; } .cov { font-family:var(--serif); font-size:16px; color:var(--muted); max-width:68ch; margin:0 0 10px; } .dl-btn { display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.04em; padding:8px 14px; border-radius:7px; background:var(--accent); color:#fff; text-decoration:none; } .dl-btn:hover { text-decoration:none; opacity:.92; } .np-foot { padding:18px 0 48px; color:var(--muted); font-size:13px; text-align:center; } .np-foot .np-rule { margin-bottom:14px; } .byline { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:8px 0 0; } /* ---------- responsive ---------- */ @media (max-width:760px) { .cover-grid { grid-template-columns:1fr; gap:30px; } .movers-grid { grid-template-columns:1fr; gap:30px; } .briefs { columns:1; } } /* ---------- Explore (the Index) ---------- */ .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .ex-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 14px; } .ex-controls input[type=search] { flex:1 1 240px; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:8px 12px; } .ex-controls select { font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; } .ex-controls :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .seg { display:inline-flex; } .seg button { font-family:var(--mono); font-size:12px; padding:7px 11px; border:1px solid var(--line-2); background:var(--panel); color:var(--muted); cursor:pointer; } .seg button + button { border-left:none; } .seg button:first-child { border-radius:8px 0 0 8px; } .seg button:last-child { border-radius:0 8px 8px 0; } .seg button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--accent-weak); } .ex-reset { font-family:var(--mono); font-size:12px; color:var(--accent); background:transparent; border:1px solid var(--accent); border-radius:8px; padding:7px 12px; cursor:pointer; } .linklike { font:inherit; color:var(--accent); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; } .ex-count { font-size:12px; color:var(--faint); letter-spacing:.04em; margin:0 0 10px; } .ctable { width:100%; border-collapse:collapse; font-size:15px; } .ctable thead tr, .crow { display:grid; grid-template-columns:1fr 6.6em 7.6em 6.4em; align-items:center; gap:16px; } .ctable thead th { position:sticky; top:0; z-index:2; background:var(--bg); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 8px; border-bottom:1px solid var(--line-2); } .ctable th.c-share, .ctable th.c-chg { text-align:right; } .crow { border-bottom:1px solid var(--line); min-height:46px; padding:10px 8px; margin:0 -8px; } .crow:last-child { border-bottom:none; } .crow:hover, .crow:focus-within { background:var(--accent-weak); } .c-name a { color:var(--ink); text-decoration:none; } .c-name a:hover, .c-name a:focus-visible { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .c-src { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-left:8px; } .c-share, .c-chg { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); } .c-chg.up { color:var(--up); } .c-chg.down { color:var(--down); } .c-chg.flat, .c-chg .flat { color:var(--faint); } .spark { display:block; } .crow.is-hidden { display:none; } @media (max-width:720px) { .ctable thead { display:none; } .crow { grid-template-columns:1fr auto; row-gap:4px; padding:10px 0; margin:0; } .c-name { order:1; } .c-chg { order:2; } .c-spark { order:3; } .c-share { order:4; text-align:left; } } /* ---------- construct detail ---------- */ .facts { margin:0; } .fact { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); } .fact:last-child { border-bottom:none; } .fact dt { color:var(--muted); } .fact dd { margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; } .fact dd.up { color:var(--up); } .fact dd.down { color:var(--down); } .fact dd.flat, .fact dd .flat { color:var(--faint); }