/* OpenMarketIL. Swiss grid, modernized. System rules, don't break them ad hoc elsewhere in this file: 1. Warm off-white page background (--white); forest-green ink is a component color (buttons, rules), never on directly. 2. Green marks exactly one "this matters" element, never decoration. 3. 4px radius on every discrete bordered box (buttons, chips, badges, inputs, floating panels); sharp (0) only for what isn't really a box -- grid-tile cards, the table, dividers. No box-shadow depth anywhere either way. See DESIGN.md's Shapes section for the full list of what stays sharp and why. 4. Two voices: --font (Helvetica) for everything dense; --font-display (Overused Grotesk, bold/extrabold) only for the topbar and the two section titles. 5. Job Board and Statistics are permanent, side by side above the mobile breakpoint (where they stack), never a drawer or toggle. 6. Light/dark both read var(--white)/var(--black), never a literal hex, but the two palettes are tuned independently rather than one being a straight hex-invert of the other. */ @font-face { font-family: "Overused Grotesk"; src: url("fonts/OverusedGrotesk-VF.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; } /* Source Sans 3 for controls (buttons, inputs, the view switch, chips, badges), per request. Self-hosted for the same reason as Overused Grotesk: no third-party font request on every page view. The variable files cover weights 200 to 900; latin-ext carries the accented letters company and city names need. OFL, licence beside the files. */ @font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-VF-latin.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-VF-latin-ext.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --white: #f2f0ef; /* Ink that stays ink in dark mode, for the one section that keeps a light ground in both themes (see .hero-showcase). */ --ink-fixed: #40513b; --black: #40513b; --green: #609966; --green-bright: #80ad85; /* The loading sweep runs along the topbar's dark rule, not on paper, so it is measured against #40513b: --green was 2.5:1 there and hard to see. This is 5.1:1. */ --grey: #40513b; /* Neutral, not green. The structure (row dividers, panel and tile borders, bar tracks) used to be a sage tint, which made the whole page read green before any of the green that means something. Green is now kept for signals only. 1.37:1 on paper, a touch clearer than the old #c7d9b3 at 1.32:1. */ --grey-line: #d2cfcb; --red: #b8362c; --hover-bg: #e8e5e2; /* neutral too; was the sage #e9efdb at 1.04:1 */ /* Board panel outlines, and nothing else. Darker than --grey-line because it has to read against the tinted ground the panels sit on, where the hairline used between two things on paper disappears. */ --panel-line: #a7ad9f; /* Behind a salary the employer published, and nothing else. An estimate gets the same green outline with no fill, so the two are told apart by the fill rather than by reading the word "Est.". */ --salary-fill: #e4ece0; /* Row states, apart from --hover-bg (which still tints menu options) so hovering a row and having it open never look the same. Both are neutral now; the open one is a shade deeper and carries an ink bar down its left edge, the way LinkedIn marks the job you are reading. --row-selected keeps its green for the two things that still point at something: a search match (mark) and a checked filter's tile. The old shared tint was 1.04:1 against paper and barely visible; hover is 1.13:1 and open is 1.22:1. */ --row-hover: #e6e3df; --row-open: #dedad5; --row-selected: #dce8d4; /* Green for text, and for fills that text sits on. --green is 2.96:1 on paper, under the 4.5:1 body text needs; this is 5.18:1, and still 4.6:1 on --row-hover. --green stays for marks with no text in them: bars, chart lines, focus rings, checkboxes. */ --green-text: #3f6f45; /* Dims the board behind the job sheet. Its own token because it has to darken in both themes, and --black is a light colour in dark mode -- reusing it there would brighten the page behind the sheet instead of pushing it back. */ --scrim: rgba(38, 36, 34, 0.32); /* AWS service-health status colours, used only for pipeline state. Kept apart from --green/--red, which are brand and carry the One Voice Rule; these say "operational/degraded/disrupted" and nothing else. --aws-maintenance is unused so far and is here so a scheduled pause has somewhere to go rather than borrowing the warning colour. */ --aws-operational: #248823; --aws-degraded: #ff9900; --aws-outage: #d13212; --aws-maintenance: #0073bb; --font: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Overused Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-ui: "Source Sans 3", "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); /* The gutter, or the screen's own cutout inset where that is wider. Used by anything whose content runs to the page edge. */ --edge: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); /* The ground the logo row stands on, light whatever the theme: company marks are drawn for a light page and a third of them are white. */ --logo-band: #edf0ec; --logo-band-rule: #d6ded6; --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"] { /* AWS's own light-background status colours go muddy on #17181c, particularly the green, which reads closer to black than to a signal. Lifted for contrast, same hues. */ --aws-operational: #3fb950; --aws-degraded: #ffab33; --aws-outage: #ff5d47; --aws-maintenance: #539fe5; --white: #17181c; --black: #ededec; --green: #2fae60; --green-bright: #4ee585; --grey: #9a9a9a; --grey-line: #2b2c31; --hover-bg: #1e1f24; --panel-line: #4a4c52; --salary-fill: #1a2a20; --row-hover: #23252b; --row-open: #2b2e35; --row-selected: #1d3024; --green-text: #2fae60; /* same as --green: already 6.2:1 on #17181c */ /* The light red is 3.0:1 on #17181c, under the 4.5:1 text needs, so every red message and the red Reset were faint in dark mode. 6.4:1. */ --red: #ff6b5e; --scrim: rgba(0, 0, 0, 0.58); color-scheme: dark; /* The landing page honours the theme now, and a light band across it read as a stripe of daylight. The marks keep their own light square on the board, where each is 44px; here the row is the page's. */ --logo-band: #1b1c21; --logo-band-rule: #2b2c31; } * { 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; } /* iOS-only behaviour, so the iPhone site matches the Android one. text-size-adjust: Safari enlarges text on its own when a phone turns landscape; this keeps the sizes the stylesheet sets. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Safari draws text inputs with its own inner shadow and rounding underneath the borders set here. */ input[type="text"], input[type="search"], input[type="email"], textarea { -webkit-appearance: none; appearance: none; } /* Safari zooms the whole page when a field under 16px takes focus, and leaves it zoomed. Every field here is 12.5 to 13px, so tapping Search on an iPhone zoomed the board in; Android does not do this. 16px on touch screens only, desktop keeps its sizes. !important because the fields' own rules are more specific, and this must win over all of them. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } } ::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); text-decoration: none; border-bottom: 1px solid var(--green-text); } a.link:hover { background: var(--green-text); color: var(--white); } .icon-link { display: inline-flex; align-items: center; color: var(--black); } .icon-link:hover { color: var(--green-text); } button, input, select { font-family: var(--font-ui); font-size: 13px; color: var(--black); caret-color: var(--black); /* belt-and-suspenders on top of color-scheme: light above */ } .container { /* viewport-fit=cover lets the page reach the true screen edge, so the gutter has to clear the cutout itself: on a notched phone in landscape the inset is larger than the gutter, and in portrait it is zero and this is just the gutter. Any phone with a cutout, not only an iPhone. */ padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .section { border-bottom: var(--rule) solid var(--black); padding: 12px 0 40px; } .section-title { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1; margin: 0 0 12px; } /* Inside the Statistics column the title sits beside 13px filter controls, and at 34px it was the loudest thing on the page. 24px still reads as the column's label. */ .stats-board .section-title { font-size: 24px; line-height: 1.1; } /* Topbar */ .topbar { font-family: var(--font-display); position: sticky; top: 0; background: var(--white); z-index: 10; } /* The board only. The same hairline the listing rows are divided by, not the 2px ink rule: the bar is navigation, not a content boundary, and a faint line is enough to hold it off the table. Nowhere else has a grid starting directly under the bar, and a line across the top of a page that opens with a title was dividing it from nothing. */ .topbar-board { border-bottom: 1px solid var(--grey-line); } .topbar .container { display: flex; align-items: center; gap: 16px; /* nowrap, deliberately: .topbar-search has min-width:0 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 */ .topnav { flex: 0 0 auto; } /* natural width; the search is the one flexible element beside it */ /* The board's search box, when it is in the topbar. Above 800px this is its home; below it the same node sits in the filter bar (the rules at the bottom of this file) and this element is only the carrier, so the field's chrome is on the wrapper and the input inside is bare. */ .topbar-search { width: 560px; min-width: 0; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px; border: 1.5px solid var(--black); border-radius: 999px; background: var(--white); } /* The ring goes on the wrapper, not the input: the input has no edge of its own to draw one on. */ .topbar-search:focus-within { outline: 2px solid var(--green); outline-offset: -2px; } .topbar-search-icon { flex: 0 0 auto; color: var(--grey); } .topbar-search:focus-within .topbar-search-icon { color: var(--green-text); } .topbar-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--black); font: 400 13px var(--font-ui); } .topbar-search input:focus { outline: none; } .topbar-search input::placeholder { color: var(--grey); opacity: 0.75; } .topbar-search-clear { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--grey); line-height: 0; cursor: pointer; } .topbar-search-clear:hover { background: var(--hover-bg); color: var(--black); } .topbar-search-clear:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } .topbar-search-clear[hidden] { display: none; } .topnav { /* Keeps the nav on the right on the pages with nothing else in the bar (account, stats, privacy, 404). The wordmark used to hold the left edge; the bar is empty there now. */ margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 12px; } /* The theme control, a 64x32 switch: a knob that sits over the moon on the dark theme and slides 32px to sit over the sun on the light one. The state is read straight off :root[data-theme], so the CSS is the only thing that knows which side is which; the script sets aria-checked and nothing else. Built here rather than pulled in as a React component, because this site has no React, no build step and no Tailwind, and a 64px control is not a reason to grow all three. */ .theme-toggle { position: relative; flex: none; width: 64px; height: 32px; padding: 4px; box-sizing: border-box; border: 1px solid var(--grey-line); border-radius: 999px; background: var(--white); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .theme-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--row-hover); transform: translateX(32px); /* over the sun: light is the default theme */ transition: transform 0.3s ease, background-color 0.3s ease; } .theme-ico { position: absolute; top: 7px; transition: color 0.3s ease; } .theme-ico-moon { left: 7px; color: var(--grey); } .theme-ico-sun { left: 39px; color: var(--black); } :root[data-theme="dark"] .theme-toggle { border-color: var(--panel-line); } :root[data-theme="dark"] .theme-knob { transform: translateX(0); } :root[data-theme="dark"] .theme-ico-moon { color: var(--black); } :root[data-theme="dark"] .theme-ico-sun { color: var(--grey); } .theme-toggle:hover { border-color: var(--green); } @media (prefers-reduced-motion: reduce) { .theme-knob, .theme-toggle, .theme-ico { transition: none; } } /* Auth. Same dropdown shape as .ms-menu (position:relative parent, absolute panel, 2px ink border, paper background) -- one hand-built pattern, not a second one invented for this. */ /* display:flex here is only for the signed-in case's two triggers (+ Alert, email) sitting side by side -- the signed-out case's single trigger and the (always position:absolute, out of flow) panel are unaffected either way. */ .auth-area { position: relative; display: flex; align-items: center; gap: 12px; } /* Worn by a button when signed out and by the account link when signed in, so it has to strip a link's underline as well as a button's chrome. The transparent bottom border below is what hover and .active colour in, and text-decoration would sit under it as a second line. */ .auth-trigger { background: none; border: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: inherit; padding: 0; cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; } .auth-trigger:hover, .auth-trigger.active { color: var(--green-text); border-color: var(--green-text); } /* The signed-in trigger is a glyph rather than text, so it drops the underline the text version uses to show hover and lets the icon's own currentColor carry that instead. 24px box, not 16: the ring in the #account symbol is 18 units wide in a 24-unit viewBox, so at 16px it drew a 12px circle beside the GitHub mark's 18px, and read as miniscule. Reported live. At 24px the ring is 18px across, the same as the GitHub mark next to it. */ .auth-account { display: inline-flex; align-items: center; border-bottom: none; } .account-icon { width: 24px; height: 24px; display: block; } .auth-signed-in { display: flex; align-items: center; gap: 10px; font-size: 12px; text-transform: none; letter-spacing: normal; } .auth-signed-in .auth-email { color: var(--grey); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-signout { background: none; border: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: inherit; padding: 0; cursor: pointer; } .auth-signout:hover { color: var(--red); } .alerts-header { font-family: var(--font-display); font-size: 12px; font-weight: 700; margin-bottom: 10px; } .alerts-empty { font-size: 12px; color: var(--grey); margin: 0 0 12px; } .alert-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--grey-line); } .alert-row:last-child { border-bottom: none; } /* A saved listing reuses .alert-row, because it is the same object on this page: one line, a label on the left, one control on the right. The title is a link out to the posting rather than a button, since there is nothing to edit here, only somewhere to go. */ .saved-main { min-width: 0; } .saved-title { font-weight: 600; color: var(--black); text-decoration: none; } .saved-title:hover { color: var(--green-text); text-decoration: underline; } /* The title is the link out to the listing, so on a touch screen it needs a box rather than a line of text to hit. */ @media (pointer: coarse) { .saved-title { display: inline-block; padding: 5px 0; } } .saved-meta { color: var(--grey); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; } /* A button, not a span: clicking the summary is how you edit the alert, so it has to be reachable by keyboard and announce itself as a control. Styled back down to look like the line of text it replaced, with the underline on hover as the only affordance it needs at this size. */ .alert-summary { font-size: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; border: none; background: none; padding: 0; margin: 0; font-family: var(--font); color: inherit; text-align: left; cursor: pointer; } .alert-summary:hover { text-decoration: underline; } .alert-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .alert-row.paused .alert-summary { color: var(--grey); } /* Which row the form below is currently holding. */ .alert-row.editing .alert-summary { font-weight: 700; text-decoration: underline; } .alert-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .alert-toggle { background: none; border: 1px solid var(--black); border-radius: 4px; padding: 3px 8px; font-family: var(--font-ui); font-size: 13px; color: var(--black); cursor: pointer; } .alert-toggle:hover { background: var(--black); color: var(--white); } /* The whole row is three controls on one line, and on a touch screen all three were between 14px and 26px tall. Padding only, so the row grows once and the three stay on their line. */ @media (pointer: coarse) { .alert-summary { padding: 11px 0; } .alert-toggle { padding: 8px 12px; } } .alert-delete { background: none; border: none; color: var(--grey); font-size: 13px; line-height: 1; cursor: pointer; padding: 2px; } .alert-delete:hover { color: var(--red); } /* A 17px glyph is not a thumb target. The padding grows the tap box without moving the glyph, so the row keeps its height. */ @media (pointer: coarse) { .alert-delete { padding: 12px; margin: -12px 0; } } .create-alert-feedback { margin: 8px 0 0; font-size: 12px; color: var(--green-text); } .create-alert-feedback.error { color: var(--red); } /* New-alert form, inside the My Alerts panel (app.js's wireAlertCreateForm) -- its own filter pickers, independent of the board's .filters above. */ .alert-create { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grey-line); } .alert-create-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .alert-create-fields input[type="text"] { border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); padding: 9px 10px; height: 38px; width: 100%; font-family: var(--font-ui); } .alert-create-fields input[type="text"]:focus { outline: 2px solid var(--green); outline-offset: -2px; } .alert-create-fields label.toggle { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: var(--rule) solid var(--black); border-radius: 4px; font-size: 12px; cursor: pointer; } .alert-create-fields label.toggle input { accent-color: var(--green); } .alert-form-actions { display: flex; gap: 8px; } .alert-create .btn { width: 100%; } /* Cancel sits beside Save, and must not compete with it. */ .alert-create .btn-quiet { width: auto; flex: 0 0 auto; background: none; color: var(--black); border: var(--rule) solid var(--black); } .alert-create .btn-quiet:hover { background: var(--black); color: var(--white); } /* 4px radius -- same scoped exception as .job-detail/.ms-menu above. */ .auth-panel { position: absolute; top: calc(100% + 4px); right: 0; width: 260px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; background: var(--white); border: var(--rule) solid var(--black); border-radius: 4px; z-index: 40; padding: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); text-transform: none; letter-spacing: normal; font-family: var(--font); } .auth-panel.alerts-panel { width: 320px; } /* alert summaries + action buttons, plus the new-alert form, need more room than the sign-in form */ .auth-provider-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; margin-bottom: 8px; border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); font-family: var(--font-ui); font-size: 13px; /* Body, matching .filters input/.ms-toggle -- 12.5px sat in the gap between Label and Body for no reason */ font-weight: 700; text-align: left; cursor: pointer; } .auth-provider-btn svg { flex: 0 0 auto; } /* Google's mark keeps its own brand colors on hover (fill="currentColor" only on GitHub's, which does follow) */ .auth-provider-btn:hover { background: var(--black); color: var(--white); } .auth-divider { text-align: center; font-size: 12px; color: var(--grey); margin: 10px 0; } .auth-email-form { display: flex; gap: 6px; } .auth-email-form[hidden] { display: none; } /* same fix as .job-detail[hidden]: a class rule's display beats the UA [hidden] stylesheet without this */ .auth-email-form input { flex: 1 1 auto; min-width: 0; height: 38px; padding: 9px 10px; border: var(--rule) solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); font-family: var(--font-ui); font-size: 13px; } .auth-email-form input:focus { outline: 2px solid var(--green); outline-offset: -2px; } .auth-email-form .btn { flex: 0 0 auto; padding: 0 12px; font-size: 12px; } .auth-error { margin: 8px 0 0; font-size: 12px; color: var(--red); } /* A square block, not a circle, per the sharp-corners rule. Reported live: the flicker animation this used to have read as distracting, not lively -- a flat, static color communicates the same LIVE/OFFLINE state without asking for attention every 1.6s. */ /* Status glyphs, on AWS's own service-health vocabulary rather than a colour alone. Three states, because two wastes the middle: the write cycle is 5 minutes, so a snapshot 10 minutes old has missed two of them and is worth saying so about, while 20 minutes is the point the whole board stops claiming to be current. The shape is what carries the state. Colour on its own fails in greyscale, fails for a red-green colourblind reader, and fails at the 13px the topbar renders this. A tick, a bang and a cross do not. */ .status-icon { width: 13px; height: 13px; display: block; margin-right: 6px; color: var(--aws-operational); flex: 0 0 auto; } .status-icon.degraded { color: var(--aws-degraded); } .status-icon.outage { color: var(--aws-outage); } /* Updating: the data is older than it should be, but the merge reported in within the last few minutes, so an update is on its way rather than the pipeline being down. Ink, not a status colour, because it is not a warning. */ .status-icon.updating { color: var(--grey); transform-origin: 50% 50%; animation: status-spin 0.9s linear infinite; } @keyframes status-spin { to { transform: rotate(360deg); } } /* The Data Health tile shows the same state next to a 30px number, so the glyph is sized to that line rather than the topbar's. */ .metric-card .value .status-icon { width: 24px; height: 24px; display: inline-block; vertical-align: -3px; margin-right: 8px; } /* 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, /* Every other page puts a plain .section in this same grid and none of them were given the same treatment: the API reference, privacy, 404, account and the board itself all match. It went unnoticed while their content had nothing unbreakable in it. A full curl example is one 574px line, and the API reference's code blocks are already overflow-x:auto so they can scroll on their own; without this the grid item refuses to shrink and the document goes 634px wide on a 390px phone instead. Measured on all five before and after: doc width, grid columns and every panel width are identical, so this only ever releases a constraint nothing was relying on. */ .workspace > .section { min-width: 0; } /* Container, not just a grid item: #board's own width is what the filter bar actually has to fit in, and that's decoupled from the viewport once the two-column workspace grid is active (Market Stats' clamp(360px, 28vw, 460px) column eats a variable, viewport-independent chunk of the row). A viewport-width media query for the filter-wrap breakpoint below got this wrong: it never fired above 640px viewport width even though #board itself could be narrower than that, cutting the filter row off instead of wrapping it. See the @container rule in the responsive section for the actual fix. */ #board { container-type: inline-size; } /* No border at all, per request -- the muted row separators inside #board are the only divider system now; nothing artificially walls the board off from Market Stats beside it. Padding stays, for breathing room between the two columns' content. */ .workspace > #board { 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); max-height: calc(100dvh - 57px); overflow-y: auto; /* container-type: this panel's real width is clamp(360px, 28vw, 460px) (see .workspace), decoupled from the viewport the same way #board's own width is -- a plain viewport media query for the single-column fallback below would get the breakpoint wrong for the same reason the filter-wrap one originally did (see #board's own comment). */ container-type: inline-size; /* Right padding is half the left gutter, floored at 16px -- not zero. Reported live: at --gutter's own 20px floor, half of that (10px) is narrower than the actual scrollbar (12px, see *::-webkit-scrollbar above), so the scrollbar overlapped the last couple pixels of content -- and because overflow-y:auto alone forces overflow-x to auto too (the CSS spec computes a bare "visible" as "auto" once the other axis isn't visible), that overlap clipped text at the box's right edge instead of just sitting flush against it. */ padding: 12px max(calc(var(--gutter) / 2), 16px) 40px var(--gutter); } .stats-board .metrics-grid { grid-template-columns: repeat(2, 1fr); } .stats-board .panel-grid { grid-template-columns: 1fr; } /* Collapsing the Statistics column, per request. The toggle folds the column away to the right and the board takes the width, the grid column easing between its normal width and a 62px rail. Desktop only: below 960px the column already stacks under the board. The ease runs with reduced motion on too, because it was asked for and it moves once, when clicked; a collapse saved from an earlier visit is applied by the head script in index.html before first paint, so a return does not animate. */ .stats-toggle { display: none; } @media (min-width: 961px) { .workspace { transition: grid-template-columns 0.35s ease; } .stats-board > :not(.stats-toggle) { transition: opacity 0.2s ease, visibility 0.2s; } .stats-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: absolute; top: 12px; right: max(calc(var(--gutter) / 2), 16px); height: 28px; min-width: 28px; padding: 0 8px; border: 1.5px solid var(--black); border-radius: 4px; background: var(--white); color: var(--black); font-family: var(--font-ui); font-size: 13px; cursor: pointer; } .stats-toggle:hover { background: var(--black); color: var(--white); } .stats-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .stats-toggle-icon { font-size: 16px; line-height: 1; transition: transform 0.35s ease; } .stats-toggle-label { display: none; } html.stats-collapsed .workspace { grid-template-columns: 1fr 62px; } /* 24px, not the open column's 12px: the column sticks at 58px, so this puts the tab's top edge on the filter row's (82px), and the 62px rail leaves 12px between the tab and Reset. Reported live: the tab sat flush against the filter row, 12px higher and 55px taller than it. */ html.stats-collapsed .stats-board { overflow: hidden; padding: 24px 0 0; } html.stats-collapsed .stats-board > :not(.stats-toggle) { opacity: 0; visibility: hidden; } /* The same 38px as the filter controls beside it, so the two read as one row. */ html.stats-collapsed .stats-toggle { position: static; display: flex; /* block-level, or margin: auto cannot centre it in the rail */ width: 38px; height: 38px; margin: 0 auto; padding: 0; } html.stats-collapsed .stats-toggle-icon { transform: rotate(180deg); } } /* The topnav's API link is a control like the buttons beside it. */ .topnav a.link { font-family: var(--font-ui); } /* The three labelled blocks of the Statistics column (see index.html for why they exist). The heading is the Label step DESIGN.md already documents (700, 10-12px, uppercase, 0.06-0.1em), the same one .panel-title and .metric-card .label use: a heading here introduces a block of labels, so a new size would compete with the tiles instead of ranking above them. Full ink rather than --grey is what separates it from the tile labels underneath. */ .stats-section { margin-top: 18px; } .stats-section + .stats-section { margin-top: 26px; } .stats-section-title { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--black); margin: 0 0 4px; } /* The scope line: which filters the block above is counting, or a plain statement that none are. Same 11.5px as .metric-card .sub, so it adds no step to the ramp. */ .stats-scope { font-size: 11.5px; line-height: 1.35; color: var(--grey); margin: 0 0 10px; } /* A grid standing on its own rather than as one half of the metrics-grid/panel-grid pair. It keeps neither the -2px seam overlap nor the half-rounded corners those two share. Two class names deep so it outranks .panel-grid/.metrics-grid wherever they land in the file, rather than depending on sitting below them. */ .stats-board .stats-grid-solo { margin-top: 0; border-radius: 4px; } /* Five scoped tiles in a two-column grid leave a sixth cell empty, and an empty cell here is not whitespace. It is the hairline background showing through where a tile should be. The odd one out takes the whole row instead. */ .stats-board .metrics-grid .metric-card:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } /* Pipeline status is one tile and always will be. */ #pipeline-grid { grid-template-columns: 1fr; } /* Same root cause as the padding fix above, one layer up: two columns of metric tiles need real width each for their own label/value text, and this panel's width can get narrow enough (a smaller window, not just a phone) that two columns starts squeezing tile content into the same clipped-not-wrapped failure mode. Drop to one column before that happens rather than after. */ @container (max-width: 300px) { .stats-board .metrics-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); /* --grey-line, not --black -- reported live, the dividers read too bold/high-contrast (this is the same "quiet divider" token already used for table.jobs row separators, same reasoning: a full-strength ink line is a section-level rule, not what a dense grid of small tiles needs between every cell). */ background: var(--grey-line); border: var(--rule) solid var(--grey-line); /* Scoped to just the Market Stats box, per request -- same 4px radius as the filter bar, top corners only (the seam it shares with panel-grid below stays square). overflow:hidden so the corner .metric-card's square white background actually follows the curve instead of poking a square corner past it. */ border-radius: 4px 4px 0 0; overflow: hidden; } .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: 12px; color: var(--grey); } .metric-card .value { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 10px; color: var(--black); } /* Data Health is the one tile whose value is a word rather than a figure, and DEGRADED is eight characters where the numbers beside it are at most seven digits. At the shared 30px step it wanted 185px in a box that offers 136, so it rendered as DEGRADE, clipped mid-word by the panel's overflow. Reported live from a screenshot. So this tile gets its own step, sized to the longest of the three words at the narrowest the tile ever gets, which is 102px at 1440 wide, where the panel's grid turns three columns. Measured, not guessed: every other width gives more room, so a size that holds DEGRADED there holds it everywhere. One size for all three, not a per-word shrink: LIVE and DEGRADED belong on the same baseline at the same weight, or the tile changes shape every time the state does. nowrap says out loud that the glyph and its word are one line. */ #metric-api-status .value { font-size: 13px; white-space: nowrap; } /* The glyph comes down with the word it belongs to, and gives back the margin the word needs to stay beside it. */ #metric-api-status .value .status-icon { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; } .metric-card.highlight .value { color: var(--green-text); } /* Data Health only. The word and its glyph are one statement, so a warning bang beside a green LIVE is a contradiction rather than a colour choice. */ .metric-card.degraded .value { color: var(--aws-degraded); } .metric-card.outage .value { color: var(--aws-outage); } .metric-card.updating .value { color: var(--black); } .metric-card .sub { font-size: 11.5px; color: var(--grey); margin-top: 4px; } /* API Status card only, third line -- same size/color as .sub above, just a second one, so it introduces no new type-ramp step. tabular-nums keeps the countdown's digits from jittering in width as it ticks down every second. */ /* The pipeline activity line. Was a countdown to the next sync, which is why the class is named for one; it now carries whatever stage the pipeline reports it is in. Renaming the class would touch three files to say the same thing, so the comment carries it instead. tabular-nums stays because most of these read "sweeping 1,100 of 3,434 companies due now" and the digits should not jitter as the counts change. overflow-wrap because a stage detail is a sentence, not a timer, and the tile is narrow. */ .metric-card .sync-countdown { font-size: 11.5px; color: var(--grey); margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.35; } /* A tile waiting on its own scoped answer. A scoped /stats was measured at up to 2.9s, and for that long the previous filter's number sitting there reads as this filter's number, so the tile shows bones instead. Same 26px as .sk-tile's own value bone; the card's own min-height holds its shape either way, so nothing around it moves. */ .metric-card.pending .value .skeleton { width: 52%; height: 26px; margin-top: 2px; } /* 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: calc(var(--rule) * -1); /* overlaps metrics-grid's bottom border into one shared line, no visible gap */ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rule); background: var(--grey-line); /* same reasoning as metrics-grid above */ border: var(--rule) solid var(--grey-line); /* Bottom corners only -- see metrics-grid above, this is the other half of the same visually-seamless box. */ border-radius: 0 0 4px 4px; overflow: hidden; } .panel { background: var(--white); padding: 18px 20px 20px; } .panel-title { font-size: 12px; 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: 13px; 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); text-decoration: underline; } /* The company list renders all 10 and shows 7. The rest are already in the page, so View all expands in place with no request. */ .panel:not(.expanded) .bar-row-extra { display: none; } .bar-more { margin-top: 8px; padding: 4px 0; background: none; border: none; color: var(--green-text); font-family: var(--font-ui); font-size: 13px; font-weight: 700; cursor: pointer; } .bar-more:hover { text-decoration: underline; } .bar-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .trend-chart { width: 100%; height: 64px; display: block; overflow: visible; } /* Shared by every trend line: a single smooth stroke, no fill, no per-point markers. .closed overrides the color for the second line sharing a chart (new-listings dark, closed the signal green). */ .trend-line { fill: none; stroke: var(--black); stroke-width: 1.5; } .trend-line.closed { stroke: var(--green); } .trend-legend { display: flex; gap: 14px; font-size: 12px; color: var(--grey); margin-top: 6px; } .trend-legend .dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; } .trend-legend .dot.new { background: var(--black); } .trend-legend .dot.closed { background: var(--green); } .trend-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--grey); margin-top: 4px; } /* One big headline number, for a panel whose whole point is a single stat (the dormant-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 */ table.jobs tbody tr[data-id] { cursor: pointer; } /* Multi-select filter. A native