/* ══════════════════════════════════════════════════ JOBS BROWSE PAGE Front page = Filters + Job List only. Details open ONLY on click — as a right-side slide OVERLAY on desktop, or a centered MODAL on mobile (≤960px, see bottom of file). ══════════════════════════════════════════════════ */ :root { --js-orange: #FF6B00; --js-orange-dark: #e35f00; --js-orange-light: #fff1e6; --js-text-dark: #1c2333; --js-text-muted: #6b7280; --js-icon-muted: #9aa1ac; --js-border: #e3e5ea; --js-border-strong: #d3d6dd; --js-bg-soft: #f7f8fa; --js-green: #2e7d32; --js-green-bg: #e8f5e9; --js-blue: #1565c0; --js-blue-bg: #e3f2fd; --js-purple: #6a1b9a; --js-purple-bg: #f3e5f5; --js-teal: #00695c; --js-teal-bg: #e0f2f1; --js-radius: 12px; --js-shadow: 0 4px 16px rgba(28, 35, 51, 0.06); --js-shadow-hover: 0 8px 24px rgba(28, 35, 51, 0.10); /* LIVE header height — set directly in pixels by jobs.js, which measures your actual #top-bar + #header elements via getBoundingClientRect() on load/scroll/resize. This is exact (not a guess), so nothing can ever sit hidden behind the header on any device — including the mobile slide-in panel. */ --header-live-h: 130px; /* fallback only, JS overrides this immediately */ } * { box-sizing: border-box; } /* ══ SCROLL LOCK — applied to while the job-details overlay (desktop slide panel or mobile modal) is open, from jobs.js. Hides the page's own scrollbar so only the overlay's own scrollbar shows (avoids two visible scrollbars), while `--js-scrollbar-comp` (set by jobs.js to the real scrollbar width) is applied as padding-right to BOTH the body AND the site's fixed #header/#top-bar. Without doing it for the header too, the header would visibly jump/blink left-right the instant the scrollbar disappears, since it's `position: fixed` and sized to the viewport rather than to body. ══ */ body.scroll-locked { overflow: hidden; padding-right: var(--js-scrollbar-comp, 0px); } body.scroll-locked #header, body.scroll-locked #top-bar { padding-right: var(--js-scrollbar-comp, 0px); } body { font-family: 'DM Sans', sans-serif; color: var(--js-text-dark); } h1, h2, h3, h4 { font-family: 'Sora', sans-serif; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ══ BANNER — pure gradient + brand blobs, matches header's navy/saffron identity exactly (same visual language as the login modal's left panel). No external image dependency, so it always renders correctly. ══ */ .jobs-banner-wrap { position: relative; min-height: 400px; width: 100%; overflow: hidden; display: flex; align-items: stretch; background: linear-gradient(160deg, #0A1628 0%, #112240 55%, #17335c 100%); } .jobs-banner-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .blob-saffron { width: 340px; height: 340px; right: -100px; top: -110px; background: radial-gradient(circle, rgba(255,107,0,0.28) 0%, transparent 70%); } .blob-blue { width: 300px; height: 300px; left: -90px; bottom: -110px; background: radial-gradient(circle, rgba(26,86,219,0.24) 0%, transparent 70%); } .jobs-banner-content { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; padding: calc(var(--header-live-h) + 28px) 20px 32px; transition: padding-top 0.35s cubic-bezier(0.4,0,0.2,1); /* centered group (title + search) sits in the middle of the banner instead of being pinned to the bottom via space-between */ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 28px; min-height: 400px; } .jobs-banner-top { display: flex; flex-direction: column; align-items: center; gap: 10px; } .jobs-banner-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.1); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.18); } .jobs-banner-badge i { color: #FF8C35; } .jobs-banner-title { font-family: 'Sora', sans-serif; font-size: 32px; font-weight: 800; color: #fff; margin: 0; line-height: 1.25; letter-spacing: -0.5px; } .jobs-banner-title .accent { color: #FF6B00; } .jobs-banner-sub { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 6px 0 0; max-width: 640px; /* one line on desktop/tablet — no more "experience" wrapping to a second line by itself; relaxed back to normal wrap on very small phones in the 600px media query below, where 640px won't fit. */ white-space: nowrap; } .jobs-hero-search { width: 100%; max-width: 640px; display: flex; gap: 10px; flex-wrap: wrap; /* white tray, matching the homepage banner's search bar exactly */ background: #fff; padding: 10px; border-radius: 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); margin-top: 0; position: relative; z-index: 5; } .hero-search-field { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; background: #fff; /* always-visible orange border (not just on focus), matching the homepage banner's look */ border: 1.5px solid var(--js-orange); transition: border-color 0.2s ease; } .hero-search-field:focus-within { border-color: var(--js-orange-dark); } .hero-search-field i { color: var(--js-orange); font-size: 13px; } .hero-search-field input { border: none; background: transparent; outline: none; width: 100%; font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--js-text-dark); } .hero-search-btn { /* light-orange pill fill (same "Featured" tint used elsewhere), orange border and bold orange text — matches the homepage screenshot's Search button exactly */ background: var(--js-orange-light); color: var(--js-orange-dark); border: 1.5px solid var(--js-orange); border-radius: 999px; padding: 12px 26px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; } .hero-search-btn:hover { background: var(--js-orange); color: #fff; } /* ══ FRONT PAGE SHELL — Filters | Job List (2 sections) ══ An optional ad rail is added as a 3rd column ONLY on very wide screens via the media query further down. */ .jobs-section { padding: 28px 0 60px; background: var(--js-bg-soft); } .jobs-shell { max-width: 1500px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; } /* ══ FILTERS ══ */ .jobs-filters-panel { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); box-shadow: var(--js-shadow); padding: 20px; position: sticky; top: calc(var(--header-live-h) + 12px); max-height: calc(100vh - var(--header-live-h) - 24px); overflow-y: auto; } .jobs-filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .jobs-filters-header h3 { font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px; } .jobs-filters-header h3 i { color: var(--js-icon-muted); } .jobs-filters-clear { background: none; border: none; color: var(--js-orange); font-size: 12.5px; font-weight: 600; cursor: pointer; } .filter-block { margin-bottom: 18px; } .filter-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--js-text-dark); margin-bottom: 7px; } .filter-select { width: 100%; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--js-border); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--js-text-dark); background: #fff; outline: none; } .filter-select:focus { border-color: var(--js-orange); } .filter-checkbox-group { display: flex; flex-direction: column; gap: 7px; } .filter-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--js-text-dark); cursor: pointer; } .filter-checkbox input { accent-color: var(--js-orange); width: 14px; height: 14px; } /* ══ JOB LIST — now the primary wide content area ══ */ .jobs-list-panel { min-width: 0; } .jobs-list-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .jobs-result-count { font-size: 13.5px; color: var(--js-text-muted); font-weight: 500; } .jobs-mobile-filter-btn { display: none; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--js-border); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--js-text-dark); cursor: pointer; } .active-filter-chips { display: none; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .filter-chip { background: #fff; color: var(--js-text-dark); border: 1px solid var(--js-border); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 7px; } .filter-chip i { cursor: pointer; font-size: 10px; color: var(--js-icon-muted); } /* Cards laid out 2-per-row on very wide screens since the list now has more room (no permanent details column stealing width) */ .jobs-cards-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @keyframes jobCardFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .job-card { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 18px 20px; position: relative; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease; animation: jobCardFadeIn 0.25s ease both; } .job-card:hover { box-shadow: var(--js-shadow-hover); border-color: var(--js-border-strong); } .job-featured-tag { position: absolute; top: -9px; left: 18px; background: var(--js-orange); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .job-card-header { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 12px; } .job-company-logo { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background: var(--js-bg-soft); color: var(--js-text-dark); border: 1px solid var(--js-border); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; } .job-header-text { flex: 1; min-width: 0; } .job-title { font-size: 16px; margin: 0 0 3px; color: var(--js-text-dark); line-height: 1.3; } .job-company-name { font-size: 13px; color: var(--js-text-muted); font-weight: 500; } .job-save-btn { background: none; border: 1px solid transparent; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--js-icon-muted); padding: 6px; flex-shrink: 0; transition: border-color 0.15s, color 0.15s, background 0.15s; } /* Same hover treatment as the Trending Categories chips — orange border, orange-dark icon, soft orange background — so the save icon reads as clearly interactive on hover. */ .job-save-btn:hover { border-color: var(--js-orange); color: var(--js-orange-dark); background: var(--js-orange-light); } .job-save-btn.saved { color: var(--js-orange); } .job-card-mini-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--js-text-muted); margin-bottom: 10px; } .job-card-mini-meta span { display: inline-flex; align-items: center; gap: 6px; } .job-card-mini-meta i { color: var(--js-icon-muted); font-size: 12px; } .job-card-desc { font-size: 13px; color: var(--js-text-muted); line-height: 1.55; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .job-card-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--js-border); } .job-type-badge { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; } .badge-fulltime { background: var(--js-green-bg); color: var(--js-green); } .badge-parttime { background: var(--js-blue-bg); color: var(--js-blue); } .badge-remote { background: var(--js-teal-bg); color: var(--js-teal); } .badge-internship { background: var(--js-purple-bg);color: var(--js-purple); } .badge-contract { background: #f1f2f5; color: var(--js-text-dark); } .job-salary { font-size: 13.5px; font-weight: 700; color: var(--js-text-dark); } .job-posted-mini { font-size: 12px; color: var(--js-text-muted); } .job-posted-mini i { color: var(--js-icon-muted); margin-right: 4px; } /* ══ SKELETON LOADING ══ */ @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .job-card-skeleton { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 18px 20px; } .skeleton-header { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; } .skeleton-circle { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; } .skeleton-line { height: 11px; border-radius: 4px; margin-bottom: 8px; background: linear-gradient(90deg, #eef0f2 25%, #f7f8f9 37%, #eef0f2 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; } /* ══ EMPTY STATE / LOADER ══ */ .jobs-empty-state { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 50px 24px; text-align: center; color: var(--js-text-muted); } .jobs-empty-state i { font-size: 36px; color: var(--js-icon-muted); margin-bottom: 12px; } .jobs-empty-state h4 { color: var(--js-text-dark); margin: 0 0 6px; } .jobs-empty-state .contact-submit-btn { margin-top: 16px; background: var(--js-orange); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-weight: 600; cursor: pointer; } .jobs-scroll-loader, .jobs-end-message { text-align: center; padding: 18px 0; font-size: 13px; color: var(--js-text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; } .jobs-scroll-loader i { color: var(--js-orange); } .jobs-end-message i { color: var(--js-green); } #jobsScrollSentinel { height: 1px; } /* ══ AD RAIL — stretched to match the list column's full height, so the sticky ad has room to stay pinned for the ENTIRE scroll of the job list (not just the first few pixels). Extra content cards below the ad sit in normal flow — visible near the top, scrolling away as the Google Ad is no longer here — it moved into the job list itself as horizontal native slots (see .job-list-ad-slot below). ══ */ .jobs-ad-rail { display: none; flex-direction: column; gap: 16px; /* Overrides the grid's own "align-items: start" for just this column, so the rail's box stretches down to match the job list's full height. That gives the sticky ad a containing block that ends exactly where the list ends (right before the footer) — so the ad naturally stops sticking there instead of floating past it and overlapping the footer, and instead of being "fully" sticky (stuck) for the entire page height. */ align-self: stretch; } @media (min-width: 1400px) { .jobs-shell { grid-template-columns: 260px 1fr 300px; } .jobs-ad-rail { display: flex; } } /* ══ In-list horizontal native ad — inserted every few job cards by jobs.js, styled to match the job-card look but wide/short (banner shape) so it reads as "part of the list" rather than a sidebar box. ══ */ .job-list-ad-slot { background: #fff; border: 1px dashed var(--js-border-strong); border-radius: var(--js-radius); padding: 14px 18px; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .job-list-ad-slot .ad-slot-label { font-size: 10px; color: var(--js-text-muted); text-transform: uppercase; letter-spacing: 0.6px; } .job-list-ad-slot ins.adsbygoogle { width: 100%; } /* ══ AD RAIL — extra filler content (Trending Categories, Top Companies) ══ */ .ad-rail-card { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 16px; flex-shrink: 0; transition: box-shadow 0.15s ease, border-color 0.15s ease; } /* Same hover treatment as a job card — shadow lift + stronger border — instead of a filled background swap. */ .ad-rail-card:hover { box-shadow: var(--js-shadow-hover); border-color: var(--js-border-strong); } .ad-rail-card-title { font-size: 12.5px; font-weight: 700; color: var(--js-text-dark); display: flex; align-items: center; gap: 7px; margin: 0 0 12px; } .ad-rail-card-title i { color: var(--js-orange); font-size: 12px; } .trending-chip-list { display: flex; flex-wrap: wrap; gap: 7px; } .trending-chip { background: var(--js-bg-soft); border: 1px solid var(--js-border); color: var(--js-text-dark); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.15s; } .trending-chip span { color: var(--js-text-muted); font-weight: 500; font-size: 11px; } .trending-chip:hover { border-color: var(--js-orange); color: var(--js-orange-dark); background: var(--js-orange-light); } .company-mini-list { display: flex; flex-direction: column; gap: 6px; } .company-mini-item { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px; cursor: pointer; text-align: left; width: 100%; transition: 0.15s; } .company-mini-item:hover { background: #f2f2f2; border-color: var(--js-border); } .company-mini-logo { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: var(--js-bg-soft); border: 1px solid var(--js-border); display: flex; align-items: center; justify-content: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px; color: var(--js-text-dark); } .company-mini-text { display: flex; flex-direction: column; min-width: 0; } .company-mini-name { font-size: 12.5px; font-weight: 600; color: var(--js-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .company-mini-count { font-size: 11px; color: var(--js-text-muted); } /* ══ Sticky Google Ad in the rail — placed right below "Top Hiring Companies". Uses the exact same sticky math as the filters panel (tracks --header-live-h) so it stays pinned to the viewport and fills the remaining height from just under the header to the bottom of the screen while the rail/list scrolls. ══ */ .ad-rail-google-slot { position: sticky; top: calc(var(--header-live-h) + 12px); /* A normal ad-unit height (like a half-page/skyscraper slot) rather than near-full-viewport — combined with .jobs-ad-rail's stretched height above, this is what makes the "stick for a while, then stop before the footer" behaviour work with plain CSS: the ad stays pinned as you scroll the list, then simply runs out of room to stick (and stops moving with the viewport) once the rail reaches the bottom of its stretched container — right around where the job list ends and the footer begins. */ height: 600px; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; } .ad-rail-google-slot .ad-slot-label { font-size: 10px; color: var(--js-text-muted); text-transform: uppercase; letter-spacing: 0.6px; } .ad-rail-google-slot ins.adsbygoogle { width: 100%; flex: 1; } .ad-rail-safety { display: flex; gap: 10px; align-items: flex-start; background: var(--js-bg-soft); } .ad-rail-safety i { color: var(--js-orange); font-size: 14px; margin-top: 1px; } .ad-rail-safety p { font-size: 11.5px; color: var(--js-text-muted); line-height: 1.55; margin: 0; } .ad-rail-safety a { color: var(--js-orange-dark); font-weight: 600; } /* ══ JOB DETAILS — DESKTOP OVERLAY, hidden until opened. Docks flush to the right edge AND the bottom of the viewport (no gap on either side — this is what keeps the scrollbar sitting right at the true edge instead of floating with a stray margin). Sits flush under the header — no border radius, square edges. Top offset tracks the LIVE header height so it always stays just below it, even mid-animation, and now does so with a much snappier transition so it doesn't lag behind the header's own shrink animation while you scroll. ══ */ .jobs-details-panel { position: fixed; top: var(--header-live-h); right: 0; bottom: 0; width: min(560px, 92vw); background: #fff; border-radius: 0; box-shadow: -8px 0 40px rgba(0,0,0,0.2); transform: translateX(120%); transition: transform 0.3s ease, top 0.15s cubic-bezier(0.4,0,0.2,1); z-index: 2001; overflow-y: auto; } .jobs-details-panel.is-open { transform: translateX(0); } /* Slim, unobtrusive scrollbar for the panel — the content scrolls independently of the page/job-list behind it: hover the panel and scroll to move its content, hover the list on the left and scroll to move the list. No JS is needed for that split — it's how overflow-y:auto elements behave by default; this just makes the panel's own scrollbar look intentional instead of a stray margin. */ .jobs-details-panel::-webkit-scrollbar { width: 8px; } .jobs-details-panel::-webkit-scrollbar-track { background: transparent; } .jobs-details-panel::-webkit-scrollbar-thumb { background: var(--js-border-strong); border-radius: 8px; } .jobs-details-panel::-webkit-scrollbar-thumb:hover { background: var(--js-icon-muted); } .jd-loading { text-align: center; padding: 80px 20px; color: var(--js-text-muted); font-size: 14px; } .jd-loading i { margin-right: 8px; color: var(--js-orange); } .jd-content { padding: 26px; position: relative; } /* jd-top-row only holds the title/logo now — the close button is pulled OUT of this flex row entirely (see .jd-close-btn below) so it can NEVER be pushed off-screen or hidden by flex-wrap/column reflow on small screens. It's always fixed to the same corner of the panel, guaranteed visible on every breakpoint. */ .jd-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding-right: 44px; } .jd-header-left { display: flex; gap: 14px; align-items: flex-start; } .jd-company-logo-lg { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; background: var(--js-bg-soft); color: var(--js-text-dark); border: 1px solid var(--js-border); font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; } .jd-title { font-size: 20px; margin: 0 0 4px; color: var(--js-text-dark); } .jd-company-name { font-size: 13.5px; color: var(--js-text-muted); font-weight: 500; } .jd-featured-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--js-orange-light); color: var(--js-orange-dark); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-top: 6px; } /* Close button: truly `position: fixed` to the VIEWPORT (not the panel), and lives outside the panel in the DOM specifically so that works correctly — a fixed element nested inside a transformed ancestor (the panel has `transform` for its slide animation) would otherwise get trapped relative to that ancestor instead of the real viewport, which is what caused it to drift with scrolling/reflow before. Position matches wherever the panel visually sits at each breakpoint (desktop: near its right edge, below the header; mobile: not used — mobile opens the modal instead, see #jdMobileModalOverlay). Its own top-tracking transition is now sped up to match the panel above, so both move together as the header shrinks/grows on scroll. */ .jd-close-btn { position: fixed; top: calc(var(--header-live-h) + 20px); right: 24px; z-index: 2002; background: var(--js-orange); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 4px 14px rgba(255,107,0,0.4); transition: transform 0.15s ease, opacity 0.2s ease, top 0.15s cubic-bezier(0.4,0,0.2,1), visibility 0s; opacity: 0; visibility: hidden; pointer-events: none; } .jd-close-btn.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .jd-close-btn:hover { background: var(--js-orange-dark); transform: scale(1.06); } .jd-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; padding: 16px 0; border-top: 1px solid var(--js-border); border-bottom: 1px solid var(--js-border); margin-bottom: 18px; } .jd-meta-box { display: flex; gap: 8px; align-items: flex-start; } .jd-meta-box i { color: var(--js-icon-muted); font-size: 14px; margin-top: 2px; } .jd-meta-box span { display: block; font-size: 11px; color: var(--js-text-muted); } .jd-meta-box strong { display: block; font-size: 13px; color: var(--js-text-dark); margin-top: 1px; } .jd-salary-openings-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .jd-salary-block span { display: block; font-size: 11px; color: var(--js-text-muted); } .jd-salary-block strong { font-size: 17px; color: var(--js-text-dark); } .jd-openings-info { font-size: 12px; color: var(--js-text-muted); } .jd-action-row { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; } /* Both "Apply Now" and "Save Job" now share the exact same pill-button look: a light-orange fill (the same tint used by the "Featured" badge, var(--js-orange-light)) with orange-dark text and an orange border — same border treatment as the banner's Search button — solidifying to full orange with white text on hover. */ .jd-apply-btn, .jd-save-btn { background: var(--js-orange-light); color: var(--js-orange-dark); border: 1.5px solid var(--js-orange); border-radius: 999px; padding: 12px 26px; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s ease, color 0.2s ease; } .jd-apply-btn:hover, .jd-save-btn:hover { background: var(--js-orange); color: #fff; } /* Apply Now is given more room to grow than Save Job (flex-grow: 2 vs 1) so it reads as the primary action and widens responsively as the row has space, instead of staying a fixed small size. */ .jd-apply-btn { flex: 2 1 220px; min-width: 200px; } .jd-save-btn { flex: 1 1 150px; min-width: 140px; padding: 12px 22px; } /* Once actually saved, the button stays in the solid/hover-like state permanently to show the "on" status. */ .jd-save-btn.saved { background: var(--js-orange); color: #fff; } .jd-save-btn.saved:hover { background: var(--js-orange-dark); color: #fff; } .jd-content h2 { font-size: 15.5px; margin: 20px 0 8px; color: var(--js-text-dark); } .jd-content h2:first-of-type { margin-top: 0; } .jd-content p { font-size: 13.5px; line-height: 1.7; color: var(--js-text-muted); margin: 0; } .jd-list { margin: 0; padding-left: 18px; } .jd-list li { font-size: 13.5px; line-height: 1.75; color: var(--js-text-muted); } .jd-safety-note { margin-top: 22px; font-size: 12px; color: var(--js-text-muted); line-height: 1.6; background: var(--js-bg-soft); padding: 12px; border-radius: 8px; } .jd-safety-note i { color: var(--js-icon-muted); margin-right: 4px; } /* ══ BACKDROP (behind the details overlay, on desktop) ══ */ .jobs-details-backdrop, .jobs-filter-backdrop { display: none; position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-live-h); background: rgba(0,0,0,0.45); z-index: 2000; } .jobs-details-backdrop.active, .jobs-filter-backdrop.active { display: block; } .jobs-filter-backdrop { z-index: 1998; } /* ══ MOBILE JOB DETAILS MODAL — replaces the slide-in panel above on small screens (≤960px). A centered popup, same visual family as the login modal: a brand header bar (logo + "JobStar.in") up top, with job title/meta/description in a scrollable body underneath. jobs.js decides which one (panel vs modal) to open based on viewport width. ══ */ .jd-mobile-modal-overlay { display: none; position: fixed; inset: 0; z-index: 2500; background: rgba(15, 20, 30, 0.55); align-items: center; justify-content: center; padding: 16px; } .jd-mobile-modal-overlay.active { display: flex; } .jd-mobile-modal-box { background: #fff; border-radius: 10px; width: 100%; max-width: 480px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .jd-mobile-modal-body { overflow-y: auto; padding: 18px; flex: 1; } /* The panel's own close-button spacing isn't needed here — the modal header already has its own close button (.panel-close) — so drop the extra right padding reserved for it in the desktop layout. */ .jd-mobile-modal-body .jd-top-row { padding-right: 0; margin-bottom: 14px; } /* Everything below was originally sized for the much wider desktop panel and read oversized inside the compact mobile modal — scaled down as a whole (title, company name, meta grid, salary, headings, body text, list items, buttons) so it matches the modal's size. */ .jd-mobile-modal-body .jd-title { font-size: 16px; margin-bottom: 3px; } .jd-mobile-modal-body .jd-company-name { font-size: 12px; } .jd-mobile-modal-body .jd-company-logo-lg { width: 44px; height: 44px; font-size: 17px; border-radius: 10px; } .jd-mobile-modal-body .jd-featured-badge { font-size: 10px; padding: 2px 8px; margin-top: 4px; } .jd-mobile-modal-body .jd-meta-grid { gap: 10px 12px; padding: 12px 0; margin-bottom: 14px; } .jd-mobile-modal-body .jd-meta-box i { font-size: 12px; } .jd-mobile-modal-body .jd-meta-box span { font-size: 10px; } .jd-mobile-modal-body .jd-meta-box strong { font-size: 12px; } .jd-mobile-modal-body .jd-salary-openings-row { margin-bottom: 14px; } .jd-mobile-modal-body .jd-salary-block span { font-size: 10px; } .jd-mobile-modal-body .jd-salary-block strong { font-size: 15px; } .jd-mobile-modal-body .jd-openings-info { font-size: 11px; } .jd-mobile-modal-body h2 { font-size: 13.5px; margin: 16px 0 6px; } .jd-mobile-modal-body p { font-size: 12.5px; } .jd-mobile-modal-body .jd-list li { font-size: 12.5px; line-height: 1.65; } .jd-mobile-modal-body .jd-safety-note { font-size: 11px; padding: 10px; margin-top: 16px; } /* Buttons were sized for the wide desktop panel — shrink padding/font for the modal so they no longer look oversized next to the smaller text above. */ .jd-mobile-modal-body .jd-action-row { gap: 8px; margin-bottom: 18px; } .jd-mobile-modal-body .jd-apply-btn, .jd-mobile-modal-body .jd-save-btn { padding: 10px 14px; font-size: 12px; min-width: 0; /* the desktop flex-basis (220px/150px) was still forcing these wide even with min-width:0 — reset to an even, modal-appropriate split */ flex: 1 1 0; } /* ══ MOBILE / TABLET (≤960px) ══ */ @media (max-width: 960px) { .jobs-shell { grid-template-columns: 1fr; } .jobs-mobile-filter-btn { display: flex; } .jobs-filters-panel { position: fixed; top: var(--header-live-h); right: -320px; height: calc(100vh - var(--header-live-h)); width: 300px; z-index: 1999; border-radius: 0; overflow-y: auto; transition: right 0.25s ease; max-height: none; } .jobs-filters-panel.mobile-open { right: 0; } /* Desktop slide panel is simply never opened on mobile anymore (jobs.js opens #jdMobileModalOverlay instead) — this rule stays only as a harmless fallback. */ .jobs-details-panel { top: 0; left: 0; right: 0; bottom: 0; width: auto; } .jd-content { padding-top: 44px; } .jd-close-btn { top: 28px; right: 20px; } .jd-meta-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .jobs-banner-title { font-size: 21px; } .jobs-banner-sub { white-space: normal; font-size: 12.5px; max-width: 320px; } .jobs-hero-search { flex-direction: column; } .hero-search-btn { width: 100%; justify-content: center; } .jd-meta-grid { grid-template-columns: repeat(2, 1fr); } .jd-action-row { flex-direction: column; } .jd-apply-btn, .jd-save-btn { width: 100%; } .jd-top-row { flex-direction: column; } .job-card-mini-meta { gap: 6px 12px; } .jd-mobile-modal-box { max-height: 92vh; } }