/* LIFTOFF JOBS — calm board. One family (Inter), four sizes, three weights, one accent. Hierarchy by size + weight only. */ :root { --bg: #f7f5f0; --fg: #161616; --fg2: #4a4843; --muted: #8a857b; --accent: #7a5c2e; --rule: #e6e2d9; --rule-strong: #cfcabf; --hover: #f0ede6; --skel: #ebe8e0; --card: #fdfcf9; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 40px; --t1: 26px; --t2: 16px; --t3: 14px; --t4: 12px; --gutter: 40px; --col: 1040px; } /* Three states, not two: an explicit choice is [data-theme] on and always wins; with no choice the OS decides. The :not() guard is what makes "light" survive a dark OS -- without it the media query would win. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121210; --fg: #ebe8e0; --fg2: #bcb7ac; --muted: #857f74; --accent: #cfae72; --rule: #26251f; --rule-strong: #3a382f; --hover: #1a1916; --skel: #1e1d19; --card: #171613; } } :root[data-theme="dark"] { --bg: #121210; --fg: #ebe8e0; --fg2: #bcb7ac; --muted: #857f74; --accent: #cfae72; --rule: #26251f; --rule-strong: #3a382f; --hover: #1a1916; --skel: #1e1d19; --card: #171613; } html { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* The control: three segments, current one marked with aria-pressed. Sized to the existing 12px label scale. */ .theme { display: inline-flex; align-items: center; gap: 2px; } .theme button { background: none; border: 0; cursor: pointer; padding: 3px 6px; border-radius: 2px; font: 500 var(--t4)/1.4 var(--sans); color: var(--muted); } .theme button:hover { color: var(--fg); background: var(--hover); } .theme button[aria-pressed="true"] { color: var(--fg); background: var(--hover); } .theme button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t2)/1.55 var(--sans); font-feature-settings: "tnum" 1, "cv11" 1; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button, input, select { font: inherit; color: inherit; } h1, h2, h3 { margin: 0; font-weight: 600; } h1 { font-size: var(--t1); line-height: 1.25; letter-spacing: -.01em; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .muted { color: var(--muted); } .accent { color: var(--accent); } .fg2 { color: var(--fg2); } .t3 { font-size: var(--t3); line-height: 1.45; } .label { font-size: var(--t4); line-height: 1.4; font-weight: 500; color: var(--muted); } /* margin cancels padding exactly: a 36px tall target, same margin box as the bare text it replaced. */ .link { background: none; border: 0; margin: -8px -6px; padding: var(--s2) 6px; cursor: pointer; font-size: var(--t3); line-height: 1.45; color: var(--fg2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; } .link:hover { text-decoration-color: var(--accent); } .empty { padding: var(--s6) 0; color: var(--muted); } /* The way out of an empty list: the filter drops and the marks switches, on their own line under the message. They are .chip / .link, so they carry no colour of their own and follow both themes. */ .eacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); } .err { color: var(--accent); } /* Chrome */ .top, .main, .foot, .site-header, #ssr { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* S3. Skip link: the first thing in the tab order, invisible until it is focused. Existing tokens only. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 10; } .skip:focus { left: var(--gutter); background: var(--bg); color: var(--fg); padding: var(--s2) var(--s3); border: 1px solid var(--rule-strong); font-size: var(--t3); line-height: 1.45; } .top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s4); padding-top: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-strong); } /* Brand lockup: index-rule glyph + wordmark. Glyph inherits ink via currentColor; top rule takes the accent. */ .wordmark { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t2); font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; } .wordmark .mark { flex: none; width: 15px; height: 15px; } .wordmark .mark-a { stroke: var(--accent); } .wordmark:hover { text-decoration: none; } .wordmark:hover .wordmark-t { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .nav { font-size: var(--t3); line-height: 1.45; color: var(--fg2); } .nav a { padding: var(--s1) 0; } /* 28/S1: the state is aria-current, and this is its underline. `.on` said the same thing to sighted readers only. */ .nav a[aria-current] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--fg); } .nav .dot { color: var(--muted); margin: 0 var(--s2); } .tagline { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--t3); line-height: 1.45; } .main { flex: 1; padding-top: var(--s5); padding-bottom: var(--s6); } .foot { display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s4); padding-bottom: var(--s5); font-size: var(--t3); line-height: 1.45; color: var(--muted); } /* Control row: [search][Filters · n] */ .bar { display: flex; align-items: center; gap: var(--s4); position: relative; z-index: 5; } .searchwrap { position: relative; flex: 1; } .search { width: 100%; padding: var(--s2) 0; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; border-radius: 0; -webkit-appearance: none; font-size: var(--t2); } .search::placeholder { color: var(--muted); } .search:focus { outline: none; border-bottom-color: var(--fg); } .sugg { display: none; position: absolute; z-index: 3; left: 0; right: 0; top: 100%; background: var(--bg); border: 1px solid var(--rule); border-top: 0; padding: var(--s1) var(--s2); font-size: var(--t3); line-height: 1.45; } .searchwrap:focus-within .sugg { display: flex; flex-wrap: wrap; align-items: center; } .sugg button { background: none; border: 0; padding: var(--s2); cursor: pointer; color: var(--fg2); } .sugg button:hover { color: var(--fg); text-decoration: underline; } .tbtn { background: none; border: 0; padding: var(--s2) 0; cursor: pointer; white-space: nowrap; font-size: var(--t3); line-height: 1.45; color: var(--fg2); min-height: 44px; } .tbtn:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .tbtn.on { color: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s3); } .chips:empty { display: none; } .chip { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1px solid var(--rule); padding: 3px 10px; min-height: 28px; font-size: var(--t3); line-height: 1.45; cursor: pointer; color: var(--fg2); } .chip:hover { border-color: var(--rule-strong); color: var(--fg); } .chip .x { color: var(--muted); } .status { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin: var(--s3) 0 var(--s2); font-size: var(--t3); line-height: 1.45; color: var(--muted); } .status .sep { color: var(--rule-strong); } .status [data-marks] { display: inline-flex; align-items: baseline; gap: var(--s2); } .status a, .status .sortlab { color: var(--fg2); } .status a[aria-current] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* 8. No fixed width. 5.2em clipped "highest comp" and left the chevron floating a word away from "newest"; field-sizing sizes to the chosen value where it is supported, and width:auto to the longest option where it is not. Either way the caret that follows sits against the value. */ .sortsel { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0 2px 0 0; cursor: pointer; color: var(--fg2); font-size: var(--t3); width: auto; max-width: 100%; field-sizing: content; } .sortcar { color: var(--muted); } .sortsel:hover { color: var(--fg); } /* Filters panel: sheet under the bar (desktop), full-screen sheet (mobile) */ .panelwrap { position: relative; } .scrim { position: fixed; inset: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 40%, transparent); } .panel { position: absolute; z-index: 4; left: 0; top: var(--s1); width: min(780px, 100%); background: var(--bg); border: 1px solid var(--rule); padding: var(--s2) var(--s5) 0; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; } .psec { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); } .psec > .label { margin-bottom: var(--s2); } .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2) var(--s5); } .pgroup { min-width: 0; } .phead { display: flex; justify-content: space-between; align-items: baseline; color: var(--fg); margin-bottom: 2px; } .pfoot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-size: var(--t3); line-height: 1.45; color: var(--muted); position: sticky; bottom: 0; background: var(--bg); } .pfoot span { display: inline-flex; align-items: center; gap: var(--s4); } .fopt { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 3px 0; min-height: 28px; border: 0; background: none; text-align: left; cursor: pointer; font-size: var(--t3); line-height: 1.45; color: var(--fg); } .fopt:hover .v { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; } .fopt .box { flex: none; width: 14px; height: 14px; border: 1px solid var(--rule-strong); border-radius: 2px; } .fopt.on .box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--bg); } .fopt .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fopt .n { color: var(--muted); } .pmore { padding: var(--s3) 0; } /* Results: company header + role rows (grouped), or flat rows */ .cgroup { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: var(--s4) var(--s5) var(--s3); } /* `Load more` never trims the list, so ten pages is ~200 live cards and every Save/Hide re-lays-out all of them. Off-screen cards skip layout; 262px is the measured median card (241–286) so the scrollbar does not jump. Not on .grow — containing a row would take its text out of Cmd-F. Not on .skel — a skeleton has no size to remember. */ .cgroup:not(.skel) { content-visibility: auto; contain-intrinsic-size: auto 262px; } .cgroup + .cgroup { margin-top: var(--s4); } .groups { margin-top: var(--s3); } .chead { display: flex; align-items: flex-start; gap: var(--s3); padding: 0 0 var(--s3); } .chead .coname { font-weight: 500; } .chead > div { min-width: 0; } .chead .coline { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .chead .cotag { font-size: var(--t3); line-height: 1.5; color: var(--fg2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; max-width: 72ch; } .chead .cotag::before { content: ""; } .chead .cosub { font-size: var(--t3); line-height: 1.5; color: var(--muted); margin-top: 2px; } .grow { display: grid; grid-template-columns: 1fr auto auto; gap: 0 var(--s5); align-items: baseline; padding: 11px 0; min-height: 46px; border-top: 1px solid var(--rule); color: inherit; } .cgroup .grow:last-of-type { border-bottom: 0; } .grow:hover, .grow.sel { text-decoration: none; } .grow:hover .gtitle, .grow.sel .gtitle { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .gtitle { font-weight: 500; } .gdetail { font-size: var(--t3); line-height: 1.45; color: var(--fg2); white-space: nowrap; } .gdetail .coname { color: var(--fg); font-weight: 500; } .gage { font-size: var(--t3); line-height: 1.45; color: var(--muted); white-space: nowrap; text-align: right; min-width: 5.5em; } /* Row actions (Save / Hide) + soft feature flags — same ink, no new colour */ .growrow { position: relative; } .growrow .gacts { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: var(--s3); opacity: 0; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg) 24px); padding-left: var(--s5); } .cgroup .growrow .gacts { background: linear-gradient(to right, transparent, var(--card) 24px); } .growrow:hover .gacts, .growrow:focus-within .gacts { opacity: 1; pointer-events: auto; } .growrow:hover .gage, .growrow:focus-within .gage { visibility: hidden; } /* Debounce the reveal: a delay with zero duration, so dragging down a card no longer strobes twenty rows. In-delay only (leaving is instant), and both halves carry the same .1s or the actions and the age desync. pointer-events rides the same delay, or the strip is clickable while still invisible and a click at the right edge of a row hits Save instead of the row. allow-discrete is ignored by engines that lack it. */ .growrow .gacts { transition: opacity 0s 0s, pointer-events 0s 0s; transition-behavior: allow-discrete; } .growrow:hover .gacts, .growrow:focus-within .gacts { transition-delay: .1s; } .growrow .gage { transition: visibility 0s 0s; } .growrow:hover .gage, .growrow:focus-within .gage { transition-delay: .1s; } /* Hit targets: the padding is cancelled by an equal negative margin, so the margin box — and the flow — is unchanged. */ .gact { background: none; border: 0; margin: -4px -6px; padding: var(--s2) 6px; cursor: pointer; font-size: var(--t3); line-height: 1.45; color: var(--fg2); } .gact:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .gsaved { color: var(--accent); font-weight: 400; } .gsoft { color: var(--muted); } .mkbtn { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--t3); line-height: 1.45; color: var(--fg2); } .mkbtn:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .mkbtn.on { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .gmore { display: block; padding: var(--s2) 0 0; margin-bottom: var(--s1); font-size: var(--t3); line-height: 1.45; color: var(--fg2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; } .gmore:hover { text-decoration-color: var(--accent); color: var(--fg); } td.primary .cotag { display: block; margin-top: 2px; max-width: 60ch; font-size: var(--t3); line-height: 1.45; font-weight: 400; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.primary .co { align-items: flex-start; } td.primary .co .v { min-width: 0; } .cotag-lg { margin: var(--s1) 0 0 !important; font-size: var(--t2); color: var(--fg2); } .groups .empty { border-top: 1px solid var(--rule); } .skel .sk { display: block; height: 12px; background: var(--skel); } .skel .chead .sk { width: 160px; } .skel .grow .sk:first-child { width: 55%; } .skel .grow .sk:nth-child(2) { width: 90px; } .skel .grow .sk:last-child { width: 60px; } /* A flat bar reads as broken layout; a slow breath reads as work in progress. Opacity only — no shimmer sweep. */ @media (prefers-reduced-motion: no-preference) { @keyframes skelpulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } } .skel .sk { animation: skelpulse 2s ease-in-out infinite; } } .more { margin: var(--s5) 0 0; } .alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: var(--t3); line-height: 1.45; color: var(--fg2); } .alert input { border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; padding: var(--s1) 0; width: 220px; max-width: 100%; border-radius: 0; font-size: var(--t3); } .alert input:focus { outline: none; border-bottom-color: var(--fg); } .hint { margin: var(--s4) 0 0; font-size: var(--t3); line-height: 1.45; color: var(--muted); } .noscroll { overflow: hidden; } /* Companies table */ .tbl-wrap { overflow-x: auto; overscroll-behavior-x: contain; } /* a swipe past the edge must not fire the browser Back gesture */ table { width: 100%; border-collapse: collapse; table-layout: fixed; } th { text-align: left; font-weight: 500; font-size: var(--t4); line-height: 1.4; color: var(--muted); padding: 0 var(--s5) var(--s3) 0; border-bottom: 1px solid var(--rule); white-space: nowrap; } td { padding: var(--s3) var(--s5) var(--s3) 0; height: 64px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t3); line-height: 1.45; color: var(--fg2); } th:last-child, td:last-child { padding-right: 0; } td.primary { font-size: var(--t2); line-height: 1.5; color: var(--fg); font-weight: 500; } td.num, th.num { text-align: right; } col.c-stage { width: 130px; } col.c-emp { width: 110px; } col.c-open { width: 110px; } col.c-new { width: 90px; } /* 11: the investors table gets its own column class. Borrowing c-emp also borrowed its ≤720px hide rule, which took one of that table's three columns off every phone. */ col.c-cos { width: 110px; } tr.row { cursor: pointer; } tr.row:hover td.primary .title, tr.row:hover td .title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .co { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; } .co .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logo { width: 28px; height: 28px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 3px; } .logo.lg { width: 40px; height: 40px; } .logo.xl { width: 56px; height: 56px; } .invrow .invlink { display: inline-flex; line-height: 0; } .invrow .invnames a { color: var(--fg2); } .invmeta .sep { color: var(--rule-strong); margin: 0 2px; } .invmeta a { color: var(--fg2); } .invrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; vertical-align: middle; } .invrow .invlab { margin-right: 2px; } .invrow .inv { width: 30px; height: 30px; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 3px; padding: 1px; } .invrow .invmore { font-size: inherit; line-height: inherit; } .init { display: inline-flex; align-items: center; justify-content: center; font-size: var(--t4); font-weight: 500; background: var(--skel); color: var(--muted); } tr.skel td span { display: inline-block; height: 12px; width: 70%; background: var(--skel); } .btn { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); padding: var(--s2) var(--s4); min-height: 36px; cursor: pointer; font-size: var(--t3); line-height: 1.45; font-weight: 500; border-radius: 0; } .btn:hover { background: transparent; color: var(--fg); text-decoration: none; } .back { display: inline-block; margin-bottom: var(--s5); font-size: var(--t3); line-height: 1.45; color: var(--fg2); } /* Job posting: a reading page. Three blocks, each separated by more space than anything inside it: identity (team/title/company) -> action (apply, share) -> facts (dl) -> description. */ .detail { max-width: 68ch; } .detail .label { margin-bottom: var(--s1); } .detail h1 { margin-bottom: var(--s3); } .detail .co { display: inline; font-size: var(--t2); } .detail .co .coname { font-weight: 500; } .applyrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s5) 0 var(--s3); font-size: var(--t3); line-height: 1.45; color: var(--muted); } .detail .share { margin: 0 0 var(--s5); } .apply { display: inline-block; padding: 9px 16px; background: var(--fg); color: var(--bg); font-weight: 500; font-size: var(--t3); line-height: 1.45; border: 1px solid var(--fg); } .apply:hover { background: transparent; color: var(--fg); text-decoration: none; } .meta { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3) var(--s5); margin: 0; padding: var(--s5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .meta dt, .meta dd { margin: 0; } .meta dt { padding-top: 2px; } .meta dd { font-size: var(--t2); line-height: 1.5; } .detail .description { margin-top: var(--s6); } .detail .applyrow + .description, .detail .share + .description { margin-top: var(--s5); } @media (max-width: 640px) { .meta { grid-template-columns: 1fr; gap: var(--s1) 0; } .meta dd { margin-bottom: var(--s3); } } .description { margin: var(--s5) 0; line-height: 1.6; overflow-wrap: anywhere; } .description.plain { white-space: pre-wrap; } .description h2 { font-size: var(--t2); font-weight: 600; margin: var(--s5) 0 var(--s2); } .description h3, .description h4 { font-size: var(--t2); font-weight: 500; margin: var(--s4) 0 var(--s2); } .description h2:first-child, .description h3:first-child { margin-top: 0; } .description p { margin: 0 0 var(--s3); } .description ul, .description ol { margin: 0 0 var(--s3); padding-left: 20px; } .description li { margin-bottom: 6px; } .description strong { font-weight: 600; } .description p:has(> strong:only-child) { margin-top: var(--s4); margin-bottom: var(--s2); } .description a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; } .description blockquote { margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 1px solid var(--rule-strong); color: var(--fg2); } .description hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; } .description code, .description pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t3); } .description pre { white-space: pre-wrap; background: var(--hover); padding: var(--s3); } .description table { table-layout: auto; margin-bottom: var(--s3); } .description td, .description th { padding: var(--s1) var(--s3) var(--s1) 0; height: auto; white-space: normal; } .description img { max-width: 100%; } /* SSR fallback (no JS): bare header/main emitted by templates/base.html */ .site-header { padding-top: var(--s6); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-strong); display: flex; align-items: center; justify-content: space-between; font-size: var(--t3); } /* 36. #ssr used to be auto-centred at 68ch inside a shell centred at 1120px, so the wordmark and the

under it sat on two different grids — 217px apart on /roles, /digest and /alerts/*. It is the shell box now, and the 68ch reading measure hangs off the same left edge as the header and the footer. app.js stamps [data-hydrated] when it takes #ssr over as the SPA mount; the measure comes off then, because a 1040px board is not a reading column. */ #ssr { flex: 1; padding-top: var(--s5); padding-bottom: var(--s6); } #ssr:not([data-hydrated]) > * { max-width: 68ch; } #ssr h1 { margin-bottom: var(--s3); } /* Company page */ .cohero { display: flex; gap: var(--s4); align-items: flex-start; margin: var(--s5) 0 var(--s4); } .cohero h1 { margin: 0; } .cotag-lg { margin: var(--s1) 0 0; max-width: 60ch; color: var(--fg2); font-size: var(--t2); line-height: 1.5; } .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s6); margin: var(--s5) 0; padding: var(--s5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .facts dt { font-size: var(--t4); line-height: 1.4; font-weight: 500; color: var(--muted); } .facts dd { margin: 2px 0 0; font-size: var(--t2); line-height: 1.5; color: var(--fg); font-variant-numeric: tabular-nums; } .facts dd .muted { font-size: var(--t3); } .about { max-width: 68ch; color: var(--fg2); margin: 0 0 var(--s4); line-height: 1.6; } .about p { margin: 0 0 var(--s1); } .about.clamped p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .colinks { max-width: 68ch; margin: 0 0 var(--s6); line-height: 1.7; } /* 220px columns let a four-block row wrap a value onto its own line ("open roles 149 -> / 246"), which reads as a broken number rather than a wrapped one. 260px keeps each block wide enough to hold its longest line. */ .sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5) var(--s6); margin: var(--s5) 0 var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .sig .label { margin-bottom: var(--s2); } .sig .sigv + .t3 { margin-top: var(--s1); } .sigv { display: flex; align-items: center; gap: var(--s3); font-size: var(--t2); line-height: 1.5; } .sigv b { font-weight: 500; } .spark { color: var(--accent); flex: none; } .siglist { list-style: none; margin: 0; padding: 0; font-size: var(--t3); line-height: 1.6; } .siglist li + li { margin-top: 2px; } .siglist a { color: var(--fg); text-decoration: none; } .siglist a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* 30: the six companies with nothing to click, as one line under the rows that all lead somewhere. */ .idle { margin: var(--s4) 0 0; color: var(--fg2); } .idle .label { margin-right: var(--s2); } .sec { margin: var(--s5) 0 var(--s3); } h2.sec { font-size: var(--t2); font-weight: 500; margin: 0 0 var(--s1); } /* Mobile */ @media (hover: none) { /* touch: no hover, so keep the actions visible under the row detail */ .growrow .gacts { position: static; opacity: 1; pointer-events: auto; background: none; padding: 0 0 var(--s2); justify-content: flex-end; } .growrow:hover .gage, .growrow:focus-within .gage { visibility: visible; } .growrow:hover .gacts, .growrow:focus-within .gacts, .growrow:hover .gage, .growrow:focus-within .gage { transition-delay: 0s; } /* nothing is revealed here, so nothing waits */ } /* The investors table's Companies column (col.c-cos, 11) is deliberately absent from the hide list below. */ @media (max-width: 720px) { :root { --gutter: 16px; } .top { padding-top: var(--s5); } .bar { flex-wrap: wrap; } .searchwrap { flex-basis: 100%; } .panel { position: fixed; inset: 0; z-index: 6; width: auto; max-height: none; border: 0; padding: var(--s4); display: flex; flex-direction: column; } .panel .pbody { flex: 1; overflow-y: auto; } .pgrid { grid-template-columns: 1fr; } .fopt { min-height: 44px; } .scrim { display: none; } .chead .logo.lg { width: 24px; height: 24px; } .grow { grid-template-columns: 1fr auto; gap: 2px var(--s3); } .gdetail { grid-column: 1; white-space: normal; } .gage { grid-column: 2; grid-row: 2; min-width: 0; } .hint { display: none; } col.c-emp, col.c-new, th.c-emp, td.c-emp, th.c-new, td.c-new { display: none; } col.c-stage { width: 100px; } col.c-open { width: 90px; } .meta { grid-template-columns: 1fr; gap: var(--s1) 0; } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); } .meta dd { margin-bottom: var(--s2); } } @media (min-width: 721px) { /* Desktop only: keep the query mutable at any scroll depth. No shadow, no radius — the hairline is the whole treatment. */ .ctl { position: sticky; top: 0; z-index: 6; background: var(--bg); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-strong); } .ctl .status { margin-bottom: 0; } /* Only where .ctl actually sticks: keeps j/k selection clear of it. --ctl-h is measured in jobsScreen(). */ .grow, .cgroup { scroll-margin-top: calc(var(--ctl-h, 96px) + var(--s3)); } } /* Weekly digest (/digest, /digest/{week}) — a newsletter page: one ordered list per section, nothing else. */ .digestline:empty { display: none; } .digestline { margin: var(--s3) 0 0; } .digest { max-width: 68ch; } .digest .dateline { margin: 0; color: var(--fg2); } .digest .dlede { margin: var(--s3) 0 0; color: var(--fg2); } .dsec { margin-top: var(--s6); border-top: 1px solid var(--rule); padding-top: var(--s4); } .dsec h2 { font-size: var(--t4); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); } .drows { margin: 0; padding-left: 2.2ch; font-size: var(--t3); } .drows li { margin-bottom: var(--s3); padding-left: var(--s2); } .drows li::marker { color: var(--muted); font-variant-numeric: tabular-nums; } .drows .dtitle { font-weight: 500; } .dmeta { color: var(--fg2); } .dtag { display: block; font-size: var(--t4); line-height: 1.4; color: var(--muted); margin-top: 2px; } .dweeks { list-style: none; margin: var(--s5) 0 0; padding: 0; font-size: var(--t3); } .dweeks li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); } .dfoot { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule-strong); } /* Print: the digest and the role page are both read on paper before an interview. Drop the chrome, drop the second copy of the apply button, and spell out the apply URL — that link only, never every link. */ @media print { .top, .foot, .dfoot, .back, .share, .gacts, .ctl, .hint, .alert { display: none; } .digest, .detail { max-width: none; } /* Printers drop backgrounds by default, so the filled button would print as white ink on white paper — taking the URL with it. On paper it is an outlined box in normal ink. */ .detail .apply { background: none; color: inherit; } .detail .apply[href]::after { content: " (" attr(href) ")"; font-size: var(--t4); } a { text-decoration: none; } } .alert-err { font-size: var(--t3); line-height: 1.45; color: var(--accent); } /* Type-ahead facet group. Same tokens as the checkbox list it replaces -- no new colour, size or weight. */ .ta .tachips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); } .tachip { background: var(--hover); border: 1px solid var(--rule-strong); cursor: pointer; padding: var(--s1) var(--s2); font: 400 var(--t4)/1.5 var(--sans); color: var(--fg); } .tachip:hover { border-color: var(--accent); color: var(--accent); } .tainput { width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--rule-strong); padding: var(--s1) var(--s2); font: 400 var(--t3)/1.45 var(--sans); } .tainput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* 34. 12em cut the seventh row through the middle of its text, which reads as a rendering fault rather than as "there is more". Six whole rows: 14px × 1.5 line-height + 2 × 4px padding = 29px each. */ .talist { list-style: none; margin: var(--s1) 0 0; padding: 0; max-height: 174px; overflow-y: auto; } .talist li { padding: var(--s1) var(--s2); font-size: var(--t3); line-height: 1.5; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s3); } .talist li:hover, .talist li.on { background: var(--hover); } .talist li[aria-selected="true"] { color: var(--accent); font-weight: 500; } .talist li.tanone { cursor: default; } .talist li.tanone:hover { background: transparent; } .tahint { margin-top: var(--s1); } /* Board capture. The block sits between the first result and the second, so it carries the same top rule as the old stranded version and nothing else: no card, no fill, no colour that isn't already a token. */ .alert { position: relative; } .groups .alert { margin-bottom: var(--s5); } /* it now has a card under it, not the page footer */ /* The message takes its own line above the field (order, not markup order — it is first in the DOM so screen readers meet it before the input it describes) and occupies no space at all when there is nothing to say. */ .alert .alert-err { flex: 0 0 100%; order: -1; } .alert .alert-err:empty { display: none; } .alert input[aria-invalid="true"] { border-bottom-color: var(--accent); } /* same 1px rule, recoloured: no reflow */ .alert button[type="submit"] { position: relative; } .alert button[type="submit"]:disabled { color: var(--muted); cursor: default; text-decoration-color: var(--rule); } .alert button[type="submit"] [data-lab] { transition: opacity .15s linear; } .alert button[type="submit"][aria-busy="true"] [data-lab] { opacity: 0; } .alert button[type="submit"][aria-busy="true"] .alert-spin { opacity: 1; } /* Busy reads as work, not as unavailability: the label holds its width, the ring fades in over it, and the control stays focusable and pressable-looking. */ .alert-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .15s linear .15s; } .alert-spin::after { content: ""; width: 10px; height: 10px; border: 1px solid currentColor; border-top-color: transparent; border-radius: 50%; } /* The second row: revealed by the first keystroke, and never stealing the caret from the field being typed in. */ .alert-more { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); max-height: 0; opacity: 0; overflow: hidden; } .alert-more.on { max-height: 200px; opacity: 1; overflow: visible; } .alert-more p { flex: 1 1 100%; margin: 0; font-size: var(--t4); line-height: 1.4; color: var(--muted); } .alert-more p .link { font-size: inherit; line-height: inherit; } /* the cadence toggle sits inside the 12px sentence, not beside it */ .alert-ok { flex: 0 0 100%; color: var(--fg2); } .alert-ok b { font-weight: 500; } .alert-ok .link { margin-left: var(--s3); } @media (prefers-reduced-motion: no-preference) { .alert-more { transition: max-height .2s ease, opacity .2s ease; } @keyframes alertspin { to { transform: rotate(360deg); } } .alert-spin::after { animation: alertspin .6s linear infinite; } }