/* OpenMarketIL -- brutalist Swiss grid. System rules, don't break them ad hoc elsewhere in this file: 1. White page background; black is a component color, never on . 2. Green marks exactly one "this matters" element -- never decoration. 3. Sharp corners everywhere. No border-radius, no box-shadow depth. 4. Two voices: --font (Helvetica) for everything dense; --font-display (Monocraft) only for the topbar and the two section titles. 5. Job Board and Market Stats are permanent, side by side above the mobile breakpoint (where they stack) -- never a drawer or toggle. 6. Light/dark is a straight token swap: every rule reads var(--white)/var(--black), never a literal hex, so the swap stays total under [data-theme="dark"]. */ @font-face { font-family: "Monocraft"; src: url("fonts/Monocraft-Black.ttf") format("truetype"); font-weight: 800; font-display: swap; } :root { --white: #ffffff; --black: #0a0a0a; --green: #1c7c3f; --green-bright: #2fae60; --grey: #6b6b6b; --grey-line: #d4d4d4; --red: #b8362c; --hover-bg: #f4f4f4; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Monocraft", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Side padding for .workspace/.container -- scales with viewport (20px floor, 64px ceiling) instead of a fixed max-width box. */ --gutter: clamp(20px, 4vw, 64px); --rule: 2px; /* Forces native chrome (input caret, scrollbars) to follow OUR toggle instead of the OS's own dark-mode setting, which would otherwise paint them dark against our light surfaces. */ color-scheme: light; } :root[data-theme="dark"] { --white: #0a0a0a; --black: #ffffff; --green: #2fae60; --green-bright: #4ee585; --grey: #9a9a9a; --grey-line: #333333; --hover-bg: #1a1a1a; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--white); color: var(--black); } body { font-family: var(--font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--black); color: var(--white); } /* Custom scrollbars, theme-tokened like the rest of the page. The thumb's border uses the track color -- the standard trick for an inset look. */ html { scrollbar-width: thin; scrollbar-color: var(--black) var(--white); } *::-webkit-scrollbar { width: 12px; height: 12px; } *::-webkit-scrollbar-track { background: var(--white); } *::-webkit-scrollbar-thumb { background: var(--black); border: 3px solid var(--white); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--green); } *::-webkit-scrollbar-corner { background: var(--white); } a { color: inherit; } a.link { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--green); } a.link:hover { background: var(--green); color: var(--white); } button, input, select { font-family: var(--font); font-size: 13px; color: var(--black); caret-color: var(--black); /* belt-and-suspenders on top of color-scheme: light above */ } .container { padding: 0 var(--gutter); } .section { border-bottom: var(--rule) solid var(--black); padding: 40px 0; } .section-title { font-family: var(--font-display); font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 24px; } /* ---------------------------------------------------------------------- */ /* Topbar */ /* ---------------------------------------------------------------------- */ .topbar { font-family: var(--font-display); border-bottom: var(--rule) solid var(--black); position: sticky; top: 0; background: var(--white); z-index: 10; } .topbar .container { display: flex; align-items: center; gap: 16px; /* nowrap, deliberately -- .ticker has min-width:0 + overflow:hidden so it shrinks to fit instead. flex-wrap here wrapped the whole topbar onto 3 lines at any width short of "everything fits." */ flex-wrap: nowrap; min-height: 56px; padding-top: 10px; padding-bottom: 10px; } .topbar .container > * { min-width: 0; } /* same min-width:auto issue as everywhere else in this file */ .wordmark, .topnav { flex: 0 0 auto; } /* natural width -- the ticker is the one flexible element between them */ /* ---------------------------------------------------------------------- */ /* Topbar ticker -- seamless CSS-loop marquee. The item list is duplicated once in the track, animated exactly -50% so the loop has no visible seam. */ /* ---------------------------------------------------------------------- */ .ticker-rule { flex: 0 0 auto; width: var(--rule); height: 22px; background: var(--black); } .ticker { flex: 1 1 auto; min-width: 0; overflow: hidden; height: 20px; display: flex; align-items: center; /* .ticker-track's height comes from its own text content, not this 20px window -- without this it just sits at the top of the clipped box instead of centered in it */ } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 40s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } /* let a visitor actually read/click one without it sliding away */ @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--grey-line); } .ticker-item:hover { color: var(--green); } .ticker-item .bullet { color: var(--green); } .ticker-item .ticker-company { color: var(--grey); } .ticker-item:hover .ticker-company { color: var(--green); } .wordmark { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; } .wordmark .accent { color: var(--green); } .topnav { display: flex; align-items: center; gap: 28px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .theme-toggle { background: none; border: none; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: inherit; text-transform: uppercase; letter-spacing: 0.08em; padding: 0; cursor: pointer; border-bottom: 1px solid transparent; } .theme-toggle:hover { color: var(--green); border-color: var(--green); } /* A square block, not a circle, per the sharp-corners rule. Flickers in irregular jump-cut steps like a torch, not a smooth pulse. OFFLINE kills the animation outright -- the torch went out, not still pulsing. */ .status-dot { width: 8px; height: 8px; background: var(--green); display: inline-block; margin-right: 6px; animation: torch-flicker 1.6s steps(1) infinite; } .status-dot.stale { background: var(--red); animation: none; } @keyframes torch-flicker { 0%, 100% { opacity: 1; } 6% { opacity: 0.8; } 11% { opacity: 1; } 19% { opacity: 0.55; } 27% { opacity: 1; } 33% { opacity: 0.85; } 41% { opacity: 1; } 52% { opacity: 0.7; } 58% { opacity: 1; } 69% { opacity: 0.9; } 74% { opacity: 1; } 83% { opacity: 0.6; } 89% { opacity: 1; } } /* ---------------------------------------------------------------------- */ /* Workspace -- Job Board (main) + Market Stats (a permanent right-hand board, not a drawer/overlay). Stacks vertically under the responsive breakpoint at the end of this file. */ /* ---------------------------------------------------------------------- */ .workspace { display: grid; grid-template-columns: 1fr clamp(360px, 28vw, 460px); align-items: start; padding: 0 var(--gutter); } /* min-width:0 -- without it a grid item can't shrink below its content's natural width, so one long unbreakable value (a table row, a bar-list name) forces the whole page wider instead of wrapping locally. */ .workspace > #board, .workspace > .stats-board { min-width: 0; } .workspace > #board { border-right: var(--rule) solid var(--black); padding-right: var(--gutter); } .workspace > #board .container { padding: 0; } .stats-board { position: sticky; top: 57px; /* topbar height + its 2px bottom rule */ max-height: calc(100vh - 57px); overflow-y: auto; /* Right padding is half the left gutter, not zero -- without it the scrollbar (inside this box's own right edge) sits flush against the panel content with no breathing room. */ padding: 40px calc(var(--gutter) / 2) 40px var(--gutter); } .stats-board .metrics-grid { grid-template-columns: repeat(2, 1fr); } .stats-board .panel-grid { grid-template-columns: 1fr; } /* ---------------------------------------------------------------------- */ /* Metrics grid */ /* ---------------------------------------------------------------------- */ /* Same shape as .panel-grid/.panel below: the black background is just the hairline showing through the gaps -- the cells are the light surface, matching the (correctly white) panels beside them. */ .metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--rule); background: var(--black); border: var(--rule) solid var(--black); } .metric-card { background: var(--white); color: var(--black); padding: 18px 16px; min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; } .metric-card .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); } .metric-card .value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 10px; color: var(--black); } .metric-card.highlight .value { color: var(--green); } .metric-card .sub { font-size: 10.5px; color: var(--grey); margin-top: 4px; } /* Market-insight panels -- who's hiring, what for, where. No ATS-vendor breakdown here -- that's plumbing, not a market signal. */ .panel-grid { margin-top: var(--rule); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rule); background: var(--black); border: var(--rule) solid var(--black); } .panel { background: var(--white); padding: 18px 20px 20px; } .panel-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); margin-bottom: 12px; font-weight: 700; } .bar-row { display: grid; grid-template-columns: 1fr 100px 44px; align-items: center; gap: 12px; font-size: 12.5px; padding: 6px 0; } .bar-row .name { min-width: 0; /* the ellipsis below can't engage without this */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-row .bar-track { background: var(--grey-line); height: 9px; position: relative; } .bar-row .bar-fill { background: var(--black); height: 100%; } .bar-row:first-child .bar-fill { background: var(--green); } .bar-row .n { text-align: right; font-variant-numeric: tabular-nums; } .bar-row.clickable { cursor: pointer; } .bar-row.clickable .name:hover { color: var(--green); text-decoration: underline; } .trend-chart { width: 100%; height: 64px; display: block; overflow: visible; } .trend-bar { fill: var(--grey-line); } .trend-bar.latest { fill: var(--green); } /* Shared by the closed-jobs overlay line and the open-jobs-over-time line: black line/dots, green only on the most-recent point. */ .trend-line { fill: none; stroke: var(--black); stroke-width: 1.5; } .trend-dot { fill: var(--black); } .trend-dot.latest { fill: var(--green); } .trend-legend { display: flex; gap: 14px; font-size: 9.5px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; } .trend-legend .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; } .trend-legend .dot.new { background: var(--grey-line); } .trend-legend .dot.closed { background: var(--black); } .trend-axis { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } /* One big headline number -- for a panel whose whole point is a single stat (the stale-listing rate), not a list of several. */ .ghost-pct { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } .ghost-sub { font-size: 11.5px; color: var(--grey); margin-top: 8px; } @media (max-width: 720px) { .panel-grid { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------------- */ /* Job board */ /* ---------------------------------------------------------------------- */ /* The list and its detail panel, side by side -- same fixed-width-sidebar idiom as .workspace (board/stats). .job-detail starts [hidden] in index.html; app.js clears that on first selection. Never a drawer or modal -- laid out in-flow like everything else in this system. */ .board-split { display: flex; align-items: flex-start; gap: var(--gutter); } .board-list { flex: 1 1 0; min-width: 0; } .job-detail { flex: 0 0 clamp(320px, 34%, 420px); min-width: 0; position: sticky; top: 77px; /* topbar (56px content + 2px rule) + a little breathing room, so it doesn't sit flush under the sticky header */ max-height: calc(100vh - 97px); overflow-y: auto; border: var(--rule) solid var(--black); padding: 20px; } .job-detail[hidden] { display: none; } .job-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .job-detail-close { flex: 0 0 auto; border: var(--rule) solid var(--black); background: var(--white); color: var(--black); width: 28px; height: 28px; font-size: 13px; cursor: pointer; } .job-detail-close:hover { background: var(--black); color: var(--white); } .job-detail-title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 2px 0 0; overflow-wrap: anywhere; } .job-detail-company { color: var(--grey); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; overflow-wrap: anywhere; } .job-detail-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .job-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 16px 0; padding-bottom: 16px; border-bottom: 1px solid var(--black); } .job-detail-apply { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: var(--green); color: var(--white); border: var(--rule) solid var(--green); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } .job-detail-apply:hover { background: var(--black); border-color: var(--black); } .job-detail-star { border: var(--rule) solid var(--black); background: var(--white); height: 38px; padding: 0 14px; font-size: 13px; cursor: pointer; white-space: nowrap; } .job-detail-star.on { color: var(--green); border-color: var(--green); } .job-detail-star:hover { border-color: var(--green); color: var(--green); } .job-detail-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .job-detail-meta-row { display: flex; gap: 10px; font-size: 12.5px; } .job-detail-meta-row .label { flex: 0 0 92px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; padding-top: 1px; } .job-detail-meta-row .value { overflow-wrap: anywhere; } .job-detail-description-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); font-weight: 700; margin-bottom: 10px; } .job-detail-description { font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .job-detail-description.empty { color: var(--grey); font-style: normal; } .job-detail-desc-heading { display: block; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: var(--grey); margin-top: 12px; } table.jobs tbody tr.selected { background: var(--hover-bg); } table.jobs tbody tr[data-id] { cursor: pointer; } @media (max-width: 1300px) { .board-split { flex-direction: column; } .job-detail { flex-basis: auto; width: 100%; position: static; max-height: none; } } /* Flex-wrap, not a fixed-column grid -- drops filters onto a second row once they stop fitting, at any width, not just hand-picked breakpoints. */ .filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .filters > * { min-width: 0; } /* form controls have a real intrinsic width too */ #f-q, #f-keywords { flex: 1 1 200px; } .filters .ms { flex: 1 1 130px; } .filters label.toggle, .filters #f-reset { flex: 0 0 auto; } .filters input[type="text"], .filters select { border: var(--rule) solid var(--black); background: var(--white); padding: 9px 10px; height: 38px; width: 100%; } .filters input[type="text"]:focus, .filters select:focus { outline: 2px solid var(--green); outline-offset: -2px; } /* Multi-select filter -- a native