/* ========================================================================== AI Work Central, design system (direction A, "pay leads") One file, every page links it. No JS needed. CSP-safe: no inline style attributes anywhere; bar widths and band positions live in SVG attributes. How to read this file - Sections 1 to 6 are tokens, base and the small atoms (pay, referral, icons). - Sections 7 to 26 are the components, one per block of a page. - Section 27 is "reserve": pieces on the sheet but not yet on a page. - Section 28 is responsive, in the same order as the components. Canonical pieces and their modifiers are named in each heading. Where two pages used to solve the same thing differently, the heading says which version won and what the modifier is for. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ /* colour: every colour of the site is a token of this block; the two dark blocks below carry the same names */ color-scheme:light; --bg:#FFFFFF; --bg-2:#F6F6F3; /* hover, input chrome */ --bg-3:#ECECE8; /* bar tracks, range axis */ --band:#F5F5F2; /* tinted page band, figure band */ --ink:#17191C; --ink-2:#55595F; --ink-3:#686D72; /* 4.5:1 on the tinted band, not only on white */ --line:#E6E6E2; --line-2:#D3D3CE; --line-3:#17191C; /* strong rule under day headers */ --accent:#0E6B4C; /* pay green, the only colour */ --accent-2:#0A573D; /* hover, median tick */ --accent-soft:#E3EFE9; /* tinted chip background */ --range-band:#A9D1C0; /* middle half of listed rates, every range strip */ --axis:#ECECE8; /* range axis only */ --axis-line:#ECECE8; /* outline of the range axis: the same as --axis here, a visible edge on dark */ --line-ctl:#D3D3CE; /* border of a control (button, chip, select, input): --line-2 here, 3:1 on dark */ --hist-few:#686D72; /* own bars of a histogram with few rates, over the grey bars of the whole list */ --tick-weak:#686D72; /* median tick of a weak range strip */ --on-accent:#FFFFFF; --bar:#2A2E33; /* share and count bars */ --bar-weak:#B9BEC4; /* bar fill when the figure rests on too few roles */ --focus:#0E6B4C; --glass:rgba(255,255,255,.96); /* --bg at 96%: sticky toolbar */ --shadow:rgba(0,0,0,.12); /* under the phone menu panel */ --chev-img:url("data:image/svg+xml;utf8,"); /* arrow of the select */ --brand-block:#0FA36B; /* the green square of the mark */ --brand-corner:var(--ink); /* share strip: segments 2 to 10, each a step further from --bar */ --share-2:#3B4046; --share-3:#5B6169; --share-4:#7A8089; --share-5:#969CA4; --share-6:#AAAFB6; --share-7:#B9BEC4; --share-8:#C6CACF; --share-9:#D1D4D8; --share-10:#DADDE0; /* home v2: the deep green surface (.hv-deep) has its own set, which the rule swaps in for the tokens above */ --hv-bg:#0E1F19; --hv-bg-2:#152B23; --hv-bg-3:#20392F; --hv-ink:#F1F4F2; --hv-ink-2:#B9C6BF; --hv-ink-3:#93A39B; --hv-line:#1F3A2F; --hv-line-2:#2E4E41; --hv-line-ctl:#5A7568; --hv-accent:#4CC498; --hv-accent-2:#8FE3C2; --hv-accent-soft:#17382C; --hv-range:#2E785E; --hv-axis:#173027; --hv-bar:#C3CEC8; --hv-bar-weak:#6F8279; --hv-on-accent:#06150F; /* the tinted band of the home, its hover and its hairline: the site values in light, a step up from --band in dark */ --hv-tint:#F5F5F2; --hv-tint-2:#F6F6F3; --hv-tint-line:#E6E6E2; /* type scale (size / line) */ --fs-h1:44px; --lh-h1:50px; --fs-h2:28px; --lh-h2:34px; --fs-h3:20px; --lh-h3:26px; --fs-lead:18px; --lh-lead:27px; --fs-body:15px; --lh-body:22px; --fs-prose:17px; --lh-prose:27px; --fs-ui:14px; --lh-ui:20px; --fs-sm:13px; --lh-sm:18px; /* floor for running text: notes, footers, axes */ --fs-xs:12px; --lh-xs:16px; /* labels over a figure (dt, caps), never a sentence */ --fs-pay:19px; --lh-pay:24px; --fs-pay-xl:36px; --lh-pay-xl:40px; --tight:-.022em; /* spacing */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:72px; /* radii, widths, heights */ --r-1:4px; --r-2:6px; --r-3:8px; --w-page:1120px; --w-prose:64ch; --w-narrow:720px; --w-lead:56ch; --gutter:24px; --h-ctl:40px; --h-btn:36px; --h-head:60px; --col-pay:172px; /* pay column in role rows */ } /* Dark theme. No stored choice: the page follows the system. A stored choice puts data-theme on (theme.js, in the head, before the stylesheet): "light" switches the first block off, "dark" switches the second on. Both blocks are for screens only, so paper stays dark on white. The two blocks must stay identical and carry every colour token of :root (guards.py compares them). */ :root[data-theme="light"]{color-scheme:light} @media screen and (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#131518; /* page: the site's own ink (#17191C) taken a step down, not a stock grey */ --bg-2:#1C1F23; /* hover, input chrome, glance box */ --bg-3:#2B2F35; /* bar tracks, range axis, pressed row */ --band:#191B1F; /* tinted page band, figure band */ --ink:#ECEEF0; --ink-2:#B4B9BF; --ink-3:#969CA3; /* 4.5:1 on --bg-2 and --band, not only on --bg */ --line:#292C31; --line-2:#3D4147; --line-3:#ECEEF0; /* strong rule under day headers */ --accent:#4CC498; /* pay green, lifted: same hue as #0E6B4C, readable as text on every dark surface */ --accent-2:#8FE3C2; /* button hover, median tick */ --accent-soft:#16332A; /* tinted chip background */ --range-band:#2E785E; /* middle half of listed rates, every range strip */ --axis:#1E2125; /* darker than --bg-3 so the band reads 3:1 on it */ --axis-line:#3D4147; /* the dark axis is close to the page, so it gets an edge */ --line-ctl:#5E646C; /* 3:1 on --bg: the edge of a control has to be seen */ --hist-few:#ECEEF0; /* well apart from --bar-weak behind it */ --tick-weak:#ECEEF0; /* median tick of a weak range strip */ --on-accent:#06150F; /* text on the green button: dark, because the green is now light */ --bar:#C3C8CE; /* share and count bars */ --bar-weak:#737A82; /* bar fill when the figure rests on too few roles */ --focus:#4CC498; --glass:rgba(19,21,24,.96); --shadow:rgba(0,0,0,.5); --chev-img:url("data:image/svg+xml;utf8,"); --brand-block:#3DDC97; --share-2:#A9AFB6; --share-3:#9299A1; --share-4:#7D848C; --share-5:#6B7279; --share-6:#5C6269; --share-7:#4F555B; --share-8:#454A50; --share-9:#3C4146; --share-10:#35393E; --hv-bg:#162E24; --hv-bg-2:#1D3A2E; --hv-bg-3:#284A3C; --hv-ink:#ECEEF0; --hv-ink-2:#B7C4BD; --hv-ink-3:#9AAAA2; --hv-line:#244437; --hv-line-2:#33584A; --hv-line-ctl:#62806F; --hv-accent:#4CC498; --hv-accent-2:#8FE3C2; --hv-accent-soft:#1E4435; --hv-range:#34876A; --hv-axis:#1C382C; --hv-bar:#C3CEC8; --hv-bar-weak:#74877E; --hv-on-accent:#06150F; --hv-tint:#1E2126; --hv-tint-2:#272B31; --hv-tint-line:#32363C; } } @media screen{ :root[data-theme="dark"]{ color-scheme:dark; --bg:#131518; --bg-2:#1C1F23; --bg-3:#2B2F35; --band:#191B1F; --ink:#ECEEF0; --ink-2:#B4B9BF; --ink-3:#969CA3; --line:#292C31; --line-2:#3D4147; --line-3:#ECEEF0; --accent:#4CC498; --accent-2:#8FE3C2; --accent-soft:#16332A; --range-band:#2E785E; --axis:#1E2125; --axis-line:#3D4147; --line-ctl:#5E646C; --hist-few:#ECEEF0; --tick-weak:#ECEEF0; --on-accent:#06150F; --bar:#C3C8CE; --bar-weak:#737A82; --focus:#4CC498; --glass:rgba(19,21,24,.96); --shadow:rgba(0,0,0,.5); --chev-img:url("data:image/svg+xml;utf8,"); --brand-block:#3DDC97; --share-2:#A9AFB6; --share-3:#9299A1; --share-4:#7D848C; --share-5:#6B7279; --share-6:#5C6269; --share-7:#4F555B; --share-8:#454A50; --share-9:#3C4146; --share-10:#35393E; --hv-bg:#162E24; --hv-bg-2:#1D3A2E; --hv-bg-3:#284A3C; --hv-ink:#ECEEF0; --hv-ink-2:#B7C4BD; --hv-ink-3:#9AAAA2; --hv-line:#244437; --hv-line-2:#33584A; --hv-line-ctl:#62806F; --hv-accent:#4CC498; --hv-accent-2:#8FE3C2; --hv-accent-soft:#1E4435; --hv-range:#34876A; --hv-axis:#1C382C; --hv-bar:#C3CEC8; --hv-bar-weak:#74877E; --hv-on-accent:#06150F; --hv-tint:#1E2126; --hv-tint-2:#272B31; --hv-tint-line:#32363C; } } /* Instrument Sans (SIL Open Font License 1.1), variable weight, served from this site */ @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(instrument-sans-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(instrument-sans-latin.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} /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:24px} body{ margin:0;background:var(--bg);color:var(--ink); font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:var(--fs-body);line-height:var(--lh-body); font-variant-numeric:lining-nums; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-1)} button,input,select{font:inherit;color:inherit} h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none} svg{display:block} svg[hidden]{display:none} /* the icon sprite; svg{display:block} would beat the UA [hidden] rule */ img{max-width:100%;height:auto} h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:600;letter-spacing:-.028em} h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600;letter-spacing:var(--tight)} h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;letter-spacing:-.012em} .wrap{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)} .quiet{color:var(--ink-3)} .small{font-size:var(--fs-sm);line-height:var(--lh-sm)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* CSS-only toggles: a hidden checkbox before the thing it drives (nav, listing, contents) */ .nav-check,.listing-check,.toc-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* ---------- 3. Links and buttons ---------- */ .link{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px} .link:hover{text-decoration-color:currentColor} .prose a,.site-foot .foot-about a,.crumbs a:hover,.notice a,.disclosure a,.pay-cap a,.apply-note a,.steps p a,.track p a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px} .prose a:hover,.site-foot .foot-about a:hover,.notice a:hover,.disclosure a:hover,.pay-cap a:hover,.apply-note a:hover,.track p a:hover{text-decoration-color:currentColor} .prose .btn{text-decoration:none} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); height:var(--h-btn);padding:0 14px;border-radius:var(--r-2);border:1px solid var(--line-ctl); background:var(--bg);color:var(--ink);font-size:var(--fs-ui);font-weight:500; cursor:pointer;white-space:nowrap;text-decoration:none;text-align:center; } .btn:hover{background:var(--bg-2)} .btn-accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .btn-accent:hover{background:var(--accent-2);border-color:var(--accent-2)} .btn-lg{height:46px;font-size:15px;padding:0 20px} .btn-icon{width:var(--h-btn);padding:0} .btn[aria-disabled="true"]{color:var(--ink-3);pointer-events:none;border-color:var(--line)} /* ---------- 4. Icons: one chevron, one external arrow, one status dot ---------- Sprite symbols every page carries: #i-ref (14), #i-chev (12, down), #i-right (14, right), #i-ext (12, external), #i-search, #i-menu, #i-close. .chev = quiet right chevron at the end of a row (was .role-chev on platform and field, .role-go on home, the 12px .chev on job) .ext = link that leaves the site, arrow after the name .status = live dot before a short status phrase */ .chev{width:14px;height:14px;color:var(--ink-3);flex:none;align-self:center;justify-self:end} .role:hover .chev,.bar-row:hover .chev,.guide-list a:hover .chev{color:var(--accent)} .ext{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:500} .ext svg{width:11px;height:11px;color:var(--ink-3)} .ext:hover svg{color:var(--ink)} .btn-accent .ext-arrow{width:12px;height:12px;opacity:.85} .status{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)} .status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} /* ---------- 5. Pay figure ---------- up to $130/hr The figure sits in , which is coloured directly so a parent rule can never grey it. */ .pay{font-variant-numeric:tabular-nums lining-nums;font-weight:600;color:var(--accent);white-space:nowrap;letter-spacing:-.012em} .pay b{font-weight:600;color:var(--accent)} .pay-unit,.pay-pre{font-weight:400;font-style:normal;color:var(--ink-3);letter-spacing:0;font-size:.74em} .pay-pre{margin-right:4px} .pay.is-none{font-weight:400;color:var(--ink-3);letter-spacing:0} .pay-xl{font-size:var(--fs-pay-xl);line-height:var(--lh-pay-xl);letter-spacing:-.025em} .pay-xl .pay-unit,.pay-xl .pay-pre{font-size:.5em} /* inline, inside prose or meta */ .money{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} /* ---------- 6. Referral marking: one set ---------- .refmark 14px mark after a platform name (13px inside compare rows) .ref-tag the word "Referral" in accent, plain, before a sentence (job's pill is gone) .disclosure mark or tag, then the sentence; word for word on every page .disclosure--list same sentence as a key under a role list (was .ref-key on home) .list-legend one-line legend at the right of a list head (field) */ .refmark{display:inline-block;width:14px;height:14px;vertical-align:-2px;color:var(--accent);flex:none} .ref-tag{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;color:var(--accent);white-space:nowrap} .disclosure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);align-items:start;font-size:13.5px;line-height:19px;color:var(--ink-2)} .disclosure .refmark{margin-top:2px} .disclosure b{font-weight:500;color:var(--ink)} .disclosure--list{padding:10px 12px 0;align-items:center;font-size:var(--fs-sm);line-height:var(--lh-sm)} .sect-head.has-legend{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);flex-wrap:wrap} .list-legend{display:flex;align-items:center;gap:14px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);white-space:nowrap} .list-legend span{display:inline-flex;align-items:center;gap:5px} /* ---------- 7. Site header and nav (CSS-only phone menu) ---------- */ .site-head{position:relative;border-bottom:1px solid var(--line);background:var(--bg);z-index:10} .site-head .wrap{display:flex;align-items:center;height:var(--h-head);gap:36px} .brand{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap} .brand-mark{width:20px;height:20px;flex:none} .bm-corner{fill:var(--brand-corner)} .bm-block{fill:var(--brand-block)} .nav{display:flex;gap:var(--s-5);font-size:var(--fs-ui);color:var(--ink-2)} .nav a:hover{color:var(--ink)} .nav a[aria-current],.nav a.is-on{color:var(--ink);font-weight:500} /* Portuguese pages: the mark after a nav or footer link that opens an English page */ .en-mark{font-size:.8em;font-weight:400;white-space:nowrap} .site-head .head-end{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)} .nav-btn{display:none} .nav-btn .icon-close{display:none} /* colour theme: three buttons (system, light, dark). Rendered twice: icons only in .head-end, icons and words as the last row of the phone menu. It carries the hidden attribute until theme.js runs, so without scripts there is no dead control and the page follows the system. */ .theme-seg{display:inline-flex;align-items:center;height:var(--h-btn);padding:2px;gap:2px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg)} .theme-seg[hidden]{display:none} .theme-opt{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:100%;min-width:30px;padding:0 7px;border:0;border-radius:var(--r-1);background:none;color:var(--ink-3);font-size:var(--fs-sm);line-height:var(--lh-sm);cursor:pointer} .theme-opt:hover{color:var(--ink)} .theme-opt[aria-pressed="true"]{background:var(--bg-3);color:var(--ink)} .head-end .theme-opt span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .nav .theme-seg{display:none} @media (prefers-reduced-motion:no-preference){ .theme-opt{transition:background-color .12s ease,color .12s ease} } .nav-check:checked ~ .wrap .nav-btn .icon-menu{display:none} .nav-check:checked ~ .wrap .nav-btn .icon-close{display:block} /* ---------- 8. Page head ---------- .hero big head (home, field): 44px above, 48px below .hero--list the list starts right under it (home): 22px below, lead at full width .hero-cols lead on the left, a list on the right (field, sheet) .title-block smaller head on inner pages; no bottom padding when more follows in the same wrap (platform page), 24px when it closes the wrap (platforms page) .title-row name + descriptor on one line (platform page; the monogram tile is gone) .crumbs breadcrumb; inside .hero it sits on top with .stamp at the right (.crumb-path wraps the links) .stamp quiet date line: "Checked 11 October 2026", "First seen 10 Oct | Checked today" .stamp--rule the same line closing a block with a hairline (job facts) .trust quiet sentences under the head (home), one per line on a phone */ .hero{padding:44px 0 var(--s-7)} .hero h1 .n{color:var(--accent)} .hero-lead{max-width:var(--w-lead);color:var(--ink-2);font-size:var(--fs-lead);line-height:var(--lh-lead);margin-top:var(--s-3)} .hero-lead b{color:var(--ink);font-weight:500} .hero-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);margin-top:28px;align-items:start} .hero-cols .hero-lead{margin-top:0} .hero--list{padding-bottom:22px} .hero--list .hero-lead{max-width:none} .hero .crumbs{padding:0;margin-bottom:var(--s-4);justify-content:space-between} .crumbs{padding:20px 0 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);display:flex;gap:var(--s-2);flex-wrap:wrap} .crumbs span{color:var(--ink-3)} .crumb-path{display:flex;gap:var(--s-2);flex-wrap:wrap} .title-block{padding:var(--s-6) 0 0} .wrap > .title-block:last-child{padding-bottom:var(--s-5)} /* closes its wrap (platforms): 24px before the next section */ .title-block h1{font-size:38px;line-height:44px;max-width:24ch} .title-block .hero-lead{margin-top:var(--s-3);font-size:17px;line-height:26px} .title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .title-row h1{max-width:none} .title-desc{font-size:17px;line-height:24px;color:var(--ink-2);padding-top:5px} .stamp{margin-top:6px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:4px 0} .stamp b{color:var(--ink-2);font-weight:500} .stamp span{white-space:nowrap} .stamp span+span::before{content:"|";margin:0 8px;color:var(--line-2)} .hero-lead + .stamp{margin-top:14px} .crumbs .stamp{margin:0;white-space:nowrap} .stamp--rule{margin:0;padding-bottom:16px;border-bottom:1px solid var(--line)} .trust{margin-top:10px;font-size:var(--fs-sm);line-height:20px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:0 6px} /* ---------- 9. Figure row ---------- Big numbers under a title. The pay figure is green everywhere, counts are ink. .figs three figures in one line (platform page) .figs--lg larger, with a rule above (field hero; was .stats/.stat) .figs--band on a tinted band, one main figure and two side figures (guide; was .stat-band)
$70/hrmedian listed rate
*/ .figs{display:flex;gap:40px;flex-wrap:wrap;margin-top:22px} .fig{min-width:0} .fig-n{display:block;font-size:30px;line-height:34px;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} /* line-height 1: a small unit with the line height of the figure made that line taller, and the label under it sat lower than the labels beside it */ .fig-n .pay-unit{font-size:.5em;line-height:1} .fig-n .money{font-weight:600} .fig-l{display:block;margin-top:3px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} .fig-l i{font-style:normal;color:var(--ink-3)} .figs--lg{gap:56px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)} .figs--lg .fig-n{font-size:40px;line-height:44px;letter-spacing:-.025em} .figs--band{display:grid;grid-template-columns:fit-content(48%) minmax(0,1fr) minmax(0,1fr);gap:4px 36px;align-items:end;margin-top:22px;padding:20px 22px 18px;background:var(--band);border-radius:var(--r-3)} .figs--band .fig-n{font-size:22px;line-height:26px;letter-spacing:-.018em} .figs--band .fig--main .fig-n{font-size:56px;line-height:56px;letter-spacing:-.03em} .figs--band .fig--main .pay-unit{font-size:20px;letter-spacing:0;margin-left:2px} .figs--band .fig--main .fig-l{margin-top:2px} .fig-src{grid-column:1 / -1;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .fig-src b{font-weight:500;color:var(--ink-2)} /* ---------- 10. CTA row under a title (platform page) ---------- */ .cta-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)} .cta-row .disclosure{flex-basis:100%;margin-top:2px} /* ---------- 11. Section head and tinted band ---------- .sect-roles a role list straight under the hero (home): tighter above and under the head */ .sect{padding:56px 0 0} .sect-head{margin-bottom:22px} .sect-sub{margin-top:6px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);max-width:66ch} .sect-roles{padding-top:34px} .sect-roles .sect-head{margin-bottom:10px} .band{margin-top:var(--s-9);background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s-8) 0 var(--s-9)} .band .sect{padding:0} .band .sect + .sect{margin-top:var(--s-9)} /* two-column section body: heading and sub on the left, content on the right (platforms page) */ .split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s-7);align-items:start} .split .sect-head{margin-bottom:0} /* ---------- 12. Search and filter bar ---------- .chip.is-on is the tinted outline (field's version won over the solid black one). */ .toolbar{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:saturate(1.2) blur(4px);padding:var(--s-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .toolbar .wrap{display:flex;gap:var(--s-2);align-items:center} .search{position:relative;flex:1;max-width:460px;display:block} .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-3)} .search input{width:100%;height:var(--h-ctl);padding:0 14px 0 38px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font-size:15px} .search input::placeholder{color:var(--ink-3)} .search input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .filters{display:flex;gap:6px} .chip{height:var(--h-ctl);padding:0 10px 0 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font-size:var(--fs-ui);display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;color:var(--ink)} .chip svg{color:var(--ink-3)} .chip:hover{background:var(--bg-2)} .chip.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .chip.is-on svg{color:var(--accent)} .chip-more{display:none} .toolbar-count{margin-left:auto;font-size:var(--fs-ui);line-height:18px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums} .toolbar-count b{color:var(--ink);font-weight:500} /* select styled like a chip, for pages with no JS filtering */ .chip-select{appearance:none;-webkit-appearance:none;height:var(--h-ctl);padding:0 30px 0 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg) var(--chev-img) no-repeat right 10px center;font-size:var(--fs-ui);color:var(--ink);cursor:pointer} /* field chips with a count, under a section head (platform page) */ .field-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .field-row .chip{height:38px;gap:8px} .field-row .chip i{font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums} .field-row .chip-rest{color:var(--ink-2);border-style:dashed} /* ---------- 13. Day group header ---------- */ .day-head{display:flex;align-items:baseline;gap:var(--s-3);padding:10px 12px;margin-top:var(--s-2);border-bottom:1px solid var(--line-3);font-size:var(--fs-ui);line-height:var(--lh-ui)} .day-head b{font-weight:600} .day-head span{color:var(--ink-2)} .day-head .day-note{margin-left:auto;display:inline-flex;align-items:center;gap:6px} /* .day-head--stack: a long note (icon + "Referral links, pay as listed") takes its own line on phones */ /* ---------- 14. Role row (pay first) ---------- Canonical (field's version won): pay | title over meta | platform at the right edge | chevron. $80 to $125/hr ...micro1... MedicineRemote, 58 countries .role--noplat single-platform page: no platform cell (platform page) .role-group several roles with the same pay, platform and scope share one row: .role-titles holds one per title, .role-platform holds + .more-row "N more roles from today" link row closing a day group .more-like capped list of related roles (job page); --col-pay is narrower there "up to" (.pay-pre) is written first, so the source reads "up to $130/hr" for screen readers and copy; inside a .role row CSS order drops it under the figure so every $ starts on the same edge: up to$130/hr */ .role{ display:grid;grid-template-columns:var(--col-pay) minmax(0,1fr) auto 14px; grid-template-areas:"pay title plat chev" "pay meta plat chev"; column-gap:var(--s-5);row-gap:3px;align-items:start; padding:15px 12px 14px;border-bottom:1px solid var(--line);border-radius:var(--r-2); } .role:hover{background:var(--bg-2)} .role:hover .role-title{color:var(--accent)} .role .pay{grid-area:pay;display:flex;flex-wrap:wrap;align-items:baseline;font-size:var(--fs-pay);line-height:var(--lh-pay);padding-top:1px} .role .pay.is-none{font-size:var(--fs-ui);padding-top:3px} .role .pay-pre{order:1;flex-basis:100%;font-size:12px;line-height:14px;margin-top:1px} .role-title{grid-area:title;font-weight:500;font-size:16px;line-height:24px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .role-platform{grid-area:plat;align-self:center;justify-self:end;font-size:13.5px;line-height:18px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .role-meta{grid-area:meta;display:flex;gap:18px;font-size:13.5px;line-height:18px;color:var(--ink-2);min-width:0;white-space:nowrap;overflow:hidden} .role-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis} .role .chev{grid-area:chev} .role--noplat{grid-template-columns:var(--col-pay) minmax(0,1fr) 14px;grid-template-areas:"pay title chev" "pay meta chev"} .role-group{cursor:default} .role-group .role-titles{grid-area:title;display:grid;gap:3px;min-width:0} .role-group .role-titles a{font-weight:500;font-size:16px;line-height:24px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .role-group .role-titles a:hover{color:var(--accent)} .role-group .role-platform{display:grid;justify-items:end;gap:2px;line-height:18px} .role-group .role-platform small{font-weight:400;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .role-group .role-platform span{display:inline-flex;align-items:center;gap:5px} .more-row{display:block;padding:11px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);border-radius:var(--r-2)} .more-row:hover{background:var(--bg-2);color:var(--ink)} .more-row b{font-weight:500;color:var(--ink)} .more-like{margin-top:56px;max-width:820px} .more-like .role{--col-pay:150px} .list-foot{display:flex;align-items:center;gap:20px;padding:20px 12px 0;flex-wrap:wrap} .list-foot .list-note{margin-left:auto} /* Folded rows of a long list (listing pages): a native details whose summary is drawn as the mockup's "Show N more" button. Every row stays in the HTML; the summary swaps its words when the fold is open. */ .fold>summary{list-style:none;display:flex;padding:20px 12px 0;cursor:pointer} .fold>summary::-webkit-details-marker{display:none} .fold>summary:focus-visible{outline:none} .fold>summary:focus-visible .btn{outline:2px solid var(--focus);outline-offset:2px} .fold[open]>summary{padding-bottom:20px} .fold[open]>summary .fold-more,.fold:not([open])>summary .fold-less{display:none} /* ---------- 14b. Role cards: the role row folded into a tile, for one short section (home) ---------- Same pieces and tokens as .role: .pay (green figure, "up to" first), .role-title, .role-meta (field and place, one quiet line), .role-platform with the .refmark when the link is a referral. .role-cards grid: 3 across, 2 at tablet, 1 on phones; the dense .role list stays the main list .card-top optional line over the title: .card-tag "New" (first seen in the last 3 days), .card-n openings count, only when the source gives one; omit the line when both are absent .card-chips up to three .card-chip, field or skill words from the listing itself One hairline border like .kind-tile: no logos, no tiles, no gradients, no shadow. New Internal Medicine Hospitalist MedicineRemote, 58 countries ContractEnglish $80 to $125/hr micro1Referral link */ .sect-cards{padding-bottom:28px} .role-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)} .role-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 20px 14px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg);color:var(--ink)} .role-card:hover{background:var(--bg-2)} .role-card:hover .role-title{color:var(--accent)} .card-top{display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-variant-numeric:tabular-nums} .card-tag{font-weight:500;color:var(--accent)} .role-card .role-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:22px} .role-card .role-meta{flex-wrap:wrap;white-space:normal;gap:2px 14px} .card-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .card-chip{display:inline-flex;align-items:center;height:26px;max-width:100%;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-2);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .card-foot .pay{font-size:var(--fs-pay);line-height:var(--lh-pay)} /* ---------- 15. Bar rows (platforms, fields, any "count + figure" list) ---------- Canonical: name | bar | count | value, the value's figure in , rest of the cell quiet. Meridial... 570$36.50/hr566 of 570 list a rate .bar-row--wide no count column, value column wide enough for a range sentence (home "by field") name carries the count: Languages976 roles .bar-row--count the count is the bold figure, the value is quiet (field "who hires") .bar-axis the $ axis row under a .bar-row--wide list (same grid, no rule) .is-few figure rests on too few roles: grey figure everywhere; the bar goes grey (--bar-weak, the one weak-bar token) only where the bar IS the weak figure: the home "by field" rows (.bar-row--wide) and the guide's field table. A count bar (platforms) stays dark, the count is not in doubt. */ .bar-head{display:grid;grid-template-columns:150px minmax(0,1fr) 64px 150px;gap:20px;padding:0 0 8px;border-bottom:1px solid var(--line-2)} .bar-head .r{text-align:right} .bar-row{display:grid;grid-template-columns:150px minmax(0,1fr) 64px 150px;gap:20px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)} .bar-row:hover .bar-name{color:var(--accent)} .bar-name{font-weight:500;color:var(--ink)} .bar-name small{display:block;font-size:var(--fs-sm);line-height:17px;color:var(--ink-2);font-weight:400;font-variant-numeric:tabular-nums} .bar-svg{width:100%;height:10px;border-radius:3px;overflow:hidden} .bar-svg .track{fill:var(--bg-3)} .bar-svg .fill{fill:var(--bar)} .bar-count{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums} .bar-val{text-align:right;font-size:var(--fs-ui);line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .bar-val b{color:var(--ink);font-weight:600;font-size:16px} .bar-val .pay-unit{font-size:13px} .bar-val small{display:block;font-size:var(--fs-sm);line-height:17px;font-weight:400;color:var(--ink-2);white-space:nowrap} .bar-head--wide,.bar-row--wide,.bar-axis{grid-template-columns:150px minmax(0,1fr) 236px} .bar-row--wide{padding:10px 0} .bar-axis{padding:6px 0 0;border-bottom:0} .bar-axis .chart-axis{padding:0} .bar-head--count,.bar-row--count{grid-template-columns:150px minmax(0,1fr) 72px 150px} .bar-row--count .bar-count{font-weight:600;font-size:16px;color:var(--ink)} .bar-row--count .bar-val{color:var(--ink-3)} .bar-row--count .bar-val b{font-weight:500;font-size:inherit;color:var(--ink-2)} .bar-row--wide.is-few .bar-svg .fill,.prose tr.is-few .bar-svg .fill{fill:var(--bar-weak)} .is-few .bar-val b{color:var(--ink-2);font-weight:500} .chart-foot{margin-top:var(--s-4);max-width:72ch} .chart-foot--rule{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line-2);max-width:76ch} /* ---------- 16. Range strip (middle half of listed rates, median tick) ---------- One visual language on every page: grey axis, green band (--range-band), dark green median. .chart / .chart-row / .chart-val the labelled chart (platform, field, sheet) .chart-row--narrow 150px value column (field) .is-focus the row the page is about: its figure goes green (field) .range-svg.is-few grey band and tick (compare rows on platforms) .range the guide's single strip with labelled ends (section 23) */ .chart{margin-top:var(--s-5)} .chart-cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);margin-bottom:var(--s-2)} .chart-cap b{color:var(--ink);font-weight:500;font-size:var(--fs-ui)} .chart-row{display:grid;grid-template-columns:120px minmax(0,1fr) 220px;gap:var(--s-4);align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui)} .chart-row:last-of-type{border-bottom:0} .chart-row--narrow{grid-template-columns:120px minmax(0,1fr) 150px} .chart-label{font-weight:500;color:var(--ink)} .range-svg{width:100%;height:14px;display:block} .range-svg .axis{fill:var(--axis);stroke:var(--axis-line);stroke-width:1;vector-effect:non-scaling-stroke} .range-svg .brk{fill:var(--axis)} .range-svg .band{fill:var(--range-band)} .range-svg .median{stroke:var(--accent-2);stroke-width:2.5;vector-effect:non-scaling-stroke} .range-svg .grid{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke} .range-svg.is-few .band{fill:var(--bar-weak)} .range-svg.is-few .median{stroke:var(--tick-weak)} /* one line by default ("$70 median, $45 to $115"); a child drops to a second quiet line */ .chart-val{display:block;text-align:right;line-height:18px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:normal} .chart-val b{color:var(--ink);font-weight:600} .chart-val small{display:block;margin-top:1px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .chart-row.is-focus .chart-val b{color:var(--accent)} .chart-axis{display:flex;justify-content:space-between;padding:6px 0 0;font-variant-numeric:tabular-nums} .chart-axis-inner{grid-column:2} /* ---------- 17. Compare rows (platforms page): one row per platform, whole row is the link ---------- Built from the canonical pieces (.bar-row, .bar-val, .range-svg, .refmark, .ref-tag, .chev). Desktop: name | open-roles bar | count | share | median over its range strip | fields | chevron */ .cmp .bar-head,.cmp .bar-row{grid-template-columns:118px minmax(0,1fr) 44px 92px 196px 220px 14px;gap:0 16px} .cmp .bar-head{margin-top:var(--s-5);grid-template-areas:"name bar count share val fields chev";align-items:end} .cmp .bar-head .h-val small,.cmp .bar-head .h-bar small{display:block;font-weight:400;color:var(--ink-3)} .cmp .bar-row{grid-template-areas:"name bar count share val fields chev" "name bar count share rng fields chev";row-gap:5px;padding:12px 8px;margin:0 -8px;border-radius:var(--r-2);position:relative} .cmp .bar-row:hover{background:var(--bg-2)} .cmp .bar-row:active{background:var(--bg-3)} .cmp .bar-name{grid-area:name;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:15px} .cmp .bar-name .refmark{width:13px;height:13px} .cmp .ref-tag{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400} /* "Referral link" under a name is a label, not the job page's word */ .cmp .bar-svg{grid-area:bar;height:10px} .cmp .bar-count{grid-area:count;color:var(--ink);font-weight:500} .cmp .bar-share{grid-area:share} .cmp .bar-val{grid-area:val;align-self:end;line-height:22px} .cmp .bar-val b{color:var(--accent);font-size:18px} .cmp .bar-val .pay-unit{font-size:12px} .cmp .bar-fields{grid-area:fields} .cmp .chev{grid-area:chev} .cap{display:none} /* the caption under a median ("median listed rate") stays on desktop, same voice as the other captions in the row */ .cmp .bar-val small{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .bar-share{text-align:right;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;line-height:20px} .bar-share small{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400;color:var(--ink-3);white-space:nowrap} .bar-share.is-low b{color:var(--ink-2);font-weight:400} .bar-fields{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);min-width:0;font-variant-numeric:tabular-nums} .bar-fields b{font-weight:500;color:var(--ink)} .bar-fields i{font-style:normal;color:var(--line-2);padding:0 4px} .rng{grid-area:rng;display:block;text-align:right;align-self:start} .rng .range-svg{height:10px} .rng small{display:block;margin-top:4px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-variant-numeric:tabular-nums} .rng small b{font-weight:500;color:var(--ink-2)} .cmp .bar-axis{display:grid;grid-template-columns:118px minmax(0,1fr) 44px 92px 196px 220px 14px;gap:0 16px;padding:6px 0 0;font-variant-numeric:tabular-nums} .cmp .bar-axis span{grid-column:5;display:flex;justify-content:space-between} /* ---------- 18. Native details: one chevron language ---------- .fold full-width method block with a hairline above and below (platforms; was .how) .fold-inline a value that opens in place, chevron after the text (job "Where"; was .where) .prose details FAQ rows (section 22) */ .fold{margin-top:var(--s-5);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:500;color:var(--ink)} .fold summary::-webkit-details-marker{display:none} .fold summary::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);flex:none;transition:transform .12s ease} .fold[open] summary::before{transform:rotate(45deg)} .fold ul{max-width:72ch;padding:0 0 14px 17px;list-style:disc;font-size:var(--fs-sm);line-height:19px;color:var(--ink-2)} .fold li{margin-bottom:5px} .fold-inline{margin:0} .fold-inline summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px} .fold-inline summary::-webkit-details-marker{display:none} .fold-inline summary svg{width:12px;height:12px;color:var(--ink-3);transition:transform .12s ease} .fold-inline[open] summary svg{transform:rotate(180deg)} .fold-inline p{margin-top:8px;font-size:var(--fs-sm);line-height:19px;color:var(--ink-2);font-weight:400} /* ---------- 19. Job page: head, pay, glance, facts, listing, apply card ---------- */ .job{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 var(--s-9);padding:28px 0 0;align-items:start} .job-head h1{font-size:38px;line-height:44px;max-width:22ch} .job-by{margin-top:var(--s-3);display:flex;align-items:center;gap:14px;font-size:var(--fs-ui);color:var(--ink-2);flex-wrap:wrap} .job-by b{color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:5px} /* pay block: the figure, then one quiet caption line with the caveat */ .job-pay{margin-top:var(--s-5)} .pay-cap{display:flex;flex-wrap:wrap;gap:2px 0;margin-top:6px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .pay-cap span{white-space:nowrap} .pay-cap span+span::before{content:"|";color:var(--line-2);margin:0 7px} .pay-cap a{color:var(--ink)} /* at a glance: four rows a visitor reads in five seconds */ .top-facts{max-width:var(--w-prose)} .glance{margin-top:26px;padding:16px 18px;background:var(--bg-2);border-radius:var(--r-3);display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 20px;font-size:var(--fs-ui);line-height:var(--lh-ui)} .glance dt{color:var(--ink-3)} .glance dd{color:var(--ink);font-weight:500} /* facts: label over value cells, a .stamp--rule closes the block */ .facts{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:22px;padding:16px 0 14px;border-top:1px solid var(--line-2)} .facts div{min-width:0} .facts dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .facts dd{margin-top:2px;font-size:var(--fs-body);line-height:22px;font-weight:500;font-variant-numeric:tabular-nums} .facts dd.is-accent{color:var(--accent)} /* listing text: same size and colour as body, plain bullets, phone toggle */ .listing{margin-top:40px;max-width:var(--w-prose)} .listing-from{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);margin-bottom:var(--s-3);display:flex;align-items:center;gap:var(--s-2)} .listing-from::after{content:"";flex:1;border-top:1px solid var(--line)} .listing-toggle{display:none} .listing-note{margin-top:var(--s-4);padding:10px 14px;border-left:3px solid var(--accent);background:var(--bg-2);border-radius:0 var(--r-2) var(--r-2) 0;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:var(--w-prose)} .listing-note b{color:var(--ink);font-weight:500} .src{margin-top:var(--s-5);font-size:var(--fs-sm);line-height:19px;color:var(--ink-3);max-width:var(--w-prose)} /* apply card: summary rows above the button, one line of small print */ .apply-card{position:sticky;top:var(--s-5);padding:var(--s-5);border:1px solid var(--line-2);border-top:3px solid var(--accent);border-radius:var(--r-3);background:var(--bg)} .apply-card .btn{width:100%;height:46px;font-size:15px} .apply-card .disclosure{margin-top:14px} .apply-card .apply-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3)} .apply-note a{color:var(--ink-2)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-ui);line-height:var(--lh-ui);margin-bottom:12px} .card-head b{font-weight:500} .card-head .status{font-size:var(--fs-sm)} .card-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:var(--fs-sm);line-height:var(--lh-sm);padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)} .card-facts dt{color:var(--ink-3)} .card-facts dd{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums} .card-facts dd .pay{font-size:16px} .apply-top{display:none} .apply-bar{display:none} /* ---------- 20. Explainers: kinds of work ---------- .kind-tile a link tile for one kind of work (home, inside .hv-kinds) .kinds-list plain rows with the pay at the right (field hero, right column) .steps three numbered steps (platform page) */ .eyebrow{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase} .kind-tile{display:grid;grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"t a" "d a" "n a";column-gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--line);align-items:start;color:var(--ink)} .kind-tile b{grid-area:t;font-weight:500;font-size:15px;line-height:22px;letter-spacing:-.005em} .kind-tile .kind-do{grid-area:d;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kind-tile .kind-n{grid-area:n;margin-top:4px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums} .kind-tile .kind-n i{font-style:normal;color:var(--ink);font-weight:500} .kind-tile svg{grid-area:a;align-self:center;color:var(--ink-3);width:16px;height:16px} .kind-tile:hover b,.kind-tile:hover svg{color:var(--accent)} .kinds-cap{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);margin-bottom:8px} .kinds-list{border-top:1px solid var(--line-2)} .kinds-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 20px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline} .kinds-list .kind-name{grid-column:1;grid-row:1;font-weight:500;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)} .kinds-list .kind-what{grid-column:1;grid-row:2;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3)} .kinds-list .kind-pay{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right;font-size:var(--fs-ui);line-height:var(--lh-ui);white-space:nowrap} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin-top:2px;counter-reset:step} .steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start} .steps li::before{content:counter(step);font-size:var(--fs-pay);line-height:24px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums} .steps h3{font-size:17px;line-height:24px;letter-spacing:-.01em} .steps p{margin-top:4px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:34ch} /* plain link rows: title + one quiet line, no cards (platforms page) */ .rows{margin-top:var(--s-4);border-top:1px solid var(--line-2)} .row-link{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:var(--s-5);align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)} .row-link:hover .row-title{color:var(--accent)} .row-title{font-weight:500;color:var(--ink)} .row-desc{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:66ch} .row-tag{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);white-space:nowrap} /* ---------- 21. Email signup ---------- .signup box: text at the left (.signup-text), form at the right, note under the form .slim-signup one-row waitlist between two hairlines (home) .alerts-line one quiet sentence, no form (guide) */ .signup{margin-top:var(--s-7);padding:var(--s-5);border:1px solid var(--line-2);border-radius:var(--r-3);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text form" "text note";gap:6px var(--s-5);align-items:center} .signup .signup-text{grid-area:text} .signup h3{font-size:17px;line-height:24px} .signup p{margin-top:4px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:46ch} .signup-form{grid-area:form;display:flex;gap:var(--s-2)} .signup-form input{height:var(--h-ctl);width:260px;max-width:100%;padding:0 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font-size:15px} .signup-form input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .signup-form .btn{height:var(--h-ctl)} .signup-note{grid-area:note;margin:0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .slim-signup{display:flex;align-items:center;gap:var(--s-3);margin:18px 0 6px;padding:14px 12px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);flex-wrap:wrap} .slim-signup .slim-text{flex:1;min-width:260px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} .slim-signup .slim-text b{color:var(--ink);font-weight:500} .slim-signup input{height:var(--h-ctl);width:220px;padding:0 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font-size:15px} .slim-signup input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .slim-signup .btn{height:var(--h-ctl)} .alerts-line{max-width:880px;margin:40px auto 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)} .alerts-line b{color:var(--ink);font-weight:500} /* ---------- 22. Prose ---------- .prose FAQ blocks, listing text, any reading column at 17/27 .prose--article the guide's reading column at 18/29 with big section heads .prose--listing a platform's own listing text (job): body-sized heads, plain bullets */ .prose{font-size:var(--fs-prose);line-height:var(--lh-prose);max-width:var(--w-prose);overflow-wrap:anywhere} .prose h2{font-size:22px;line-height:28px;letter-spacing:-.014em;margin:36px 0 10px} .prose h3{font-size:18px;line-height:25px;margin:24px 0 6px} .prose p{margin:0 0 14px} .prose ul,.prose ol{padding-left:20px;margin:0 0 14px} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li{margin-bottom:4px} .prose .lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-2)} .prose table{width:100%;border-collapse:collapse;font-size:var(--fs-body);line-height:var(--lh-body);margin:var(--s-4) 0 var(--s-5)} .prose th,.prose td{text-align:left;vertical-align:top;padding:9px 16px 9px 0;border-bottom:1px solid var(--line)} .prose thead th{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line-2);white-space:nowrap} .prose th.r,.prose td.r{text-align:right;font-variant-numeric:tabular-nums;padding-right:0} .prose th.r + th.r,.prose td.r + td.r{padding-left:16px} .prose tbody th{font-weight:500} .prose tbody th small{display:block;font-weight:400;font-size:var(--fs-sm);line-height:18px;color:var(--ink-3)} .prose tbody th .few{font-weight:400;font-size:var(--fs-xs);color:var(--ink-3);margin-left:6px;white-space:nowrap} .prose th.bar,.prose td.bar{width:36%;padding-right:20px} .prose td.bar{padding-top:13px} .prose td.bar .bar-svg{height:8px} .prose tr.is-few td.r{color:var(--ink-2)} .prose tr.is-few td.r .money{color:var(--ink-2);font-weight:400} .prose .n-m{display:none} .prose .ph{color:var(--ink-2)} .prose .foot-note{font-size:var(--fs-sm);line-height:19px;color:var(--ink-3)} .prose details{border-top:1px solid var(--line);padding:10px 0} .prose details:last-of-type{border-bottom:1px solid var(--line)} .prose summary{cursor:pointer;font-weight:500;font-size:16px;line-height:24px;list-style:none;display:flex;align-items:center;gap:10px} .prose summary::-webkit-details-marker{display:none} .prose summary::before{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);flex:none;transition:transform .12s ease} .prose details[open] summary::before{transform:rotate(45deg)} .prose details p{margin:8px 0 4px 18px;font-size:16px;line-height:25px;color:var(--ink-2)} .prose--article{max-width:none;font-size:18px;line-height:29px} .prose--article .chart-foot,.prose--article .foot-note{max-width:none} .prose--article h2{font-size:27px;line-height:33px;letter-spacing:-.018em;margin:60px 0 14px} .prose--article > h2:first-child{margin-top:0} .prose--article h3{font-size:20px;line-height:27px;margin:30px 0 8px} .prose--article p{margin:0 0 16px} .prose--article .lead{color:var(--ink);font-size:19px;line-height:29px} .prose--article table{margin:18px 0 12px} .prose--listing .lead{font-size:inherit;line-height:inherit;color:var(--ink)} .prose--listing h2{font-size:18px;line-height:24px;margin:26px 0 8px} .prose--listing ul{padding-left:18px;margin-bottom:10px} .prose--listing li{margin-bottom:3px;padding-left:2px} .prose--listing li::marker{color:var(--ink-3)} .faq-wrap .prose{max-width:var(--w-prose)} /* ---------- 23. Long-form article (guide) ---------- Reading column and contents rail, centred as a pair. The rail is sticky, marks the current section, and collapses into a toggle on phones (.toc-check + .toc-head). */ .article{display:grid;grid-template-columns:600px 216px;grid-template-areas:"head toc" "body toc";gap:0 64px;justify-content:center;padding-top:24px;align-items:start} .article-head{grid-area:head} .article-head h1{font-size:38px;line-height:44px} .article-body{grid-area:body;margin-top:40px} .article .contents{grid-area:toc} .in-brief{margin-top:18px;padding:18px 20px;border-left:3px solid var(--accent);background:var(--bg-2);border-radius:0 var(--r-2) var(--r-2) 0} .in-brief .eyebrow{margin-bottom:6px} .in-brief p{font-size:17px;line-height:26px} .in-brief ul{margin-top:8px;padding-left:18px;list-style:disc;font-size:15px;line-height:23px;color:var(--ink-2)} .in-brief li{margin-bottom:2px} .contents{position:sticky;top:28px;font-size:var(--fs-ui);line-height:var(--lh-ui)} .contents .eyebrow{margin-bottom:10px} .toc-head{display:flex;align-items:center;justify-content:space-between;pointer-events:none} .toc-head svg{display:none;color:var(--ink-3)} .contents ol{padding:0} .contents li{color:var(--ink-2)} .contents li a{display:block;padding:5px 0 5px 12px;border-left:2px solid var(--line);color:var(--ink-2);line-height:20px} .contents li a:hover{color:var(--ink)} .contents li a[aria-current]{color:var(--ink);font-weight:500;border-left-color:var(--accent)} /* the guide's single range strip: labelled median above, ends inside the band, axis under */ .range{margin:8px 0 28px} .range-top{position:relative;height:24px;font-size:var(--fs-ui);line-height:20px;font-variant-numeric:tabular-nums} .range-median{position:absolute;left:47.5%;transform:translateX(-50%);white-space:nowrap;color:var(--ink);font-weight:500} .range-median b{color:var(--accent);font-weight:600;font-size:16px} .range-bar{position:relative;height:16px} .range-bar .range-svg{height:16px;border-radius:3px;overflow:hidden} .range-bar .tick{position:absolute;top:-5px;bottom:-5px;left:47.5%;width:2px;margin-left:-1px;background:var(--accent-2)} .range-bar .end{position:absolute;top:0;height:16px;line-height:16px;font-size:var(--fs-xs);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} .range-bar .end-lo{left:25%;padding-left:7px} .range-bar .end-hi{right:30%;padding-right:7px} .range .chart-axis{margin-top:0} .range figcaption{margin-top:10px;font-size:var(--fs-sm);line-height:19px;color:var(--ink-2)} /* three gaps as numbered blocks */ .gap{margin:24px 0 0;padding:20px 0 6px;border-top:1px solid var(--line)} .gap h3{margin:0 0 6px;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline} .gap h3 .n{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600} .gap .gap-sum{margin:0 0 12px 36px;font-size:18px;line-height:28px;font-weight:500;color:var(--ink)} .gap p,.gap ul{margin-left:36px} .gap ul{padding-left:20px} .gap .pull-stat{margin-left:36px} /* pull-outs and callouts */ .pull-stat{margin:22px 0 24px;padding:16px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 20px;align-items:baseline} .pull-stat b{font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap} .pull-stat span{font-size:15px;line-height:22px;color:var(--ink-2)} .pull-stat small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3)} .pull{margin:22px 0 24px;padding:4px 0 4px 20px;border-left:3px solid var(--accent)} .pull b{display:block;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.018em} .pull span{display:block;margin-top:4px;font-size:15px;line-height:22px;color:var(--ink-2)} .callout{margin:20px 0 24px;padding:18px 20px;background:var(--band);border-radius:var(--r-3)} .callout .eyebrow{margin-bottom:6px} .callout p{margin:0 0 10px;font-size:16px;line-height:25px} .prose .callout ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px} .callout li{margin:0;padding-left:16px;position:relative;font-size:16px;line-height:24px;font-weight:500} .callout li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:2px;background:var(--accent)} /* payment facts: four equal columns */ .prose .pay-facts{margin:8px 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 20px;padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)} .pay-facts dt{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .pay-facts dd{margin-top:4px;font-size:19px;line-height:24px;font-weight:600;letter-spacing:-.012em;font-variant-numeric:tabular-nums} .pay-facts dd small{display:block;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:400;color:var(--ink-2);letter-spacing:0} /* CTA box inside the article */ .prose .cta{margin:24px 0 24px;padding:22px 22px 20px;border:1px solid var(--line-2);border-radius:var(--r-3);font-size:16px;line-height:25px} .prose .cta .btn{height:46px;font-size:15px;padding:0 20px} .prose .cta p{margin:14px 0 0} .prose .cta .disclosure{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:block} .prose .sources li{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} /* more guides as navigation */ .sect.guides-more{padding-top:64px;max-width:880px;margin:0 auto} .guide-list{margin-top:var(--s-3);border-top:1px solid var(--line-2)} .guide-list a{display:grid;grid-template-columns:96px minmax(0,1fr) 16px;gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:24px;font-weight:500} .guide-list a span:first-child{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:400;color:var(--ink-3)} .guide-list a:hover{color:var(--accent)} /* ---------- 24. Footer ---------- .site-foot.is-flush no gap above at any width, for index pages that end on a hairline (platforms) .site-foot.is-after-bar page with a sticky .apply-bar (job): on phones the bar rests 20px above the footer */ .site-foot{padding:var(--s-7) 0 56px;font-size:var(--fs-ui);line-height:21px;color:var(--ink-2);margin-top:var(--s-8)} .site-foot.is-flush{margin-top:0;padding-bottom:40px} .site-foot .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px} .site-foot h3{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;color:var(--ink);margin-bottom:10px} .foot-about p{max-width:62ch} .foot-about p + p{margin-top:10px} .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:6px var(--s-5);align-content:start} .foot-links a{color:var(--ink-2)} .foot-links a:hover{color:var(--ink)} .foot-fine{grid-column:1 / -1;margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap} /* ---------- 25. Small text floor ---------- Every footnote, axis and list note is 13px on --ink-2. --fs-xs (12px) stays for labels over a figure (dt, caps) and never carries a sentence. Sits after the components so it wins. */ .bar-head,.chart-axis,.bar-axis,.foot-fine,.list-foot .list-note,.chart-foot,.day-head .day-note{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} /* ---------- 26. Reserve: pieces on the sheet, not yet on a page ---------- */ .key-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 20px;font-size:var(--fs-ui);line-height:var(--lh-ui);padding-top:var(--s-1)} .key-facts dt{color:var(--ink-3)} .key-facts dd{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums lining-nums} .share{margin-top:40px} .share-cap{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);margin-bottom:10px} .share-cap b{color:var(--ink);font-weight:500;font-size:var(--fs-ui)} .share-svg{width:100%;height:14px;border-radius:3px;overflow:hidden} .share-svg rect{fill:var(--bar)} .share-svg rect:nth-child(2){fill:var(--share-2)} .share-svg rect:nth-child(3){fill:var(--share-3)} .share-svg rect:nth-child(4){fill:var(--share-4)} .share-svg rect:nth-child(5){fill:var(--share-5)} .share-svg rect:nth-child(6){fill:var(--share-6)} .share-svg rect:nth-child(7){fill:var(--share-7)} .share-svg rect:nth-child(8){fill:var(--share-8)} .share-svg rect:nth-child(9){fill:var(--share-9)} .share-svg rect:nth-child(10){fill:var(--share-10)} .share-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);font-variant-numeric:tabular-nums} .share-legend span{display:inline-flex;align-items:center;gap:6px} .share-legend b{font-weight:500;color:var(--ink)} .share-legend i{width:10px;height:10px;border-radius:2px;flex:none;background:var(--bar)} .share-legend span:nth-child(2) i{background:var(--share-2)} .share-legend span:nth-child(3) i{background:var(--share-3)} .share-legend span:nth-child(4) i{background:var(--share-4)} .share-legend span:nth-child(5) i{background:var(--share-7)} .notice{display:flex;align-items:baseline;gap:var(--s-3);padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-2);background:var(--bg-2);font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);flex-wrap:wrap} .notice b{color:var(--ink);font-weight:500} .notice .notice-time{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums} .notice.is-plain{border-left-color:var(--line-2)} .kinds{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line-2)} .kinds-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin-top:var(--s-4)} .kind h3{font-size:17px;line-height:24px;letter-spacing:-.01em} .kind p{margin-top:6px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:38ch} .kind-fact{margin-top:10px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);font-variant-numeric:tabular-nums} .kind-fact b{color:var(--ink);font-weight:500} .compare-wrap{margin-top:var(--s-4)} .compare{width:100%;border-collapse:collapse;font-size:var(--fs-body);line-height:var(--lh-body)} .compare th,.compare td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)} .compare thead th{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-weight:500;padding-bottom:8px;border-bottom:1px solid var(--line-2)} .compare thead th.col-head{font-size:16px;line-height:22px;color:var(--ink);font-weight:600} .compare tbody th{font-weight:500;color:var(--ink);width:22%} .compare td{color:var(--ink-2)} .compare td .pay{font-size:16px} .compare td b{color:var(--ink);font-weight:500} .compare .sub{display:block;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);margin-top:2px} .pager{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-5) 12px 0;flex-wrap:wrap} .pager .pager-status{margin-left:auto;font-size:var(--fs-ui);color:var(--ink-2);font-variant-numeric:tabular-nums} .pager .pager-status b{color:var(--ink);font-weight:500} .pager-pages{display:flex;gap:2px} .pager-pages a,.pager-pages span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:var(--h-btn);padding:0 10px;border-radius:var(--r-2);font-size:var(--fs-ui);color:var(--ink-2);font-variant-numeric:tabular-nums} .pager-pages a:hover{background:var(--bg-2);color:var(--ink)} .pager-pages [aria-current]{background:var(--ink);color:var(--on-accent);font-weight:500} .pager-pages .gap{color:var(--ink-3);min-width:24px} .article-meta{margin-top:var(--s-3);display:flex;gap:18px;font-size:var(--fs-ui);color:var(--ink-2);flex-wrap:wrap;font-variant-numeric:tabular-nums} .article-meta b{color:var(--ink);font-weight:500} /* ---------- 27. Responsive ---------- */ /* phone apply bar (job page): hidden until .apply-top has left the viewport, see the 720px block */ @keyframes apply-bar-in{ from{translate:0 110%;visibility:hidden} to{translate:0 0;visibility:visible} } @media (max-width:1040px){ .job{grid-template-columns:minmax(0,1fr) 290px;gap:0 40px} .article{grid-template-columns:minmax(0,600px) 200px;gap:0 40px} .cmp .bar-head,.cmp .bar-row,.cmp .bar-axis{grid-template-columns:118px minmax(0,1fr) 44px 92px 196px 14px} .cmp .bar-head{grid-template-areas:"name bar count share val chev"} .cmp .bar-row{grid-template-areas:"name bar count share val chev" "name bar count share rng chev" "fields fields fields fields fields fields"} .cmp .bar-head .h-fields{display:none} .cmp .bar-fields{margin-top:4px} .split{grid-template-columns:1fr;gap:var(--s-5)} .role-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ h1{font-size:36px;line-height:42px} .hero-cols{grid-template-columns:1fr;gap:var(--s-5)} .steps{grid-template-columns:1fr;gap:var(--s-5)} .steps p{max-width:60ch} .job{grid-template-columns:1fr;gap:0} .apply-card{display:none} .apply-top{display:block;margin-top:18px} .apply-top .btn{width:100%;height:46px;font-size:15px;gap:8px} .apply-top .disclosure{margin-top:var(--s-3);font-size:var(--fs-ui);line-height:var(--lh-ui)} /* the same note the desktop card shows (reward line, "not the employer"), kept on phones as on the old site */ .apply-top .apply-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-3);max-width:var(--w-prose)} .article{grid-template-columns:minmax(0,600px);grid-template-areas:"head" "toc" "body";gap:0;justify-content:start} .article-body{margin-top:28px} .contents{position:static;margin:20px 0 0;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-2);max-width:var(--w-prose)} .toc-head{pointer-events:auto;cursor:pointer;padding:11px 0} .toc-head svg{display:block;transition:transform .12s ease} .contents ol{display:none;padding-bottom:10px} .toc-check:checked ~ ol{display:block} .toc-check:checked ~ .toc-head svg{transform:rotate(180deg)} .contents li a{border-left:0;padding:6px 0;border-top:1px solid var(--line)} .kinds-grid{grid-template-columns:1fr;gap:var(--s-5)} .kind p{max-width:60ch} .site-foot .wrap{grid-template-columns:1fr;gap:28px} .signup{grid-template-columns:1fr;grid-template-areas:"text" "form" "note";gap:var(--s-4)} .signup-form input{width:auto;flex:1} } @media (max-width:720px){ :root{--gutter:16px;--h-head:56px} /* header: nav becomes a panel under the bar */ .site-head .wrap{gap:var(--s-4)} .nav-btn{display:inline-flex} .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:var(--s-2) var(--gutter) var(--s-4);background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -12px var(--shadow)} .nav a{padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)} .nav a:last-of-type,.nav a:nth-last-of-type(2){border-bottom:0} .nav-check:checked ~ .wrap .nav{display:flex} .head-end .theme-seg{display:none} .nav .theme-seg{display:flex;height:46px;margin-top:var(--s-3)} .nav .theme-seg[hidden]{display:none} .nav .theme-opt{flex:1;font-size:var(--fs-ui)} /* page head */ .hero{padding:28px 0 var(--s-6)} .hero--list{padding-bottom:18px} .hero--list .hero-lead{margin-top:8px} .hero .crumbs{margin-bottom:var(--s-3)} .hero-cols{margin-top:20px} h1{font-size:32px;line-height:37px;letter-spacing:-.024em} .hero-lead{font-size:16px;line-height:24px} .title-block h1,.job-head h1,.article-head h1{font-size:28px;line-height:33px} .title-row{gap:10px} .title-desc{flex-basis:100%;padding-top:0;margin-top:-6px;font-size:16px;line-height:22px} .stamp{gap:2px 14px} .stamp span+span::before{content:none} .trust{line-height:22px} .trust a{display:inline-block;padding:2px 0} .trust span{display:block;flex-basis:100%} .figs{gap:14px 28px;margin-top:18px} .fig-n{font-size:26px;line-height:30px} .figs--lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:20px;padding-top:16px} .figs--lg .fig-n{font-size:26px;line-height:30px} .figs--lg .fig-l{font-size:var(--fs-xs);line-height:var(--lh-xs)} .figs--band{grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:start;margin-top:16px;padding:14px 16px 12px} .figs--band .fig--main{grid-row:1 / 3} .figs--band .fig--main .fig-n{font-size:44px;line-height:44px} .figs--band .fig--main .pay-unit{font-size:16px} .figs--band .fig--main .fig-l{max-width:9em} .figs--band .fig-n{font-size:17px;line-height:21px} .figs--band .fig-l{margin-top:1px;font-size:var(--fs-xs);line-height:var(--lh-xs)} .fig-src{margin-top:8px;padding-top:8px;gap:2px} .fig-src span + span{display:none} .cta-row{margin-top:20px} .cta-row .btn{flex:1} /* a kind tile is a bordered box on a phone */ .kind-tile{flex:0 0 232px;scroll-snap-align:start;grid-template-areas:"t a" "n a";padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-2)} .kind-tile .kind-do{display:none} .kind-tile .kind-n{margin-top:2px;white-space:normal} .kinds-list li{padding:9px 0} /* toolbar */ .toolbar .wrap{flex-wrap:wrap;gap:var(--s-2)} .search{max-width:none;flex-basis:100%} .filters{min-width:0;flex-wrap:wrap} .chip.hide-m,.chip-select.hide-m{display:none} .chip-more{display:inline-flex} .toolbar-count{font-size:var(--fs-ui);padding-left:6px} /* sections and lists */ .sect{padding:40px 0 0} .sect-roles{padding-top:26px} .sect-head.has-legend{display:block} .list-legend{margin-top:6px;white-space:normal;flex-wrap:wrap;gap:6px 14px} .disclosure--list{padding:10px 0 0} h2{font-size:25px;line-height:30px} .day-head{padding:10px 0;flex-wrap:wrap;gap:4px 10px} .day-head b,.day-head span{white-space:nowrap} .day-head--stack .day-note{flex-basis:100%;margin-left:0} /* role row on phone: pay and platform on one line, then title, then one quiet line */ .role{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pay plat" "title title" "meta meta";padding:14px 0 13px;border-radius:0;row-gap:2px} .role .pay{flex-wrap:nowrap;font-size:18px;padding-top:0} .role .pay-pre{order:0;flex-basis:auto;margin:0 4px 0 0;font-size:.74em;line-height:inherit} .role .chev{display:none} .role--noplat{grid-template-columns:minmax(0,1fr);grid-template-areas:"pay" "title" "meta"} .role-platform{line-height:24px} .role-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:22px;margin-top:2px} .role-meta{font-size:var(--fs-ui);line-height:var(--lh-ui);gap:0 14px;flex-wrap:wrap;white-space:normal} .role:hover{background:none} /* stacked title links reach 40px of tap height each; the gap moves into the link */ .role-group .role-titles{margin-top:2px;gap:0} .role-group .role-titles a{white-space:normal;line-height:22px;display:flex;align-items:center;min-height:40px} .role-group .role-platform{line-height:24px} .more-row{padding:11px 0} .sect-cards{padding-bottom:20px} .role-cards{grid-template-columns:1fr;gap:10px} .role-cards > :nth-child(n+4){display:none} /* phones: three cards, the list below is the list */ .role-card{padding:14px 16px 12px} .role-card:hover{background:var(--bg)} .more-like{margin-top:40px} .list-foot{padding:16px 0 0} .list-foot .list-note{margin-left:0} /* bands and bar rows */ .band{margin-top:var(--s-7);padding:44px 0 var(--s-7)} .band .sect + .sect{margin-top:var(--s-7)} .bar-head{display:none} .bar-row{grid-template-columns:minmax(0,1fr) 44px auto;grid-template-areas:"name count val" "bar bar bar";gap:6px 14px;padding:12px 0} .bar-name{grid-area:name}.bar-count{grid-area:count;text-align:right}.bar-val{grid-area:val;min-width:118px}.bar-svg{grid-area:bar;height:8px} .bar-row--wide{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bar bar";gap:6px 12px;padding:10px 0} .bar-row--wide .bar-val{min-width:0} .bar-name small{display:inline;margin-left:6px} .bar-axis{grid-template-columns:1fr;grid-template-areas:none;padding:6px 0 0} .bar-row--count{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name count" "val val" "bar bar";gap:2px 14px} .bar-row--count .bar-val{text-align:left;min-width:0;margin-bottom:6px} .bar-row--count .bar-count{font-size:15px} /* range chart */ .chart{margin-top:28px} .chart-cap{flex-direction:column;align-items:flex-start;gap:2px} .chart-row,.chart-row--narrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label val" "svg svg";gap:4px 12px;padding:8px 0} .chart-label{grid-area:label}.chart-val{grid-area:val}.chart-row .range-svg{grid-area:svg} .chart-axis-inner{grid-column:1 / -1} /* compare rows: name + chevron, median (anchor) + open roles, then full-width bar, range line, share line, fields */ .cmp .bar-head,.cmp .bar-axis{display:none} .cmp .bar-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name chev" "val count" "bar bar" "rng rng" "share share" "fields fields";gap:6px 14px;padding:14px 0 13px;margin:0;border-radius:0} .cmp .bar-row:hover{background:none} .cmp .bar-name{font-size:16px;line-height:22px} .cap{display:inline;font-weight:400;color:var(--ink-3);font-size:var(--fs-xs);line-height:var(--lh-xs);white-space:nowrap} .cmp .bar-val{line-height:24px;text-align:left;margin-top:2px;min-width:0} .cmp .bar-val b{font-size:20px} .cmp .bar-val .cap{margin-left:0} .cmp .bar-count{text-align:right;font-weight:600;font-size:16px;line-height:24px;align-self:end;margin-top:2px} .cmp .bar-count .cap{margin-left:5px;font-weight:400} .cmp .bar-svg{height:8px;margin-top:-2px} .rng{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;text-align:left} .rng small{margin:0;white-space:normal} .bar-share{display:flex;flex-wrap:wrap;gap:0 4px;text-align:left;font-weight:400;color:var(--ink-3);font-size:var(--fs-xs);line-height:var(--lh-xs)} .bar-share b{order:1;font-weight:500;color:var(--ink)} .bar-share b::before{content:"("} .bar-share b::after{content:")"} .bar-share.is-low b{color:var(--ink-2)} .bar-share small{display:inline;white-space:normal;font-size:inherit;line-height:inherit} .cmp .bar-fields{margin-top:0} .row-link{grid-template-columns:1fr;gap:3px;padding:12px 0} .row-tag{order:1;margin-top:1px} /* job page */ .job{padding-top:20px} .job-by{margin-top:10px;gap:12px} .job-pay{margin-top:16px} .pay-xl{font-size:30px;line-height:34px} .pay-cap{gap:2px 12px} .pay-cap span+span::before{content:none} .glance{margin-top:22px;padding:14px 16px;gap:8px 16px} .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:18px;padding:16px 0 12px} .facts > div:first-child{grid-column:1 / -1} .listing{margin-top:28px} .listing-toggle{display:inline-flex;width:100%;margin-top:4px} .listing-toggle .when-open{display:none} .listing-check:checked ~ .listing-toggle .when-closed{display:none} .listing-check:checked ~ .listing-toggle .when-open{display:inline} .listing-body{display:none} .listing-check:checked ~ .listing-body{display:block;margin-top:18px} .apply-bar{display:flex;position:sticky;bottom:0;z-index:6;align-items:center;gap:14px;margin:12px calc(-1 * var(--gutter)) 0;padding:10px var(--gutter);background:var(--bg);border-top:1px solid var(--line)} .apply-bar .pay{font-size:18px;line-height:22px} .apply-bar .btn{margin-left:auto;height:42px;padding:0 18px} /* anchor jumps and focus never land under the sticky bar: 63px bar + its 12px margin */ html:has(.apply-bar){scroll-padding-bottom:76px} .site-foot.is-after-bar{margin-top:20px} /* the bar only shows once the top Apply button (.apply-top) has scrolled out above, so it never sits over the control the reader is about to press. CSS only: a view timeline on .apply-top drives the bar; browsers without scroll-driven animations keep the plain sticky bar and the scroll padding. */ @supports (animation-timeline:view()){ main:has(.apply-bar){timeline-scope:--apply-top} .apply-top{view-timeline:--apply-top block} .apply-bar{animation:apply-bar-in linear both;animation-timeline:--apply-top;animation-range:exit 96% exit 100%} } /* prose and article */ .prose{font-size:16px;line-height:25px} .prose h2{font-size:20px;line-height:26px;margin-top:28px} .prose--article h2{font-size:23px;line-height:29px;margin-top:48px} .prose--article h3{font-size:19px;line-height:25px} .prose--article .lead{font-size:17px;line-height:26px} .prose--listing h2{font-size:18px;line-height:24px;margin-top:26px} .in-brief{margin-top:14px;padding:14px 16px} .in-brief p{font-size:16px;line-height:24px} .range-median b{font-size:15px} .prose th.bar,.prose td.bar{width:40%;padding-right:12px} .prose th.r + th.r,.prose td.r + td.r{padding-left:12px} .prose .col-n,.prose td.n-d{display:none} .prose .n-m{display:block} .prose tbody th .few{display:block;margin:0} .gap h3{grid-template-columns:28px minmax(0,1fr)} .gap .gap-sum,.gap p,.gap ul,.gap .pull-stat{margin-left:0} .gap .gap-sum{font-size:17px;line-height:26px} .pull-stat{grid-template-columns:1fr;gap:4px} .pull-stat b{font-size:32px;line-height:36px} .pull b{font-size:21px;line-height:27px} .prose .callout ul{grid-template-columns:1fr} .prose .pay-facts{grid-template-columns:1fr 1fr;gap:14px 16px} .pay-facts dd{font-size:17px;line-height:22px} .prose .cta{padding:18px 16px 16px} .prose .cta .btn{width:100%} .guide-list a{grid-template-columns:minmax(0,1fr) 16px;gap:2px 12px} .guide-list a span:first-child{grid-column:1;order:-1} .guide-list a span:nth-child(2){grid-column:1} .guide-list a .chev{grid-row:1 / 3;grid-column:2} .sect.guides-more{padding-top:48px} /* signup, footer, reserve pieces */ .signup{padding:var(--s-4)} .signup-form{flex-wrap:wrap} .signup-form .btn{flex:1} .slim-signup{padding:14px 0;gap:10px} .slim-signup .slim-text{flex-basis:100%;min-width:0} .slim-signup input{flex:1;width:auto;min-width:0} .site-foot{padding:36px 0 var(--s-7)} .share{margin-top:28px} .notice .notice-time{margin-left:0;flex-basis:100%} .compare thead{display:none} .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block} .compare tr{padding:12px 0;border-bottom:1px solid var(--line)} .compare tbody th{width:auto;padding:0 0 6px;border:0;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-weight:500;text-transform:uppercase;letter-spacing:.02em} .compare td{padding:4px 0 4px 100px;border:0;position:relative;min-height:22px} .compare td::before{content:attr(data-col);position:absolute;left:0;top:4px;width:88px;color:var(--ink);font-weight:500} .pager{padding:var(--s-5) 0 0} .pager .pager-status{margin-left:0;flex-basis:100%;order:-1} } @media (prefers-reduced-motion:no-preference){ .btn,.chip,.role,.role-title,.bar-name,.chev,.kind-tile b,.kind-tile svg{transition:background-color .12s ease,border-color .12s ease,color .12s ease} } /* site additions, not in ds.css */ /* Skip link: off screen until it has keyboard focus (ds.css has no rule for it). */ .skip{position:absolute;left:var(--gutter);top:-80px;z-index:20;padding:10px 14px;border-radius:var(--r-3);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none} .skip:focus{top:12px;outline:2px solid var(--focus);outline-offset:2px} /* Roles toolbar as a form: a checkbox inside a chip, the chip lit while checked; on phones the Filters chip unfolds the hidden controls (jobs.js puts .open on the form) and shows a "Show results" chip. ds.css has only the static toolbar. */ .toolbar .filters{flex-wrap:wrap} .search{min-width:220px} .chip input[type=checkbox]{margin:0 2px 0 0;accent-color:var(--accent)} .chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent)} .f-done{display:none} .chip[hidden],.btn[hidden],.chip-select[hidden],.disclosure[hidden],.list-legend span[hidden]{display:none} /* Review-only platform page: the notice stands in for the figures, so it takes the same gap under the stamp. */ .title-block .notice{margin-top:var(--s-4)} /* Match quiz: the toolbar pieces as a plain block under the title, not sticky; the button sits level with the chips. */ .toolbar--static{position:static;backdrop-filter:none;background:var(--bg)} .toolbar--static .filters .btn{height:var(--h-ctl)} /* Earnings calculator: labelled controls in one row; number inputs take the signup-form input look (ds.css section 21). */ .tool-form{display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-5);align-items:flex-end;margin-top:var(--s-6)} .tool-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .tool-form input{height:var(--h-ctl);width:150px;padding:0 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font-size:15px;color:var(--ink)} .tool-form input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .tool-form .btn{height:var(--h-ctl)} /* Tables inside prose (compare pages, pay report): the wrapper scrolls sideways instead of the whole page, and long cell text can break. Numeric cells (td.r) stay on one line so the columns line up. */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .prose td,.prose th{overflow-wrap:break-word} .prose td.r,.prose th.r{white-space:nowrap} /* Long single words (slugs, joined titles) never push the page wider than the viewport. */ .job-head h1,.role-title,.role-card .role-title,.facts dd,.card-facts dd,.title-block h1,.hero h1{overflow-wrap:anywhere} .job > *{min-width:0} .chart-val{min-width:0;overflow-wrap:anywhere} .role-meta span:first-child{flex-shrink:0} /* A figure that is words, not a number ("Rate not listed"): smaller and allowed to wrap. */ .fig-n.is-text{white-space:normal;font-size:22px;line-height:28px;letter-spacing:-.01em;color:var(--ink-2)} .figs--lg .fig-n.is-text{font-size:24px;line-height:30px} /* The referral note inside the phone apply bar: mark plus a link to the disclosure, under the pay figure. */ .apply-bar .bar-pay{display:flex;flex-direction:column;gap:2px;min-width:0} .apply-bar .bar-ref{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);white-space:nowrap} .apply-bar .bar-ref a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px} /* Keyboard focus on the checkbox-driven toggles lands on their visible label. */ .nav-check:focus-visible ~ .wrap .nav-btn,.toc-check:focus-visible + .toc-head,.listing-check:focus-visible + .listing-toggle{outline:2px solid var(--focus);outline-offset:2px} /* Row in a .rows list that is not a link (alerts "coming soon") keeps the row layout without the hover colour. */ div.row-link .row-title,div.row-link:hover .row-title{color:var(--ink-2)} /* The hidden checkboxes behind the menu and the full-listing toggle leave the tab order where their label is not shown. */ @media (min-width:721px){ .nav-check,.listing-check{display:none} } /* Link row at the foot of a role list on the platform index: the finder filtered by one platform. */ .pl-links{margin-top:var(--s-4)} .pl-links a{white-space:nowrap} .row-title .refmark{margin-left:6px} .row-title .ref-tag{margin-left:4px} /* 404 keeps the gap under its title block like every other title-block page. */ .title-block + .sect,.title-block + .prose{padding-top:var(--s-7)} /* Finder toolbar, one row at every width like the mockup: the search keeps a real minimum and grows to 460px; the chips that do not fit sit behind the Filters chip. .hide-d chips (language, where, new, reset) are behind it at every width; .hide-m chips (field, platform, rate, sort) join them below 1200px, where the four selects (about 630px) plus a 260px search and the count no longer share one row (the 720px block hides .hide-m on every toolbar). */ #filters .search{flex:1 1 260px;min-width:260px} #filters .chip-more{display:inline-flex} #filters .hide-d{display:none} #filters.open .hide-d,#filters.open .hide-m{display:inline-flex} @media (max-width:1199px){ #filters .chip.hide-m,#filters .chip-select.hide-m{display:none} #filters.open .chip.hide-m,#filters.open .chip-select.hide-m{display:inline-flex} } @media (max-width:720px){ .toolbar.open .chip.hide-m,.toolbar.open .chip-select.hide-m,.toolbar.open .f-done{display:inline-flex} /* the open panel stays sticky (opening it while scrolled must not send it off screen); taller than the viewport it scrolls inside. Selects take a row each; Reset and Show results close the panel on a row of their own. */ #filters .search{flex-basis:100%;min-width:0} .toolbar.open{max-height:calc(100vh - 8px);overflow-y:auto} .toolbar.open .chip-select,.toolbar.open label.chip{flex-basis:100%} .toolbar.open #f-reset{margin-left:auto} .toolbar.open .f-done{flex:1 1 auto;justify-content:center} .chip-select{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* two money ranges do not fit the three narrow columns ds.css gives .figs--lg on phones: one under the other (.figs--lg below resets the gap, so this rule needs the double class) */ .figs--lg.figs--calc{grid-template-columns:1fr;gap:var(--s-5)} /* calculator inputs: a two-column grid, the platform preset across both */ .tool-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)} .tool-form .tool-field:first-child{grid-column:1 / -1} .tool-form input,.tool-form .chip-select{width:100%} /* three figures on a phone: a gap between the columns, and each column can shrink below its content */ .figs--lg{gap:0 12px} .figs--lg .fig{min-width:0} .figs--lg .fig-n{overflow-wrap:anywhere;white-space:normal} .figs--lg .fig-n.is-text{font-size:17px;line-height:22px} /* touch targets: buttons, footer links, crumbs, brand, chips, summaries and contents links reach 40px. Crumb links grow by a negative margin so the row keeps the mockup's visual height. */ .btn{height:40px} .btn-icon{width:40px} .foot-links a{display:inline-flex;align-items:center;min-height:40px} .foot-links{gap:0 var(--s-5)} .crumbs,.crumb-path{align-items:center} .crumbs a{display:inline-flex;align-items:center;min-height:40px;margin:-11px 0} .brand{display:inline-flex;align-items:center;min-height:40px} .field-row .chip{height:auto;min-height:40px;max-width:100%;white-space:normal;padding-top:6px;padding-bottom:6px} .prose summary,.fold-inline summary{min-height:40px} /* short text links on the job page reach 24px of tap height without moving the text */ .apply-bar .bar-ref a,.apply-top .disclosure a,.apply-top .apply-note a{display:inline-block;padding:4px 0;margin:-4px 0} /* byline platform link and the rate links reach 40px by a negative margin, so the lines keep their height */ .job-by a.ext{display:inline-flex;align-items:center;min-height:40px;margin:-9px 0} .pay-cap a{display:inline-flex;align-items:center;min-height:40px;margin:-11px 0} .pay-cap span{display:inline-flex;align-items:center} .contents li a{padding-top:10px;padding-bottom:10px} .figs--band .fig-n{white-space:normal;overflow-wrap:anywhere} .apply-bar .btn{height:42px} .apply-bar .pay{font-size:17px;line-height:20px} /* anchor and script jumps to the role list land under the sticky toolbar, not behind it */ #results,#roles{scroll-margin-top:72px} } /* The alerts link inside the nav panel only shows on the narrowest phones (rule below); it must sit before that block. */ .nav .nav-alerts{display:none} /* The bar with the alerts button needs 382px on a phone and 763px on the desktop bar (measured in the browser). Under those widths the button leaves the bar: on a phone up to 389px the nav panel keeps an alerts link, on the desktop bar from 721px to 779px the footer keeps it. Without this the page scrolled sideways at 361px and at 721px. */ @media (max-width:389px){ .head-end .btn-alerts{display:none} .nav .nav-alerts{display:block} .nav a:nth-last-of-type(2){border-bottom:1px solid var(--line)} } @media (min-width:721px) and (max-width:779px){ .head-end .btn-alerts{display:none} } @media (max-width:360px){ /* long button labels wrap instead of pushing the page wider */ .cta-row .btn{white-space:normal;height:auto;min-height:40px;padding-top:8px;padding-bottom:8px} /* two buttons side by side stay the same height when one label wraps */ .cta-row{align-items:stretch} } /* Portuguese pages: the alerts button carries the "(em inglês)" mark, so it is wider. It leaves the bar on every phone up to 440px (the nav panel keeps the alerts link) and on the desktop bar from 721px to 999px, where the three marked nav links need the room (the footer keeps the alerts link). From 780px to 849px the bar also closes its gaps, so every link and its mark stay on one line; from 721px to 779px each mark sits under its link. */ @media (max-width:440px){ :lang(pt) .head-end .btn-alerts{display:none} :lang(pt) .nav .nav-alerts{display:block} :lang(pt) .nav a:nth-last-of-type(2){border-bottom:1px solid var(--line)} } @media (min-width:721px) and (max-width:999px){ :lang(pt) .head-end .btn-alerts{display:none} } @media (min-width:721px) and (max-width:779px){ /* too narrow for one line even with the gaps closed (it needs 774px): the mark goes under its link on purpose */ :lang(pt) .nav{align-items:flex-start} :lang(pt) .nav .en-mark{display:block;line-height:14px} } @media (min-width:780px) and (max-width:849px){ :lang(pt) .site-head .wrap{gap:16px} :lang(pt) .nav{gap:12px} } /* a footer link on a phone is a flex box (40px touch target); with the mark it is a block, so the label and the mark run on as one text and wrap together. Same 40px for a one-line link: 21px line and 19px of padding. */ @media (max-width:720px){ :lang(pt) .foot-links a{display:block;min-height:40px;padding:9.5px 0} } /* Platform page, round 2 (c-platforms). The large buttons keep their 46px on phones too (the 720px rule above shrinks every .btn to 40px); the "Head to head" title keeps a section gap after the review prose; the finder links at the foot of the platforms index get a tap-sized line; a prose table shows its edge so a sideways scroll is visible. */ @media (max-width:720px){ .btn-lg{height:46px} .pl-links{line-height:36px} .pl-links a{display:inline-block;padding:2px 0;margin:-2px 0;line-height:36px} } .sect-head--after{margin-top:var(--s-7)} .table-wrap{border:1px solid var(--line);border-radius:var(--r-2)} .table-wrap table{min-width:100%} /* the label column keeps its words whole; the other cells break long urls rather than the page */ .prose td:first-child,.prose th:first-child{min-width:6em;overflow-wrap:normal} /* v6 fix round 3 (c-platforms): on phones a value cell and its link text break anywhere, so a three-column compare table fits the box instead of scrolling sideways; the quiet "no referral link" line under the platform buttons */ @media (max-width:480px){ .table-wrap td:not(:first-child),.table-wrap td:not(:first-child) a{overflow-wrap:anywhere;word-break:break-word} } .cta-row .cta-note{flex-basis:100%;margin:2px 0 0;font-size:13.5px;line-height:19px;color:var(--ink-3)} .chart-val small{display:block;font-weight:400;color:var(--ink-3);font-size:var(--fs-xs);line-height:var(--lh-xs);white-space:normal} /* v6 fix round 2, home (d-home) .guide-list--desc the home's guide rows carry the guide description under the title .review-only the quiet line naming reviewed platforms that have no public job list .toolbar--home the home toolbar on phones: one row of selects beside the Filters link, the count hidden (the h1 right above already carries the number); the finder's own toolbar is untouched .bar-name .ref-tag the referral words after a platform name on the home band, as small as on the compare row */ .guide-list--desc a{align-items:start} .guide-list--desc a small{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:400;color:var(--ink-2)} .guide-list--desc a .chev{align-self:center} .review-only{margin-top:var(--s-3)} .review-only a{white-space:nowrap} .bar-name .refmark{width:13px;height:13px;margin-left:6px} .bar-name .ref-tag{margin-left:4px;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400} @media (max-width:720px){ .toolbar--home .filters{flex:1 1 auto;flex-wrap:nowrap;min-width:0} .toolbar--home .chip-select{flex:1 1 0;min-width:0} .toolbar--home .chip-more{flex:none} .toolbar--home .toolbar-count{display:none} .bar-name .ref-tag{display:none} } @media (max-width:1199px){ /* the home toolbar keeps Field, Platform and Filters only (the finder has the rest), so it stays one row to 721px */ .toolbar--home .chip.hide-m,.toolbar--home .chip-select.hide-m{display:none} } @media (min-width:721px){ /* the search keeps room for its placeholder; a select is as wide as its longest option, so it is capped */ .toolbar--home .search{min-width:280px} .toolbar--home .chip-select{max-width:150px;overflow:hidden;text-overflow:ellipsis} } /* Field, language and country listings (round 2): the lead sits in the mockup's two-column row even with one column; a note under the roles heading; the grey "few rates" state on a hero figure; grey chart values (the bar is the fact). */ .hero-cols .hero-lead{margin-top:0} .sect-note{margin:calc(-1 * var(--s-3)) 0 var(--s-5);max-width:72ch;color:var(--ink-2);font-size:15px;line-height:1.55} .fig.is-few .fig-n,.fig.is-few .pay b,.fig.is-few .pay .pay-unit{color:var(--ink-2)} .band .bar-val,.band .chart-val small{color:var(--ink-2)} /* Listing toolbar: same row discipline as the home toolbar (search keeps its placeholder, selects are capped). */ @media (max-width:1199px){ .toolbar--list .chip.hide-m,.toolbar--list .chip-select.hide-m{display:none} } @media (min-width:721px){ .toolbar--list .search{min-width:280px} .toolbar--list .chip-select{max-width:150px;overflow:hidden;text-overflow:ellipsis} /* wider first column on the interview index (family names) and the pay tables keep a name on one line */ .rows--wide .row-link{grid-template-columns:300px minmax(0,1fr) auto} .pay-tbl tbody th a{white-space:nowrap} } @media (max-width:720px){ /* country rows on phones: the count sits beside the title instead of under it */ .rows--inline .row-link{grid-template-columns:minmax(0,1fr) auto;align-items:center} .rows--inline .row-title{grid-column:1} } /* glossary letter row under the title, and the two phone lines under a pay table name */ .field-row--after-title{margin-top:var(--s-5)} .prose .n-m span{display:block} /* Guides hub: each row carries the guide's one-line description under its title (the More guides list on guide pages stays compact), and the alerts line spans the same width as the list above it. */ .guide-list .guide-desc{display:block;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:400;color:var(--ink-2)} .guide-list a:hover .guide-desc{color:var(--ink-2)} .wrap > .guide-list + .alerts-line{max-width:none} /* Interview guide: its closing button is the accent button on its own line */ .prose .cta-row{margin-top:var(--s-5)} /* Earnings calculator: the "Using the listed rate of" note keeps a gap under the figures */ #e-job{margin-top:var(--s-3)} /* Match quiz: a "New" mark in the meta line for a role first seen under 3 days ago */ .role-meta .role-new{color:var(--accent);font-weight:500;flex:none} @media (max-width:720px){ /* match quiz chips on a phone: two even columns, full width */ .toolbar--static .filters{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)} .toolbar--static .filters .chip-select{width:100%} .toolbar--static .filters .btn{grid-column:1 / -1} } /* v6 fix round 3, finder toolbar (b-jobs-list). Desktop (1200px up): the row budget is fixed at the page width (1072px inside the gutters), so every piece that grows with a filter reserves its widest form up front: the count keeps room for "1,368 of 1,693 roles", the Filters chip for its badge, and the four selects are capped (a select is as wide as its longest option; the dropdown still shows the full text). The search keeps its full placeholder (about 290px); it cannot reach the mockup's 460px beside four selects and the count. Tablet (721 to 1199px): the open panel is the phone panel's shape, the search on a row of its own, the selects in a four-column grid, Reset, Show results and the count on the last row. */ .toolbar .wrap{position:relative} #filters #ftoggle{min-width:76px} @media (min-width:1200px){ #filters .search{flex:1 1 290px;min-width:290px} #filters .toolbar-count{min-width:122px;text-align:right} #filters .chip-select{max-width:132px;overflow:hidden;text-overflow:ellipsis} } /* the narrowest phones (320 to 359px): the three hero figures of a listing sit in 88px columns, so "$35.50/hr" and "64 of 71" need a smaller size to stay on one line (the 720px block lets .fig-n wrap rather than overflow) */ @media (max-width:359px){ .figs--lg .fig-n{font-size:20px;line-height:24px} } @media (min-width:721px) and (max-width:1199px){ #filters.open .wrap{flex-wrap:wrap} #filters.open .search{flex:1 1 100%;max-width:none;min-width:0} #filters.open .filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);flex:1 1 100%} #filters.open .chip-select{max-width:none;width:100%;overflow:hidden;text-overflow:ellipsis} #filters.open label.chip{min-width:0} #filters.open .f-done{display:inline-flex;justify-content:center;grid-column:2 / 4;height:var(--h-ctl)} #filters.open .toolbar-count{position:absolute;right:var(--gutter);bottom:0;line-height:var(--h-ctl)} #filters.open{max-height:calc(100vh - 8px);overflow-y:auto} } /* tools v2 */ /* Where to start (/tools/start): one bordered card per platform, three across (the first three are the ones in view), two at tablet, one on phones. .pcard-n is the count line, .pcard-rate and .pcard-new the quiet lines start.js fills. */ .pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)} .pcards > .list-note{grid-column:1 / -1} .pcard{display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px 20px 18px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg)} .pcard[hidden]{display:none} .pcard h3 a:hover{color:var(--accent)} .pcard .ref-tag{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400} .pcard-n{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} .pcard-n b{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px} .pcard-rate,.pcard-new{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .pcard p:empty{display:none} .pcard .cta-row{margin-top:auto;padding-top:var(--s-3);gap:var(--s-2)} #s-more{margin-top:var(--s-5)} #s-empty{margin-top:var(--s-2)} .pcards + .disclosure--list{margin-top:var(--s-5)} @media (max-width:1199px){ .pcards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:720px){ .pcards{grid-template-columns:1fr} .toolbar--static .filters label.chip{grid-column:1 / -1} } /* Changes (/changes): .chg-h names a group inside a day ("New 3"), .role--gone is a role row with no link (a role that is no longer on the list), .chg-note the "Was ..., now ..." line under a role whose listed pay changed. */ .chg-h{padding:14px 12px 4px;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)} .chg-h span{margin-left:4px;color:var(--ink-3);font-variant-numeric:tabular-nums} .role--gone,.role--gone:hover{background:none} .role--gone .role-title,.role--gone:hover .role-title,.role--gone .role-platform{color:var(--ink-2)} .chg-note{padding:8px 12px 12px;border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .chg-gap{margin-top:var(--s-4)} /* Alerts: the row of per-field feed links keeps the ink of a live row although it is not one link. */ div.row-link--feeds .row-title,div.row-link--feeds:hover .row-title{color:var(--ink)} .feed-links{display:flex;flex-wrap:wrap;gap:2px 14px} @media (max-width:720px){ .chg-h,.chg-note{padding-left:0;padding-right:0} } /* Role watch (/tools/watch): one .watch block per saved search, written by watch.js. .watch-h is its name, .watch-since the date it compares against; the rows inside are .role, .role--gone, .chg-h and .chg-note from the changes page. */ .watch{padding:var(--s-5) 0;border-top:1px solid var(--line)} .watch:first-child{border-top:0;padding-top:var(--s-2)} .watch-h{padding:0 12px;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600} .watch-h:focus{outline:none} .watch-since{padding:2px 12px 0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .watch > .list-note{padding:10px 12px 0} .watch .cta-row{margin-top:var(--s-4);padding:0 12px;gap:var(--s-2)} #w-list:empty{display:none} #w-error{margin-bottom:var(--s-3)} @media (max-width:720px){ .watch-h,.watch-since,.watch > .list-note,.watch .cta-row{padding-left:0;padding-right:0} .watch .cta-row .btn{flex:1 1 auto} .toolbar--static #w-msg{white-space:normal} } /* My roles (/tools/my-roles) and the Save control of a role page. .save-row holds "Save to my roles" and the link to the list; save.js shows it. .mr-bar is the add, search and backup block; .mr-card one saved role, written by my-roles.js: .mr-main (title, platform, listing state, dates, next step) beside .mr-side (status, note, remove). */ .save-row{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);margin-top:var(--s-3)} .save-row[hidden]{display:none} .save-row .link{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .save-row .btn:disabled,.mr-bar .btn:disabled,.mr-result:disabled{color:var(--ink-3);border-color:var(--line);background:var(--bg);cursor:default} .mr-bar .wrap{flex-direction:column;align-items:stretch} .mr-bar .search{flex:1 1 320px} .mr-bar .search input:disabled{background:var(--bg-2)} .mr-bar .list-note{margin:0} .mr-results{display:flex;flex-direction:column;max-width:720px;border:1px solid var(--line-2);border-radius:var(--r-2);overflow:hidden} .mr-results[hidden],.mr-manual[hidden],.mr-export[hidden]{display:none} .mr-result{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:10px 12px;border:0;border-bottom:1px solid var(--line);background:var(--bg);font:inherit;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink);text-align:left;cursor:pointer} .mr-result:last-child{border-bottom:0} .mr-result:hover:enabled{background:var(--bg-2)} .mr-result:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mr-result i{flex:none;font-style:normal;font-size:var(--fs-sm);color:var(--ink-3)} .mr-manual{margin-top:var(--s-2)} .mr-manual .mr-grow{flex:1 1 260px;max-width:460px} .mr-manual .mr-grow input{width:100%} .mr-backup{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-2)} .mr-backup .btn{height:var(--h-ctl)} .mr-export{display:flex;flex-direction:column;gap:6px;max-width:720px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .mr-export textarea,.mr-note{width:100%;padding:8px 12px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font:inherit;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink);resize:vertical} .mr-export textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-xs);line-height:var(--lh-xs)} .mr-export textarea:focus,.mr-note:focus,.mr-date:focus{outline:2px solid var(--focus);outline-offset:0;border-color:transparent} .mr-msg{margin:0 0 var(--s-3)} .mr-summary{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:600;font-variant-numeric:tabular-nums} #r-list:empty{display:none} .mr-group{margin-top:var(--s-4)} .mr-card{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-5);padding:var(--s-4) 12px;border-bottom:1px solid var(--line)} .mr-main{min-width:0} .mr-title{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;overflow-wrap:anywhere} .mr-title a:hover{color:var(--accent)} .mr-by,.mr-state,.mr-was,.mr-dates,.mr-next{margin-top:6px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .mr-by{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:var(--fs-ui);line-height:var(--lh-ui)} .mr-by .mr-pay{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums} .mr-state.status{display:flex;color:var(--ink)} .mr-dates{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px} .mr-date{height:32px;padding:0 8px;border:1px solid var(--line-ctl);border-radius:var(--r-2);background:var(--bg);font:inherit;font-size:var(--fs-sm);color:var(--ink)} .mr-next{color:var(--ink-3)} .mr-side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)} .mr-side .tool-field,.mr-side .chip-select{width:100%} .mr-empty .cta-row{margin-top:var(--s-4)} .mr-next-row{margin-top:var(--s-4)} .mr-foot{margin-top:var(--s-6)} @media (max-width:720px){ .mr-card{grid-template-columns:1fr;gap:var(--s-4);padding-left:0;padding-right:0} .mr-bar .filters .btn,.mr-backup .btn{flex:1 1 100%} .mr-result{flex-direction:column;gap:2px} .mr-manual .mr-grow{grid-column:1 / -1;max-width:none} } /* ---------- Pay figures: histogram, role strip, two part bar, track (macros.html) ---------- Every colour is a token, so both themes follow. The two svgs have no viewBox: their x, y, width and height are percentages of the box written by the macros, the box itself is sized here.
rect.h-iqr, line.h-grid + text.h-y, rect.h-all (the list behind, grey), rect.h-one (this list), line.h-floor, line.h-med + text.h-med-l, text.h-x
..
rect.rail, line.ctx (list median), rect.seg | circle.dot | rect.seg-open (up to) .. rect.fill (rated), rect.fill-open
  1. ..
