`. The shared rule beats the Reign / Astra heading cascade
* via a strong selector chain in wcb-ui.css. */
.wcb-card-title a,
.wcb-card-title a:visited {
color: inherit;
text-decoration: none;
position: relative;
z-index: 2;
display: inline-block;
padding: var(--wcb-space-xs) 0;
}
.wcb-card-title a:hover {
color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
text-decoration: underline;
}
.wcb-card-company {
font-size: var(--wcb-text-base);
color: var(--wcb-text-secondary);
font-weight: var(--wcb-font-medium);
margin: 0;
display: flex;
align-items: center;
gap: var(--wcb-space-xs);
flex-wrap: wrap;
}
/* Trust mark is now `.wcb-ca-trust-tick` defined in
* `assets/css/wcb-ui.css` and shared across all 3 archive cards. The old
* `.wcb-verified-sm` pill ("✓ Verified" with text) is retired. */
/* Bookmark button styling lives in assets/css/wcb-ui.css under the
* shared `[class*="wp-block-wp-career-board"] .wcb-job-card .wcb-bookmark-btn`
* rule at (0,3,1) which beats every Reign / Astra button cascade
* without `!important`. No per-block override needed here. */
/* ── Badges ──────────────────────────────────────────────────────────────── */
.wcb-card-badges {
display: flex;
flex-wrap: wrap;
gap: var(--wcb-space-xs);
align-items: center;
}
/* Hidden by default; shown when data-wp-class adds .wcb-shown.
* Padding aligned with `.wcb-ca-chip` (Companies) + `.wcb-ra-card-location`
* /`.wcb-ra-skill-tag` (Find Candidates): `0.15rem var(--wcb-space-sm)`. */
.wcb-cbadge {
display: none;
align-items: center;
gap: var(--wcb-space-xs); /* 0.2rem ≈ 3px → xs */
padding: var(--wcb-space-xs) var(--wcb-space-sm); /* 0.15rem ≈ 2px → xs */
border-radius: var(--wcb-radius-full);
font-size: var(--wcb-text-xs);
font-weight: var(--wcb-font-medium);
line-height: 1.4;
white-space: nowrap;
}
.wcb-cbadge.wcb-shown {
display: inline-flex;
}
/* All meta badges use the neutral Companies chip palette so Find Jobs,
* Companies, and Find Candidates cards share one chip style. The earlier
* yellow/green/red palette made Jobs cards visually louder than the
* other two archives. Featured stays as a subtle warning tint - it IS
* a meaningful promotion marker, but the soft variant keeps it from
* dominating the card. */
.wcb-cbadge--featured { background: var(--wcb-warning-bg-soft); color: var(--wcb-warning-fg); }
.wcb-cbadge--board { background: var(--wcb-surface); color: var(--wcb-text-secondary, #475569); }
.wcb-cbadge--remote { background: var(--wcb-surface); color: var(--wcb-text-secondary, #475569); }
.wcb-cbadge--type { background: var(--wcb-surface); color: var(--wcb-text-secondary, #475569); }
.wcb-cbadge--exp { background: var(--wcb-surface); color: var(--wcb-text-secondary, #475569); }
.wcb-cbadge--location { background: var(--wcb-surface); color: var(--wcb-text-secondary, #475569); }
/* ── Card footer ─────────────────────────────────────────────────────────── */
.wcb-card-footer {
display: flex;
align-items: center;
gap: var(--wcb-space-md);
flex-wrap: wrap;
margin-top: var(--wcb-space-xs); /* 0.15rem ≈ 2px → xs */
}
/* Hidden by default; shown when .wcb-shown is added. Salary uses the
* contrast color (not primary red) so it reads as data, not a CTA - the
* View Job button is the only red element in the footer. */
.wcb-card-salary {
display: none;
font-size: var(--wcb-text-sm);
font-weight: var(--wcb-font-semibold);
color: var(--wcb-contrast);
}
.wcb-card-salary.wcb-shown {
display: inline-flex;
align-items: center;
}
.wcb-card-date {
font-size: var(--wcb-text-xs);
color: var(--wcb-text-secondary);
}
/* `.wcb-cbtn` base + `.wcb-cbtn--ghost` modifier + `.wcb-cbtn--sm` sizing
* all live in `assets/css/wcb-ui.css`. Find Jobs uses
* `View Job` on
* its card CTA, same as Companies (View Profile) and Find Candidates
* (View Resume). No per-block button styles are needed here. */
/* ── Grid footer — mirrors `.wcb-ca-card-footer` (Companies) for parity:
* single row, `justify-content: space-between`, thin top divider,
* `margin-top: auto` to push to card bottom. Salary on the left (the
* "3 open positions"-equivalent meta), View Job CTA on the right.
* Date is hidden in grid view - the recency lives on the single-job
* page; the card footer is for the action, not the timestamp. */
.wcb-jobs-container.wcb-grid .wcb-card-footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--wcb-space-sm);
margin-top: auto;
padding-top: var(--wcb-space-md);
border-top: 1px solid var(--wcb-surface, #f1f5f9);
}
.wcb-jobs-container.wcb-grid .wcb-card-footer .wcb-card-salary {
display: inline-flex;
align-items: center;
}
.wcb-jobs-container.wcb-grid .wcb-card-footer .wcb-card-date {
display: none;
}
.wcb-jobs-container.wcb-grid .wcb-card-footer .wcb-cbtn {
margin-inline-start: auto;
}
/* Excerpt is hidden in grid view so Find Jobs cards stay the same height
* as Companies + Find Candidates cards. List view keeps the excerpt since
* the wider one-per-row format has the space. The teaser belongs on the
* single-job detail page anyway. */
.wcb-jobs-container.wcb-grid .wcb-card-excerpt {
display: none;
}
/* Title wraps naturally on grid cards (no line-clamp) - user explicitly
* wants the full job title visible on every card. Variable header height
* is fine because the footer is bottom-anchored via `margin-top: auto`
* further down, so the View Job CTA stays aligned across the row. */
/* (0,3,1) prefix wins over Reign's nested link padding rules. */
.wp-block-wp-career-board-job-listings .wcb-jobs-container.wcb-grid .wcb-card-title-link {
padding: 0;
}
/* Hide low-priority meta in grid view so all cards show the same chip set:
* type, experience, location, remote (if applicable). Board name and
* deadline are detail-page material - they were the main source of card-
* height drift between Customer Success Manager (no deadline) and Backend
* Engineer (has deadline). */
/* (0,3,1) selector wins over the (0,2,0) `.wcb-cbadge.wcb-shown { display:
* inline-flex }` rule above on specificity, no `!important` needed. */
.wp-block-wp-career-board-job-listings .wcb-jobs-container.wcb-grid .wcb-cbadge--board,
.wp-block-wp-career-board-job-listings .wcb-jobs-container.wcb-grid .wcb-card-deadline {
display: none;
}
/* Push the footer (salary + date + View Job) to the bottom of the card so
* the CTA aligns across the row regardless of how much meta each card
* has. `.wcb-card-body` already has `display: flex; flex-direction:
* column` so `margin-top: auto` on the footer reserves all leftover
* space above it. */
.wcb-jobs-container.wcb-grid .wcb-card-footer {
margin-top: auto;
}
/* `.wcb-load-more-*` and `.wcb-loading-label` live globally in
* `assets/css/frontend-components.css`. */
/* ── Utilities ───────────────────────────────────────────────────────────── */
/* ── Responsive ladder ──────────────────────────────────────────────────────
* Mirrors Companies + Find Candidates so the 3 archives reflow together.
* 3-col default → 2-col at tablet → 1-col at mobile. Filter panel stacks
* above at <900px via the shared `.wcb-archive-layout` rule in wcb-ui.css. */
@media ( max-width: 1023px ) {
.wcb-jobs-container.wcb-grid,
.wcb-jobs-container.wcb-grid.wcb-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media ( max-width: 640px ) {
.wcb-job-card {
padding: var(--wcb-space-lg);
gap: var(--wcb-space-md);
}
.wcb-card-avatar {
width: 44px;
height: 44px;
font-size: var(--wcb-text-base);
border-radius: var(--wcb-radius-md);
}
.wcb-card-title {
font-size: var(--wcb-text-md);
}
.wcb-jobs-container.wcb-grid,
.wcb-jobs-container.wcb-grid.wcb-cols-4 {
grid-template-columns: minmax(0, 1fr);
}
.wcb-card-date {
display: none;
}
}
/*
* Listings header / search / sort primitives are shared between job-listings
* (Free), resume-archive (Pro) and any future archive block, so the rules now
* live in `assets/css/frontend-components.css`. Block-specific overrides for
* the job-listings layout (post-card grid, etc.) stay below.
*/
/* `.wcb-sort-select` base styles live in `assets/css/frontend-components.css`. */
[class*="wp-block-wp-career-board"] .wcb-sort-select:focus-visible,
[class*="wp-block-wcb-"] .wcb-sort-select:focus-visible {
outline: 2px solid transparent;
border-color: var(--wcb-primary);
box-shadow: var(--wcb-shadow-focus);
}
/* Filter panel - chip stack
* Wraps chips inside `.wcb-filter-panel__group` so each filter family
* (Job type, Experience, Location, Salary) renders as a flex-wrap row.
* Width is constrained by the sidebar (~240px), so chips wrap onto
* additional rows automatically. */
.wcb-filter-panel__chips {
display: flex;
flex-wrap: wrap;
gap: var(--wcb-space-xs);
}
.wcb-filter-panel__chips .wcb-chip {
width: 100%;
justify-content: flex-start;
}
/* Salary range inside the filter panel - no popover wrapper since the
* panel itself is already a persistent surface. Sliders stack with their
* value labels for legibility at the narrow sidebar width. */
.wcb-filter-panel__salary {
display: flex;
flex-direction: column;
gap: var(--wcb-space-xs);
}
.wcb-filter-panel__salary .wcb-salary-popover__slider {
width: 100%;
}
.wcb-filter-panel__salary .wcb-salary-popover__label {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: var(--wcb-text-xs);
font-weight: var(--wcb-font-medium);
color: var(--wcb-text-secondary);
}
.wcb-filter-panel__salary .wcb-salary-popover__value {
color: var(--wcb-contrast);
font-weight: var(--wcb-font-semibold);
}
.wcb-filter-panel__salary .wcb-salary-popover__reset {
align-self: flex-start;
margin-top: var(--wcb-space-xs);
background: transparent;
border: 0;
padding: 0;
color: var(--wcb-primary);
font-size: var(--wcb-text-xs);
font-weight: var(--wcb-font-medium);
cursor: pointer;
}
/* Chip bar (legacy - retained for blocks that still embed horizontal
* chip rows outside the filter panel, e.g. saved-jobs and author-feed
* variants of this block which intentionally skip the sidebar). */
.wcb-chip-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wcb-space-xs); /* 0.375rem ≈ 6px → xs */
}
.wcb-chip {
display: inline-flex;
align-items: center;
height: var(--wcb-space-3xl);
padding-inline: var(--wcb-space-md); /* 0.875rem ≈ 14px → md */
border: 1px solid var( --wcb-border, var(--wp--preset--color--wcb-border) );
border-radius: var(--wcb-radius-full);
font-size: var(--wcb-text-sm);
font-weight: var(--wcb-font-medium);
color: var( --wcb-contrast, var(--wp--preset--color--wcb-contrast) );
background: var( --wcb-base, var(--wp--preset--color--wcb-base) );
cursor: pointer;
transition: border-color var(--wcb-transition-snappy), color var(--wcb-transition-snappy), background var(--wcb-transition-snappy);
white-space: nowrap;
}
.wcb-chip:hover {
border-color: var(--wcb-primary);
background: var(--wcb-info-bg);
color: var(--wcb-primary);
}
.wcb-chip.wcb-chip-active:hover {
background: var(--wcb-primary-dark);
border-color: var(--wcb-primary-dark);
color: var(--wcb-base);
}
.wcb-chip.wcb-chip-active {
border-color: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
background: var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
color: var(--wcb-base);
}
.wcb-chip:focus-visible {
outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
outline-offset: 2px;
}
/* Salary slider popover — with the summary acting as a chip. */
.wcb-chip-popover {
display: inline-block;
position: relative;
}
.wcb-chip-popover > summary {
list-style: none;
cursor: pointer;
}
.wcb-chip-popover > summary::-webkit-details-marker {
display: none;
}
.wcb-salary-popover__body {
position: absolute;
z-index: 5;
top: calc(100% + 6px);
inset-inline-start: 0;
min-width: 260px;
padding: var(--wcb-space-lg);
background: var(--wcb-base, #fff);
border: 1px solid var(--wcb-border, #e2e8f0);
border-radius: var(--wcb-radius-lg, 12px);
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
display: flex;
flex-direction: column;
gap: var(--wcb-space-sm); /* 0.65rem ≈ 10px → sm */
}
.wcb-salary-popover__label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--wcb-text-xs); /* 0.78rem ≈ 12px → xs */
font-weight: 600;
color: var(--wcb-text-secondary, #475569);
}
.wcb-salary-popover__value {
font-variant-numeric: tabular-nums;
color: var(--wcb-contrast, #0f172a);
}
.wcb-salary-popover__slider {
width: 100%;
accent-color: var(--wcb-primary, #2563eb);
}
.wcb-salary-popover__reset {
align-self: flex-end;
background: none;
border: 1px solid var(--wcb-border, #e2e8f0);
color: var(--wcb-text-secondary, #475569);
padding: var(--wcb-space-xs) var(--wcb-space-sm); /* 0.65rem ≈ 10px → sm */
border-radius: var(--wcb-radius-sm, 6px);
font-size: var(--wcb-text-xs); /* 0.78rem ≈ 12px → xs */
cursor: pointer;
}
.wcb-salary-popover__reset:hover {
color: var(--wcb-contrast, #0f172a);
border-color: var(--wcb-text-tertiary, #94a3b8);
}
@media (max-width: 640px) {
.wcb-salary-popover__body {
inset-inline-start: auto;
inset-inline-end: 0;
}
}
.wcb-chip-divider {
display: inline-block;
width: 1px;
height: var(--wcb-space-xl);
background: var(--wcb-border);
margin-inline: var(--wcb-space-xs);
}
/* Active filter pills */
.wcb-active-filters {
display: none;
flex-wrap: wrap;
align-items: center;
gap: var(--wcb-space-xs); /* 0.375rem ≈ 6px → xs */
}
.wcb-active-filters.wcb-shown {
display: flex;
margin-bottom: var(--wcb-space-md, 16px);
}
.wcb-active-chip {
display: inline-flex;
align-items: center;
gap: var(--wcb-space-xs);
height: 1.625rem; /* 26px — component-specific pill height */
padding-inline: var(--wcb-space-sm); /* 0.625rem ≈ 10px → sm */
background: var(--wcb-info-bg);
border: 1px solid var(--wcb-info-border, #bfdbfe);
border-radius: var(--wcb-radius-full);
font-size: var(--wcb-text-xs);
color: var(--wcb-info);
}
.wcb-active-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--wcb-space-lg);
height: var(--wcb-space-lg);
padding: 0;
border: none;
border-radius: var(--wcb-radius-full);
background: transparent;
color: var(--wcb-primary);
font-size: var(--wcb-text-base);
line-height: 1;
cursor: pointer;
}
.wcb-active-chip-remove:hover {
background: var(--wcb-info-border, #bfdbfe);
}
.wcb-active-chip-remove:focus-visible {
outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
outline-offset: 2px;
background: var(--wcb-info-border, #bfdbfe);
}
.wcb-clear-all {
font-size: var(--wcb-text-xs);
color: var(--wp--preset--color--wcb-muted);
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: underline;
}
.wcb-clear-all:hover {
color: var(--wcb-contrast);
background: none;
border: none;
}
.wcb-clear-all:focus-visible {
outline: 2px solid var( --wcb-primary, var(--wp--preset--color--wcb-primary) );
outline-offset: 2px;
}
/* ── Job card excerpt ─────────────────────────────────────────────────── */
.wcb-card-excerpt {
display: none;
margin: 0;
font-size: var(--wcb-text-sm);
line-height: var(--wcb-leading-relaxed);
color: var(--wcb-text-secondary);
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.wcb-card-excerpt.wcb-shown {
display: -webkit-box;
}
/* `.wcb-toolbar-start` flex rules live in assets/css/frontend-components.css. */
/* ── Alert me button ───────────────────────────────────────────────────── */
.wcb-alert-me-btn {
display: inline-flex;
align-items: center;
gap: var(--wcb-space-xs); /* 0.375rem ≈ 6px → xs */
padding: var(--wcb-space-xs) var(--wcb-space-md); /* 0.875rem ≈ 14px → md */
font-size: var(--wcb-text-sm);
font-weight: var(--wcb-font-medium);
color: var(--wp--preset--color--wcb-muted);
background: var(--wcb-base);
border: 1px solid var(--wcb-border);
border-radius: var(--wcb-radius-sm);
cursor: pointer;
transition: border-color var(--wcb-transition-snappy), color var(--wcb-transition-snappy), background-color var(--wcb-transition-snappy);
white-space: nowrap;
}
.wcb-alert-me-btn:hover {
border-color: var(--wcb-primary);
color: var(--wcb-primary);
background: var(--wcb-info-bg);
}
.wcb-alert-me-btn.wcb-alert-saved {
border-color: var(--wcb-success);
color: var(--wcb-success);
background: var(--wcb-success-bg-soft);
cursor: default;
}
.wcb-alert-me-btn:disabled {
opacity: 0.6;
cursor: wait;
}
/* ── Screen reader only ───────────────────────────────────────────────────── */
/* WordPress-core class kept for parity with theme-supplied screen-reader
* helpers some search inputs reuse. `wcb-ui.css` ships `.wcb-sr-only`
* for new plugin code. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
word-wrap: normal;
}
/* ── Notice + error ───────────────────────────────────────────────────────── */
.wcb-notice-error {
color: var(--wcb-danger);
background: var(--wcb-danger-bg);
border: 1px solid var(--wcb-danger-border, #fecaca);
border-radius: var(--wcb-radius-md);
padding: var(--wcb-space-md) var(--wcb-space-lg);
font-size: var(--wcb-text-base);
margin: 0;
}
/* ── Notice + Success ──────────────────────────────────────────────────────────────── */
.wcb-notice-success {
background: var(--wcb-success-bg-soft);
border: 1px solid var(--wcb-success-border, #bbf7d0);
border-radius: var(--wcb-radius-md);
padding: var(--wcb-space-md) var(--wcb-space-lg);
font-size: var(--wcb-text-base);
margin: 0;
}
/* ── Empty state ─────────────────────────────────────────────────────────── */
.wcb-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wcb-space-md);
padding: var(--wcb-space-4xl) var(--wcb-space-lg);
text-align: center;
color: var(--wcb-text-tertiary);
}
.wcb-empty-state [data-lucide] {
width: var(--wcb-icon-2xl);
height: var(--wcb-icon-2xl);
}
.wcb-empty-state-text {
margin: 0;
font-size: var(--wcb-text-base);
color: var(--wcb-text-secondary);
}
/* ── View switcher ───────────────────────────────────────────────────────── */
.wcb-view-switcher {
display: flex;
gap: 2px;
background: var(--wcb-surface);
border-radius: var(--wcb-radius-sm);
padding: 2px;
flex-shrink: 0;
}
.wcb-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: var(--wcb-space-3xl);
height: 30px; /* component dimension */
padding: 0;
border: none;
background: transparent;
border-radius: var(--wcb-space-xs);
color: var(--wcb-text-secondary);
cursor: pointer;
transition: background var(--wcb-transition-fast), color var(--wcb-transition-fast);
}
.wcb-view-btn [data-lucide] {
width: var(--wcb-space-lg);
height: var(--wcb-space-lg);
}
.wcb-view-btn:hover {
background: var(--wcb-border);
color: var(--wcb-contrast);
}
.wcb-view-btn.wcb-view-btn--active {
background: var(--wcb-base);
color: var(--wcb-primary);
box-shadow: var(--wcb-shadow-sm);
}
/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
.wcb-job-card,
.wcb-layout-btn,
.wcb-view-btn,
.wcb-bookmark-btn,
.wcb-cbtn,
.wcb-load-more-btn,
.wcb-chip,
.wcb-alert-me-btn,
.wcb-active-chip-remove {
transition: none;
}
}