/*
* The home page, from the design in new-html/insiderclue-home.html.
*
* Its own stylesheet and not part of style.css, because it is a different
* design language: Space Grotesk and JetBrains Mono against the panel's system
* stack, and its own set of tokens. Only the pages that want it load it, so the
* rest of the site pays nothing for it.
*
* Three things had to change coming out of the mockup, all of them the
* Content-Security-Policy in lib/Security.php, which allows no inline style and
* no inline script:
*
* - the fonts are served from assets/fonts/ rather than from Google. The nine
* woff2 subsets were in the bundle already; they are 112 KB in total and a
* browser fetches only the ranges it needs. Nothing on this page reaches a
* third party, which is also the answer the privacy page gives.
* - the fifty inline style attributes are the utility classes at the bottom.
* - the two bar widths are set by assets/home.js from a data attribute, the
* same way the panel's progress bars are.
*/
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-1.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-2.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-3.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-4.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-5.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/jetbrains-mono-6.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/space-grotesk-1.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/space-grotesk-2.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/space-grotesk-3.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
--bg:#F4F7FB; --panel:#FFFFFF; --panel-2:#F2F6FC; --line:#DDE6F3; --line-soft:#EBF1F9;
--ink:#16305C; --body:#4B5F7E; --muted:#5A6E8C;
--navy-900:#0A1730; --navy-800:#0C1D3C; --navy-700:#16305C; --blue-600:#1F4785; --blue-500:#4A7BC0; --blue-200:#9DC1EE;
--up:#156B47; --up-soft:#E4F4EC; --down:#C4444F; --down-soft:#FBE9EA;
/* The one warning colour on the site: the bar that says 2FA is off. */
--warn:#7A4B06; --warn-soft:#FFF1D6; --warn-line:#F0CE8E;
/*
* Gold, which on this site means one thing: a saved view is mailing you.
* The bell in the Views panel, the switch on the account page, the icon on
* the line that explains it. Close to the warning amber and deliberately
* not it -- a warning is about something being wrong and this is about
* something being yours.
*/
--gold:#E9B44C; --gold-soft:#FDF3DF; --gold-line:#C98F1E; --gold-ink:#7A5A12; --gold-deep:#5C3804;
--r-sm:8px; --r-md:14px; --r-lg:20px;
/*
* How tall the sticky header is: 12px of padding either side of a 69px logo,
* plus its border. Declared once because two things need it and they must not
* drift apart -- the header itself, and how far an anchor has to stop short
* so the section it points at is not underneath it.
*/
--header-h:88px; --footer-h:74px;
--font:'Space Grotesk',Helvetica Neue,Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
[data-theme="dark"]{
--bg:#0A1730; --panel:#0C1D3C; --panel-2:rgba(255,255,255,.035); --line:rgba(157,193,238,.20); --line-soft:rgba(157,193,238,.10);
--ink:#FFFFFF; --body:#A9BBD6; --muted:#7E93B4;
--up:#3FBF87; --up-soft:rgba(63,191,135,.14); --down:#E4707A; --down-soft:rgba(228,112,122,.14);
}
*{box-sizing:border-box}
/*
* Two backgrounds, and they are not the same one.
*
* `body` is the page: light, because everything below the hero is. `html` is
* what shows in the rubber-band when someone drags past the top or the bottom,
* and at the top that is right under a navy header on every page here — the
* dashboard, the screener, a company and the legal pages all open on the same
* dark band. A light strip appearing above it reads as a gap in the page.
*
* The bottom overscroll gets navy too, under a light footer. That is the trade,
* and it is the right way round: the top is where people drag, and navy under a
* footer with a rule above it reads as the page having ended rather than as
* something showing through.
*/
html{margin:0;background:var(--bg);overscroll-behavior:none}
body{margin:0;background:var(--bg);overscroll-behavior:none}
/*
* The footer stays at the bottom of the window on a short page.
*
* A screener filtered down to one row is half a screen of content, and the
* footer used to sit directly under it with the rest of the window empty
* below -- a rule and a pair of links floating in the middle of nothing.
*
* A flex column and `margin-top:auto` on the last child is the whole fix, and
* it needs no wrapper element: the body's children are the notice bar, the
* header, the sections and the footer, and auto margin on the last one absorbs
* whatever height is left over. On a long page there is none left over and
* nothing moves.
*
* 100dvh where it is understood, because on a phone 100vh is the window with
* the browser's own chrome counted in, which puts the footer just below the
* fold on exactly the pages this is meant to fix.
*/
body{font-family:var(--font);color:var(--body);display:flex;flex-direction:column;min-height:100vh;
padding-top:var(--header-h);padding-bottom:var(--footer-h)}
@supports (min-height:100dvh){body{min-height:100dvh}}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-500)}
[data-theme="dark"] a{color:var(--blue-500)}
[data-theme="dark"] a:hover{color:var(--blue-200)}
.mono{font-family:var(--mono)}
.wrap{max-width:1240px;margin:0 auto}
/* header — dark navy in BOTH themes */
/*
* The bar runs the full width and its contents line up with the page.
*
* The background has to reach both edges, so the element cannot be the 1240
* column. The padding is that column instead: on a wide screen every section
* sets 28px of its own and centres a 1240 wrap inside what is left, which puts
* the content's left edge at (100% - 1240) / 2, and this makes the logo start
* there and Sign out end opposite it. Under 1296 the wrap fills its section and
* both come back to 28.
*
* A calculation rather than an inner div, because an inner div would be a
* third thing to keep in step with the two that already have to agree.
*/
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
padding-block:0;padding-inline:max(28px, calc((100% - 1240px) / 2));
background:rgba(10,23,48,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(74,123,192,.28)}
.site-header .left{display:flex;align-items:center;gap:28px;min-width:0}
.site-header img{display:block;height:60px;width:auto}
.nav{display:flex;align-items:center;gap:30px;height:var(--header-h)}
.nav a{display:flex;align-items:center;height:100%;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:#A9BBD6}
.nav a:hover{color:#fff}
.nav a.active{font-weight:600;color:#fff;border-bottom-color:var(--blue-200)}
.header-right{display:flex;align-items:center;gap:12px}
.btn-cta{padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--navy-900);background:var(--blue-200)}
/* hero — dark navy in BOTH themes */
.hero{position:relative;overflow:hidden;padding:44px 28px 40px;
background:radial-gradient(1100px 460px at 22% -10%,rgba(74,123,192,.30),transparent 62%),linear-gradient(180deg,#0A1730,#0C1D3C)}
.hero .grid-overlay{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(157,193,238,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(157,193,238,.04) 1px,transparent 1px);
background-size:64px 64px}
/*
* The tape, and the mask over it. Faint, because it is wallpaper: the top
* of the band stays clear for the headline and the line is strongest along
* the bottom, where nothing is set.
*/
.hero-tape{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-tape .tape{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%}
.hero-tape::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,#0A1730 0%,rgba(10,23,48,.55) 42%,rgba(10,23,48,.05) 100%)}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.kicker{margin:0;font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#9DC1EE}
.eyebrow{align-self:flex-start;padding:6px 12px;border:1px solid rgba(157,193,238,.32);border-radius:100px;
font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue-200)}
h1{margin:0;font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-1.6px;font-weight:600;color:#fff;text-wrap:balance}
h1 em{font-style:normal;color:var(--blue-200)}
.hero-copy p{margin:0;max-width:46ch;font-size:17px;line-height:1.55;color:#A9BBD6;text-wrap:pretty}
.search{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;background:#fff;border:1px solid #C6D8F1;border-radius:var(--r-md);box-shadow:0 6px 20px rgba(22,48,92,.07)}
.search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--font);font-size:16px;color:var(--navy-700);padding:10px 0}
.search button{padding:12px 22px;border:0;border-radius:10px;background:var(--blue-600);color:#fff;font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer}
.search button:hover{background:var(--blue-500)}
.trending{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:#8FA4C4}
/* Links now, not buttons: an inline element would not take the padding. */
.chip-ghost{display:inline-block;text-decoration:none;padding:5px 14px;border-radius:100px;border:0;
background:rgba(74,123,192,.24);color:#C9DDF7;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:.3px;cursor:pointer}
.chip-ghost:hover{background:rgba(74,123,192,.38);color:#fff}
/* pulse card */
/* pulse
*
* It sits in the band, not on it: no panel, no border, no shadow. A white card
* here read as a second page starting inside the first, and the figures are
* the band's own subject rather than an aside from it. The rules between the
* rows are the only structure it needs.
*/
.pulse{display:flex;flex-direction:column;gap:16px;min-width:0}
.pulse-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#9DC1EE}
.pulse-top{display:flex;align-items:baseline;gap:12px}
.pulse-big{font-size:38px;font-weight:700;letter-spacing:-1px;line-height:1;color:#fff}
.pulse-top .u{font-size:12.5px;color:#8FA4C4}
.pulse-split{display:grid;grid-template-columns:1fr 1fr;gap:26px;
padding:16px 0;border-top:1px solid rgba(157,193,238,.16);border-bottom:1px solid rgba(157,193,238,.16)}
.pulse-v{font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.15}
.pulse-l{margin-top:2px;font-size:13px;color:#8FA4C4}
.pulse-foot{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pulse-foot .n{font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.15;color:#fff}
.pulse-foot .l{margin-top:2px;font-size:12.5px;line-height:1.35;color:#8FA4C4;max-width:150px}
/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
/*
* The fallback duration, for a browser that never runs home.js. 84s is right
* for the twenty items the page prints today; the script below replaces it with
* a figure worked out from the count, so the strip travels at the same speed
* whatever that count becomes.
*/
.ticker-track{display:flex;width:max-content;animation:tick 84s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:9px;padding:11px 20px;font-family:var(--mono);font-size:12px;white-space:nowrap;color:var(--body)}
.ticker-item .sym{font-weight:700;color:var(--ink)}
.ticker-item .sep{color:#B6C6DE}
/* sections */
section.block{padding:64px 28px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
h2{margin:0;font-size:clamp(26px,3vw,36px);letter-spacing:-1px;font-weight:700;color:var(--ink)}
.section-head p{margin:6px 0 0;font-size:15px;color:var(--muted)}
/* the day's strip
*
* One card: the day's heading over a rail of every company that moved on it.
* The rail scrolls, and the bar under it is styled to say so -- see the rule
* below, and the one further down where the card is given its width.
*/
.moves-card{display:flex;flex-direction:column;gap:16px;padding:20px 22px 22px;background:var(--panel);
border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 6px 18px rgba(22,48,92,.05)}
/*
* One line over the strip: what this is, which day it was, and how many
* companies that day came to, pushed to the far end.
*
* On a baseline rather than a centre line, so the 22px title and the 15px date
* sit on the same rule the way two words in a sentence do -- centred, the date
* floated a pixel high and read as a label stuck to the title.
*/
.moves-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.moves-head h2{font-size:22px;letter-spacing:-.5px}
.moves-head .date{font-size:15px;font-weight:600;color:var(--blue-600)}
.moves-head .more{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.moves-head a.more:hover{color:var(--blue-600)}
/*
* The bar under the strip is the scrollbar, and here it is meant to be seen:
* it is the one thing on the card that says how much of the day is still to
* the right of it. The system's own answer -- an overlay that appears while
* you scroll and fades -- tells that only to somebody who has already guessed
* there is more to scroll to.
*
* Blue rather than the system's grey, thin rather than the system's, and
* clear of the cards by the rail's own bottom padding -- which is where the
* gap comes from, because a scrollbar sits under the padding box and not
* under the content.
*
* Both spellings: `scrollbar-width` and `scrollbar-color` are the standard
* ones and the only ones Firefox takes, and the `::-webkit-` pseudo-elements
* are what Safari still needs. Styling either of them also turns the bar from
* an overlay that fades out into one that stays, which is the point.
*/
.moves-rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px}
.moves-rail::-webkit-scrollbar{height:6px}
.moves-rail::-webkit-scrollbar-track{background:#DCE7F6;border-radius:100px}
.moves-rail::-webkit-scrollbar-thumb{background:var(--blue-500);border-radius:100px}
.moves-rail::-webkit-scrollbar-thumb:hover{background:var(--blue-600)}
[data-theme="dark"] .moves-rail::-webkit-scrollbar-track{background:rgba(157,193,238,.14)}
/*
* Firefox, which has the standard properties and none of the pseudo-elements.
*
* They are in here and not on the rule above because in Chrome the two are not
* additive: from 121 on, `scrollbar-color` or `scrollbar-width` on an element
* switches it to the standard path and the `::-webkit-` rules above are
* ignored -- and the standard path on macOS keeps the overlay scrollbar, which
* is the one that fades out a second after it appears. That is what made the
* bar vanish: it was there, recoloured, for as long as the strip was moving
* and never afterwards.
*
* The test is the pseudo-element itself, which Firefox does not know, so the
* block applies exactly where the rules above cannot.
*/
@supports not selector(::-webkit-scrollbar) {
.moves-rail{scrollbar-width:thin;scrollbar-color:var(--blue-500) #DCE7F6}
[data-theme="dark"] .moves-rail{scrollbar-color:var(--blue-500) rgba(157,193,238,.14)}
}
.move{flex:1 1 0;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.move:hover{border-color:var(--blue-200)}
.move-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.move-name{margin-top:8px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:12px}
.move-foot .v{font-size:17px;font-weight:700;letter-spacing:-.4px;line-height:1.1}
.move-foot .u{margin-top:2px;font-size:11.5px;color:var(--muted)}
.move-foot .who{font-size:10.5px;line-height:1.5;color:var(--muted);text-align:right;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 6px 18px rgba(22,48,92,.05)}
.card:hover{border-color:var(--blue-200);box-shadow:0 12px 30px rgba(22,48,92,.10)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sym-badge{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--blue-600);padding:4px 8px;border-radius:6px}
.card-name{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:100px}
.pill.up{color:var(--up);background:var(--up-soft)} .pill.down{color:var(--down);background:var(--down-soft)} .pill.neutral{color:var(--blue-600);background:#E9F0FA}
.card .net{font-family:var(--mono);font-size:32px;font-weight:700}
.split{display:flex;height:6px;border-radius:100px;overflow:hidden;background:var(--panel-2)}
.split .b{background:var(--up)} .split .s{flex:1;background:var(--down)}
.card .note{font-size:13px;line-height:1.45;color:var(--body);text-wrap:pretty}
/* screener */
.screener{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);box-shadow:0 10px 34px rgba(22,48,92,.06)}
.screener-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{padding:7px 14px;border-radius:100px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;border:1px solid #D3E0F2;background:var(--panel);color:var(--body)}
.filter[aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.row{display:grid;grid-template-columns:minmax(200px,2.2fr) repeat(3,minmax(90px,1fr)) minmax(120px,1.1fr);gap:12px;align-items:center;padding:14px 22px;border-top:1px solid var(--line-soft)}
.row.head{padding:12px 22px;background:var(--panel-2);border-top:0;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.row:hover:not(.head){background:#F5F9FF}
[data-theme="dark"] .row:hover:not(.head){background:rgba(74,123,192,.10)}
.row .co{display:flex;align-items:center;gap:10px;min-width:0}
.tag{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--blue-600);border:1px solid #C6D8F1;padding:3px 7px;border-radius:5px}
.row .name{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{text-align:right;font-family:var(--mono);font-size:13px}
.num.up{color:var(--up)} .num.down{color:var(--down)} .num.net{font-weight:700;color:var(--ink)}
.sig{display:flex;justify-content:flex-end}
.sig .pill{text-transform:none;letter-spacing:0}
.screener-foot{padding:16px 22px;border-top:1px solid var(--line-soft);display:flex;justify-content:center;font-size:14px;font-weight:600}
/* ---------- what the search box offers while you type ----------
*
* Fixed rather than absolute, and a child of the body rather than of the form:
* the band on the front page clips what leaves it, and the box sits close
* enough to the bottom edge that a list of seven would show four. home.js puts
* it under whichever box is being typed in.
*
* Above the header, which is the only thing on the page that could be over it.
*/
.ac{position:fixed;z-index:60;max-height:min(52vh,330px);overflow-y:auto;
padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
box-shadow:0 18px 44px rgba(22,48,92,.20)}
.ac[hidden]{display:none}
.ac-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer}
.ac-item[aria-selected="true"]{background:#EDF3FC}
[data-theme="dark"] .ac-item[aria-selected="true"]{background:rgba(74,123,192,.20)}
/* One width, so the names start in the same place however long the ticker. */
.ac-item .tag{flex:none;min-width:3.6rem;text-align:center}
.ac-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:14px;font-weight:500;color:var(--ink)}
footer{position:fixed;bottom:0;left:0;right:0;z-index:50;height:var(--footer-h);
padding:0 28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
background:var(--navy-900);color:#B9CCE6}
footer nav{display:flex;gap:28px;font-size:13px}
footer a{color:#B9CCE6}
footer a:hover{color:#fff}
/* ---------- what the mockup did with inline style attributes ----------
*
* Fifty of them, and style-src 'self' allows none. Named for what they are
* rather than for what they set, so the markup still reads as markup.
*/
.stack { display:flex; flex-direction:column; gap:7px }
.stack-lg { display:flex; flex-direction:column; gap:10px; max-width:560px }
.inline-base { display:flex; align-items:baseline; gap:10px }
.inline-mid { display:flex; align-items:center; gap:10px; min-width:0 }
.spread { display:flex; justify-content:space-between; font-size:12px; color:var(--muted) }
.small-muted { font-size:12px; color:var(--muted) }
.mid-muted { font-size:13px; color:var(--muted) }
.up-ink { color:var(--up) }
.down-ink { color:var(--down) }
.flush { margin:0 }
/*
* `section.block` further up sets the padding for every section, and a type
* selector in front of a class beats a class on its own -- so this, written as
* `.tight-top`, lost every time and the section it is on kept the 64px it was
* meant to drop. On the front page that put 86px of nothing between the day's
* strip and the ranking under it. Named with the same shape as the rule it has
* to override, which is the only way it does.
*/
section.block.tight-top { padding-top:0 }
.num.left { text-align:left }
.num.right { text-align:right }
/*
* A sketch is a sketch, and says so above the fold rather than in a commit
* message. This is the one thing on the page that is not in the design.
*/
.sketch-bar {
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:8px 28px; background:#3B2A05; color:#FFD98A;
font-family:var(--mono); font-size:12px;
}
.sketch-bar a { color:#FFD98A; text-decoration:underline }
/* ---------- getting the table above the fold ----------
*
* The design is a poster: a 54px headline over a 72px hero, then 64px of air,
* then three cards, and only then the table. On a laptop the table starts
* below the fold, and the table is what the page is for — everything above it
* is an argument for reading it.
*
* So the hero and the cards get a compact variant rather than new values in
* the originals: the full-size version is the design as drawn, and this is a
* deliberate departure from it that can be turned off by deleting one word in
* the markup.
*
* Roughly 300px comes off, which is the difference between the first table row
* being visible on a 900px viewport and not.
*/
.hero.compact { padding: 54px 28px 48px }
.hero.compact .hero-inner { gap: 48px }
.hero.compact .hero-copy { gap: 24px }
.hero.compact h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -1.1px }
.hero.compact .hero-copy p { font-size: 15px; max-width: 52ch }
/*
* And the pulse, which was the tallest thing in the hero.
*
* Six figures in a panel of six hundred pixels: a 30px mono number over a
* 12px label, then a 12px bar, then three tiles with 12px of padding and a
* label that wraps to two lines. Every one of those is a step down here. The
* figures stay the largest thing in the panel, because that is what the panel
* is; what shrinks is the space around them.
*/
.hero.compact .pulse-big { font-size: 32px }
.hero.compact .pulse-v,
.hero.compact .pulse-foot .n { font-size: 22px }
/*
* Six across rather than three.
*
* 1240px of wrap less five 12px gaps is 196px a card, so the minimum is 180
* and auto-fit does the rest: six on a desktop, three on a tablet, one on a
* phone, without a media query.
*
* At that width the top row cannot hold a badge, a name and a pill side by
* side, so it stacks: badge and name on one line, the verdict under it. The
* word "net" beside the figure goes -- it was labelling a number that is
* already the largest thing on the card.
*/
/* The day's cards are .move now; see the strip above. */
.cards.compact .split { height: 5px }
/* And the section that holds them, which carried 64px top and bottom. */
section.block#moves { padding: 30px 28px 22px }
/* ---------- searching inside the table ----------
*
* Beside the filters rather than under them: they answer the same question
* from two directions -- which rows -- and the count at the far end reports on
* both together.
*/
.screener-find { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; max-width: 320px }
.screener-find input {
width: 100%; padding: 7px 12px; border: 1px solid #D3E0F2; border-radius: 100px;
background: var(--panel); color: var(--ink);
font-family: var(--font); font-size: 13px;
}
.screener-find input:focus { outline: 2px solid var(--blue-200); outline-offset: -1px }
.screener-find .clear { font-size: 18px; line-height: 1; color: var(--muted); padding: 0 4px }
/*
* The filters are links now, not buttons — the state is in the URL so a
* filtered table can be shared and bookmarked. They still have to look like
* the buttons the design drew.
*/
a.filter { display: inline-block; text-decoration: none }
/* Not the selected one: it is already filled, and this would grey it on hover. */
a.filter:not([aria-pressed="true"]):hover { border-color: var(--blue-200); color: var(--ink) }
/* ---------- the company cell is one link ----------
*
* Ticker and name go to the same page, so they are one target rather than two
* with a dead gap between them. The link carries no colour of its own: the tag
* and the name are already styled, and turning them blue would make the row
* look like a link among four columns that are not.
*/
.co-link { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none }
.co-link:hover .name,
.co-link:hover .card-name { color: var(--blue-600); text-decoration: underline }
.co-link:hover .tag { border-color: var(--blue-500); background: #EDF3FC }
[data-theme="dark"] .co-link:hover .tag { background: rgba(74,123,192,.18) }
/*
* The legal pair sits apart from the navigation beside it: same row, quieter,
* and pushed to the far end so the footer reads as "where to go" on one side
* and "what you agreed to" on the other.
*/
.footlegal { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto }
/* Nothing beside it any more, so it has nothing to be pushed away from. */
.footlegal.only { margin-left: 0 }
/*
* The band is navy in both themes, so these take the band's own ink rather
* than the page's: `--muted` is a grey mixed for a white background and on
* this one it was barely there, and the blue it went to on hover was darker
* still than the navy behind it.
*/
.footlegal a { font-size: 13px; color: #D7E3F5 }
.footlegal a:hover { color: #fff }
/* ---------- anchors clear the sticky header ----------
*
* Every sort, filter and search link ends in #table, because a reload that
* dropped the reader at the top of the page would make them scroll back down
* to the table they were already looking at. But an anchor puts its target at
* the very top of the viewport, and the top of the viewport is where the
* sticky header is -- so the filter bar landed underneath it and the table
* opened looking cut off.
*
* scroll-margin-top is the whole fix: it tells the browser to stop that much
* short. A little more than the header itself, so the section does not sit
* flush against it.
*/
/*
* Every section, not a list of them by name. The first version named #table and
* #moves; #moves then left with the cards, #lists arrived with the rankings,
* and the tab bar spent a commit hidden behind the header because the rule had
* not been told about it. A rule that has to be updated whenever a section is
* added is a rule that will be out of date.
*/
section[id] { scroll-margin-top: calc(var(--header-h) + 14px) }
/* ---------- sortable headings ----------
*
* The heading has to look like the heading it replaces rather than like a link
* dropped into a table head, which is the same problem style.css solves for the
* panel and the same answer.
*/
.row.head .sort { color: inherit; text-decoration: none; white-space: nowrap }
.row.head .sort:hover { color: var(--blue-600) }
.row.head .sort.on { color: var(--blue-600) }
.row.head .sort-mark { margin-left: .25em; font-size: .9em }
.row.head .sort-mark.idle { opacity: .28 }
.row.head .sort:hover .sort-mark.idle { opacity: .7 }
/*
* The window the table measures, lit up: the cards above it measure one month
* and this measures twelve, and a reader who does not notice that will read
* two right numbers as one wrong one.
*/
.window-chip {
padding: 2px 7px; border-radius: 100px;
background: var(--blue-600); color: #fff;
font-weight: 700; letter-spacing: .3px;
}
[data-theme="dark"] .window-chip { background: var(--blue-500); color: var(--navy-900) }
/* ---------- the pulse and the ticker are dark in both themes ----------
*
* Same reasoning the header is already written under: these two sit against
* the hero, the hero is navy whatever the theme is, and a white panel on it is
* a hole punched in the picture. In dark mode they were already right; this is
* what makes light mode agree with them.
*
* Colours only, and there are two left: the pulse now takes its own colours
* from the block above -- it is part of the band rather than a panel on it --
* so all that remains here is the pair of greens the amounts are set in, which
* are the design's dark-theme tokens rather than new ones.
*/
.pulse-v.up-ink { color: #3FBF87 }
.pulse-v.down-ink { color: #E4707A }
/*
* The strip runs the full width under the hero, so it is darker than the hero
* rather than lighter: a band that lifts would read as a third section between
* two, and it is a caption on the one above it.
*/
.ticker { background: #081326; border-top-color: rgba(157, 193, 238, .14); border-bottom-color: rgba(157, 193, 238, .14) }
.ticker-item { color: #A9BBD6 }
.ticker-item .sym { color: #fff }
.ticker-item .num.up { color: #3FBF87 }
.ticker-item .num.down { color: #E4707A }
.ticker-item .small-muted { color: #7E93B4 }
/* ---------- the rankings on the front page ----------
*
* Three lists, one at a time, as links rather than script: a tab in the query
* string can be linked to, bookmarked and shared, and a tab in JavaScript
* cannot. They borrow .filter from the screener because they are the same
* control doing the same job.
*/
.listtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px }
.tabcount {
margin-left: 8px; padding: 1px 7px; border-radius: 100px;
background: var(--panel-2); color: var(--muted);
font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.filter[aria-pressed="true"] .tabcount { background: rgba(255,255,255,.18); color: #fff }
/* Under the list now, so it reads left to right like the footnote it is. */
/*
* No measure on it. This is one sentence about how to read the table above it,
* not a paragraph -- 78ch broke it over two lines for the sake of a rule meant
* for prose. It still wraps when the window is narrower than it is.
*/
.listnote { margin: 12px 0 0; font-size: 13px; color: var(--muted) }
/*
* A ranked list is separate rows, not a table.
*
* Each row is its own bordered card with a gap under it, rather than lines in
* one container: twenty rows of a continuous table read as a spreadsheet, and
* these are twenty findings that happen to be ordered.
*
* One table inside the card, not twenty little cards: hairlines between the
* rows, a header over them, and the rank as a plain figure. The tinted bar
* behind each row went with the design -- it repeated the amount beside it and
* painted every row the colour of a status.
*
* The columns are all this sets. Everything else -- the inset, the rule
* between two rows, the hover, the face the header is set in -- comes from
* `.row` and `.row.head` above, which is what the third list in this card is
* already in: the day's decisions are a `.screener`, not a `.ranklist`.
*
* They had a set of their own, 1px tighter with the rules on the other edge
* and the header in the body face rather than the mono one. Two of the three
* tabs looked like one table and the third like another, and because the rows
* were not the same height the page was a different height on each tab -- so
* the anchor the tabs link to landed somewhere else every time and the view
* jumped. A row of a list you switch with a tab has to be the same row.
*/
.ranklist { display: flex; flex-direction: column }
.ranklist .row.rank {
grid-template-columns: 2.6rem minmax(0,1fr) 5rem 11rem 7.5rem 8rem;
}
.rankno { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-align: left }
.tickercell { font-size: 12.5px; color: var(--muted) }
.row.rank .co-link { gap: 8px }
.row.rank .name { font-weight: 500; color: var(--ink) }
.row.rank .co-link:hover .name { color: var(--blue-600) }
/* Room to breathe between a heading and the first row of what it names. */
/* The decisions table is wider and has no bar. */
/* The rank, the company, its ticker, who, what, how much, and when. */
.row.deals,
.row.head.deals { grid-template-columns: 2.6rem minmax(0,1fr) 5rem 13rem 7rem 7rem 7.5rem 7rem }
.row.deals .name { font-weight: 600; min-width: 0 }
.row.deals .name .small-muted { margin-left: 6px; font-weight: 400 }
/*
* The page's own title band, between the ticker and the lists. The hero says
* what the site is; this says what the section under it is.
*/
.intro-band { padding: 26px 28px 0 }
.intro-band h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.6px; color: var(--ink) }
.intro-band p { margin: 0; max-width: 62ch; font-size: 14px; color: var(--muted) }
/* ---------- the company page ----------
*
* From new-html/insiderclue-company.html, the second design bundle. Its eleven
* assets -- nine font subsets and two logos -- are byte-for-byte the ones the
* home page already brought in, so nothing new is served for it.
*
* Only the rules this stylesheet did not already have. Three of the bundle's
* were dropped rather than merged: `.pulse-stats div`, which this file has
* since narrowed to `> div` because the bare selector boxed every child;
* `.ticker-track`, whose duration is set from the item count in home.js; and
* `footer img`, for a logo the footer no longer carries.
*/
.co-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.co-title{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.co-title h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-1.4px;line-height:1}
.sym-lg{font-family:var(--mono);font-size:14px;font-weight:700;color:#0A1730;background:#9DC1EE;padding:5px 10px;border-radius:7px}
.pill-neg{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;padding:5px 11px;border-radius:100px;color:#FFD7DB;background:rgba(228,112,122,.22);border:1px solid rgba(228,112,122,.45)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--mono);font-size:12px;color:#8FA4C4}
.seg{display:flex;gap:6px;padding:5px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(157,193,238,.22)}
.seg button,.seg a{text-decoration:none;padding:8px 16px;border:0;border-radius:8px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:#A9BBD6}
.seg button[aria-pressed="true"],.seg a[aria-pressed="true"]{background:var(--blue-500);color:#fff}
/*
* Same as the audit below: the lines are on the cells, not in the gaps.
*
* Four figures at minmax(210px,1fr) fall to three columns and then two as the
* window narrows, and each of those leaves an empty slot. With the container
* painted in the line colour that slot was a pale block on the navy.
*/
/*
* The four figures sit in the band rather than in a boxed panel on it, the way
* the pulse does on the front page: hairlines between them instead of borders
* around them, because they are one set of figures and not four tiles.
*/
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;
padding:18px 0;border-top:1px solid rgba(157,193,238,.16);border-bottom:1px solid rgba(157,193,238,.16)}
.stat-strip .cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.stat-strip .k{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#9DC1EE}
.stat-strip .v{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.6px;color:#fff}
.stat-strip .v.neg{color:#E4707A}
.stat-strip .n{font-size:11.5px;line-height:1.4;color:#8FA4C4;text-wrap:pretty}
h3.sec{margin:0;font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
/*
* The card carries its own heading now, the way the front page's ranking does:
* a title floating above a bordered box looked like a caption for the whole
* page rather than for the table it names.
*/
.table-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);box-shadow:0 6px 18px rgba(22,48,92,.05)}
.sec-head.in-card{padding:20px 24px 14px}
.sec-head.in-card + .scroll-x .grid-people.head,
.sec-head.in-card + .scroll-x .grid-tx.head{border-top:1px solid var(--line-soft)}
.empty-note{margin:0;padding:0 24px 22px;color:var(--muted)}
.table-card .audit{border:0;border-radius:0;box-shadow:none}
.table-card .listnote{padding:0 24px 20px;margin:0}
.scroll-x{overflow-x:auto}
.grid-people,.grid-tx{gap:14px;align-items:center;padding:13px 24px;border-top:0;border-bottom:1px solid var(--line-soft);min-width:940px;display:grid}
.grid-people{min-width:1060px;grid-template-columns:minmax(150px,1.5fr) minmax(140px,1.5fr) minmax(90px,1fr) minmax(105px,1.1fr) minmax(95px,1fr) minmax(90px,1fr) minmax(95px,1fr) minmax(85px,.9fr)}
/* Insider first, then date -- the same reason the feed reads company first:
one company page is one company, so the name is what tells rows apart. */
.grid-tx{grid-template-columns:minmax(150px,1.4fr) minmax(110px,1fr) minmax(160px,1.6fr) minmax(120px,1.1fr) minmax(80px,.9fr) minmax(80px,.8fr) minmax(90px,.9fr)}
/*
* Eight columns, not seven.
*
* The bundle was drawn without "Of company", and that column is only there
* when the three ownership tests pass -- so the grid has two shapes and the
* markup says which with `.own`. Without this the eighth cell had no track to
* sit in and wrapped to a second line, taking the heading with it.
*/
.grid-people.own{grid-template-columns:minmax(140px,1.4fr) minmax(125px,1.3fr) minmax(88px,1fr) minmax(102px,1.1fr) minmax(92px,1fr) minmax(88px,.9fr) minmax(84px,.9fr) minmax(92px,1fr) minmax(78px,.8fr);min-width:1180px}
.grid-people.head,.grid-tx.head{border-top:0;border-bottom:1px solid var(--line-soft);padding:10px 24px;
background:#FBFCFE;font-family:var(--font);font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.grid-people:hover:not(.head),.grid-tx:hover:not(.head){background:#FBFCFE}
[data-theme="dark"] .grid-people:hover:not(.head),[data-theme="dark"] .grid-tx:hover:not(.head){background:rgba(74,123,192,.10)}
.who{font-size:14px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{font-size:13px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-plan{font-size:10px;color:#5A6E8C;border:1px solid var(--line);border-radius:5px;padding:2px 5px;white-space:nowrap}
.dash{color:#5A6E8C}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;font-size:13px;line-height:1.6;color:var(--muted)}
/*
* Inside a table card it has to bring its own gutter. The card carries no
* padding of its own, because everything else in it is a full-width table
* whose own cells do the insetting, so a paragraph dropped in sat against the
* edge and lost its first letter to the rounded corner.
*/
.table-card .notes-grid{padding:0 24px 22px}
/*
* The hairlines are drawn by the cells, not by the gaps between them.
*
* The bundle painted the container in the line colour and let a 1px gap show
* through, which is a neat trick for a grid that is always full. This one is
* not: the last row of the audit carries eleven or twelve cells depending on
* whether there were sales filed before the plan box existed, and the column
* count moves with the width, so there is usually a slot with nothing in it --
* and it came out as a grey block with a hard edge.
*
* A shadow draws the lines instead, on each cell's left and top -- and that
* side matters. Drawn on the right and underside, the cell beside an empty
* slot still fences it and the cell above still caps it, so the hole ends up
* outlined. On the left and top every line belongs to a cell that exists, so
* an empty slot has nothing drawn into it at all.
*
* The first row's top line and the first column's left line land directly
* inside the container's own border, which is the same colour, so they are the
* border rather than a second one beside it.
*/
.audit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.audit .cell{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;background:var(--panel);box-shadow:-1px 0 0 var(--line),0 -1px 0 var(--line)}
.audit .l{font-size:13px;color:var(--body);text-wrap:pretty}
.audit .v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.note-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.note-card .t{font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--blue-600)}
.note-card .b{font-size:13px;line-height:1.6;color:var(--body);text-wrap:pretty}
/* ---------- what the company design did with inline style attributes ----------
*
* A hundred and one of them, and style-src 'self' allows none. Named for the
* job rather than the declaration, so the markup still reads as markup. The
* colours are the bundle's own literals: #3FBF87 and #E4707A are the dark
* theme's up and down, used here on the navy hero where the light-theme pair
* would disappear.
*/
.on-navy { color: #A9BBD6 }
.on-navy-up { color: #3FBF87 }
.on-navy-down { color: #E4707A }
.ink-left { text-align: left; font-weight: 600; color: var(--ink) }
.plain-case { text-transform: none; letter-spacing: 0 }
.cell-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px }
.col { display: flex; flex-direction: column; gap: 4px }
.col-wide { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.head-split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px }
.head-mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px }
/* ---------- the screener ----------
*
* From new-html/insiderclue-screener.html, the third bundle. Ten assets, none
* of them new: the fonts and both logos are the ones already here.
*
* The three rules the bundle shares with the earlier two are left out again --
* `.pulse-stats div`, `.ticker-track` and `footer img` -- for the reasons at
* the top of the company block.
*/
.crumb{align-self:flex-start;font-size:13px;color:var(--blue-200)}
.scr-head{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.scr-head h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-1.4px;line-height:1}
.scr-head p{margin:0;max-width:58ch;font-size:15px;line-height:1.5;color:#A9BBD6;text-wrap:pretty}
.headline{display:flex;gap:1px;background:rgba(157,193,238,.18);border:1px solid rgba(157,193,238,.18);border-radius:14px;overflow:hidden}
.headline .cell{display:flex;flex-direction:column;gap:4px;padding:14px 22px;background:#0C1D3C}
.headline .k{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#7E93B4}
.headline .v{font-family:var(--mono);font-size:20px;font-weight:700;color:#fff}
.headline .v.up{color:#8FE3BC}
.headline .v.down{color:#FF9AA3}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/*
* The Filters button, and it is a button rather than a label.
*
* It used to be a white pill with a hairline border, which is what every
* quiet thing on this page looks like -- and since the panel started shipping
* folded, that pill was the only sign the page could be filtered at all.
* Nobody presses a thing that looks like a caption. Filled in the blue this
* site uses for something you press, with a chevron saying it opens.
*
* Open it goes to the navy every chosen option on the page goes to, so the two
* states are told apart by the same pair of colours the filters below use.
*/
.btn-filters{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:11px;
border:1px solid var(--blue-600);background:var(--blue-600);color:#fff;
font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
box-shadow:0 6px 16px rgba(31,71,133,.22)}
.btn-filters:hover{background:var(--blue-500);border-color:var(--blue-500)}
.btn-filters[aria-expanded="true"]{background:#192F53;border-color:#192F53;color:#C9DDF7;box-shadow:none}
.btn-filters .badge{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:100px;
background:rgba(255,255,255,.22);color:#fff}
.btn-filters[aria-expanded="true"] .badge{background:rgba(157,193,238,.22);color:#C9DDF7}
/* The chevron: down when the panel is folded, up when it is open. */
.btn-filters .caret{transition:transform .18s ease}
.btn-filters[aria-expanded="true"] .caret{transform:rotate(180deg)}
/*
* The two typed filters: a box, its unit, and a tick to apply it.
*
* The disk carries the whole affordance, so it is the only blue thing in the
* row and it sits against the field rather than under it. The word Apply was
* there before and had to be read, took a line of its own, and appeared twice
* a hundred pixels apart, which looked like an oversight rather than a pair.
*/
.num-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.num-row select,
.num-row input{padding:8px 9px;border:1px solid #D3E0F2;border-radius:9px;background:var(--panel);
color:var(--ink);font-family:var(--font);font-size:13px}
/*
* Narrow enough that the whole row fits the panel's column. Four characters is
* 1000, which is the ceiling on both of these filters, so nothing that can be
* typed is wider than the box it is typed into.
*/
.num-row input{width:4.2rem;text-align:right}
.num-row select:focus,.num-row input:focus{outline:2px solid var(--blue-200);outline-offset:-1px}
.num-unit{font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.num-go{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
border:1px solid var(--blue-600);border-radius:9px;background:var(--blue-600);
color:#fff;cursor:pointer}
.num-go:hover{border-color:var(--blue-500);background:var(--blue-500)}
.num-go:focus-visible{outline:2px solid var(--blue-200);outline-offset:1px}
.skin-none{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.skin-none code{font-family:var(--mono);font-size:11.5px;padding:1px 5px;border-radius:5px;
background:var(--panel-2);color:var(--ink)}
/* ---------- skin in the game ----------
*
* The chief executive's holding against his pay, over the table of people it
* is drawn from. A panel and not a row, because it is a conclusion and the
* thing under it is the evidence.
*
* Green when the five-times rule is cleared and amber when it is not, which is
* the one place on this site a figure is allowed to be judged. It is defensible
* because the threshold is stated in the sentence beside it rather than being
* the site's private opinion of what is enough.
*/
.skin{display:flex;align-items:center;gap:18px;margin:0 24px 18px;padding:16px 18px;
border:1px solid #CBE7D8;border-radius:14px;background:linear-gradient(180deg,#F1FAF5,#E9F6EF)}
.skin-x{flex:none;min-width:96px;text-align:center;font-family:var(--mono);font-size:26px;
font-weight:600;letter-spacing:-.5px;color:var(--up)}
.skin-say{min-width:0}
.skin-say p{margin:0;font-size:14px;line-height:1.5;color:var(--body)}
.skin-say strong{color:var(--ink)}
.skin-fine{margin-top:6px !important;font-size:12px;line-height:1.5;color:var(--muted)}
.skin-under{border-color:var(--warn-line);background:linear-gradient(180deg,#FFF8EC,#FFF1D9)}
.skin-under .skin-x{color:var(--warn)}
/*
* No figure, and a reason worth giving. Grey, because it is neither a pass nor
* a fail: there is nothing to weigh, which is a third answer and should not
* borrow the colour of either of the other two.
*/
.skin-na{border-color:var(--line);background:var(--panel-2)}
.skin-na .skin-say strong{color:var(--ink)}
/*
* The table below keeps its top rule. It used to inherit one from sitting
* directly after the heading, and this panel now stands between the two.
*/
.skin + .scroll-x .grid-people.head{border-top:1px solid var(--line-soft)}
@media (max-width:640px){
.skin{flex-direction:column;align-items:flex-start;gap:10px;margin:0 16px 16px;padding:14px}
.skin-x{min-width:0;text-align:left;font-size:24px}
}
/* ---------- saved views ----------
*
* A `details` dressed as a menu: the summary is the button, the panel hangs
* under it. Nothing here is script, which is why the thing opens, closes,
* takes the keyboard and survives a browser with JavaScript off.
*
* Filled in the palest blue, where Filters beside it is solid navy. It was
* white and grey once and nobody opened it, so it needed a colour; it was gold
* for a moment and that shouted, next to a button that is genuinely the more
* important of the two.
*
* Pale blue is the compromise: filled, so it reads as a control and not as a
* label, and quiet, so the eye still lands on Filters first. The gold stays
* where it earned its meaning -- the bell that says a view is mailing you.
*/
.views{position:relative;flex:none}
.btn-views{display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:11px;
border:1px solid var(--blue-200);background:#E9F1FD;color:var(--blue-600);
font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;list-style:none;
box-shadow:0 4px 12px rgba(31,71,133,.10)}
.btn-views::-webkit-details-marker{display:none}
.btn-views:hover{border-color:var(--blue-500);background:#DDEAFB}
.views[open] .btn-views{border-color:var(--blue-500);background:#D4E4FA;box-shadow:none}
.views[open] .caret{transform:rotate(180deg)}
.btn-views .caret{transition:transform .18s ease}
.btn-views .badge{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:100px;
background:rgba(31,71,133,.10);color:var(--blue-600)}
.views-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:45;width:296px;
display:flex;flex-direction:column;gap:12px;padding:14px;
background:var(--panel);border:1px solid var(--line);border-radius:14px;
box-shadow:0 18px 44px rgba(22,48,92,.20)}
.views-panel .fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--body)}
.views-panel .fine strong{color:var(--ink)}
.views-acts{display:flex;align-items:center;gap:12px}
.views-alt{font-size:13px;font-weight:600}
.views-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;
max-height:min(46vh,320px);overflow-y:auto}
.views-list li{display:flex;align-items:center;gap:6px}
.views-go{flex:1;min-width:0;padding:7px 9px;border-radius:8px;font-size:13.5px;font-weight:600;
color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.views-go:hover{background:#EDF3FC;color:var(--blue-600)}
.views-del{display:flex}
.views-del button{padding:4px 8px;border:0;border-radius:8px;background:transparent;
color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.views-del button:hover{background:var(--down-soft);color:var(--down)}
/*
* The bell beside a name is a state and not a control: it says this view is
* already mailing you. Amber because that is the colour the switch itself
* wears on the account page, and somebody who has seen one should recognise
* the other.
*/
.views-on{display:flex;flex:none;color:var(--gold-line)}
/* The line that says the bell exists, for the readers who have never seen one. */
.views-tip{display:flex;align-items:flex-start;gap:7px}
.views-tip svg{flex:none;margin-top:2px;color:var(--gold-line)}
.views-tip a{font-weight:600;color:var(--blue-600)}
.views-tip a:hover{text-decoration:underline}
/* The save box, under a rule: everything above it is what is already kept. */
.views-save{display:flex;gap:6px;padding-top:12px;border-top:1px solid var(--line-soft)}
.views-save input{flex:1;min-width:0;padding:8px 11px;border:1px solid #D3E0F2;border-radius:9px;
background:var(--panel);color:var(--ink);font-family:var(--font);font-size:13px}
.views-save input:focus{outline:2px solid var(--blue-200);outline-offset:-1px}
/* Nothing shares the row with it now, so it takes what the Filters button leaves. */
.row-search{flex:1 1 320px;min-width:220px;display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;border:1px solid #D3E0F2;border-radius:11px;background:#fff}
.row-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--font);font-size:14px;color:var(--ink)}
.count{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.count strong{color:var(--ink)}
.count .win{padding:3px 9px;border-radius:100px;background:var(--navy-700);color:#fff}
/*
* Four columns that end at four different heights, so they are told not to
* stretch to the tallest. A grid row is as tall as its tallest cell and the
* rest of the row is space nobody asked for -- which is what this panel was,
* with three columns stopping halfway and the count stranded at the foot.
*/
.filter-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;
align-items:start;padding:22px;border:1px solid #C6D8F1;border-radius:16px;background:#fff;
box-shadow:0 14px 40px rgba(22,48,92,.10)}
.filter-panel[hidden]{display:none}
.fgroup{display:flex;flex-direction:column;gap:10px}
.flabel{font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
/*
* The question mark beside a filter label, and what it says on hover.
*
* A span with a tabindex rather than a button, because a button inside these
* forms would submit them, and rather than a title attribute, because the
* browser's own tooltip takes a second to appear, wraps where it likes and
* cannot be styled. The text rides in an attribute and CSS reads it back with
* attr(), which keeps the markup and the wording in one place.
*
* Focus opens it too, so the keyboard and a phone both reach it: there is no
* hover on a touch screen, and a tap on something focusable is a focus. Plain
* focus and not focus-visible, which a browser withholds from a tap precisely
* because it is not keyboard navigation.
*/
.hint{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;margin-left:5px;vertical-align:middle;
border:1px solid var(--line);border-radius:50%;background:var(--panel);
color:var(--muted);font-family:var(--font);font-size:9px;font-weight:700;line-height:1;
letter-spacing:0;text-transform:none;cursor:help}
.hint:hover,.hint:focus{border-color:var(--blue-500);color:var(--blue-600);outline:none}
/*
* Anchored to one edge of the mark and not centred on it. Centred looks
* tidier and puts half the bubble to the left of a mark that is sometimes 40
* pixels from the edge of a phone, so it was off the screen at three of the
* four widths this panel is used at.
*/
.hint::after{content:attr(data-tip);position:absolute;z-index:60;
left:0;bottom:calc(100% + 9px);
width:min(250px,74vw);padding:10px 12px;border-radius:10px;
background:var(--navy-800);color:#DCE8FA;
font-family:var(--font);font-size:12px;font-weight:400;line-height:1.5;
letter-spacing:0;text-transform:none;text-align:left;text-wrap:pretty;
/* Real newlines in the attribute are kept; runs of spaces are not. */
white-space:pre-line;
box-shadow:0 12px 30px rgba(10,23,48,.30);
opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none}
.hint:hover::after,.hint:focus::after{opacity:1;visibility:visible}
/*
* One of them names three options and defines each, which is three sentences
* rather than one, and 250 pixels of it is a column of six words.
*/
.hint.wide::after{width:min(320px,74vw)}
/*
* And one of them lives in the table header, inside a card that clips what
* leaves it, so a bubble above the label would be cut in half. Fixed to the
* viewport escapes that: an overflow ancestor does not clip a fixed child, only
* one that has been made a containing block by a transform, and none here has.
*/
.hint.bar::after{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;
font-size:13px;box-shadow:0 -6px 30px rgba(10,23,48,.30)}
/* In the fourth column there is no room to the right, so those hang the other way. */
@media (min-width:1120px){
.hint.right::after{left:auto;right:0}
}
/*
* Below the four-column layout, the bubble goes to the foot of the screen
* instead of beside the mark.
*
* Measured rather than guessed: at 390 the seven marks sit between x=75 and
* x=278, and a 250 pixel bubble fits to the right of the first and to the left
* of the last and neither side of the ones in between. There is no anchor that
* works for all of them, because the labels are different lengths and the
* panel keeps refolding. Fixed to the viewport always fits, never covers the
* control it explains, and on a touch screen is where a reader is looking
* anyway.
*/
@media (max-width:1119px){
.hint::after{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;
font-size:13px;box-shadow:0 -6px 30px rgba(10,23,48,.30)}
}
.opt{padding:9px 14px;border-radius:9px;cursor:pointer;border:1px solid #D3E0F2;background:#fff;color:var(--body);font-family:var(--font);font-size:13px;font-weight:600}
.opt[aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.opt.wide{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;text-align:left}
.opt .n{font-family:var(--mono);font-size:11px;opacity:.75}
.opt-row{display:flex;flex-wrap:wrap;gap:6px}
input[type=range]{width:100%;accent-color:#1F4785}
.result-box{display:flex;flex-direction:column;justify-content:space-between;gap:14px;
margin-top:4px;padding:16px;border-radius:12px;background:var(--panel-2)}
.result-box .v{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--ink)}
.result-box .n{font-size:12px;line-height:1.45;color:var(--body);text-wrap:pretty}
.result-box .acts{display:flex;gap:8px}
.result-box button,.result-box .btn-reset{flex:1;padding:10px 14px;border-radius:9px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer}
/*
* Reset stands alone now, so it stops looking like the quiet half of a pair.
* It says what it will clear rather than "Reset", which is a word that could
* mean the search box, the sort or the whole page.
*/
.btn-reset{
display:flex;align-items:center;justify-content:center;gap:6px;
border:1px solid #D3E0F2;background:#fff;color:var(--blue-600);
text-decoration:none;text-align:center;
}
.btn-reset:hover{border-color:var(--blue-500);background:#F4F8FE;color:var(--blue-600)}
.btn-reset::before{content:"×";font-size:15px;line-height:1;opacity:.8}
[data-theme="dark"] .btn-reset{background:transparent;border-color:var(--line);color:var(--blue-200)}
/*
* Adding a company to the filter: a box and a button on one line, sized like
* the options above it rather than like the search box over the table -- it
* belongs to the panel and not to the toolbar.
*/
.co-add{display:flex;align-items:center;gap:6px}
.co-add input{flex:1;min-width:0;padding:8px 12px;border:1px solid #D3E0F2;border-radius:9px;
background:var(--panel);color:var(--ink);font-family:var(--font);font-size:13px}
.co-add input:focus{outline:2px solid var(--blue-200);outline-offset:-1px}
.btn-add{padding:8px 14px;border:1px solid #D3E0F2;border-radius:9px;background:var(--panel);
color:var(--blue-600);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer}
.btn-add:hover{border-color:var(--blue-500);background:#F4F8FE}
/* The ones already in it, above the box. */
.co-picked{margin-bottom:2px}
.fgroup .fine{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips[hidden]{display:none}
.chip{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 13px;border-radius:100px;border:1px solid #C6D8F1;background:#EAF1FB;color:var(--blue-600);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer}
.chip .x{font-size:14px;line-height:1;color:var(--muted)}
/*
* Turning what is in the search box into a company the filter holds, at the
* end of the box it applies to.
*
* Inside the box rather than beside it, because it is about what is in the
* box: a quiet pill on the same white, with a rule between it and the text so
* that it reads as the end of the field and not as a word in it.
*/
.row-add{display:flex;align-items:center;gap:6px;flex:none;margin-right:-6px;padding:6px 12px;
border:0;border-left:1px solid var(--line-soft);border-radius:0 8px 8px 0;background:transparent;
color:var(--blue-600);font-family:var(--font);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.row-add:hover{background:#F0F5FC}
.row-add-plus{font-size:15px;line-height:1;font-weight:700}
/*
* On a narrow screen the words take more of the box than the box has: at 390px
* they left the field 118px, which is not enough to read a placeholder in. The
* plus stays, the sentence is on the button's own label for anything that
* reads it aloud, and the panel still spells it out in full.
*/
@media (max-width:620px){
.row-add{padding:6px 10px}
.row-add-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* What the chips row says instead once the filter is full. */
.chip-full{border-color:var(--line);background:var(--panel-2);color:var(--muted);font-weight:500;cursor:default}
.clear-all{padding:6px 12px;border:0;background:transparent;color:var(--muted);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
.grid-scr{min-width:900px;display:grid;grid-template-columns:minmax(240px,2.4fr) minmax(110px,1fr) minmax(110px,1fr) minmax(120px,1.1fr) minmax(120px,1fr);gap:14px;align-items:center;padding:13px 22px;border-top:1px solid var(--line-soft)}
.grid-scr.head{border-top:0;padding:12px 22px;background:var(--panel-2);font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.grid-scr:hover:not(.head){background:#F5F9FF}
.grid-scr .co{display:flex;align-items:center;gap:11px;min-width:0}
.grid-scr .name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*
* An amount that opens the decisions behind it. It keeps the colour of the
* column it sits in -- green for bought, red for sold, the net's own ink --
* because the figure is the thing being read and a blue link would say the
* link matters more than the number. The underline appears on hover, which is
* where a reader is already asking whether it is one.
*/
.fig-link{color:inherit;text-decoration:none}
.fig-link:hover{text-decoration:underline}
.tbl-foot{padding:14px 22px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted)}
/*
* The filter panel opens with the page.
*
* The bundle ships it closed behind a Filters button, which is right when the
* button is a toggle in the browser. Here the filters are links and the panel
* is the page's controls: closed by default it would hide the one thing the
* screener is for behind a click, and the reader would have to discover that
* a window and a minimum even exist.
*
* The button stays, as a way to get the panel out of the way once the reader
* has what they want. `hidden` still does the hiding, so a browser with no
* script shows the panel open and never hides it, which is the right way round.
*/
.filter-panel { display: grid }
.btn-filters { cursor: pointer }
/*
* The bundle set these with style attributes; style-src is 'self'.
*/
.scr-head .col-wide { gap: 10px }
.fgroup .col { gap: 6px }
.range-ends { display: flex; justify-content: space-between }
.range-ends span { font-size: 10px; color: var(--muted) }
.sort-label { margin-top: 10px }
.block.screener-block { padding: 28px 28px 80px }
.block.screener-block > .wrap { display: flex; flex-direction: column; gap: 14px }
/* ---------- the legal pages ----------
*
* terms.php and privacy.php moved to this stylesheet with the rest of the
* public site, and their typography came with them: it was in style.css, which
* these pages no longer load. Copied rather than rewritten -- the wording was
* supplied and the shape it is set in is part of it.
*/
.legal{padding: 34px 40px; font-size: .94rem; line-height: 1.72;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: 0 6px 18px rgba(22,48,92,.05);}
.legal p,.legal ul,.legal ol,.legal table{max-width: 92ch;}
.legal h2{margin: 2.2rem 0 .7rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); font-size: 1rem;}
.legal h2:first-child{margin-top: 0; padding-top: 0; border-top: 0;}
.legal h3{margin: 1.4rem 0 .5rem; font-size: .92rem; font-weight: 650; color: var(--ink);}
.legal p{margin: 0 0 .85rem;}
.legal p > b:first-child{color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums;}
.legal ul{margin: 0 0 .95rem; padding-left: 1.15rem; color: var(--body);}
.legal li{margin-bottom: .35rem;}
.legal .legal-caps{font-size: .84rem; letter-spacing: .012em; line-height: 1.6; color: var(--body);}
/* This one is style.css's mobile override; it came out of its media query. */
@media (max-width: 760px){.legal{padding: 22px 18px; font-size: .9rem}}
/* ---------- the company page's own spacing ----------
*
* Straight out of the bundle's inline style attributes, which is where all of
* its vertical rhythm lived: the hero is not the generic .hero padding and the
* sections are not the generic .block padding, and every gap between the boxes
* is set on the wrapper rather than by the boxes' own margins.
*
* Reading them off the template rather than eyeballing them is the difference
* between a page that resembles the design and one that is it.
*/
.hero.co-hero { padding: 34px 28px 30px }
.hero.co-hero > .wrap { position: relative; display: flex; flex-direction: column; gap: 24px }
.co-head > .col-wide { gap: 12px }
.block.co-block { padding: 44px 28px 0 }
.block.co-block.last { padding-bottom: 80px }
.block.co-block > .wrap { display: flex; flex-direction: column; gap: 14px }
/*
* The two heading rows. They differ by one property and it matters: "By person"
* sits its count on the same baseline as the heading, and the transactions row
* has a pill and a row of filter buttons beside it, which centre instead.
*/
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px }
.sec-head.mid { align-items: center }
.sec-head .sec-count { font-size: 12px; color: var(--muted) }
.sec-title { display: flex; align-items: baseline; gap: 10px }
.sec-title .n {
font-family: var(--mono); font-size: 12px; color: #fff;
background: var(--blue-600); padding: 2px 8px; border-radius: 100px;
}
/* Prose in a notes grid carries no margin of its own; the grid does the spacing. */
.notes-grid p { margin: 0 }
.notes-grid.tight { gap: 16px }
/*
* The slider's scale, all six stops under the track rather than its two ends.
* The one in force is the only one that is not muted, which is what makes the
* row a scale rather than a caption.
*/
.range-ends span { font-size: 10px; color: var(--muted) }
.range-ends span.on { color: var(--blue-600); font-weight: 700 }
/* A window note beside a filter label, small enough not to become the label. */
.flabel .n {
margin-left: 6px; padding: 1px 6px; border-radius: 100px;
background: var(--panel-2); color: var(--muted);
font-family: var(--mono); font-size: 10px; font-weight: 600; cursor: help;
}
/* ---------- narrow screens: the forms and the notices ----------
*
* The bundle shipped no breakpoints at all: everything it draws reflows on its
* own, through auto-fit grids and flex-wrap, and for a form or a notice bar
* that holds -- all they need on a phone is a narrower inset.
*
* The pages made of figures needed more than an inset, and everything they
* needed is in "the phone" at the end of this file: the header, the footer,
* the hero, the sections and the tables. It is down there rather than here
* because half of what it overrides is declared below this point, and a media
* query carries no specificity of its own to make up the difference.
*/
@media (max-width: 760px) {
/* Three cells that would not break onto a second line. */
.headline { flex-wrap: wrap }
.headline .cell { flex: 1 1 30%; padding: 12px 14px }
}
/* ---------- bars fill rather than appear ----------
*
* Every bar on the site is drawn at zero and given its width by home.js on the
* next frame, so it grows into it. The ranked ones do it in sequence, which
* makes a list of twenty read as counted rather than flashed.
*
* The easing is a plain ease-out: a bar that overshoots and settles is telling
* the reader something the figure does not.
*/
/*
* 1.1s, which is half the speed this ran at first. The stagger in home.js is
* doubled with it: the two are one movement and changing either alone would
* leave the last bar starting before the first had finished, or long after.
*/
.bar .up, .split .b { transition: width 1.1s cubic-bezier(.22, .61, .36, 1) }
/*
* And nothing moves for anyone who has asked their system for less of it. The
* bars still get their widths -- home.js sets them at once instead of waiting
* -- so this removes the animation, not the measurement.
*/
@media (prefers-reduced-motion: reduce) {
.bar .up, .split .b { transition: none }
}
/* ============================ accounts ==================================
*
* The header's account corner, the bar that asks for a second factor, and the
* four pages behind them: register, sign in, account, sign out.
*
* They are the first pages on this site that are a form rather than a figure,
* and they are deliberately narrow. A sign-in that stretches to 1240px puts
* the label at one end of the screen and the field at the other.
*/
/* ---- the header's account corner (on navy, like everything up there) ---- */
.account{display:flex;align-items:center;gap:10px}
.acct-link{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;
font-size:14px;font-weight:500;color:#A9BBD6;background:rgba(74,123,192,.16)}
.acct-link:hover{color:#fff;background:rgba(74,123,192,.30)}
.acct-link.active{color:#fff;background:rgba(74,123,192,.34);font-weight:600}
/*
* Signed out there is no badge, so the pill would sit with 6px on the left and
* 12px on the right and look pushed. Even it up when it holds only words.
*/
.acct-link:not(:has(.acct-dot)){padding:7px 14px}
.acct-dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
background:var(--blue-500);color:#fff;font-size:13px;font-weight:700;line-height:1}
/* The name is a name: it can be long, and it is not the important half here. */
.acct-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-out{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--blue-200)}
.acct-out:hover{color:#fff}
.acct-join{padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600;color:var(--navy-900);background:var(--blue-200)}
.acct-join:hover{background:#fff}
/* ---------------------------- the warning bar --------------------------- */
/*
* Directly under the header and above everything else, so it is read before
* the page rather than found at the bottom of it. It is not sticky: it has to
* be seen, it does not have to follow anyone around.
*/
.warnbar{background:var(--warn-soft);border-bottom:1px solid var(--warn-line)}
.warnbar-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:11px 28px}
.warnbar p{margin:0;font-size:13.5px;color:var(--warn);line-height:1.45}
.warnbar strong{font-weight:600}
.warnbar-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:50%;background:var(--warn);color:var(--warn-soft);font-size:13px;font-weight:700;line-height:1}
/* Pushed to the far end, so it is where the eye lands after reading the line. */
.warnbar-go{margin-left:auto;flex:0 0 auto;padding:7px 14px;border-radius:8px;
font-size:13px;font-weight:600;color:#fff;background:var(--warn)}
.warnbar-go:hover{background:#5C3804}
/* ------------------------------ form pages ------------------------------ */
.authwrap{width:100%;max-width:470px;margin:0 auto;padding:52px 20px 72px}
.authhead{margin-bottom:22px}
.authhead h1{margin:0 0 8px;font-size:28px;line-height:1.2;color:var(--ink)}
.authhead p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.authcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px}
/*
* One field is a label wrapping its own control, so the whole thing is the
* click target and no `for`/`id` pair can drift apart.
*/
.field{display:block;margin-bottom:16px}
.field > span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink)}
.field input,.field select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);
border-radius:9px;background:var(--panel-2);font-family:var(--font);font-size:15px;color:var(--ink)}
.field select{appearance:none;background-image:none}
.field input:focus,.field select:focus{outline:2px solid var(--blue-200);outline-offset:-1px;background:var(--panel)}
.field small{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.btn-form{width:100%;padding:12px 18px;border:0;border-radius:9px;background:var(--blue-600);color:#fff;
font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer}
.btn-form:hover{background:var(--blue-500)}
.btn-form.ghost{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.btn-form.ghost:hover{background:var(--line-soft)}
.btn-form.danger{background:var(--down-soft);color:var(--down);border:1px solid #F0C7CB}
.btn-form.danger:hover{background:#F7D9DC}
/*
* A link wearing a button's clothes keeps the button's ink.
*
* `a:hover{color:var(--blue-500)}` near the top of this file is two selectors
* and a class rule here is one, so hovering an `` turned
* its label blue -- and `.btn-form:hover` turns the background the same blue.
* The text did not change colour, it disappeared: blue on blue, on the button
* somebody was about to press.
*
* Stated for each variant rather than once, because the three of them do not
* share an ink, and stated as `:hover` too so the rule wins on specificity
* rather than on being further down the file.
*/
a.btn-form, a.btn-form:hover{color:#fff}
a.btn-form.ghost, a.btn-form.ghost:hover{color:var(--ink)}
a.btn-form.danger, a.btn-form.danger:hover{color:var(--down)}
/*
* The same trap, in the other three places a link is painted as a button. The
* amber notice bar's action was going blue on dark brown; the two pale-blue
* account buttons were losing their navy.
*/
a.warnbar-go, a.warnbar-go:hover{color:#fff}
a.acct-join, a.acct-join:hover{color:var(--navy-900)}
a.btn-cta, a.btn-cta:hover{color:var(--navy-900)}
/* A row of buttons that share the width rather than each taking all of it. */
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn-form{width:auto;flex:1 1 160px}
.authalt{margin:18px 0 0;text-align:center;font-size:14px;color:var(--body)}
.authalt a{font-weight:600;color:var(--blue-600)}
.authalt a:hover{text-decoration:underline}
.flash{margin:0 0 18px;padding:11px 14px;border-radius:9px;font-size:14px;line-height:1.5}
.flash.error{background:var(--down-soft);border:1px solid #F0C7CB;color:var(--down)}
.flash.ok{background:var(--up-soft);border:1px solid #BFE3D0;color:var(--up)}
.flash.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn)}
/* ----------------------------- account page ----------------------------- */
.acctwrap{width:100%;max-width:840px;margin:0 auto;padding:44px 20px 72px}
/* ---------- the account's own menu ----------
*
* A column of settings on the left and one of them open on the right, which
* is the shape the panel next door has had all along and the shape anybody
* who has ever changed a password expects. The page was five blocks down one
* column, which made the two that matter -- the address and the second factor
* -- the third and fourth thing you scrolled past.
*
* The chosen entry takes the navy every chosen thing on this site takes: the
* ranking's tabs, the screener's options, the filter chips. One colour for
* "this one", wherever the reader meets it.
*/
.acctwrap.acct-cols{max-width:1000px;display:grid;grid-template-columns:246px minmax(0,1fr);
gap:28px 34px;align-items:start}
.acct-head{grid-column:1 / -1}
.acct-menu{display:flex;flex-direction:column;gap:4px;position:sticky;
top:calc(var(--header-h) + 20px)}
.acct-menu-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;
font-size:14px;font-weight:600;color:var(--body);line-height:1.3}
.acct-menu-item:hover{background:var(--panel-2);color:var(--ink)}
.acct-menu-item[aria-current]{background:#192F53;color:#C9DDF7}
.acct-menu-item[aria-current]:hover{background:#192F53;color:#C9DDF7}
/* The last one is not like the others, and says so before it is opened. */
.acct-menu-item.grave{margin-top:10px;padding-top:15px;border-top:1px solid var(--line-soft);
border-radius:0 0 10px 10px;color:var(--muted)}
.acct-menu-item.grave:hover{color:var(--down);background:var(--down-soft)}
.acct-menu-item.grave[aria-current]{color:#FFD7DB;background:#7A2230}
/* What needs dealing with: the same two things the notice bars nag about. */
.acct-menu-item .dot-warn{flex:none;margin-left:auto;width:8px;height:8px;border-radius:50%;
background:var(--warn)}
.acct-menu-item[aria-current] .dot-warn{background:#F0C36B}
/* ---------- what this account is allowed ----------
*
* Two meters instead of a sentence. "2 of 10" is a fact somebody checks at a
* glance and then stops reading; a sentence about it has to be read to the end
* before it says the same thing.
*
* Pips and not a percentage, while the numbers are small. Ten slots drawn as
* ten slots is exact -- you can count what is left without counting -- and a
* bar at twenty per cent is a picture of a fraction nobody asked for. Above
* two dozen the pips stop being countable and a proportional bar takes over,
* with the figure beside it carrying the precision from there.
*
* The bells are gold, because gold means one thing on this site: a saved view
* is mailing you. The same colour as the bell in the row below it.
*
* No width in the markup: style-src is 'self' with no 'unsafe-inline', so the
* bar is sized by a class in tens rather than by a style attribute that would
* silently not apply.
*/
.allows{margin:18px 0 2px;padding:0 0 16px;border-bottom:1px solid var(--line-soft)}
.allowance{display:flex;gap:26px;flex-wrap:wrap}
.allow{flex:1 1 190px;min-width:0}
.allow-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 7px}
.allow-what{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.allow-count{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.allow-count b{font-size:15px;font-weight:600;color:var(--ink)}
.allow-track{display:flex;gap:3px;height:8px}
.allow-track.bar{display:block;border-radius:999px;background:var(--line-soft);overflow:hidden}
.allow-fill{display:block;height:100%;border-radius:999px;background:var(--blue-500)}
.pip{flex:1 1 0;min-width:3px;border-radius:999px;background:var(--line-soft)}
.pip.on{background:var(--blue-500)}
.allow-bells .pip.on,.allow-bells .allow-fill{background:var(--gold)}
.allow-note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.p0{width:0}.p10{width:10%}.p20{width:20%}.p30{width:30%}.p40{width:40%}.p50{width:50%}
.p60{width:60%}.p70{width:70%}.p80{width:80%}.p90{width:90%}.p100{width:100%}
/* ---------- the saved views on the account page ----------
*
* A row is what it is called, what it is doing, and the two things that can be
* done to it. The bell is a button and not a checkbox: it acts the moment it
* is pressed, and a checkbox that saves itself is a checkbox somebody has to
* be told saved itself.
*/
.viewlist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.viewrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line-soft)}
.viewrow:first-child{border-top:0}
.viewrow-what{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.viewrow-name{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewrow-name:hover{color:var(--blue-600);text-decoration:underline}
.viewrow-note{font-size:12.5px;color:var(--muted)}
.bell{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;cursor:pointer;
border:1px solid var(--line);background:var(--panel);color:var(--muted);
font-family:var(--font);font-size:12.5px;font-weight:600}
.bell:hover{border-color:var(--blue-500);color:var(--blue-600)}
/* On is the state worth seeing across the room: filled, in the warm colour the
* rest of the site uses for "this is live". */
.bell.on{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-ink)}
.bell.on:hover{border-color:var(--gold-line);color:var(--gold-deep)}
.viewrow-del button{padding:4px 9px;border:0;border-radius:8px;background:transparent;
color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.viewrow-del button:hover{background:var(--down-soft);color:var(--down)}
.acct-main{min-width:0}
.acct-main .acct-block:last-child{margin-bottom:0}
.acct-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
padding:26px 24px;margin-bottom:20px}
.acct-block > h2{margin:0 0 6px;font-size:19px;color:var(--ink)}
.acct-block > .lead{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--body)}
/* The read-only half: what the account is, before anything can be changed. */
.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:0 0 4px;
padding:0 0 20px;border-bottom:1px solid var(--line-soft)}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{margin:0;font-size:14.5px;color:var(--ink);word-break:break-word}
.kv dd .fine{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.acct-block .field:first-of-type{margin-top:20px}
/* The state of the second factor, said in one line before any button. */
.state{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 13px;border-radius:999px;
font-size:13px;font-weight:600}
.state.on{background:var(--up-soft);color:var(--up)}
.state.off{background:var(--warn-soft);color:var(--warn)}
/* The enrolment step: a QR beside the secret, because one of them always fails. */
.enrol{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-bottom:20px}
.enrol .qr{flex:0 0 auto;padding:10px;background:#fff;border:1px solid var(--line);border-radius:10px}
.enrol .qr svg{display:block}
.enrol-side{flex:1 1 240px;min-width:0}
.enrol-side p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--body)}
.secret{display:block;padding:10px 12px;border:1px dashed var(--line);border-radius:9px;background:var(--panel-2);
font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--ink);word-break:break-all}
/* The ten codes, shown exactly once. */
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;margin:16px 0 0;padding:16px;
list-style:none;background:var(--panel-2);border:1px solid var(--line);border-radius:10px}
.codes li{font-family:var(--mono);font-size:14px;letter-spacing:1px;color:var(--ink)}
.acct-block.grave{border-color:#F0C7CB}
/*
* The other notice that can sit under the header: an address waiting to be
* confirmed. Blue rather than amber, because it is the site waiting on
* somebody and not somebody carrying a risk -- and because two amber bars
* would read as one alarm and be skipped together.
*/
.warnbar.info{background:#EAF2FD;border-bottom-color:#C3D9F5}
.warnbar.info p{color:var(--blue-600)}
.warnbar.info .warnbar-mark{background:var(--blue-600);color:#EAF2FD}
.warnbar.info .warnbar-go{background:var(--blue-600)}
.warnbar.info .warnbar-go:hover{background:var(--navy-700)}
/* ---------- the transactions feed ----------
*
* The same row grid as the company page's transaction list, one column wider
* and with different questions in the columns. Built as repeated grids rather
* than one big one so a row can be hovered, striped and bordered as a row.
*/
.grid-feed{gap:12px;align-items:center;padding:13px 20px;border-top:1px solid var(--line-soft);
min-width:1220px;display:grid;
grid-template-columns:minmax(200px,1.9fr) minmax(118px,.9fr) minmax(150px,1.5fr) minmax(140px,1.4fr)
minmax(162px,1.5fr) minmax(90px,.9fr) minmax(96px,.95fr) minmax(96px,.9fr)}
.grid-feed.head{border-top:0;padding:12px 20px;background:var(--panel-2);font-family:var(--mono);
font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.grid-feed:hover:not(.head):not(.none){background:#F5F9FF}
[data-theme="dark"] .grid-feed:hover:not(.head):not(.none){background:rgba(74,123,192,.10)}
/*
* The date on one line. It is three words in a mono face and the column beside
* it took the room it had spare: broken over two lines it makes every row in
* the table twice as tall to say nothing more.
*
* By class and not by position. It used to be `.mono:first-child`, which was
* true only while the date led the row; it does not, and a rule that quietly
* stops matching when a column moves is the kind that is found months later by
* wondering why the rows got taller.
*/
.when{white-space:nowrap}
/*
* The company first, because it is what the row is about.
*
* The date led for as long as this was a feed -- newest first, and the date is
* how you read a feed. But every row on screen carries the same two or three
* dates, so the first column repeated itself while the thing a reader was
* actually scanning for sat behind it. On a phone, where this table scrolls
* sideways, the date was the only column visible without scrolling.
*
* The column was the ticker badge alone with the name hidden in a tooltip,
* which is no name at all on a phone and a riddle anywhere else. Ticker and
* name now share one link, and the name is the part that gives way when the
* column is squeezed -- a clipped name is still a name, a clipped ticker is a
* different company.
*/
.grid-feed .co-link{gap:9px}
.grid-feed .sym-badge{flex:none;white-space:nowrap}
.grid-feed .name{font-size:14px;font-weight:600;color:var(--ink);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*
* The person leads to their company too. There is no page for a person, and
* the one thing a reader wants after "who is this" is the rest of what
* happened at that company, so the name is a link and looks like the ink
* around it until it is hovered.
*/
.who-link{color:inherit;text-decoration:none}
.who-link:hover{color:var(--blue-600);text-decoration:underline}
/* The empty state has to span the whole grid rather than sit in column one. */
.grid-feed.none{display:block;min-width:0;padding:28px 20px;text-align:center;color:var(--muted);font-size:14px}
/* ---------- the column that does not move ----------
*
* Both of these tables are wider than the window on purpose -- eight columns of
* one decision, seven of another -- so on a phone they are read by sliding
* sideways. The column that says *which row you are on* is the one that slides
* away first, and four screens to the right every row looks the same.
*
* So the first column is pinned and the rest moves under it: the company on the
* feed, the person on a company page, which in both cases is the answer to
* "whose row is this".
*
* Three things a sticky cell needs that an ordinary one does not.
*
* A ground of its own. The columns pass *behind* it, so a transparent cell
* shows them through -- and that ground has to follow the row through head,
* body and hover, which is what the four rules under it are for.
*
* The row's left gutter, moved into the cell. The padding belongs to the row,
* and once the row has scrolled the pinned cell would sit flush against the
* edge of the card. The negative margin takes the gutter and the padding gives
* it back, so the column keeps its margin wherever it is.
*
* An edge, but only once there is something behind it. A shadow on a table
* that fits is a shadow over nothing, and at 1240px these tables do fit. A
* scroll-driven animation is the one way to say "only while scrolled" without
* a line of script; where it is not supported the divider alone does the job.
*/
.grid-feed > .pin,
.grid-tx > .pin,
.grid-people > .pin{
position:sticky;left:0;z-index:1;
background-color:var(--panel);
border-right:1px solid var(--line-soft);
}
.grid-feed > .pin{margin-left:-20px;padding-left:20px}
.grid-tx > .pin,
.grid-people > .pin{margin-left:-24px;padding-left:24px}
/*
* The head's tint, laid over an opaque ground rather than used as one.
*
* --panel-2 is a solid grey in light and a 3.5% white in dark, and a sticky
* cell painted in the dark one is a window: the heading read COMPANYINSIDER
* with the next column showing straight through it. Two layers say the same
* thing in both themes -- the panel's own colour underneath, the tint on top.
*/
.grid-feed.head > .pin,
.grid-tx.head > .pin,
.grid-people.head > .pin{
background-color:var(--panel);
background-image:linear-gradient(var(--panel-2),var(--panel-2))}
.grid-feed:hover:not(.head):not(.none) > .pin{background-color:#F5F9FF}
.grid-tx:hover:not(.head) > .pin,
.grid-people:hover:not(.head) > .pin{background-color:#FBFCFE}
/* Dark keeps the row's own translucent blue, laid over an opaque ground rather
than over whatever is scrolling past. */
[data-theme="dark"] .grid-feed:hover:not(.head):not(.none) > .pin,
[data-theme="dark"] .grid-tx:hover:not(.head) > .pin,
[data-theme="dark"] .grid-people:hover:not(.head) > .pin{
background-color:var(--panel);
background-image:linear-gradient(rgba(74,123,192,.10),rgba(74,123,192,.10))}
@supports (animation-timeline:scroll(inline nearest)){
.grid-feed > .pin,
.grid-tx > .pin,
.grid-people > .pin{
animation:pin-edge linear both;
animation-timeline:scroll(inline nearest);
animation-range:0 28px}
@keyframes pin-edge{
from{box-shadow:0 0 0 rgba(22,48,92,0)}
to{box-shadow:12px 0 14px -10px rgba(22,48,92,.30)}}
}
/*
* What the decision was, said in the row rather than only in the colour of a
* figure. Green and red are for the two a person chose to make this week; a
* sale a broker executed off a plan adopted months ago is a peer of them in
* shape and grey in colour, which is the same grading the company page's rows
* are under -- the scheduled machinery is faded rather than absent.
*/
.badge-plan.is-buy{color:var(--up);border-color:#BFE3D0;background:var(--up-soft)}
.badge-plan.is-sell{color:var(--down);border-color:#F0C7CB;background:var(--down-soft)}
.badge-plan.is-plan{color:var(--muted);border-color:var(--line);background:var(--panel-2)}
/*
* How many filed lines were folded into the row. A sale that filled in ten
* tranches at ten prices was one order, and this is the only place that says
* so -- without it the averaged price looks like a price somebody got.
*/
.tranche{font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:4px}
/*
* Half their position or more. The threshold is where the figure stops being
* housekeeping and starts being a decision, and it is the same 50 the filter
* offers, so a reader who set it sees why each row qualified.
*/
.stake-big{font-weight:700;color:var(--ink)}
.pager{display:flex;align-items:center;gap:10px}
.pager .opt{padding:5px 11px}
/* ---------- a window too short for two fixed bands ----------
*
* At this height the header and the legal strip together take a quarter of
* what is left to read in, so they go back to scrolling with the page. Last
* in the file because it has to win over the two rules above.
*/
@media (max-height:620px){
.site-header,footer{position:static}
body{padding-top:0;padding-bottom:0}
}
/* ---------- the front page's ranking card ----------
*
* The table had a 340px column beside it for a while: a ring showing how the
* window split between buying and selling, and three counts under it. Both
* are gone -- the split is the two amounts the hero already prints, and the
* table is what the page is for, so it has the width back.
*/
.list-card{padding:0;gap:0;overflow:hidden}
.card-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 16px}
.card-head .ico{flex:0 0 32px;height:32px;display:grid;place-items:center;color:var(--blue-600)}
.card-head h2{font-size:20px;letter-spacing:-.4px}
.card-head .sub{margin-top:1px;font-size:13px;color:var(--muted)}
.list-card .listtabs{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 16px}
.list-card .ranklist,.list-card .screener{border:0;border-radius:0;box-shadow:none}
.list-card .listnote{padding:0 24px 20px;margin:0}
/*
* A row is the same height whichever of the three lists is open.
*
* The tabs are links with `#lists` on the end, so the browser puts the top of
* the section 102px down the window -- and on a laptop this page is only just
* tall enough to scroll that far. A list 80px shorter than the one before it
* cannot, so it stopped short and the card landed 80px further down than it
* had been on the tab the reader clicked from. The whole screen jumped.
*
* 51px is what a row with a badge in it comes to: 14px of padding either side
* of an 11px label in a pill. The ranking's rows are plain figures and came to
* 47, so they are held open to the same. Twenty rows either way, one header,
* and the same footnote on one line: the three are now the same height to the
* pixel and the tabs land in the same place.
*/
.list-card .row:not(.head){min-height:51px}
/*
* The rail holds every company that moved that day, so a card is a size rather
* than a share of the row: at `flex: 1 1 0` thirty of them came to forty
* pixels each. 200px is what the design drew one at, and the rest scroll.
*/
.moves-rail{flex:1;min-width:0}
.move{flex:0 0 200px;max-width:none}
/* ---------- the transactions band ----------
*
* Plain navy: no overlay and no tape. The three counts sit on the band the way
* the pulse does on the front page, and the kicker over the title is the same
* one the hero uses.
*/
.hero.plain .grid-overlay,.hero.plain .hero-tape{display:none}
.hero .kicker{margin:0 0 12px}
.totals{display:flex;flex-direction:column;justify-content:center;gap:14px}
.totals-row{display:flex;gap:38px}
.totals .v{font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.1;color:#fff}
.totals .v.up-ink{color:#3FBF87}
.totals .v.down-ink{color:#E4707A}
.totals .l{margin-top:2px;font-size:12.5px;color:#8FA4C4}
/* ---------- one colour for a chosen option ----------
*
* The navy the pills in the hero come out at, which is where the button colour
* on this site comes from: pale blue on the dark band, this navy on white.
* Filters, list tabs and the screener's buttons all take it, so a selection
* looks the same wherever the reader meets one.
*/
.opt[aria-pressed="true"],
.filter[aria-pressed="true"]{background:#192F53;border-color:#192F53;color:#C9DDF7}
.opt[aria-pressed="true"] .n,
.filter[aria-pressed="true"] .tabcount{color:#9DC1EE}
/* ============================== the phone ===============================
*
* The first pass at a narrow screen is the block up by the filter styles, and
* it fixed the two things that were plainly broken at the time: the header's
* fetched-on date printing through the menu, and the desktop's inset on the
* hero. Everything else was left to reflow on its own, and on a real phone
* most of it did not.
*
* This is the rest, and it is the end of the file rather than up there for two
* reasons. Half of what it overrides -- the day's strip, the two columns, the
* ranking's grid -- is declared below that block, and a media query carries no
* specificity of its own, so the same selector further down the file wins
* however narrow the screen is. And the other half had never applied at all:
* the inset the first pass set on `.block` was written for a selector nothing
* on the site uses, because the base rule is `section.block` and the three
* variants add an ID or a second class on top of that.
*
* Written against a 390px viewport, which is the middle of the phones in use,
* and checked at 320 and 430 either side of it, and at 761 to see that the
* desktop it hands back to is still the design.
*/
@media (max-width: 760px) {
/* --------------------------- the account pages ------------------------
*
* These lived beside the other phone rules two thirds of the way up this
* file, and did nothing at all: every selector in them -- .acctwrap,
* .acct-menu, .acct-block, .authcard, .warnbar-in, .codes -- is declared
* below that point, and a media query carries no specificity of its own to
* make up the difference. So the account page kept its 246px sidebar on a
* 390px screen and squeezed the panel beside it into a column of single
* words. Which is the trap the comment up there warns about, sprung on the
* block sitting directly underneath it.
*
* They are down here now, for the same reason the rest of "the phone" is.
*/
.acct-name { max-width: 120px }
.acct-join, .acct-out { font-size: 12px }
.warnbar-in { flex-wrap: wrap; padding: 10px 18px }
.warnbar-go { margin-left: 34px }
.authwrap { padding: 28px 18px 48px }
.authcard { padding: 22px 18px }
.acct-block { padding: 22px 18px }
/*
* One column, and the menu becomes a row of pills over the content: a
* sticky sidebar on a phone is a sidebar taking up the phone.
*/
.acctwrap.acct-cols { grid-template-columns: minmax(0, 1fr); gap: 18px }
.acct-menu { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px }
.acct-menu-item { padding: 8px 12px; font-size: 13px; border: 1px solid var(--line) }
.acct-menu-item[aria-current] { border-color: #192F53 }
.acct-menu-item.grave { margin-top: 0; padding-top: 8px; border-top: 1px solid var(--line);
border-radius: 10px }
.acct-menu-item .dot-warn { margin-left: 2px }
.codes { grid-template-columns: repeat(2, 1fr) }
/* ------------------------------- the hero -----------------------------
*
* Two columns become one.
*
* The right-hand column has a 300px minimum -- the pulse's six figures are
* set at sizes that stop being figures below it -- so as the window narrows
* it is the copy that gives way, and below about 730px it gives way to
* nothing: at 390px the headline had a word to a line and the paragraph was
* a column of single words with the pulse laid over the top of it.
*
* One column from the same 760 as everything else here rather than from a
* breakpoint of its own. 761px still leaves the copy 349px beside the
* pulse's 300, which is a narrow hero rather than a broken one, and stacking
* it earlier only spreads six figures across a width they were not drawn
* for.
*/
.hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px }
/* Stacked, the pulse no longer has a column of its own to be centred in. */
.hero-inner .pulse { align-self: stretch }
/* ---------------------------- the two bands ---------------------------
*
* The header comes off `position:fixed` and goes onto `sticky`, and the
* footer goes back into the flow.
*
* Fixed only works while the header's height is known: `--header-h` is what
* the body is padded by to make room for it, and the two have to agree to
* the pixel. On a phone they cannot. The header wraps to two rows there, and
* how tall those rows are depends on what is in them -- a name and a Sign
* out where a stranger gets two buttons, and either of those wrapping again
* on the narrowest screens. Every one of those spilled the account row out
* of the band and over the top of the page: on the front page it landed on
* the kicker, on a company page across "All stocks".
*
* Sticky needs no agreement. The header takes the height its contents come
* to, that height is in the flow, and it still does not scroll away. The
* body's padding goes with the fixed positioning, and `--header-h` is left
* alone: nothing measures the band any more except the scroll-margin under
* every section id, and 88px is still about what the two rows come to.
*
* The footer stops being fixed for a plainer reason. 74px of legal links is
* a tenth of a phone screen held out of use on every page, and `margin-top`
* keeps it at the bottom of a short one -- which is what the comment at the
* top of this file describes and the fixed version was doing another way.
*/
body { padding-top: 0; padding-bottom: 0 }
/*
* Two rows: the logo with the account beside it, the menu underneath.
*
* `.left` holds the logo and the menu and `.header-right` the account, so no
* flex arrangement of those two can put the account on the logo's row and
* the menu on its own -- they are in the wrong boxes for it. `display:
* contents` takes `.left` out of the way and hands its two children to the
* grid, and then all three can be placed. Nothing in the markup moves.
*/
.site-header {
position: sticky;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
height: auto;
gap: 4px 12px;
padding: 9px 16px;
}
.site-header .left { display: contents }
.site-header .left > a { grid-area: 1 / 1 }
.site-header img { height: 38px }
/*
* `.account` is the flex row inside `.header-right` that actually holds the
* links, and it is the one that has to be allowed to wrap: with it set to
* nowrap the pair stayed on one line however narrow the column got and slid
* out over the logo.
*/
.header-right { grid-area: 1 / 2; justify-content: flex-end }
.account { flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px }
/*
* And the menu on the second row. Its items were `height: var(--header-h)`
* so that the active tab's underline sat on the bottom of the band; on its
* own row there is no band to sit on, and 88px of link would push the header
* to a third of the screen.
*/
.nav { grid-area: 2 / 1 / 3 / -1; height: auto; gap: 2px 22px; flex-wrap: wrap }
.nav a { height: auto; padding: 2px 0 5px; font-size: 14px }
/*
* And the account's own controls keep their words on one line. Given the
* choice between two lines inside a pill and two pills on two lines, the
* second is the tidier one -- at 320px "Create account" was breaking after
* "Create" and the button was growing downwards to hold it.
*/
.acct-link, .acct-join, .acct-out { white-space: nowrap }
footer {
position: static;
height: auto;
margin-top: auto;
padding: 18px 16px;
justify-content: center;
}
/* ------------------------- what the bands leave ----------------------- */
/*
* The hero's own top and bottom. The first pass narrowed the sides and left
* these, and they were measured under a header that was floating over them.
*/
.hero.compact { padding-top: 30px; padding-bottom: 32px }
/* Later than the line above on purpose: every `plain` band is also a
* `compact` one bar the company page's, and the plainer band is the shorter
* of the two -- it carries no tape behind it to leave room for. */
.hero.plain, .hero.co-hero { padding-top: 26px; padding-bottom: 26px }
/*
* Every section's sides, and this time in selectors that win.
*
* The first pass narrowed `.block`, and nothing on the page is styled by
* `.block` alone: the base rule is `section.block`, which a type selector
* ahead of the class puts out of its reach, and the three variants add an ID
* or a second class on top of that. So every block on the site kept the
* desktop's 28px sides on a phone -- 56px of the 390 spent on margin -- and
* the rule that was meant to fix it had been sitting there since the first
* pass doing nothing.
*/
section.block { padding: 32px 16px 36px }
section.block#moves { padding: 24px 16px 18px }
.block.co-block { padding: 30px 16px 0 }
.block.co-block.last { padding-bottom: 56px }
.block.screener-block { padding: 22px 16px 56px }
.hero, .hero.compact, .hero.co-hero, .hero.plain { padding-left: 16px; padding-right: 16px }
.intro-band { padding: 20px 16px 0 }
/*
* A card's own inset, everywhere one is set in the design's 22-24px. Not
* `.list-card`: it sets its padding to zero and puts it on the blocks inside
* itself instead, and a blanket rule here would give it an inset of its own
* on top of theirs.
*/
.card:not(.list-card) { padding: 18px }
.card-head { padding: 18px 18px 12px }
.list-card .listtabs { padding: 0 18px 14px }
.list-card .listnote { padding: 0 18px 18px }
.screener-bar { padding: 14px 16px }
.screener-foot, .tbl-foot { padding: 14px 16px }
.sec-head.in-card { padding: 18px 16px 12px }
.table-card .listnote, .empty-note { padding: 0 16px 18px }
/* The strip under the hero, which is wallpaper and can be tighter. */
.ticker-item { padding: 10px 14px }
/* ---------------------------- the day's strip -------------------------
*
* The head sits over the strip in both layouts now, so all this does is
* tighten the inset and give the card a size worth reading: 78% of the rail,
* which leaves the next one showing at the edge to say there are more.
*/
.moves-card { gap: 12px; padding: 18px }
/* Wrapped onto three lines, the count is another line of the head and not a
* thing in the corner: it lines up with the title above it. */
.moves-head .more { margin-left: 0 }
.move { flex: 0 0 78%; max-width: none }
/* ---------------------------- the two tables -------------------------
*
* The ranking and the day's decisions, which are the front page.
*
* Both are a grid of fixed columns -- 34rem for one, 37rem for the other --
* inside a card that clips what does not fit, so on a phone they were not a
* table that scrolled but a table with a column of amounts sitting on top of
* a column of names. Nothing about them was readable.
*
* They become two lines each rather than a strip that scrolls sideways. A
* front page whose first table has to be dragged to be read is a front page
* that gets closed, and every figure in these rows already says what it is:
* an amount has a dollar on it, a count says "buyer", a date is a date.
*
* Which is also why the header row goes. It labelled six columns and there
* are no longer six columns to label.
*/
.ranklist .row.rank.head, .row.head.deals { display: none }
.ranklist .row.rank {
grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
grid-template-areas:
"no co co amt"
"no ticker ins last";
gap: 2px 10px;
padding: 12px 16px;
}
.row.rank .rankno { grid-area: no; align-self: center }
.row.rank .co { grid-area: co }
.row.rank .tickercell { grid-area: ticker }
.row.rank > :nth-child(4) { grid-area: amt }
.row.rank > :nth-child(5) { grid-area: ins }
.row.rank > :nth-child(6) { grid-area: last }
/* Eight cells now, and the same three-line shape the ranking above uses. */
.row.deals {
grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
grid-template-areas:
"no co co amt"
"no who who sh"
"no ticker act date";
gap: 2px 10px;
padding: 12px 16px;
}
.row.deals > :nth-child(1) { grid-area: no; align-self: center }
.row.deals > .co { grid-area: co }
.row.deals > .tickercell { grid-area: ticker }
.row.deals > .name { grid-area: who }
.row.deals > :nth-child(5) { grid-area: act }
.row.deals > :nth-child(6) { grid-area: sh }
.row.deals > :nth-child(7) { grid-area: amt }
.row.deals > :nth-child(8) { grid-area: date }
/* --------------------------- the wide pages -------------------------- */
/* The company page's window switch, which is three buttons and no wrap. */
.seg { flex-wrap: wrap }
.stat-strip { gap: 16px; padding: 14px 0 }
/* The screener's toolbar: the search box takes a row rather than a third. */
.row-search { flex: 1 1 100% }
.filter-panel { padding: 16px; gap: 18px }
}
/*
* The narrowest phones still in use, which is 320px of viewport.
*
* Below 400 the logo and the account pair together come to more than the
* header row has, and the pair is what gives: "Sign in" over "Create account",
* right-aligned, tidy enough but a line taller. Six pixels off the logo and a
* size off the two controls keeps them on one line down to about 350, which is
* every phone from a 360 upwards. At 320 they still wrap, and the wrap is the
* right answer there -- as it is for a signed-in name long enough to need it.
*/
@media (max-width: 400px) {
.site-header img { height: 32px }
.acct-join, .acct-link:not(:has(.acct-dot)) { padding: 7px 12px; font-size: 13px }
}