/* Mobile filter chips + bottom sheet for /companies/jobs (issue-3149). Everything lives inside @media (max-width: 768px); desktop stays untouched. Prefix .jbf- is reserved for this feature. z-index on this page: BS3 dropdown 1000 < navbar 1040 < BS3 modal 1049/1050 < select2 1051 < #jbf-backdrop 1060 / #jbf-sheet 1061 < mobile search overlay 2000 < side menu 10000. */ @media (max-width: 768px) { /* the chips replace the select row only while the JS is active; without JS the bar keeps [hidden] and the page behaves as before. .jbf-boot = pre-paint hide from the inline boot script */ html.jbf-on #collapse-div-jobbboard, html.jbf-boot #collapse-div-jobbboard { display: none; } /* the server-rendered neutral chip bar stands in during boot */ html.jbf-boot #jbf-bar { display: block; } /* the desktop active-filter pills in the results count duplicate the chips; desktop and no-JS keep them */ html.jbf-on #jobboard-count .label-info, html.jbf-boot #jobboard-count .label-info { display: none; } /* the form must contain its floated columns: the sticky bar needs full-height ancestors to stick within */ #form-jobboard { display: flow-root; } /* overflow:hidden on is what actually stops scrolling (the real scrolling element); position:fixed + top on body (set inline by lockScroll()) pins the content at the pre-lock offset */ html.jbf-noscroll { overflow: hidden; } /* No overflow:hidden here. The lock pins the body and shifts it up by the scroll offset, and on a page whose body box is shorter than its own content -- the company review pages float their columns, so the box stands 844px tall over 5000px of reviews -- clipping to that box wipes everything the reader was looking at, leaving a blank sheet backdrop. html keeps the overflow:hidden, which is what stops the scrolling. */ body.jbf-noscroll { position: fixed; left: 0; right: 0; width: 100%; } #jbf-bar { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid #e2e5e9; padding: 8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)); min-height: 52px; /* reserved up front: no layout shift on reveal */ box-sizing: border-box; } .jbf-bar-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .jbf-bar-track::-webkit-scrollbar { display: none; } .jbf-chip-wrap { display: inline-flex; align-items: stretch; flex-shrink: 0; } /* welds an active chip and its clear button into one pill; class toggled from JS because :has() isn't safe on the older iOS this site serves */ .jbf-chip-wrap--active .jbf-chip { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 10px; } .jbf-chip, .jbf-chip-toggle, .jbf-chip-clear-all { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid #ccd3da; border-radius: 20px !important; /* main.css: * { border-radius: 5px !important } */ background: #fff; color: #4a5568; font-family: inherit; font-size: 13px; font-weight: 400; /* Ubuntu here only ships 200/300/400, never fake-bold */ white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; box-sizing: border-box; } .jbf-chip--active { background: #2563eb; /* brand blue; white text passes AA */ border-color: #2563eb; color: #fff; } .jbf-chip-x { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; min-height: 44px; border: 1px solid #2563eb; border-left: 1px solid rgba(255, 255, 255, .45); border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 20px !important; border-bottom-right-radius: 20px !important; background: #2563eb; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .jbf-chip-x[hidden], /* the free-text chip only exists while a search put it there, and the display above outranks [hidden] on its own */ .jbf-chip-wrap[hidden] { display: none; } .jbf-chip-clear-all { color: #b91c1c; border-color: #f3c2c2; background: #fff5f5; /* sticky, not just first: pins the escape hatch to the visible left edge no matter how far the track has scrolled */ position: sticky; left: 0; z-index: 1; } .jbf-chip-clear-all[hidden] { display: none; } .jbf-chip:focus-visible, .jbf-chip-toggle:focus-visible, .jbf-chip-clear-all:focus-visible, .jbf-chip-x:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .jbf-chip--active:focus-visible { outline-color: #0a3fb0; } /* list dims while an ajax request is in flight */ #jobboard-ads.jbf-loading { opacity: .5; pointer-events: none; transition: opacity .15s ease; } /* ---------- backdrop + sheet ---------- */ #jbf-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, .5); z-index: 1060; opacity: 0; transition: opacity .16s ease; } #jbf-backdrop.jbf-in { opacity: 1; } #jbf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1061; /* % not vh: mobile vh ignores the collapsing url bar and the keyboard, poking a maxed-out sheet off the top of the screen */ max-height: 85vh; max-height: calc(100% - 56px); background: #fff; border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, .2); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .22s ease; } #jbf-sheet[hidden] { display: none; } #jbf-sheet.jbf-in { transform: translateY(0); } .jbf-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 10px 18px; border-bottom: 1px solid #eceff2; flex-shrink: 0; } .jbf-sheet-title { margin: 0; font-size: 16px; font-weight: 400; color: #1a202c; } /* the title only receives the programmatic focus() on open (dialog pattern) and is never Tab-reachable, so the browser's default ring would just read as a glitch after a tap */ .jbf-sheet-title:focus, .jbf-sheet-title:focus-visible { outline: none; } .jbf-sheet-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: none; background: transparent; color: #4a5568; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 50% !important; } .jbf-sheet-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .jbf-sheet-search-wrap { padding: 10px 18px; flex-shrink: 0; } .jbf-sheet-search { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid #ccd3da; border-radius: 8px !important; font-size: 14px; font-weight: 400; } .jbf-sheet-search:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; } #jbf-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; padding: 4px 0 8px; } .jbf-option-group { padding: 10px 18px 4px; font-size: 12px; font-weight: 400; color: #5b6675; /* passes AA on white */ text-transform: uppercase; letter-spacing: .02em; } .jbf-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .jbf-option:active { background: #f5f7fa; } .jbf-option input { width: 18px; height: 18px; flex-shrink: 0; margin: 0; } /* sized by CSS, never by width/height attributes: main.css's global border-box shrinks attribute-sized images */ .jbf-option-logo { width: 28px; height: 22px; object-fit: contain; flex-shrink: 0; border-radius: 4px !important; background: #fff; } .jbf-option input:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .jbf-option-text { flex: 1 1 auto; font-size: 14px; font-weight: 400; color: #1a202c; } .jbf-option-count { flex-shrink: 0; font-size: 12px; font-weight: 400; color: #5b6675; /* passes AA on white */ } .jbf-sheet-footer { display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #eceff2; flex-shrink: 0; } .jbf-sheet-clear { flex: 0 0 auto; height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid #ccd3da; border-radius: 8px !important; background: #fff; color: #4a5568; font-size: 14px; font-weight: 400; cursor: pointer; } .jbf-sheet-apply { flex: 1 1 auto; height: 44px; border: none; border-radius: 8px !important; background: #2563eb; color: #fff; font-size: 14px; font-weight: 400; cursor: pointer; } .jbf-sheet-clear:focus-visible, .jbf-sheet-apply:focus-visible { outline: 2px solid #0a3fb0; outline-offset: 2px; } /* gap between the stacked filter selects, as on the company page */ form.companies_filter .form_field { margin-bottom: 8px; } @media (prefers-reduced-motion: reduce) { #jbf-backdrop, #jbf-sheet { transition: none !important; animation: none !important; } } } /* ============================================================================ Desktop filter bar + popover (issue-3188). Stands in for the select row above 768px. The row itself keeps rendering (hidden) because it is still the form payload; only its display changes. Everything below is scoped to .jbfd- and this media query, so the mobile block above and the rest of the page are untouched. z-index on this page: BS3 dropdown 1000 < navbar 1040 < BS3 modal 1049/1050 < select2 1051 < mobile sheet 1061. The popover sits at 1052, above select2 (which is still initialised on the hidden selects) and below the sheet. ============================================================================ */ /* the select row is replaced whichever surface wins, so this one rule covers the whole of desktop; it only ever applies while the JS is running, and without it the page behaves exactly as it did before. .jbfd-boot / .jbfs-boot = pre-paint hide from the inline boot scripts */ @media (min-width: 769px) { html.jbfd-on #collapse-div-jobbboard, html.jbfd-boot #collapse-div-jobbboard { display: none; } html.jbfd-on .side-menu, html.jbfs-on .side-menu { z-index: 3; height: 63px; overflow: hidden; } } /* The button bar serves 769-1199 only: below 1200 there is no company detail panel, the columns stack, and the page is too narrow to spend 250px on a rail. From 1200 up the sidebar takes over (block at the end of this file). */ @media (min-width: 769px) and (max-width: 1199px) { html.jbfd-boot #jbfd-bar { display: flex; } #jbfd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; } #jbfd-bar button { font-size: 13px; line-height: 1.2; border: 1px solid #d7dce1; background: #fff; color: #33404d; border-radius: 18px !important; /* main.css:17 rounds everything to 5px */ transition: background-color .12s ease, border-color .12s ease; } #jbfd-bar button:hover { border-color: #b9c1ca; background: #f7f9fb; } #jbfd-bar button:focus-visible { outline: 2px solid #2f6fb0; outline-offset: 1px; } .jbfd-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; } .jbfd-wrap { display: inline-flex; align-items: stretch; } .jbfd-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; max-width: 260px; } .jbfd-btn-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jbfd-caret { border-top: 4px solid #97a2ad; border-left: 4px solid transparent; border-right: 4px solid transparent; flex: 0 0 auto; } /* active: the button says what is filtering, the x sits welded to it as a single pill -- same treatment the mobile chips get */ #jbfd-bar .jbfd-btn.jbf-chip--active, #jbfd-bar .jbfd-toggle.jbf-chip--active { background: #eaf2fa; border-color: #b6d0e8; color: #1c4f7c; font-weight: 600; } #jbfd-bar .jbfd-btn.jbf-chip--active .jbfd-caret { border-top-color: #5b87ad; } /* the #jbfd-bar prefix is not decoration: `#jbfd-bar button` above carries an id and outweighs any plain class rule, so the welding needs it too */ #jbfd-bar .jbfd-wrap.jbf-chip-wrap--active .jbfd-btn { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 0; padding-right: 8px; } #jbfd-bar .jbfd-x { padding: 0 10px 0 6px; font-size: 15px; line-height: 1; color: #5b87ad; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } #jbfd-bar .jbfd-wrap.jbf-chip-wrap--active .jbfd-x { background: #eaf2fa; border-color: #b6d0e8; border-left: 0; } #jbfd-bar .jbfd-wrap.jbf-chip-wrap--active .jbfd-x:hover { background: #dbe9f6; border-color: #b6d0e8; } #jbfd-bar .jbfd-clear-all { border-color: transparent; background: none; color: #2f6fb0; padding: 7px 10px; text-decoration: underline; } #jbfd-bar .jbfd-clear-all:hover { background: #f2f5f8; border-color: transparent; } /* ---------- the popover ---------- */ .jbfd-pop { position: absolute; z-index: 1052; width: 288px; max-height: 360px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid #dfe3e8; border-radius: 10px !important; box-shadow: 0 10px 28px rgba(16, 24, 40, .16); } .jbfd-pop-title { margin: 4px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a838f; } .jbfd-pop-search-wrap { padding: 0 4px 6px; } .jbfd-pop-search { width: 100%; height: 32px; padding: 0 10px; font-size: 13px; border: 1px solid #d7dce1; border-radius: 6px !important; } /* the option rows are built by the same buildOptions() that fills the mobile sheet, so the classes come from there */ .jbfd-pop .jbf-option { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 8px; font-size: 13px; font-weight: 400; border-radius: 6px !important; cursor: pointer; } .jbfd-pop .jbf-option:hover { background: #f2f6fa; } .jbfd-pop .jbf-option input { margin: 0; flex: 0 0 auto; } .jbfd-pop .jbf-option-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the number of jobs behind each option: the one thing the old dropdowns only showed once they were open, and the reason to keep it here */ .jbfd-pop .jbf-option-count { flex: 0 0 auto; font-size: 11px; color: #8a939d; } .jbfd-pop .jbf-option-logo { width: 20px; height: 15px; object-fit: contain; flex: 0 0 auto; } .jbfd-pop .jbf-option-group { margin: 8px 8px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9aa3ad; } } /* ============================================================================ DESKTOP SIDEBAR >= 1200px (issue-3188) The rail is paid for out of the wrapper's own margins: the page is col-lg-10 col-lg-offset-1 inside a container-fluid, so it was giving away 200px at 1280 and 480px at 1920. Dropping the offset covers the 250px rail almost exactly -- at 1280 the list loses 39px and the detail panel 27px, and from 1600 up both end up wider than they are today. Floats, not flex: the header block above keeps the full width of the row, and the list and the detail panel stay the Bootstrap columns they already were, only narrower by the rail's share of their percentages (146 + 104). ============================================================================ */ @media (min-width: 1200px) { /* .jbfs-boot reserves the rail's width before the JS runs, so revealing it does not shove the list sideways */ /* Full width, so the rail is paid for out of the old side margins. Beats the page's own 80/75/70% rules on specificity, so the sizing here is the single source of truth; the cap lives in the >=1650 block. */ html.jbfs-on .jobboard-wrapper, html.jbfs-boot .jobboard-wrapper { width: 100%; margin: 0 auto; float: none; } html.jbfs-on #jbfs-rail, html.jbfs-boot #jbfs-rail { display: block; float: left; width: 264px; /* the row is pulled 15px left by its negative margins; the columns pay it back with padding, and this float pays it back with margin. The 10px on top is voffset2, which both neighbouring columns carry: without it the rail sits a notch above the two panels beside it */ margin-left: 15px; margin-top: 10px; padding: 14px; background: #fff; border: 1px solid #e6eaee; border-radius: 10px !important; /* main.css:17 rounds everything to 5px */ box-shadow: 0 1px 1px rgba(16, 24, 40, .04); /* sticky works now that the list scrolls with the page and the form is flow-root (main.css), containing its floats so the rail has the full list height to travel within. The cap and inner scroll only engage when expanded groups outgrow the screen; the default two open groups fit */ position: sticky; top: 70px; /* 60 like the right column + its panel's 10px voffset2 */ max-height: calc(100vh - 80px); overflow-y: auto; } /* 264 + 15 of gutter, split between the two columns in the proportion they already had (58.33 / 41.67) so neither is squeezed harder than the other */ html.jbfs-on .job-board-list, html.jbfs-boot .job-board-list { width: calc(58.3333% - 163px); } html.jbfs-on #form-jobboard > .col-lg-5.visible-lg, html.jbfs-boot #form-jobboard > .col-lg-5.visible-lg { width: calc(41.6667% - 116px); } /* the button bar is the 769-1199 surface; its slot must not reserve a row */ html.jbfs-on .jbfd-slot, html.jbfs-boot .jbfd-slot { display: none; } /* ---------- rail chrome ---------- */ .jbfs-rail { font-size: 13px; color: #33404d; } .jbfs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; } .jbfs-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a838f; } .jbfs-clear-all { padding: 0; border: 0; background: none; font-size: 12px; color: #2f6fb0; } .jbfs-clear-all:hover { text-decoration: underline; } .jbfs-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 4px; padding: 7px 10px; font-size: 13px; line-height: 1.2; text-align: left; border: 1px solid #d7dce1; background: #fff; color: #33404d; border-radius: 8px !important; /* main.css:17 rounds everything to 5px */ transition: background-color .12s ease, border-color .12s ease; } .jbfs-toggle:hover { border-color: #b9c1ca; background: #f7f9fb; } .jbfs-toggle.jbf-chip--active { border-color: #2f6fb0; background: #eaf2fb; color: #1f4f80; font-weight: 600; } .jbfs-toggle-label { flex: 1 1 auto; text-align: left; } /* the switch is what says on or off; the button's own colour change alone read as "pressed", which is not the same thing */ .jbfs-switch { flex: 0 0 auto; position: relative; display: block; width: 30px; height: 17px; border-radius: 9px !important; /* main.css:17 rounds everything to 5px */ background: #ccd3da; transition: background-color .15s ease; } .jbfs-switch-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50% !important; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .3); transition: transform .15s ease; } .jbfs-toggle.jbf-chip--active .jbfs-switch { background: #2f6fb0; } .jbfs-toggle.jbf-chip--active .jbfs-switch-knob { transform: translateX(13px); } @media (prefers-reduced-motion: reduce) { .jbfs-switch, .jbfs-switch-knob { transition: none; } } /* ---------- one filter group ---------- */ .jbfs-group { border-top: 1px solid #edf0f3; padding-bottom: 12px; } .jbfs-group--closed { padding-bottom: 0; } /* nothing left to choose under the current filters: go quiet rather than leave an open panel with nothing in it */ .jbfs-group--empty { padding-bottom: 0; } .jbfs-group--empty .jbfs-group-btn { color: #aab2bb; } .jbfs-group--empty .jbfs-caret { border-top-color: #ccd3da; } .jbfs-group:first-of-type { border-top: 0; } .jbfs-group-h { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; } /* the one thing in the group that should read as a heading: bigger and darker than the options under it, not just one weight step */ .jbfs-group-btn { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; padding: 15px 0 9px; border: 0; background: none; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-align: left; color: #1f2933; } /* the label yields first: a long value is the information, the label is already known from where it sits */ .jbfs-group-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jbfs-caret { flex: 0 0 auto; /* the value span is what pushed it right, and a slider group hides that span: without this the caret jumps to the title on those two */ margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #98a1ab; transition: transform .12s ease; } .jbfs-group-btn[aria-expanded="false"] .jbfs-caret { transform: rotate(-90deg); } /* nothing said the whole heading was a control: the caret was the only hint, and it is 8px wide */ .jbfs-group-btn:hover { color: #2f6fb0; } .jbfs-group-btn:hover .jbfs-caret { border-top-color: #2f6fb0; } .jbfs-group--empty .jbfs-group-btn:hover { color: #aab2bb; cursor: default; } /* An open slider prints the chosen step right under the heading, so the heading repeating it two lines above is noise. It keeps it while shut, which is the only time the slider is not on screen to say it. */ .jbfs-group[data-jbf-kind="scale"]:not(.jbfs-group--closed) .jbfs-group-value { display: none; } /* the chosen value, so a collapsed group still says what it is filtering on */ .jbfs-group-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 12px; font-weight: 400; color: #1f4f80; } /* sat 4px from the caret, both small grey glyphs, one collapsing and one clearing: it needs its own space and its own target */ .jbfs-x { flex: 0 0 auto; width: 22px; height: 22px; margin-left: 6px; padding: 0; border: 0; border-radius: 50% !important; background: none; font-size: 15px; line-height: 1; color: #6b7681; transition: background-color .12s ease, color .12s ease; } .jbfs-x:hover { background: #fdecea; color: #c0392b; } .jbfs-group.jbf-chip-wrap--active .jbfs-group-btn { color: #1f4f80; } .jbfs-panel { padding-bottom: 0; } .jbfs-search-wrap { padding: 2px 6px 8px; } .jbfs-search-wrap[hidden] { display: none; } .jbfs-search { width: 100%; height: 30px; padding: 0 9px; font-size: 12px; color: #33404d; background: #f7f9fb; border: 1px solid #e3e8ed; border-radius: 6px !important; } .jbfs-search:focus { background: #fff; border-color: #b9c1ca; } /* No max-height on purpose: it used to be a 232px scroller, which put a scrollbar inside the rail's own scrollbar. The cap plus "show more" does the same job without nesting two scrolls. */ .jbfs-body { padding: 0 6px; } /* the option rows come from the same buildOptions() that fills the mobile sheet and the popover, so the classes come from there */ .jbfs-body .jbf-option { display: flex; align-items: center; gap: 9px; margin: 0 -6px; padding: 7px 6px; font-size: 13px; font-weight: 400; line-height: 1.25; color: #4a5568; border-radius: 6px !important; cursor: pointer; } .jbfs-body .jbf-option:hover { background: #f4f7fa; color: #1f2933; } /* the chosen row should be findable at a glance in a list of six */ .jbfs-body .jbf-option--on { color: #1f4f80; font-weight: 600; } /* Rows past the cap, and headings left with nothing under them. Doubled up on .jbfs-body on purpose: .jbfs-body .jbf-option-group sets display:flex at the same specificity and sits further down the file, so a single class here loses the tie and the orphan headings stay on. */ .jbfs-body.jbfs-body--capped .jbfs-over { display: none; } /* the default control is as wide as the text is tall and pulls the eye before the label does */ .jbfs-body .jbf-option input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 13px; height: 13px; margin: 0; border: 1px solid #c3cbd4; border-radius: 50% !important; background: #fff; } .jbfs-body .jbf-option input:checked { border-color: #2f6fb0; border-width: 4px; } /* a filter that takes a set is ticked, not dialled: square box, and the check is drawn in the box rather than loaded from anywhere */ .jbfs-body .jbf-option input[type="checkbox"] { border-radius: 3px !important; } .jbfs-body .jbf-option input[type="checkbox"]:checked { border-width: 1px; background: #2f6fb0 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center/9px 9px no-repeat; } .jbfs-body .jbf-option input:focus-visible { outline: 2px solid #2f6fb0; outline-offset: 1px; } .jbfs-body .jbf-option-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the number of jobs behind each option: the one thing the old dropdowns only showed once they were open */ .jbfs-body .jbf-option-count { flex: 0 0 auto; min-width: 26px; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; color: #98a1ab; } .jbfs-body .jbf-option-logo { width: 20px; height: 15px; object-fit: contain; flex: 0 0 auto; } /* a divider between families of options, not a second title: it used to carry its count in front and outweigh the very rows it introduces */ .jbfs-body .jbf-option-group { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 3px; font-size: 11px; font-weight: 400; letter-spacing: .02em; color: #98a1ab; } .jbfs-body .jbf-option-group:first-child { margin-top: 2px; } .jbfs-body .jbf-option-group-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jbfs-more { display: block; margin-top: 6px; padding: 4px 0; border: 0; background: none; font-size: 12px; color: #2f6fb0; } .jbfs-more:hover { text-decoration: underline; } .jbfs-more[hidden] { display: none; } /* ---------- slider groups (seniority, salary) ---------- */ .jbfs-scale { padding: 2px 2px 0; } .jbfs-scale-out { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .jbfs-scale-value { font-size: 14px; color: #1f4f80; } /* A scale sitting on "Any" has no answer to read out, and the end of the track already says "Any" under the thumb -- printing the same word twice, 20px apart, reads as a glitch. Hidden rather than emptied so the row keeps its height and nothing below it jumps on the first drag; the slider's own aria-valuetext still announces the stop. */ .jbfs-group--idle .jbfs-scale-out { visibility: hidden; } .jbfs-scale-count { font-size: 11px; color: #8a939d; } /* the filled part of the track is a background-image sized to the value: ::-webkit-slider-runnable-track and ::-moz-range-track cannot share one declaration, this can */ .jbfs-scale-input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; margin: 0; padding: 0; border: 0; border-radius: 3px !important; /* main.css:17 rounds everything to 5px */ background-color: #dfe3e8; background-image: linear-gradient(#2f6fb0, #2f6fb0); background-size: var(--jbfs-pct, 0%) 100%; background-repeat: no-repeat; cursor: pointer; } .jbfs-scale-input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border: 2px solid #2f6fb0; border-radius: 50% !important; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); cursor: pointer; } .jbfs-scale-input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #2f6fb0; border-radius: 50% !important; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); cursor: pointer; } .jbfs-scale-input:hover::-webkit-slider-thumb, .jbfs-scale-input:focus-visible::-webkit-slider-thumb { background: #eaf2fb; } /* the track is stepped, not continuous, and a bare rail does not say so */ .jbfs-scale-ticks { position: relative; height: 4px; margin-top: 3px; background-image: repeating-linear-gradient(to right, #d7dce1 0, #d7dce1 1px, transparent 1px, transparent var(--jbfs-step, 100%)); } .jbfs-scale-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 11px; color: #9aa3ad; } .jbfs-rail button:focus-visible, .jbfs-rail input:focus-visible { outline: 2px solid #2f6fb0; outline-offset: 1px; } } /* ============================================================================ >= 1650px: the ad list has all the width it can use (issue-3188) Two complaints shaped this. Letting the row keep its percentages stretched the ad cards to ~1000px on a 27" and they became mostly white space; capping the whole block at 1560 then left a 24" looking shrunken, with the width given back as margin instead of as content. So the split stops being proportional at the point where the list reaches 780px -- about the widest an ad card reads well -- and everything past that goes to the company detail panel, which is dense text and actually uses it. The 1650 breakpoint is where the percentage width happens to equal 780, so nothing jumps as it crosses. ============================================================================ */ @media (min-width: 1650px) { html.jbfs-on .jobboard-wrapper, html.jbfs-boot .jobboard-wrapper { max-width: 1740px; } html.jbfs-on .job-board-list, html.jbfs-boot .job-board-list { width: 780px; } html.jbfs-on #form-jobboard > .col-lg-5.visible-lg, html.jbfs-boot #form-jobboard > .col-lg-5.visible-lg { width: calc(100% - 279px - 780px); /* 279 = rail 264 + its gutter */ } } /* ============================================================================ Popular searches (issue-3188) A crawler cannot work a radio button, so the filtered urls had nothing pointing at them. These links are that path -- and they read as a directory for anyone who would rather start from "Lisboa" than open a filter. Outside the media queries above on purpose: they are worth having on a phone too, where the whole board is one column anyway. ============================================================================ */ .jbseo { margin: 26px 0 8px; padding: 20px 15px 6px; border-top: 1px solid #e6eaee; } .jbseo-inner { display: flex; flex-wrap: wrap; gap: 26px 34px; } .jbseo-group { flex: 1 1 220px; min-width: 0; } .jbseo-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7a838f; } .jbseo-list { margin: 0; padding: 0; list-style: none; } .jbseo-list li { margin-bottom: 6px; } .jbseo-list a { font-size: 13px; color: #33404d; } .jbseo-list a:hover { color: #2f6fb0; } .jbseo-count { font-size: 11px; color: #98a1ab; } @media (max-width: 768px) { .jbseo { margin-top: 18px; padding: 16px 12px 4px; } .jbseo-inner { gap: 18px 20px; } /* On a phone the same forty-four links ran to 1373px of stacked rows after the job list, and every one of them was under 24px tall -- a list built for a mouse. As chips they wrap instead of stacking, which cuts the block to a third of the height, and each one is big enough to hit. */ .jbseo-list { display: flex; flex-wrap: wrap; gap: 8px; } .jbseo-list li { margin-bottom: 0; } .jbseo-list a { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 13px; border: 1px solid #dfe3e8; border-radius: 19px !important; /* main.css:17 rounds everything to 5px */ background: #fff; } } /* the one line of prose a filtered board has of its own (issue-3188) */ .jbsummary { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #5a6572; } .jbsummary-companies { color: #7a838f; } /* ============================================================================ Board header (issue-3188) Three things, three sizes, in the order they matter: where you are, what this page is, what is in it. The sizes used to come from the tags -- which is how the h1 ended up as the small grey line and the biggest words on the page as an h2 -- so they are set here instead and the tags are free to be correct. Scoped to the board; these classes are used on other pages. ============================================================================ */ /* Weight and size both used to come from the tag -- which is how the h1 ended up smaller and lighter than the h2 -- so swapping the tags took the headline from 700 to 500 with them. Set here instead, and the tags are free to be correct: the headline weighs exactly what it always did. */ /* no font-weight here: main.css has `.panel-salary-explorer h2 { font-weight: 700 !important }`, which is where the headline's boldness came from while it was the h2, and which now owns the eyebrow's. Bold at fourteen pixels reads as a label, so it stays -- outbidding an !important to change it would not be worth the next person's confusion. */ .jobboard-wrapper .text-salary-h1 { padding-top: 0; margin: 0; font-size: 14px; line-height: 1.4; } /* the size stays where .text-4xl put it -- that rule is !important and worth less than the argument */ /* equal margins: the headline sits between the eyebrow and the summary rather than clinging to the line above it */ .jobboard-wrapper h1.text-4xl { margin: 6px 0; font-weight: 700; line-height: 1.25; } /* no margin of its own: the headline above it already spaces it, and the card closes on the panel's own padding, the same as it opens */ .jobboard-wrapper .jbsummary { margin: 0; max-width: 900px; } @media (max-width: 768px) { /* twenty-seven pixels of bold headline runs to three lines on a phone and takes the screen before a single job does. The !important is only there to answer the one on .text-4xl. */ .jobboard-wrapper h1.text-4xl { font-size: 21px !important; } } /* ============================================================================ Filter families in the rail: the employer's filters boxed and first, the job's labelled but bare (two frames would just draw one around the rail). A signpost, not a banner. ============================================================================ */ @media (min-width: 1200px) { .jbfs-family { margin-bottom: 12px; padding: 8px 10px 2px; border: 1px solid #e6eaee; border-radius: 10px !important; /* main.css:17 rounds everything to 5px */ background: #fbfcfd; } .jbfs-family--bare { margin-bottom: 0; padding: 0; border: 0; background: none; } .jbfs-family-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-bottom: 4px; } /* the same eyebrow as the rail's own title, one step quieter so the rail still has a single loudest line */ .jbfs-family-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #87919c; } .jbfs-family-note { font-size: 11px; color: #2f6fb0; } /* the family's own padding is the air the first heading used to make for itself, and the toggle is a row of the family now, not a lone button */ .jbfs-family .jbfs-group:first-of-type .jbfs-group-btn { padding-top: 6px; } .jbfs-family .jbfs-toggle { margin-bottom: 2px; } /* inside a family the last row's padding lands on top of the box's own */ .jbfs-family .jbfs-group:last-of-type { padding-bottom: 6px; } .jbfs-family--bare .jbfs-group:last-of-type { padding-bottom: 12px; } } /* Hide-on-scroll header: jbh-on = script running, jbh-off = bars hidden. Desktop only; under 769px the bars are not fixed. */ @media (min-width: 769px) { html.jbh-on .side-menu, html.jbh-on .navbar-user { transition: transform .18s ease-out; } /* -100%, not -63px: #messages-wrap sits inside this nav */ html.jbh-off .side-menu, html.jbh-off .navbar-user { transform: translateY(-100%); } } @media (min-width: 769px) and (prefers-reduced-motion: reduce) { html.jbh-on .side-menu, html.jbh-on .navbar-user { transition: none; } } /* the sticky columns follow the bar, keeping their 10px of air */ @media (min-width: 1200px) { html.jbh-on #jbfs-rail, html.jbh-on #form-jobboard > .col-lg-5.visible-lg, html.jbh-on .jobboard-company-details { transition: top .18s ease-out, max-height .18s ease-out; } html.jbh-off #jbfs-rail { top: 10px; max-height: calc(100vh - 20px); } html.jbh-off #form-jobboard > .col-lg-5.visible-lg { top: 0; } html.jbh-off .jobboard-company-details { max-height: calc(100vh - 20px); } } @media (min-width: 1200px) and (prefers-reduced-motion: reduce) { html.jbh-on #jbfs-rail, html.jbh-on #form-jobboard > .col-lg-5.visible-lg, html.jbh-on .jobboard-company-details { transition: none; } }