/* ═══════════════════════════════════════════════════════════════════════════ Jobfeed web UI — split-view redesign. Tokens mirror the design handoff; light is default, dark via [data-theme=dark] on (set before paint in base.html, toggled by the ◐ button). ═══════════════════════════════════════════════════════════════════════════ */ :root { --bg: #f7f6f3; --surface: #ffffff; --pane: #fbfaf8; --bd: #e2dfd8; --bd2: #eceae4; --fg: #26231a; --muted: #8a8578; --faint: #a9a494; --accent: #3d6a96; --accent-bg: #e9eef5; --on-accent: #ffffff; --input-bg: #ffffff; --new: #2e7d3a; --new-bg: #f0f6ef; --star: #c9c4b6; --star-on: #8a8578; --warn: #b45309; --danger: #c0564c; --heavy-bg: #ede9fe; --heavy-fg: #6d28d9; --topbar-h: 53px; /* Area pill palette (group-level; sub-areas badge under their group). */ --area-markets-bg: #e3edf9; --area-markets-fg: #1f4e79; --area-quant-bg: #e9e7fb; --area-quant-fg: #4630a8; --area-research-bg: #ddf2f0; --area-research-fg: #126b63; --area-ibd-bg: #fdecdc; --area-ibd-fg: #95500b; --area-private-markets-bg: #f7e1ee; --area-private-markets-fg: #8f2a6b; --area-asset-management-bg: #def0f6; --area-asset-management-fg: #14627a; --area-middle-office-bg: #e7eaef; --area-middle-office-fg: #3d4757; --area-consulting-bg: #f1e6f8; --area-consulting-fg: #6a2b8f; --area-corporate-banking-bg: #e9eef5; --area-corporate-banking-fg: #3d6a96; --area-wealth-bg: #e9eef5; --area-wealth-fg: #3d6a96; --area-accounting-bg: #eef0df; --area-accounting-fg: #5e6314; --area-other-bg: #f0efec; --area-other-fg: #7c766a; /* Extra tag palettes. */ --tag-intern-bg: #e9e7fb; --tag-intern-fg: #4630a8; --tag-grad-bg: #def0f6; --tag-grad-fg: #14627a; --tag-senior-bg: #fdecdc; --tag-senior-fg: #95500b; --tag-delisted-bg: #fbe4e1; --tag-delisted-fg: #c0564c; /* Application-stage colours (the coloured status dot + word). */ --st-new: #5b8fc4; --st-queued: #b07d18; --st-applied: #2e7d3a; --st-oa: #7a68d4; --st-interview: #3d8fb5; --st-offer: #136b2c; --st-rejected: #c0564c; --st-ignored: #a9a494; /* Sources scope-badge palette. */ --scope-full-bg: #eef2f7; --scope-full-fg: #475569; --scope-facet-bg: #e8f5e9; --scope-facet-fg: #2e7d32; --scope-search-bg: #fff4e5; --scope-search-fg: #b45309; --scope-manual-bg: #fbe9e7; --scope-manual-fg: #c62828; /* Stats bar-segment palette (muted/dusty — hues stay distinct but toned down so the intake bars don't shout above the rest of the page). */ --seg-markets: #7d9cbd; --seg-quant: #9a90c7; --seg-research: #6dab9f; --seg-ibd: #cfa678; --seg-private-markets: #bd8bab; --seg-asset-management: #7aa9bd; --seg-middle-office: #99a2b0; --seg-consulting: #ab8bc4; --seg-accounting: #a8ab7e; --seg-corporate-banking: #6f8bab; --seg-wealth: #8b9cb0; --seg-europe: #7d9cbd; --seg-americas: #cfa678; --seg-apac: #6dab9f; --seg-mea: #ab8bc4; --seg-other: #b8b3a6; } [data-theme="dark"] { --bg: #1d1b18; --surface: #282521; --pane: #232019; --bd: #3a362e; --bd2: #33302a; --fg: #ece8e0; --muted: #a39d90; --faint: #7c766a; --accent: #8fb4d9; --accent-bg: #2e3a48; --on-accent: #141b24; --input-bg: #211f1b; --new: #6fc284; --new-bg: #242b21; --star: #4a463e; --star-on: #e0b665; --warn: #e0b665; --danger: #e88a80; --heavy-bg: #38304d; --heavy-fg: #c3b2f0; --area-markets-bg: #243447; --area-markets-fg: #9dc1e8; --area-quant-bg: #332e4d; --area-quant-fg: #b9aef0; --area-research-bg: #20393a; --area-research-fg: #8ad4c9; --area-ibd-bg: #42311f; --area-ibd-fg: #eab585; --area-private-markets-bg: #3f2536; --area-private-markets-fg: #e2a0c8; --area-asset-management-bg: #1f3742; --area-asset-management-fg: #8cc8de; --area-middle-office-bg: #31353c; --area-middle-office-fg: #aab4c4; --area-consulting-bg: #392b44; --area-consulting-fg: #cda3e0; --area-corporate-banking-bg: #2e3a48; --area-corporate-banking-fg: #8fb4d9; --area-wealth-bg: #2e3a48; --area-wealth-fg: #8fb4d9; --area-accounting-bg: #34351f; --area-accounting-fg: #c4ca86; --area-other-bg: #31302b; --area-other-fg: #9a9488; --tag-intern-bg: #332e4d; --tag-intern-fg: #b9aef0; --tag-grad-bg: #1f3742; --tag-grad-fg: #8cc8de; --tag-senior-bg: #42311f; --tag-senior-fg: #eab585; --tag-delisted-bg: #3a2a28; --tag-delisted-fg: #e88a80; --st-new: #8fb4d9; --st-queued: #e0b665; --st-applied: #6fc284; --st-oa: #b3a6f5; --st-interview: #7cc7e0; --st-offer: #6fc284; --st-rejected: #e88a80; --st-ignored: #7c766a; --scope-full-bg: #31353c; --scope-full-fg: #aab4c4; --scope-facet-bg: #24382a; --scope-facet-fg: #8ad096; --scope-search-bg: #42341c; --scope-search-fg: #e8bd75; --scope-manual-bg: #422522; --scope-manual-fg: #e89a90; --seg-markets: #7aa9d8; --seg-quant: #a294e8; --seg-research: #5cc2b5; --seg-ibd: #e8ae6a; --seg-private-markets: #d98cc0; --seg-asset-management: #6cbcd8; --seg-middle-office: #9aa7ba; --seg-consulting: #bd88d8; --seg-accounting: #b8bf6e; --seg-corporate-banking: #8fb4d9; --seg-wealth: #9db6d0; --seg-europe: #7aa9d8; --seg-americas: #e8ae6a; --seg-apac: #5cc2b5; --seg-mea: #bd88d8; --seg-other: #8f897c; } * { box-sizing: border-box; } /* The `hidden` attribute must win over component `display` rules below (a flex/inline-flex rule would otherwise re-show a [hidden] badge/chip). */ [hidden] { display: none !important; } html, body { margin: 0; } body { font: 13.5px/1.5 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--fg); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(128,120,100,.25); border-radius: 5px; background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* HTMX: dim a pane while a swap is in flight. */ .htmx-request.role-list, .role-list.htmx-request, #results.htmx-request { opacity: .55; transition: opacity .15s; } /* ── Top bar ──────────────────────────────────────────────────────────────── */ .topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--bg); border-bottom: 1px solid var(--bd); position: sticky; top: 0; z-index: 10; } .topbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .brand { font-weight: 700; font-size: 16px; color: var(--accent); white-space: nowrap; } .brand:hover { text-decoration: none; } .topnav { display: flex; align-items: center; gap: 6px; } .topnav a { padding: 5px 12px; border-radius: 8px; color: var(--muted); font-size: 13px; } .topnav a:hover { background: var(--bd2); text-decoration: none; } .topnav a.on { background: var(--accent-bg); color: var(--accent); font-weight: 600; } .theme-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--bd); border-radius: 15px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 14px; } .theme-toggle:hover { color: var(--fg); } .logout-form { margin: 0; } /* Icon-only (⏻) so it can never wrap to two lines in a tight topbar; same round 30px chrome as the theme toggle next to it. */ .logout-form button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font: inherit; font-size: 13px; line-height: 1; color: var(--muted); background: var(--surface); border: 1px solid var(--bd); border-radius: 15px; cursor: pointer; } .logout-form button:hover { background: var(--bd2); color: var(--fg); } .role-badge { flex: none; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--tag-senior-bg); color: var(--tag-senior-fg); white-space: nowrap; } /* Guest role: every mutating control disappears (the server rejects the POSTs with 403 regardless — this just keeps the UI honest). Notes stay private. */ body.guest .star, body.guest .dp-star, body.guest .status-select, body.guest .btn-ignore, body.guest div.actions, body.guest .dp-notes, body.guest .notes-form, body.guest .list-count .markseen, body.guest .list-count form, body.guest .newbar { display: none !important; } /* Header search. Desktop: lives in the topbar and soaks up the free space (capped); mobile: JS relocates the input into the list header, where the slot below takes over. */ .head-search { width: 100%; max-width: 360px; height: 32px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; background: var(--input-bg); color: var(--fg); font: inherit; font-size: 13px; outline: none; } #search-slot-desktop { display: contents; } #search-slot-mobile { display: none; } /* ── Mobile bottom nav ────────────────────────────────────────────────────── */ .bottomnav { display: none; } @media (max-width: 859px) { .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 40; display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--bd2); } .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 10.5px; color: var(--faint); } .bottomnav a:hover { text-decoration: none; } .bottomnav a.on { color: var(--accent); font-weight: 700; } .bottomnav .bn-ico { font-size: 16px; } } /* ═══ BROWSE (split view) ═══════════════════════════════════════════════════ */ @media (min-width: 860px) { body.browse { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } } .browse-split { display: flex; min-height: 0; } @media (min-width: 860px) { .browse-split { flex: 1; } } /* List pane (left). */ .list-pane { display: flex; flex-direction: column; min-height: 0; } @media (min-width: 860px) { .list-pane { flex: none; width: 540px; min-width: 380px; border-right: 1px solid var(--bd); } } .list-head { flex: none; padding: 12px 14px 0; } /* Area tabs. */ .area-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; } .area-tab { padding: 4px 11px; border-radius: 8px; background: var(--surface); border: 1px solid var(--bd); font: inherit; font-size: 12.5px; color: var(--fg); font-weight: 400; cursor: pointer; white-space: nowrap; } .area-tab:hover { background: var(--bd2); text-decoration: none; } .area-tab.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; } .area-tab .n { opacity: .55; font-size: 11px; } /* Toolbar row: Filters button · Reset · count. */ .list-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .filters-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--bd); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .filters-btn:hover { background: var(--bd2); } .filters-btn.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .filters-btn .fbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; } .filters-btn .caret { font-size: 9px; opacity: .55; } .link-reset { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; color: var(--muted); background: none; border: none; cursor: pointer; } .link-reset:hover { color: var(--fg); text-decoration: none; } .list-count { margin-left: auto; font-size: 11.5px; color: var(--muted); text-align: right; } .list-count .new { color: var(--new); font-weight: 700; } .list-count .markseen { font: inherit; font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; } .list-count form { display: inline; } /* Active-filter chips. */ .chips { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-bottom: 9px; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; background: var(--accent-bg); color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; } .chip:hover { text-decoration: none; filter: brightness(.97); } .chip .x { opacity: .7; } /* Filter disclosure panel. */ .filter-panel { border: 1px solid var(--bd2); border-radius: 10px; background: var(--pane); padding: 11px 12px; margin-bottom: 10px; } .fp-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 0 0 5px; } .fp-grid { display: grid; gap: 6px; margin-bottom: 11px; } .fp-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-grid select { min-width: 0; height: 30px; padding: 0 6px; border: 1px solid var(--bd); border-radius: 8px; background: var(--input-bg); color: var(--fg); font: inherit; font-size: 12.5px; } .fp-toggles { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; } .fp-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--bd); border-radius: 12px; background: var(--surface); font-size: 11.5px; color: var(--faint); cursor: pointer; white-space: nowrap; } .fp-toggle input { display: none; } .fp-toggle.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .fp-saved { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--bd2); padding-top: 10px; } .fp-saved .saved-label { font-size: 11.5px; color: var(--faint); } .saved-view { display: inline-flex; align-items: center; border: 1px dashed var(--bd); border-radius: 12px; overflow: hidden; } .saved-view .apply { padding: 2px 3px 2px 10px; border: none; background: none; font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer; } .saved-view .del { padding: 2px 8px 2px 4px; border: none; background: none; font: inherit; font-size: 10.5px; color: var(--faint); cursor: pointer; } .saved-view .apply:hover { text-decoration: none; } .btn-save-view { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border: 1px solid var(--accent); border-radius: 12px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-bg); cursor: pointer; } .btn-reset-filters { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--bd); border-radius: 12px; font: inherit; font-size: 11.5px; color: var(--muted); background: var(--surface); cursor: pointer; } .btn-reset-filters:hover { background: var(--bd2); text-decoration: none; } /* ── Role list ────────────────────────────────────────────────────────────── */ .role-list { flex: 1; overflow-y: auto; padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 7px; min-height: 0; } .role-card { flex: none; background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; padding: 10px 12px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.03); text-align: left; font: inherit; color: inherit; width: 100%; display: block; } .role-card:hover { border-color: var(--bd); } .role-card.is-new { background: var(--new-bg); } .role-card.sel { background: var(--accent-bg); border-color: var(--accent); box-shadow: 0 1px 6px rgba(61,106,150,.18); } .role-card .rc-top { display: flex; align-items: flex-start; gap: 8px; } .role-card .rc-title { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--fg); } .role-card .newdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--new); margin-left: 3px; vertical-align: middle; } .role-card .rc-meta { font-size: 12px; color: var(--muted); margin: 2px 0 6px; } .role-card .rc-tags { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .role-card .rc-status { margin-left: auto; font-size: 11px; font-weight: 600; } .list-empty { color: var(--muted); text-align: center; padding: 28px 0; font-size: 13px; } /* Inline star toggle on a card. */ .star { flex: none; font-size: 16px; color: var(--star); background: none; border: none; cursor: pointer; padding: 0 2px; line-height: 1; } .star:hover { color: var(--star-on); } .star.on { color: var(--star-on); } /* Pills. */ .area { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--accent-bg); color: var(--accent); } .tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; background: var(--bd2); color: var(--muted); white-space: nowrap; } .tag.subarea { background: var(--accent-bg); color: var(--accent); } .tag.intern { background: var(--tag-intern-bg); color: var(--tag-intern-fg); } .tag.grad { background: var(--tag-grad-bg); color: var(--tag-grad-fg); } .tag.senior { background: var(--tag-senior-bg); color: var(--tag-senior-fg); } .tag.delisted { background: var(--tag-delisted-bg); color: var(--tag-delisted-fg); } .area-markets { background: var(--area-markets-bg); color: var(--area-markets-fg); } .area-quant { background: var(--area-quant-bg); color: var(--area-quant-fg); } .area-research { background: var(--area-research-bg); color: var(--area-research-fg); } .area-ibd { background: var(--area-ibd-bg); color: var(--area-ibd-fg); } .area-private-markets { background: var(--area-private-markets-bg); color: var(--area-private-markets-fg); } .area-asset-management { background: var(--area-asset-management-bg); color: var(--area-asset-management-fg); } .area-middle-office { background: var(--area-middle-office-bg); color: var(--area-middle-office-fg); } .area-consulting { background: var(--area-consulting-bg); color: var(--area-consulting-fg); } .area-corporate-banking { background: var(--area-corporate-banking-bg); color: var(--area-corporate-banking-fg); } .area-wealth { background: var(--area-wealth-bg); color: var(--area-wealth-fg); } .area-accounting { background: var(--area-accounting-bg); color: var(--area-accounting-fg); } .area-other { background: var(--area-other-bg); color: var(--area-other-fg); font-weight: 500; } .area-dash { color: var(--muted); } /* Status-word colours (role card + detail dot). */ .st-new { color: var(--st-new); } .st-queued { color: var(--st-queued); } .st-applied { color: var(--st-applied); } .st-oa { color: var(--st-oa); } .st-interview { color: var(--st-interview); } .st-offer { color: var(--st-offer); } .st-rejected { color: var(--st-rejected); } .st-ignored { color: var(--st-ignored); } /* ── Detail pane (desktop right; mobile bottom sheet) ─────────────────────── */ .detail-pane { flex: 1; overflow-y: auto; padding: 20px 26px; background: var(--pane); min-height: 0; } /* Reading column: capped for legibility and centred so a wide detail pane isn't a 760px block hugging the divider with dead space on the right. */ .detail-inner { max-width: 1040px; margin: 0 auto; } .dp-head { display: flex; align-items: flex-start; gap: 12px; } .dp-head h2 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--fg); } .dp-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; } .dp-star { font-size: 24px; color: var(--star); background: none; border: none; cursor: pointer; line-height: 1; padding: 0; } .dp-star.on { color: var(--star-on); } .dp-actions { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; align-items: center; } .btn-open { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; background: var(--accent); color: var(--on-accent); border-radius: 8px; font-size: 13px; font-weight: 600; } .btn-open:hover { text-decoration: none; opacity: .93; } .btn-open.dead { background: var(--surface); color: var(--muted); border: 1px solid var(--bd); } .status-select { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 5px 0 12px; border: 1px solid var(--bd); background: var(--surface); border-radius: 8px; } .status-select .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .status-select select { border: none; background: transparent; font: inherit; font-size: 13px; color: var(--fg); cursor: pointer; outline: none; } .btn-ignore { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid var(--bd); background: var(--surface); border-radius: 8px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; } .btn-ignore:hover { background: var(--bd2); } .dp-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .dp-meta .cell { background: var(--surface); border: 1px solid var(--bd2); border-radius: 8px; padding: 8px 11px; } .dp-meta .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); } .dp-meta .v { font-size: 13px; font-weight: 600; color: var(--fg); margin-top: 1px; } .dp-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 5px; } .dp-notes { margin-bottom: 16px; } .dp-notes textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--bd); border-radius: 8px; background: var(--surface); color: var(--fg); resize: vertical; outline: none; } .dp-notes-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .dp-notes-actions button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; color: var(--fg); background: var(--surface); border: 1px solid var(--bd); border-radius: 8px; cursor: pointer; } .dp-notes-actions button:hover { background: var(--bd2); } .dp-notes-status { color: var(--new); font-size: 12px; } .dp-desc { font-size: 13px; line-height: 1.65; color: var(--fg); border-top: 1px solid var(--bd2); padding-top: 14px; } /* Structured description: section headings, bullet lists, paragraphs. Shared by the split-view pane (.dp-desc) and the standalone page (.description). */ .dp-desc > :first-child, .description > :first-child { margin-top: 0; } .dp-desc > :last-child, .description > :last-child { margin-bottom: 0; } .dp-desc p, .description p { margin: 0 0 10px; } .dp-desc h4, .description h4 { margin: 18px 0 7px; font-size: 12px; font-weight: 700; color: var(--fg); text-transform: uppercase; letter-spacing: .04em; } .dp-desc ul, .description ul { margin: 0 0 12px; padding-left: 18px; } .dp-desc li, .description li { margin: 3px 0; padding-left: 2px; } .dp-desc li::marker, .description li::marker { color: var(--faint); } .dp-other { margin: 16px 0 8px; font-size: 12px; color: var(--faint); } .dp-hint { margin: 18px 0 0; font-size: 11.5px; color: var(--faint); } .dp-delisted { background: var(--scope-manual-bg); border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.4; } .dp-empty { color: var(--muted); font-size: 14px; padding: 40px 4px; text-align: center; } /* Bottom-sheet framing (mobile). Backdrop hidden unless the sheet is open. */ .sheet-backdrop { display: none; } @media (max-width: 859px) { .detail-pane { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; max-height: 78vh; padding: 10px 16px 24px; background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18); transform: translateY(105%); transition: transform .22s ease; flex: none; } .detail-pane::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--bd); margin: 0 auto 12px; } body.sheet-open .detail-pane { transform: translateY(0); } body.sheet-open .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(20,17,12,.4); } .dp-meta { grid-template-columns: 1fr 1fr; } .dp-head h2 { font-size: 16px; } .btn-open { flex: 1; justify-content: center; height: 40px; } .dp-actions .status-select, .dp-actions .btn-ignore { height: 40px; } .dp-hint, .dp-other { display: none; } /* Give the list room above the fixed bottom nav. */ .role-list { padding-bottom: 76px; } } /* ═══ JOB DETAIL (standalone page) ═════════════════════════════════════════ */ .back { color: var(--muted); } .detail { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; padding: 20px; max-width: 820px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .detail > .star { position: absolute; top: 20px; right: 16px; font-size: 26px; padding: 0 4px; } .detail h1 { margin: 0 0 4px; font-size: 20px; line-height: 26px; padding-right: 44px; } .detail .sub { color: var(--muted); margin: 0 0 14px; } .detail dl.meta { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; margin: 0 0 16px; } .detail dl.meta dt { color: var(--muted); } .detail dl.meta dd { margin: 0; } .detail .description { border-top: 1px solid var(--bd2); padding-top: 14px; color: var(--fg); font-size: 13px; line-height: 1.65; } .detail h2 { font-size: 15px; margin: 16px 0 6px; } .delisted-banner { background: var(--scope-manual-bg); border: 1px solid var(--danger); color: var(--danger); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.4; } .actions-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .actions-bar form { display: contents; } div.actions { display: inline-flex; align-items: center; gap: 6px; } div.actions select { padding: 0 8px; font: inherit; font-size: 13px; border: 1px solid var(--bd); border-radius: 8px; background: var(--surface); color: var(--fg); cursor: pointer; height: 32px; box-sizing: border-box; } div.actions .applied-at { color: var(--muted); font-size: 11px; } .act { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 13px; border: 1px solid var(--bd); background: var(--surface); border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; } .act:hover { background: var(--bd2); text-decoration: none; } .act-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .act-primary:hover { opacity: .93; background: var(--accent); color: var(--on-accent); } .act-dead { color: var(--muted); opacity: .8; } .notes-form textarea { width: 100%; max-width: 620px; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--bd); border-radius: 8px; background: var(--surface); color: var(--fg); resize: vertical; } .notes-actions { margin: 6px 0 4px; display: flex; align-items: center; gap: 10px; } .notes-actions button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; color: var(--fg); background: var(--surface); border: 1px solid var(--bd); border-radius: 8px; cursor: pointer; } .notes-actions button:hover { background: var(--bd2); } .notes-status { color: var(--new); font-size: 12px; } .badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: var(--accent-bg); color: var(--accent); } .badge-new { background: var(--accent-bg); color: var(--accent); } .badge-queued { background: var(--tag-senior-bg); color: var(--tag-senior-fg); } .badge-applied { background: var(--new-bg); color: var(--new); } .badge-oa { background: var(--area-quant-bg); color: var(--area-quant-fg); } .badge-interview { background: var(--area-asset-management-bg); color: var(--area-asset-management-fg); } .badge-offer { background: var(--new-bg); color: var(--st-offer); font-weight: 700; } .badge-rejected { background: var(--tag-delisted-bg); color: var(--tag-delisted-fg); } .badge-ignored { background: var(--bd2); color: var(--muted); } /* ═══ SOURCES ══════════════════════════════════════════════════════════════ */ main.page { padding: 18px; max-width: 1080px; margin: 0 auto; } @media (max-width: 859px) { main.page { padding: 14px 12px 76px; } } .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .summary-cards.wide { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .scard { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; padding: 12px 14px; } .scard .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); } .scard .v { font-size: 22px; font-weight: 700; margin-top: 2px; } .scard .v.good { color: var(--new); } .scard .v.bad { color: var(--danger); } .scard .sub { font-size: 11px; color: var(--faint); } .scard.help { cursor: help; } .about { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .about b { color: var(--fg); } .src-search { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; background: var(--input-bg); color: var(--fg); font: inherit; font-size: 13px; outline: none; margin-bottom: 14px; } .srcgroup { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .srcgroup.cat-off { opacity: .55; } .srccat { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; } .srccat .caret { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; color: var(--accent); background: var(--accent-bg); border-radius: 6px; transition: transform .15s ease; } .srcgroup.collapsed .srccat .caret { transform: rotate(-90deg); } .srcgroup.collapsed .srcrows { display: none; } .srccat .catname { font-weight: 600; font-size: 14px; } .srccat .srccount { color: var(--faint); font-size: 12px; } .srccat .catswitch { margin-left: auto; } .srcrows { border-top: 1px solid var(--bd2); } .srcrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--bd2); flex-wrap: wrap; } .srcrow:last-child { border-bottom: none; } .srcrow.firm-off .firmcell, .srcrow.firm-off .scope, .srcrow.firm-off .heavy { opacity: .45; } .firmcell { flex: 1 1 180px; min-width: 0; } .firmcell .firmname { font-size: 13px; font-weight: 600; color: var(--accent); } .firmcell .firmsub { font-size: 11.5px; color: var(--faint); } .ext { color: var(--faint); margin-left: 4px; font-size: 12px; } .srcnote { color: var(--faint); margin-left: 4px; cursor: help; font-size: 12px; } .gradscheme { margin-left: 4px; text-decoration: none; cursor: help; } .firm-flag.unverified { color: var(--warn); font-size: 11px; } .firm-flag.stalled { color: var(--danger); font-size: 11px; font-weight: 600; } .scope { flex: none; display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; white-space: nowrap; background: var(--scope-full-bg); color: var(--scope-full-fg); } .scope.full { background: var(--scope-full-bg); color: var(--scope-full-fg); } .scope.facet { background: var(--scope-facet-bg); color: var(--scope-facet-fg); } .scope.search { background: var(--scope-search-bg); color: var(--scope-search-fg); } .scope.manual { background: var(--scope-manual-bg); color: var(--scope-manual-fg); } .heavy { flex: none; display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; background: var(--heavy-bg); color: var(--heavy-fg); white-space: nowrap; cursor: help; } .srcnomatch { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; } /* iOS-style show/hide switch. */ .switch { position: relative; display: inline-flex; width: 34px; height: 20px; flex: none; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .switch .slider { flex: 1; background: var(--star); border-radius: 20px; transition: background .15s; position: relative; } .switch .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::before { transform: translateX(14px); } .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══ STATS ════════════════════════════════════════════════════════════════ */ .page h2 { font-size: 16px; margin: 22px 0 10px; } .page h2:first-of-type { margin-top: 4px; } .wk { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; } .wk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; } .wk-head .lbl { font-weight: 600; font-size: 13.5px; } .wk-head .meta { color: var(--muted); font-size: 12.5px; } .wk-head .meta b { color: var(--fg); font-weight: 600; } .sbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bd2); margin-bottom: 7px; } .sbar.spaced { margin-top: 12px; } .sbar .seg { height: 100%; min-width: 2px; } .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); } .legend .li { display: inline-flex; align-items: center; gap: 5px; } .legend .li b { color: var(--fg); font-weight: 600; } .legend .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; } .seg-markets, .dot.seg-markets { background: var(--seg-markets); } .seg-quant, .dot.seg-quant { background: var(--seg-quant); } .seg-research { background: var(--seg-research); } .seg-ibd { background: var(--seg-ibd); } .seg-private-markets { background: var(--seg-private-markets); } .seg-asset-management { background: var(--seg-asset-management); } .seg-middle-office { background: var(--seg-middle-office); } .seg-consulting { background: var(--seg-consulting); } .seg-accounting { background: var(--seg-accounting); } .seg-corporate-banking { background: var(--seg-corporate-banking); } .seg-wealth { background: var(--seg-wealth); } .seg-europe { background: var(--seg-europe); } .seg-americas { background: var(--seg-americas); } .seg-apac { background: var(--seg-apac); } .seg-mea { background: var(--seg-mea); } .seg-other { background: var(--seg-other); } .velocity { background: var(--surface); border: 1px solid var(--bd2); border-radius: 10px; overflow: hidden; } .velrow { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--bd2); } .velrow:last-child { border-bottom: none; } .velrow.silent { opacity: .55; } /* Header row: same column layout as a data row, labelled. */ .velrow.velhead { padding: 7px 16px; background: var(--pane); } .velrow.velhead .vco, .velrow.velhead .vrecent, .velrow.velhead .vtotal { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); } .velrow.velhead .vco { color: var(--faint); } .spark-lbl { flex: 1; display: flex; justify-content: space-between; gap: 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); white-space: nowrap; overflow: hidden; } .velrow .vco { flex: none; width: 180px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent); } .velrow .vrecent { flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--accent); } .velrow.silent .vrecent { font-weight: 400; color: var(--faint); } .velrow .spark { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 22px; } .velrow .spark .bar { flex: 1; background: var(--accent); min-height: 2px; border-radius: 2px; opacity: .6; } .velrow .vtotal { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); } .stat-sub { font-size: 12px; color: var(--muted); margin: 0 0 10px; } @media (max-width: 859px) { .velrow .vco { width: 104px; } } /* ═══ LOGIN ════════════════════════════════════════════════════════════════ */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .login-card { background: var(--surface); border: 1px solid var(--bd); border-radius: 12px; padding: 28px; width: 280px; text-align: center; } .login-card h1 { color: var(--accent); margin: 0 0 16px; font-size: 20px; } .login-card input { width: 100%; padding: 9px; border: 1px solid var(--bd); border-radius: 8px; margin-bottom: 10px; font: inherit; background: var(--input-bg); color: var(--fg); } .login-card button { width: 100%; padding: 9px; background: var(--accent); color: var(--on-accent); border: none; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; } .login-card .error { color: var(--danger); font-size: 13px; } /* ── Mobile browse tweaks ─────────────────────────────────────────────────── */ @media (max-width: 859px) { /* The brand bar scrolls away; the list header below (search + tabs + filters + chips) is what sticks, like the always-visible header of the desktop split view. */ .topbar { padding: 8px 14px; position: static; } .topnav { display: none; } /* Pre-relocation (or JS off) the search input still sits in the topbar — keep it hidden there; the rule stops matching once JS moves it down. */ .topbar .head-search { display: none; } #search-slot-mobile { display: block; margin: 0 0 9px; } /* Stack the split so the list pane is a block, not a flex item that refuses to shrink below the intrinsic width of the nowrap .area-tabs row (which doubled the page width and never let overflow-x scroll). min-width:0 on the panes lets the row scroll horizontally *within* the viewport. */ .browse-split { display: block; } .list-pane, .list-head { min-width: 0; } .list-head { padding: 10px 12px 0; position: sticky; top: 0; z-index: 9; background: var(--bg); border-bottom: 1px solid var(--bd); } /* An open filter panel scrolls internally so the sticky header can never grow past the viewport. */ .filter-panel:not([hidden]) { max-height: 55dvh; overflow-y: auto; } /* Mobile keeps every filter group 2-col; a cols-3 group (Role, Location, Recency & start) just wraps its third select to the next row. */ .fp-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .area-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; } .area-tab { flex: none; min-height: 40px; padding: 8px 13px; font-size: 13px; } .area-tab .n { font-size: 11.5px; } .head-search { max-width: none; height: 40px; font-size: 14px; } /* Roomier touch targets + spacing on a real phone. */ .role-list { padding: 2px 12px 76px; gap: 8px; } .role-card { padding: 12px 13px; } .role-card .rc-title { font-size: 14px; } .role-card .rc-meta { font-size: 12.5px; } .filters-btn { min-height: 40px; padding: 9px 14px; } .link-reset { min-height: 40px; } .star { font-size: 22px; min-width: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } } /* Scan-freshness banner (dead-man's-switch): shown when MAX(last_seen) is 2+ days old, i.e. the nightly M1 scan has silently stopped. */ .stale-banner { flex: none; margin: 10px 14px 0; padding: 8px 12px; border-radius: 8px; background: var(--tag-delisted-bg); color: var(--danger); border: 1px solid var(--danger); font-size: 13px; font-weight: 600; }