/* * ⚠️ **Every media query in the theme lives in this file**, so §AB's three tiers can be read * and checked in one place instead of being hunted through a thousand lines of layout. * * jobs.css describes the desktop shape. This file reshapes it: * * ≥ 1200px map 66% / list 34% (jobs.css's own values — nothing here) * 768–1199 map 60% / list 40%, tighter spacing, smaller card media * < 768 one column, a List/Map switch, a bottom tab bar, no side-by-side * * The breakpoints are §AB's, not round numbers chosen for neatness. */ /* =================================================================================== * Tablet — §AB's middle tier * =================================================================================== */ @media (max-width: 1199px) { :root { /* §AB: 58–62% map, 38–42% list. */ --sjb-map-share: 60fr; --sjb-list-share: 40fr; --sjb-rail-h: 74px; } .sjb-brand__tagline { display: none; } .sjb-nav__link { padding: 8px 9px; font-size: 13px; } .sjb-card__media { min-height: 100px; } .sjb-card__img, .sjb-card__fallback { width: 100px; } .sjb-single__grid { gap: 20px; } .sjb-related__cards { grid-template-columns: minmax(0, 1fr); } } /* Below the width where six menu items and four tools can share one bar. */ @media (max-width: 1023px) { .sjb-burger { display: inline-flex; order: 3; } .sjb-nav { position: absolute; left: 0; right: 0; top: var(--sjb-header-h); z-index: 55; display: none; padding: 10px 16px 14px; background: var(--sjb-header-bg); border-bottom: 1px solid var(--sjb-border); box-shadow: var(--sjb-shadow-lg); } .sjb-nav.is-open { display: block; } .sjb-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .sjb-nav__link { padding: 11px 12px; font-size: 15px; } .sjb-header__cta span { display: none; } .sjb-header__cta { width: 38px; padding: 0; } } /* =================================================================================== * Phone — §AA and §AB's bottom tier * =================================================================================== */ @media (max-width: 767px) { :root { --sjb-header-h: 54px; --sjb-rail-h: 70px; --sjb-tabbar-h: 58px; } body { font-size: 15px; } /* * --- The header has to fit 390px. --- * * Brand, burger, language switcher, theme toggle, saved-count and the green button come * to about 420px together, which pushed the burger past the right edge and gave the whole * document a horizontal scrollbar. Saved-count and the burger are the two to drop: the * bottom tab bar already carries "Saved" (with its own live counter) and "Menu" (which opens * this same nav), so nothing is lost — only a duplicate control that fought the tab bar for * the same job. */ .sjb-header__inner { gap: 10px; padding: 0 12px; } .sjb-header__tools { gap: 5px; } .sjb-iconbtn--count { display: none; } .sjb-burger { display: none; } .sjb-brand__name { font-size: 17px; } .sjb-iconbtn, .sjb-header__cta { width: 34px; height: 34px; } .sjb-langs__toggle { height: 34px; padding: 0 7px; } /* --- The app shell becomes one column with a switch (§AA, §AB). --- */ .sjb-app { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; height: calc(100vh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h)); height: calc(100dvh - var(--sjb-header-h) - var(--sjb-rail-h) - var(--sjb-tabbar-h) - var(--sjb-adminbar-h)); } .sjb-app__map, .sjb-app__list { border: 0; border-radius: 0; } /* * The switch is driven by an attribute on that the server renders as "list" and an * inline head script rewrites from sessionStorage before the first paint — so a reader * who left in map mode does not see the list flash first, and a reader with no JavaScript * gets the list, which §AA names as the default. */ :root[data-sjb-view="list"] .sjb-app__map { display: none; } :root[data-sjb-view="map"] .sjb-app__list { display: none; } :root[data-sjb-view="map"] .sjb-app__map { display: flex; } :root[data-sjb-view="list"] .sjb-app__list { display: flex; } /* In map mode the map takes essentially the whole screen (§AA). */ :root[data-sjb-view="map"] .sjb-app { padding: 0; } /* Stack the save action above the live map status and keep attribution readable. */ .sjb-map__corner--bl { bottom: 62px; } .sjb-map__corner--br { left: 12px; right: 12px; bottom: 22px; } .sjb-map-status { width: fit-content; max-width: 100%; margin-left: auto; } /* Keep all three filter controls on one compact row; the sliders icon retains an * accessible text label while yielding its visible text on a phone. */ .sjb-filters__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; } .sjb-filters__more { width: 44px; min-height: 44px; padding: 0; gap: 0; } .sjb-filters__more-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sjb-filters__more .sjb-filters__badge { position: absolute; top: -5px; right: -5px; } .sjb-more__grid { grid-template-columns: minmax(0, 1fr); } /* --- Cards --- */ .sjb-card__media { min-height: 96px; } .sjb-card__img, .sjb-card__fallback { width: 96px; } .sjb-card__body { padding-right: 26px; } /* The locate button is a hover affordance; on a touch screen it is always there. */ .sjb-card__locate { opacity: 1; } /* §L allows the date to move on the phone card, where the right edge is crowded. */ .sjb-card__date { position: static; display: block; margin-top: 6px; } .sjb-card { padding-bottom: 8px; } /* --- The bottom bar --- */ .sjb-tabbar { position: fixed; left: 0; right: 0; bottom: 0; /* Leaflet's corner controls reach 1000; the raised Map tab must clear them. */ z-index: 1100; display: flex; height: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--sjb-header-bg); border-top: 1px solid var(--sjb-border); } .sjb-tabbar__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--sjb-text-faint); font: inherit; font-size: 10px; font-weight: 600; text-decoration: none; cursor: pointer; } .sjb-tabbar__item.is-current, .sjb-tabbar__item[aria-pressed="true"] { color: var(--sjb-accent-text); } .sjb-tabbar__item--cta { color: var(--sjb-accent-text); } /* * Map is the point of the portal, so its tab is raised out of the bar rather than sitting * flush with the other four (§AA). The ring around the icon is the bar's own background, * cut into whatever sits behind it, so the circle reads as detached rather than overlapping. */ .sjb-tabbar__item--map .sjb-icon { box-sizing: content-box; padding: 6px; margin-top: -20px; border-radius: 50%; background: var(--sjb-surface-3); box-shadow: 0 0 0 4px var(--sjb-header-bg); transition: filter 0.15s ease, color 0.15s ease; } .sjb-tabbar__item--map.is-current, .sjb-tabbar__item--map[aria-pressed="true"] { color: var(--sjb-tab-map-icon); } .sjb-tabbar__item--map.is-current .sjb-icon, .sjb-tabbar__item--map[aria-pressed="true"] .sjb-icon { filter: drop-shadow(0 0 3px var(--sjb-tab-map-glow)); } .sjb-tabbar__count { position: absolute; top: 4px; right: 50%; transform: translateX(18px); min-width: 15px; padding: 0 4px; border-radius: var(--sjb-radius-pill); background: var(--sjb-accent); color: var(--sjb-text-on-accent); font-size: 9px; line-height: 15px; } /* Everything that is not the workspace needs clearance for the bar. */ body:not(.sjb-body--workspace) .sjb-main { padding-bottom: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom)); } body:not(.sjb-body--workspace) .sjb-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; } body:not(.sjb-body--workspace) .sjb-footer__legal { margin-left: 0; } /* --- The single offer becomes one column (§AB). --- */ .sjb-single { padding: 14px 16px 40px; } .sjb-single__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .sjb-single__side { position: static; } .sjb-hero__title { font-size: 22px; } .sjb-hero__img { aspect-ratio: 16 / 9; } .sjb-expired { flex-wrap: wrap; } .sjb-expired .sjb-btn { margin-left: 0; width: 100%; } /* * §AB: "CTA może być sticky na dole." The green button follows the reader down a long * offer, because the decision is made at the bottom and the button is at the top. */ .sjb-stickycta { position: fixed; left: 0; right: 0; bottom: calc(var(--sjb-tabbar-h) + env(safe-area-inset-bottom)); z-index: 75; display: block; padding: 10px 16px; background: color-mix(in srgb, var(--sjb-bg) 94%, transparent); border-top: 1px solid var(--sjb-border); } .sjb-stickycta .sjb-box { padding: 0; border: 0; background: none; } body.single-job .sjb-single { padding-bottom: calc(var(--sjb-tabbar-h) + 84px); } /* --- Forms and pages --- */ .sjb-grid2, .sjb-grid3 { grid-template-columns: minmax(0, 1fr); } .sjb-tiles__grid { grid-template-columns: minmax(0, 1fr); } .sjb-page__title, .sjb-savedpage__title, .sjb-formpage__title { font-size: 24px; } .sjb-page, .sjb-savedpage, .sjb-formpage { padding: 22px 16px 40px; } } /* =================================================================================== * Small phones — the rail and the tab bar both get tight below this * =================================================================================== */ @media (max-width: 380px) { .sjb-chip { width: 80px; } .sjb-chip__label { font-size: 10px; } .sjb-tabbar__item span { font-size: 9px; } } /* At 349px and below the header's Post shortcut squeezes the 34px menu button. The bottom tab bar already exposes the same Post destination, so keep the primary navigation usable. */ @media (max-width: 349px) { .sjb-header__cta { display: none; } } /* =================================================================================== * Motion * =================================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* =================================================================================== * Print — the offer page is the only thing worth printing * =================================================================================== */ @media print { .sjb-header, .sjb-rail, .sjb-tabbar, .sjb-footer, .sjb-stickycta, .sjb-backlink, .sjb-map, .sjb-related { display: none !important; } .sjb-single__grid { grid-template-columns: minmax(0, 1fr); } }