/* ── HIRE UG — WP JOB MANAGER OVERRIDES ───────────────────────────────── Specificity strategy: prefix all selectors with `.hire-ug` — this class is automatically added to by WP Job Manager (sanitize_title of theme name), giving us guaranteed higher specificity than the plugin's own stylesheet without needing !important. ──────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════ JOB LISTINGS WRAPPER (matches .jh-jobs-list) ═══════════════════════════════════════════════════════════════════════ */ .hire-ug ul.job_listings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } /* ═══════════════════════════════════════════════════════════════════════ JOB LISTING CARD (matches .job-card layout) ═══════════════════════════════════════════════════════════════════════ */ .hire-ug ul.job_listings li.job_listing { background: var(--cream); position: relative; cursor: pointer; transition: background .25s, transform .2s; border: none; padding: 0; } .hire-ug ul.job_listings li.job_listing::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--amber); transition: height .35s ease; z-index: 1; } .hire-ug ul.job_listings li.job_listing:hover { background: var(--white); transform: translateX(4px); } .hire-ug ul.job_listings li.job_listing:hover::before { height: 100%; } /* The anchor that wraps the card content */ .hire-ug ul.job_listings li.job_listing > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 2rem 2.5rem; text-decoration: none; color: inherit; } /* Company logo */ .hire-ug ul.job_listings li.job_listing .company-logo, .hire-ug ul.job_listings li.job_listing img.company_logo { width: 52px; height: 52px; object-fit: cover; flex-shrink: 0; background: var(--ink); } /* Job title */ .hire-ug ul.job_listings li.job_listing .position h3 { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: .35rem; line-height: 1.3; } /* Company name */ .hire-ug ul.job_listings li.job_listing .company strong { font-size: .85rem; color: var(--muted); font-weight: 300; display: block; } /* Job type badge */ .hire-ug ul.job_listings li.job_listing ul.meta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: .4rem 0 0; padding: 0; list-style: none; } .hire-ug ul.job_listings li.job_listing ul.meta li { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; border: 1px solid rgba(17, 16, 16, .15); color: var(--muted); padding: .2rem .8rem; font-family: 'DM Sans', sans-serif; border-radius: 0; background: transparent; } .hire-ug ul.job_listings li.job_listing ul.meta li.date { border: none; font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: none; font-weight: 300; padding: 0; } /* Job type color variants */ .hire-ug ul.job_listings li.job_listing ul.meta li.job-type.full-time, .hire-ug ul.job_listings li.job_listing ul.meta li.full-time { border-color: var(--amber); color: var(--amber); } .hire-ug ul.job_listings li.job_listing ul.meta li.job-type.part-time, .hire-ug ul.job_listings li.job_listing ul.meta li.part-time { border-color: var(--muted); color: var(--muted); } .hire-ug ul.job_listings li.job_listing ul.meta li.job-type.freelance, .hire-ug ul.job_listings li.job_listing ul.meta li.freelance { border-color: var(--rust); color: var(--rust); } .hire-ug ul.job_listings li.job_listing ul.meta li.job-type.temporary, .hire-ug ul.job_listings li.job_listing ul.meta li.temporary { border-color: #2a7a4b; color: #2a7a4b; } .hire-ug ul.job_listings li.job_listing ul.meta li.job-type.internship, .hire-ug ul.job_listings li.job_listing ul.meta li.internship { border-color: #4a6da7; color: #4a6da7; } /* Location */ .hire-ug ul.job_listings li.job_listing .location { font-size: .8rem; color: var(--muted); margin-top: .25rem; font-family: 'DM Sans', sans-serif; grid-column: 2; } /* Featured badge */ .hire-ug ul.job_listings li.job_listing.job_position_featured { border-left: 3px solid var(--amber); } /* ═══════════════════════════════════════════════════════════════════════ JOB SEARCH FILTERS (matches .jh-search-box layout) ═══════════════════════════════════════════════════════════════════════ */ .hire-ug form.job_filters { display: flex; background: var(--white); border: 1.5px solid rgba(17, 16, 16, .12); overflow: hidden; transition: border-color .25s, box-shadow .25s; margin-bottom: 2.5rem; } .hire-ug form.job_filters:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(212, 135, 10, .1); } .hire-ug form.job_filters .search_jobs { display: flex; flex: 1; align-items: stretch; } .hire-ug form.job_filters .search_keywords, .hire-ug form.job_filters .search_location { flex: 1; display: flex; align-items: center; padding: 0 1.5rem; gap: .8rem; border-right: 1px solid rgba(17, 16, 16, .1); } .hire-ug form.job_filters .search_keywords label, .hire-ug form.job_filters .search_location label { display: none; } .hire-ug form.job_filters .search_keywords input, .hire-ug form.job_filters .search_location input { border: none; outline: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink); width: 100%; padding: 1.2rem 0; font-weight: 300; } .hire-ug form.job_filters .search_keywords input::placeholder, .hire-ug form.job_filters .search_location input::placeholder { color: var(--muted); } .hire-ug form.job_filters .search_categories select { border: none; outline: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink); padding: 1.2rem 1.5rem; font-weight: 300; border-right: 1px solid rgba(17, 16, 16, .1); appearance: none; cursor: pointer; } .hire-ug form.job_filters .search_submit input { background: var(--ink); color: var(--cream); border: none; padding: 0 2.5rem; font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .25s; height: 100%; min-height: 54px; border-radius: 0; } .hire-ug form.job_filters .search_submit input:hover { background: var(--amber); } .hire-ug form.job_filters .search_remote_position { display: flex; align-items: center; gap: .5rem; padding: 0 1.5rem; font-size: .82rem; color: var(--muted); font-family: 'DM Sans', sans-serif; } .job_filters .search_jobs div { width: 100%; } .job_filters .search_jobs div label { display: block; } /* ═══════════════════════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════════════════════ */ .hire-ug nav.job-manager-pagination { margin-top: 3rem; text-align: center; } .hire-ug nav.job-manager-pagination ul { display: flex; align-items: center; justify-content: center; gap: 2px; list-style: none; padding: 0; margin: 0; } .hire-ug nav.job-manager-pagination ul li a, .hire-ug nav.job-manager-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: 'DM Sans', sans-serif; font-size: .85rem; font-weight: 500; color: var(--muted); border: 1px solid rgba(17, 16, 16, .15); transition: background .2s, color .2s, border-color .2s; text-decoration: none; border-radius: 0; } .hire-ug nav.job-manager-pagination ul li a:hover { background: var(--paper); border-color: var(--ink); color: var(--ink); } .hire-ug nav.job-manager-pagination ul li span.current { background: var(--ink); border-color: var(--ink); color: var(--cream); } .hire-ug nav.job-manager-pagination ul li span.gap { border: none; width: auto; color: var(--muted); } /* ═══════════════════════════════════════════════════════════════════════ SINGLE JOB PAGE ═══════════════════════════════════════════════════════════════════════ */ .hire-ug .single_job_listing { font-family: 'DM Sans', sans-serif; } /* Meta box */ .hire-ug .single_job_listing ul.job-listing-meta { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: 0 0 2.5rem; } .hire-ug .single_job_listing ul.job-listing-meta li { font-family: 'DM Sans', sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; border: 1px solid rgba(17, 16, 16, .15); color: var(--muted); padding: .35rem 1rem; border-radius: 0; } /* Job type variants in single meta */ .hire-ug .single_job_listing ul.job-listing-meta li.job-type.full-time { border-color: var(--amber); color: var(--amber); } .hire-ug .single_job_listing ul.job-listing-meta li.job-type.part-time { border-color: var(--muted); color: var(--muted); } .hire-ug .single_job_listing ul.job-listing-meta li.job-type.freelance { border-color: var(--rust); color: var(--rust); } .hire-ug .single_job_listing ul.job-listing-meta li.job-type.temporary { border-color: #2a7a4b; color: #2a7a4b; } .hire-ug .single_job_listing ul.job-listing-meta li.job-type.internship { border-color: #4a6da7; color: #4a6da7; } .hire-ug .single_job_listing ul.job-listing-meta li.location, .hire-ug .single_job_listing ul.job-listing-meta li.date-posted, .hire-ug .single_job_listing ul.job-listing-meta li.salary { border-color: rgba(17, 16, 16, .12); color: var(--muted); } .hire-ug .single_job_listing ul.job-listing-meta li.salary { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; } .hire-ug .single_job_listing ul.job-listing-meta li.position-filled, .hire-ug .single_job_listing ul.job-listing-meta li.listing-expired { border-color: var(--rust); color: var(--rust); } /* Job description */ .hire-ug .single_job_listing .job_description { font-family: 'DM Sans', sans-serif; font-size: 1rem; line-height: 1.8; color: var(--muted); } .hire-ug .single_job_listing .job_description h2, .hire-ug .single_job_listing .job_description h3 { font-family: 'Playfair Display', serif; color: var(--ink); margin: 2rem 0 .8rem; } .hire-ug .single_job_listing .job_description ul, .hire-ug .single_job_listing .job_description ol { padding-left: 1.5rem; margin: 1rem 0; list-style: disc; } .hire-ug .single_job_listing .job_description a { color: var(--amber); border-bottom: 1px solid rgba(212, 135, 10, .3); } .hire-ug .single_job_listing .job_description a:hover { color: var(--amber-lt); } /* Company info */ .hire-ug .single_job_listing .company-info { border: 1px solid rgba(17, 16, 16, .1); padding: 1.8rem 2rem; margin-top: 2.5rem; background: var(--paper); } /* Application section */ .hire-ug .job-manager-application-wrapper { margin-top: 2.5rem; padding: 2rem; background: var(--paper); border: 1px solid rgba(17, 16, 16, .1); } /* Apply button */ .hire-ug .application a, .hire-ug .apply a { display: inline-flex; align-items: center; background: var(--amber); color: var(--ink); padding: 1rem 2.5rem; font-size: .88rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; text-decoration: none; transition: background .25s; border-radius: 0; } .hire-ug .application a:hover, .hire-ug .apply a:hover { background: var(--amber-lt); color: var(--ink); } /* ═══════════════════════════════════════════════════════════════════════ JOB DASHBOARD ═══════════════════════════════════════════════════════════════════════ */ .hire-ug .my_job_applications table, .hire-ug .job-dashboard table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: .9rem; } .hire-ug .my_job_applications table th, .hire-ug .job-dashboard table th { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: .8rem 1rem; border-bottom: 1px solid rgba(17, 16, 16, .1); text-align: left; } .hire-ug .my_job_applications table td, .hire-ug .job-dashboard table td { padding: 1rem; border-bottom: 1px solid rgba(17, 16, 16, .07); color: var(--ink); vertical-align: middle; } .hire-ug .my_job_applications table tr:hover td, .hire-ug .job-dashboard table tr:hover td { background: var(--paper); } /* ═══════════════════════════════════════════════════════════════════════ JOB SUBMISSION FORM ═══════════════════════════════════════════════════════════════════════ */ .hire-ug .job-manager-form fieldset, .hire-ug .job-manager-form .fieldset-full { margin-bottom: 1.5rem; } .hire-ug .job-manager-form label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); display: block; margin-bottom: .5rem; font-family: 'DM Sans', sans-serif; } .hire-ug .job-manager-form input[type="text"], .hire-ug .job-manager-form input[type="email"], .hire-ug .job-manager-form input[type="url"], .hire-ug .job-manager-form input[type="number"], .hire-ug .job-manager-form textarea, .hire-ug .job-manager-form select { border: 1.5px solid rgba(17, 16, 16, .13); background: var(--white); padding: .9rem 1.1rem; font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink); outline: none; appearance: none; transition: border-color .25s, box-shadow .25s; width: 100%; border-radius: 0; font-weight: 300; } .hire-ug .job-manager-form input:focus, .hire-ug .job-manager-form textarea:focus, .hire-ug .job-manager-form select:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(212, 135, 10, .09); } .hire-ug .job-manager-form input[type="submit"], .hire-ug .job-manager-form button[type="submit"] { background: var(--ink); color: var(--cream); padding: 1rem 2.5rem; font-size: .88rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background .25s; border-radius: 0; } .hire-ug .job-manager-form input[type="submit"]:hover, .hire-ug .job-manager-form button[type="submit"]:hover { background: var(--amber); color: var(--cream); } /* ═══════════════════════════════════════════════════════════════════════ LOADING / NO RESULTS ═══════════════════════════════════════════════════════════════════════ */ .hire-ug .job-manager-loading { text-align: center; padding: 3rem; color: var(--muted); font-family: 'DM Sans', sans-serif; } .hire-ug .no_jobs_found, .hire-ug .no-job-found-notification { padding: 4rem 2rem; text-align: center; color: var(--muted); font-family: 'DM Sans', sans-serif; border: 1px solid rgba(17, 16, 16, .1); background: var(--paper); } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVE — WJM ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .hire-ug ul.job_listings li.job_listing > a { grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.5rem; } .hire-ug form.job_filters .search_jobs { flex-direction: column; } .hire-ug form.job_filters .search_keywords, .hire-ug form.job_filters .search_location { border-right: none; border-bottom: 1px solid rgba(17, 16, 16, .1); } .hire-ug form.job_filters .search_submit input { min-height: 48px; width: 100%; padding: 1rem; } .hire-ug .my_job_applications table, .hire-ug .job-dashboard table { font-size: .82rem; } }