Named .track because .steps is the numbered three step block. */ .pay-fig{margin:var(--s-4) 0 0;max-width:620px} .pay-hist{display:block;width:100%;height:150px;overflow:visible} .pay-hist .h-iqr{fill:var(--accent-soft)} .pay-hist .h-grid{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3} .pay-hist .h-floor{stroke:var(--line-2);stroke-width:1} .pay-hist .h-all{fill:var(--bar-weak)} .pay-hist .h-one{fill:var(--accent)} .pay-hist .h-med{stroke:var(--accent-2);stroke-width:2} .pay-hist text{font-size:var(--fs-xs);fill:var(--ink-3);font-variant-numeric:tabular-nums} .pay-hist .h-y{transform:translateY(-4px)} .pay-hist .h-med-l{fill:var(--ink);font-weight:500;transform:translateX(6px)} .pay-hist .h-med-l.is-end{transform:translateX(-6px)} .pay-hist .is-end{text-anchor:end} .pay-fig.is-few .h-one{fill:var(--hist-few)} .pay-fig.is-few .h-iqr{fill:var(--axis)} .pay-fig.is-few .h-med{stroke:var(--ink-2)} .pay-fig figcaption{margin-top:var(--s-2);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);max-width:60ch;font-variant-numeric:tabular-nums} .pay-fig figcaption b{color:var(--ink);font-weight:500} .pay-strip{display:inline-block;vertical-align:middle;flex:none;width:120px;min-width:120px;height:8px;overflow:visible} .pay-strip .rail{fill:var(--bg-3)} .pay-strip .seg,.pay-strip .dot{fill:var(--accent)} .pay-strip .seg-open{fill:none;stroke:var(--accent);stroke-width:1.5} .pay-strip .ctx{stroke:var(--ink-3);stroke-width:2} .pay-strip.is-few .seg,.pay-strip.is-few .dot{fill:var(--bar-weak)} .pay-strip.is-few .seg-open{stroke:var(--bar-weak)} .bar-row--parts{grid-template-columns:150px minmax(0,1fr) 64px 124px} .bar-row--parts .bar-name{overflow-wrap:anywhere} .bar-svg--parts{overflow:visible;border-radius:0} .bar-svg--parts .fill-open{fill:none;stroke:var(--bar);stroke-width:1.5;vector-effect:non-scaling-stroke} .bar-row--parts.is-few .fill{fill:var(--bar-weak)} .bar-row--parts.is-few .fill-open{stroke:var(--bar-weak)} ol.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .track li{position:relative;min-width:0;padding:20px 12px 0 0;overflow-wrap:anywhere} .track li::before{content:"";position:absolute;left:5px;right:-5px;top:5px;border-top:1px solid var(--ink-3)} .track li:last-child::before{content:none} .track li::after{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;box-sizing:border-box;background:var(--ink);border:1.5px solid var(--ink)} .track li.is-open::after{background:var(--bg)} .track li.is-na::after{background:var(--bg);border-style:dashed;border-color:var(--ink-3)} .track b,.track-state{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400;color:var(--ink-3)} .track--dates span{display:block;margin-top:2px;font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} .track small{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-2)} ol.track--n3,ol.track--steps{grid-template-columns:repeat(3,minmax(0,1fr))} ol.track--n2{grid-template-columns:repeat(2,minmax(0,1fr))} ol.track--n1{grid-template-columns:minmax(0,1fr)} .track--steps li{padding:22px var(--s-6) 0 0} .track--steps .track-state{margin:0} .track--steps h3{margin-top:2px;font-size:17px;line-height:24px;letter-spacing:-.01em} .track--steps p{margin-top:4px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);max-width:34ch} .track--steps li.is-na h3{color:var(--ink-2)} @media (max-width:720px){ .pay-fig{max-width:none} .pay-hist{height:132px} .pay-hist .h-med-name{display:none} .bar-row--parts{grid-template-columns:minmax(0,1fr) 44px auto} .bar-row--parts .bar-val{min-width:76px} /* dates: two columns by two rows, so no label wraps to three lines; each row keeps its own line. Three nodes: the first takes a row of its own (it may carry the long "posted and first seen" label) */ ol.track--dates{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s-4)} .track--n4 li:nth-child(2n)::before,.track--n3 li:first-child::before{content:none} .track--n3 li:first-child{grid-column:1 / -1} ol.track--n1{grid-template-columns:minmax(0,1fr)} /* steps: one under the other, the line runs down the left */ ol.track--steps{grid-template-columns:minmax(0,1fr)} .track--steps li{padding:0 0 var(--s-5) 24px} .track--steps li:last-child{padding-bottom:0} .track--steps li::before{left:5px;right:auto;top:8px;bottom:-4px;border-top:0;border-left:1px solid var(--ink-3)} .track--steps li::after{top:4px} .track--steps p{max-width:none} } /* ---------- Home with pay figures (home.html) ---------- .hero-grid headline at the left, a figure at the right, three numbers under the headline; one column from 860px down (the home itself is laid out by the .hv rules) .top-rows the six highest rates as plain role rows (three on a phone) .role--strip / .role-strip a role row with its pay strip under the rate; .list-strips on the list puts "up to" before the amount in every row, so rated and unrated rows read the same .strip-key the sample strip and its words inside the one .list-legend .bar-row--range field row: name over the count | range strip | median */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;grid-template-areas:"head hist" "figs hist";gap:0 var(--s-8);align-items:end} .hero-head{grid-area:head;min-width:0} .hero-grid .figs{grid-area:figs;margin-top:26px;gap:8px 28px;flex-wrap:nowrap} .hero-grid .fig-n{font-size:24px;line-height:30px} .role--strip{grid-template-areas:"pay title plat chev" "strip meta plat chev"} .role--strip.role--noplat{grid-template-areas:"pay title chev" "strip meta chev"} .role-strip{grid-area:strip;align-self:center;display:block;line-height:0} .list-strips .role .pay-pre,.top-rows .role .pay-pre{order:0;flex-basis:auto;margin:0 5px 0 0;line-height:inherit} .list-legend .strip-key{white-space:normal} .bar-head--parts{grid-template-columns:150px minmax(0,1fr) 64px 124px} .bar-row--parts .bar-val small{white-space:normal} .bar-row--range,.bar-axis--range{grid-template-columns:150px minmax(0,1fr) 116px} .bar-row--range{padding:10px 0} .bar-row--range .bar-val b{color:var(--accent)} .bar-row--range.is-few .bar-val b{color:var(--ink-2)} .bar-row--range .bar-val small{white-space:normal} @media (max-width:1040px){ .hero-grid{grid-template-columns:minmax(0,1fr) 400px} } @media (max-width:860px){ .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "hist" "figs"} .hero-grid .figs{margin-top:var(--s-4)} } @media (max-width:720px){ .hero-grid .figs{display:grid;grid-template-columns:auto auto minmax(min-content,1fr);gap:0 16px;margin-top:10px} .hero-grid .fig-n{font-size:18px;line-height:24px} .hero-grid .fig-l{margin-top:0;font-size:var(--fs-xs);line-height:var(--lh-xs)} .top-rows > :nth-child(n+4){display:none} /* phones: three rows, the list below is the list */ .role--strip,.role--strip.role--noplat{grid-template-areas:"pay plat" "strip strip" "title title" "meta meta"} .role--strip.role--noplat{grid-template-areas:"pay" "strip" "title" "meta"} .role-strip{margin:5px 0 3px} .list-legend .strip-key{display:block} .strip-key .pay-strip{margin-right:8px} .bar-row--range{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bar bar";gap:6px 12px} .bar-row--range .range-svg{grid-area:bar} .bar-row--range .bar-val{min-width:0} .bar-row--range .bar-val small{display:inline;margin-left:6px} .guide-list--desc a small{display:none} } /* ---------- Platform page with pay figures (platform.html) ---------- .pl-data / .pl-main / .pl-hist figures and buttons at the left, the histogram against the whole list at the right; one column from 860px down, and always when there is no histogram .who-rows field | count bar | count | median: the bar_row grid, the note under the median wraps .list-legend--line the one legend of the role list as a line under the list head .mini-bars / .bar-row--plain small count figure inside the review: caption, then name | bar | count */ .pl-data--hist{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:0 var(--s-8);align-items:start} .pl-main,.pl-hist{min-width:0} .pl-data--hist .figs{gap:8px 32px} .pl-hist{margin-top:22px} .pl-hist .chart-cap{margin-bottom:var(--s-2)} .pl-hist .pay-fig{margin:0;max-width:none} .who-rows .bar-val small{white-space:normal} .who-rows .is-few .bar-val b{color:var(--ink-2)} .list-legend--line{margin-top:var(--s-2);white-space:normal} .mini-bars{margin:var(--s-4) 0 var(--s-5);max-width:620px} .mini-bars figcaption{padding-bottom:6px;border-bottom:1px solid var(--line-2);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;color:var(--ink)} .bar-row--plain{grid-template-columns:220px minmax(0,1fr) 56px;padding:9px 0;font-size:var(--fs-ui);line-height:var(--lh-ui)} .bar-row--plain .bar-name{font-weight:400} .bar-row--plain:last-child{border-bottom:0} @media (max-width:1040px){ .pl-data--hist{grid-template-columns:minmax(0,1fr) 400px} } @media (max-width:860px){ .pl-data--hist{grid-template-columns:minmax(0,1fr)} .pl-hist{margin-top:var(--s-6)} } @media (max-width:720px){ .who-rows .bar-val{min-width:0} .bar-row--plain{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name count" "bar bar";gap:4px 12px} .bar-row--plain .bar-name small{display:block;margin-left:0} } /* ---------- Role page with pay figures (job.html) ----------
label | svg.range-svg (rect.seg, or rect.seg-open for "up to"), label | svg.range-svg (the field: band and median), .payctx-axis
..
The field row is context, so its band is grey and only this role carries the accent; a thin field is paler still. .job-dates the date line (ol.track--dates) closing the facts block with a hairline */ .payctx{margin:14px 0 0;max-width:460px} .payctx-rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:center} .payctx-l{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-2);white-space:nowrap} .payctx .range-svg{height:12px} .payctx .seg{fill:var(--accent)} .payctx .seg-open{fill:none;stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke} .payctx .range-svg .band{fill:var(--ink-3)} .payctx .range-svg .median{stroke:var(--ink)} .payctx .range-svg.is-few .band{fill:var(--bar-weak)} .payctx .range-svg.is-few .median{stroke:var(--tick-weak)} .payctx-axis{grid-column:2;display:flex;justify-content:space-between;margin-top:-2px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-variant-numeric:tabular-nums} .payctx-axis span{flex:1 1 0} .payctx-axis span:last-child{flex:0 0 auto;margin-left:-3em;text-align:right} .payctx figcaption{margin-top:10px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);max-width:56ch;font-variant-numeric:tabular-nums} .payctx figcaption b{color:var(--ink);font-weight:500} .payctx + .pay-cap{margin-top:10px} .job-dates{padding:var(--s-4) 0 16px;border-bottom:1px solid var(--line)} @media (max-width:720px){ .payctx{max-width:none} } /* ---------- Guide figures (macros.html guide_pay_head and guide_fields; the pay timeline of a guide source) ---------- .fig-strip in .figs--band, under the three figures: svg.range-svg (band, tick, grey .ctx tick of the whole list), .fig-axis, p.strip-note
.gf-head | .gf-row (.gf-name, .gf-strip, .gf-val, .gf-n) | .gf-axis | figcaption on a phone a row is name and median on one line and the strip under them; the count goes under the name ol.track--pay three nodes (work, approved, paid) on one line at every width, under a p.track-cap */ .range-svg .ctx{stroke:var(--ink-3);stroke-width:2;vector-effect:non-scaling-stroke} .fig-strip{grid-column:1 / -1;margin-top:12px;min-width:0} .figs--band:has(.fig-strip){grid-template-columns:fit-content(34%) auto minmax(0,1fr)} .fig-strip .range-svg{height:12px} .fig-axis{display:grid;grid-template-columns:1fr auto 1fr;margin-top:3px;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-variant-numeric:tabular-nums} .fig-axis span:last-child{text-align:right} .strip-note{margin-top:4px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);font-variant-numeric:tabular-nums} .prose .gf{margin:8px 0 22px} .gf-head,.gf-row,.gf-axis{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) minmax(0,1fr) 84px;gap:0 16px;align-items:center} .gf-head{padding-bottom:6px;border-bottom:1px solid var(--line-2);font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3)} .gf-row{padding:9px 0;border-bottom:1px solid var(--line)} .gf-name{min-width:0;font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:500;color:var(--ink)} .gf-name small{font-size:var(--fs-xs);position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .gf-strip{min-width:0} .gf-strip .range-svg{height:12px} .gf-val{min-width:0;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink);font-variant-numeric:tabular-nums} .gf-val b{font-weight:600} .gf-val .pay-unit{font-size:var(--fs-xs)} .gf-val small{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-2)} .gf-row.is-few .gf-val b{color:var(--ink-2)} .gf-n{display:flex;align-items:center;gap:8px;min-width:0} .gf-n .bar-svg{flex:1 1 auto;min-width:0} .gf-n i{flex:0 0 auto;min-width:2ch;text-align:right;font-style:normal;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);font-variant-numeric:tabular-nums} .gf-axis{margin-top:3px} .gf-axis div{grid-column:2;display:grid;grid-template-columns:1fr auto 1fr;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--ink-3);font-variant-numeric:tabular-nums} .gf-axis span:last-child{text-align:right} .prose .gf figcaption{margin-top:10px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .prose .track-cap{margin:16px 0 8px;font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;color:var(--ink-2)} .prose ol.track{list-style:none;padding:0;margin:0 0 18px;max-width:560px} .prose ol.track li{margin:0} ol.track--pay{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:720px){ .gf-head{display:none} .gf-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "strip strip";gap:6px 12px;align-items:start} .gf-row:first-of-type{border-top:1px solid var(--line-2)} .gf-name{grid-area:name} .gf-name small{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:400;color:var(--ink-3)} .gf-val{grid-area:val;text-align:right} .gf-strip{grid-area:strip} .gf-n{display:none} .gf-axis{display:block} .figs--band:has(.fig-strip){grid-template-columns:auto minmax(0,1fr)} .track--pay li{padding-right:8px} } /* ---------- Home v2 (home.html): everything sits in .hv ---------- .hv-tint / .hv-deep the two surfaces that take turns with the page: the tinted band, and the deep green one, which swaps the tokens for its own set so every component inside it reads on dark green in both themes (the hero card and the record card are deep too) .hv-hero / .hv-card the promise at the left, today's list as a card at the right; one column under 1100px .hv-src the platforms as one line of names .hv-steps three numbered steps joined by a line (across from 900px, down the left under it) .hv-pay / .hv-kinds the figures beside the histogram, the three kinds of work under them .hv-ours / .hv-rec three facts beside one row of the list drawn as a record .hv-close / .hv-demo closing band: the actions beside an example of a Role watch result */ .hv-deep{--bg:var(--hv-bg);--bg-2:var(--hv-bg-2);--bg-3:var(--hv-bg-3);--band:var(--hv-bg-2);--ink:var(--hv-ink);--ink-2:var(--hv-ink-2);--ink-3:var(--hv-ink-3);--line:var(--hv-line);--line-2:var(--hv-line-2);--line-3:var(--hv-ink);--line-ctl:var(--hv-line-ctl);--accent:var(--hv-accent);--accent-2:var(--hv-accent-2);--accent-soft:var(--hv-accent-soft);--range-band:var(--hv-range);--axis:var(--hv-axis);--axis-line:var(--hv-line-2);--bar:var(--hv-bar);--bar-weak:var(--hv-bar-weak);--hist-few:var(--hv-ink);--tick-weak:var(--hv-ink);--on-accent:var(--hv-on-accent);--focus:var(--hv-accent);background:var(--bg);color:var(--ink);border-block:1px solid var(--line)} .hv-tint,.hv > .band{--band:var(--hv-tint);--bg-2:var(--hv-tint-2);--line:var(--hv-tint-line)} .hv-tint{background:var(--band);border-block:1px solid var(--line)} .hv-nw{white-space:nowrap} .hv h1{font-size:56px;line-height:60px;letter-spacing:-.034em} .hv h2{font-size:32px;line-height:38px;letter-spacing:-.026em} .hv > .sect,.hv > .band{padding:72px 0;margin-top:0} .hv > .sect-roles{padding-top:34px} .hv > .toolbar{border-top:0} .hv .sect-sub{font-size:16px;line-height:25px} .hv h2 + .sect-sub{margin-top:8px} main:has(> .hv) + .site-foot{margin-top:0} .hv-more{margin-top:20px;font-weight:500} .hv-more .link{display:inline-block;padding:8px 0;color:var(--accent);text-decoration-color:currentColor} .hv-hero{padding:72px 0 88px} .hv-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center} .hv-eyebrow{display:flex;gap:8px;margin-bottom:20px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} .hv-eyebrow::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--accent)} .hv-lead{margin-top:20px;max-width:52ch;font-size:18px;line-height:27px;color:var(--ink-2)} .hv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hv-micro{margin-top:14px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-card-wrap{position:relative;width:100%;max-width:480px;justify-self:end} .hv-card-wrap::before{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:12px;background:var(--accent-soft)} .hv-card{position:relative;padding:20px 20px 6px;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 34px var(--shadow)} .hv-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-card-head b{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;color:var(--ink)} .hv-card-search{display:flex;gap:8px;margin-top:14px} .hv-card-search .search{min-width:0;max-width:none} .hv-card-search input{background:var(--bg-2)} .hv-card-search .btn{height:var(--h-ctl)} .hv-card-figs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:20px;padding-bottom:18px;border-bottom:1px solid var(--line-2)} .hv-card-figs .fig-n{font-size:26px;line-height:32px} .hv-card-figs .fig-l{font-size:var(--fs-xs);line-height:var(--lh-xs)} .hv-card-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;margin:14px 0 4px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-card-sub b{font-weight:500;color:var(--accent)} .hv-mini{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)} .hv-mini-t{grid-column:1 / -1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hv-mini:hover .hv-mini-t{color:var(--accent)} .hv-mini .pay{font-size:var(--fs-ui);line-height:var(--lh-ui)} .hv-mini-p{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);white-space:nowrap} .hv-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:500;color:var(--accent)} .hv-card-foot:hover{color:var(--accent-2)} .hv-card-foot svg{width:16px;height:16px;flex:none} .hv-src{padding:12px 0} /* the dot sits in the gap at the left of each name but the first: at the start of a line it falls outside the box and is cut */ .hv-src p{display:flex;flex-wrap:wrap;align-items:baseline;overflow:hidden;margin:-4px;padding:4px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)} .hv-src span{margin-right:12px} .hv-src a{position:relative;margin-right:20px;padding:8px 0;font-weight:500;color:var(--ink)} .hv-src a:hover{color:var(--accent)} .hv-src a + a::before{content:"\00B7";position:absolute;left:-12px;font-weight:400;color:var(--ink-3)} .hv-src .en-mark{margin-left:-12px} .hv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:36px;padding:0;list-style:none;counter-reset:hv} .hv-steps li{position:relative;padding-top:56px;counter-increment:hv} .hv-steps li::before{content:counter(hv);position:absolute;top:0;left:0;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-ctl);border-radius:50%;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums} .hv-steps li:first-child::before{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .hv-steps li:not(:last-child)::after{content:"";position:absolute;top:18px;left:46px;right:-30px;border-top:1px solid var(--line-2)} .hv-steps p{margin-top:6px;max-width:36ch;font-size:16px;line-height:25px;color:var(--ink-2)} .hv-pay-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end} .hv-pay .figs{gap:20px 36px;margin-top:28px} .hv-pay .pay-fig{margin:0;max-width:none} .hv-pay .pay-hist{height:210px} .hv-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:56px;border-top:1px solid var(--line-2)} .hv-ours-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start;margin-top:28px} .hv-ours-list > div{padding:18px 0;border-top:1px solid var(--line-2)} .hv-ours-list p{margin-top:4px;max-width:56ch;font-size:16px;line-height:25px;color:var(--ink-2)} .hv-ours-list .hv-more{margin-top:2px;font-size:var(--fs-body);line-height:var(--lh-body)} .hv-rec-h{margin:18px 0 10px;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-rec{padding:4px 20px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2)} .hv-rec-t{display:block;padding:14px 0;font-size:16px;line-height:24px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hv-rec-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--line-2);font-size:var(--fs-ui);line-height:var(--lh-ui)} .hv-rec-row > :first-child{color:var(--ink-2)} .hv-rec-row > :last-child{min-width:0;font-weight:500;text-align:right} .hv-close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center} .hv-note{margin-top:18px;max-width:60ch;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-demo{padding:4px 20px 8px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);box-shadow:0 14px 34px var(--shadow);font-size:var(--fs-ui);line-height:var(--lh-ui)} .hv-demo-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:14px 0 4px} .hv-demo-h b{font-size:var(--fs-body);font-weight:600} .hv-demo-h span,.hv-demo-sum{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2)} .hv-demo-sum{padding-bottom:12px} .hv-demo-row{display:grid;justify-items:start;gap:5px;padding:11px 0;border-top:1px solid var(--line)} .hv-tag{padding:2px 8px;border:1px solid var(--line-2);border-radius:10px;font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--ink-2);white-space:nowrap} .hv-tag.is-new{border-color:transparent;background:var(--accent-soft);color:var(--accent)} .hv-tag.is-gone{border-style:dashed} @media (max-width:1099px){ .hv h1{font-size:44px;line-height:50px} .hv-hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px} .hv-pay-grid{grid-template-columns:minmax(0,1fr);gap:40px;align-items:start} .hv-card-figs .fig-n{font-size:22px;line-height:28px} .hv-eyebrow .hv-nw{display:none} } @media (max-width:899px){ .hv-hero-grid{grid-template-columns:minmax(0,1fr)} .hv-card-wrap{max-width:none} .hv-steps{grid-template-columns:minmax(0,1fr);gap:0} .hv-steps li{padding:5px 0 28px 56px} .hv-steps li:last-child{padding-bottom:0} .hv-steps li:not(:last-child)::after{top:44px;bottom:8px;left:18px;right:auto;border-top:0;border-left:1px solid var(--line-2)} .hv-steps p{max-width:60ch} .hv-kinds,.hv-ours-grid,.hv-close-grid{grid-template-columns:minmax(0,1fr)} .hv-ours-grid,.hv-close-grid{gap:32px} } @media (max-width:720px){ .hv h1{font-size:36px;line-height:40px} .hv h2{font-size:26px;line-height:32px} .hv > .sect,.hv > .band{padding:48px 0} .hv > .sect-roles{padding-top:24px} .hv-hero{padding:28px 0 48px} .hv-hero-grid{gap:32px} .hv-actions .btn{flex:1 1 auto} .hv-card-wrap::before{display:none} .hv-card{padding:16px 16px 4px} .hv-steps{margin-top:28px} .hv-pay .pay-hist{height:150px} .hv-pay .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px} .hv-pay .fig-n{font-size:24px;line-height:30px} .hv-kinds{gap:8px;margin-top:36px;border-top:0} .hv-rec,.hv-demo{padding-inline:16px} } @media (max-width:399px){ .hv-card-figs{gap:10px} }