/* ========================================================================== HFJ Filter Panel Shared filter UI for /latest-jobs and /search-resumes. Scoped to .hfj-filters so it never leaks into other Select2 instances. Loaded after frontend.css (via @push('styles')) so it wins on equal specificity; the .frontend-wrapper prefix matches the existing overrides. ========================================================================== */ .hfj-filters { --hfj-brand: #6152aa; --hfj-brand-dark: #4c4088; --hfj-brand-soft: rgba(97, 82, 170, 0.10); --hfj-brand-softer: rgba(97, 82, 170, 0.06); --hfj-border: #e4e7ec; --hfj-text: #1f2937; --hfj-muted: #6b7280; /* The value a single-select is currently carrying. Its own purple, a shade lighter than the brand so a filled field reads as filled without competing with the search button. */ --hfj-value: #7466bd; --hfj-value-border: rgba(116, 102, 189, 0.55); --hfj-value-wash: linear-gradient(180deg, #f8f7fd 0%, #f2f0fb 100%); /* Applied-filter accent. The tint is light enough that chip text has to be the deep end of the same hue to stay readable on it. */ --hfj-accent: #7cdbe3; --hfj-accent-deep: #3fb9c4; --hfj-accent-ink: #0d5b63; --hfj-accent-soft: rgba(124, 219, 227, 0.28); /* One light source, top-left, for every raised surface in the panel: a bright inset edge along the top and a stacked drop shadow below. */ --hfj-lift: 0 1px 1px rgba(16, 24, 40, 0.04), 0 4px 10px rgba(16, 24, 40, 0.05); --hfj-lift-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 10px 22px rgba(97, 82, 170, 0.14); position: relative; background: linear-gradient(180deg, #fff 0%, #fcfcfe 100%); border: 1px solid var(--hfj-border); border-radius: 20px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px rgba(16, 24, 40, 0.08), 0 28px 56px rgba(16, 24, 40, 0.06); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* The whole card lifts when the pointer is anywhere inside it — the shadow deepens and picks up the brand tint, so the panel reads as the active surface while you work through it. Held through :focus-within so it does not drop while a field is being typed in or tabbed to. Deliberately shadow-only, no transform: Select2 appends its dropdowns to and positions them from the control's measured box, so moving the card even a pixel would leave an open dropdown misaligned the moment the pointer crossed onto it (the dropdown sits outside .hfj-filters, so reaching for it counts as leaving the panel). */ .hfj-filters:hover, .hfj-filters:focus-within { border-color: rgba(97, 82, 170, 0.28); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(16, 24, 40, 0.05), 0 20px 44px rgba(97, 82, 170, 0.18), 0 44px 84px rgba(16, 24, 40, 0.10); } /* Brand rail across the top edge — reads as the lit face of the card. */ .hfj-filters::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--hfj-brand) 0%, #8b7ad0 45%, var(--hfj-accent) 100%); transition: box-shadow 0.3s ease; z-index: 1; } /* The rail glows with the card, so the lift starts at the top edge. */ .hfj-filters:hover::before, .hfj-filters:focus-within::before { box-shadow: 0 2px 14px rgba(97, 82, 170, 0.55); } /* --------------------------------------------------------------- header -- */ .hfj-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: linear-gradient(180deg, var(--hfj-brand-softer) 0%, rgba(255, 255, 255, 0) 100%); border-bottom: 1px solid var(--hfj-border); box-shadow: 0 1px 0 #fff; } /* .hfj-filters prefix so the theme's h2 sizing doesn't win */ .hfj-filters .hfj-filters__title { display: flex; align-items: center; gap: 9px; font-size: 1.0625rem !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 0; text-transform: none; color: var(--hfj-text) !important; margin: 0 !important; } .hfj-filters__title .fea, .hfj-filters__title svg { width: 18px; height: 18px; color: var(--hfj-brand); } .hfj-filters__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: linear-gradient(180deg, #7466bd 0%, var(--hfj-brand) 100%); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 5px rgba(97, 82, 170, 0.35); } .hfj-filters__head-actions { display: flex; align-items: center; gap: 8px; } /* "Clear all" is a raised pill rather than a bare link: it sits next to the collapse toggle, so it needs the same physical weight to read as a control. The ⟲ is drawn in CSS so the button stays markup-compatible with the two pages that already ship it. */ /* Solid accent pill with white text — the same badge treatment as the skill tags on the candidate cards and the homepage tiles. */ .hfj-filters__reset { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 20px; background: var(--hfj-accent); font-size: 0.8125rem; font-weight: 600; color: #fff; box-shadow: 0 2px 6px rgba(13, 91, 99, 0.18); transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .hfj-filters__reset::before { content: '\21BA'; font-size: 0.9375rem; line-height: 1; transition: transform 0.35s ease; } .hfj-filters__reset:hover { color: #fff; background: var(--hfj-accent-deep); box-shadow: 0 8px 18px rgba(13, 91, 99, 0.28); transform: translateY(-1px); } .hfj-filters__reset:hover::before { transform: rotate(-180deg); } /* Pressed: drops back onto the card and the shadow collapses inward. */ .hfj-filters__reset:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.10); } .hfj-filters__toggle { display: none; align-items: center; gap: 6px; border: 1px solid var(--hfj-border); background: linear-gradient(180deg, #fff 0%, #f7f8fa 100%); border-radius: 999px; padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--hfj-text); box-shadow: inset 0 1px 0 #fff, var(--hfj-lift); } .hfj-filters__toggle svg { width: 16px; height: 16px; transition: transform 0.25s ease; } .hfj-filters.is-collapsed .hfj-filters__toggle svg { transform: rotate(-180deg); } .hfj-filters__body { padding: 20px; } /* --------------------------------------------------------------- fields -- */ .hfj-field { display: flex; flex-direction: column; gap: 6px; /* Raised above its neighbours so the zoomed control overlaps them rather than being clipped by the next field in the grid. */ position: relative; z-index: 0; transition: z-index 0s; } .hfj-field:hover, .hfj-field:focus-within { z-index: 3; } .hfj-field__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: #475467; text-transform: none; } .hfj-field__count { display: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: linear-gradient(180deg, #8477c6 0%, var(--hfj-value) 100%); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(76, 64, 136, 0.25); } .hfj-field__count.is-visible { display: inline-flex; } /* The whole field reacts as one on hover — label included — so it is obvious which one the pointer is on when six of them sit in a grid. The control scales up off its own centre, which reads as the field coming forward. */ .hfj-field:hover .hfj-field__label { color: var(--hfj-brand-dark); } /* Kept small on purpose: the grid gutter is 16px, so 3% on a ~340px field overhangs ~5px a side and never collides with its neighbour. */ .hfj-filters .hfj-field { --hfj-zoom: scale(1.03); } /* Keyword / plain text inputs inside the panel */ .hfj-filters .hfj-field .form-control:not(.select2-hidden-accessible) { height: 48px !important; min-height: 48px !important; border: 1.5px solid var(--hfj-border) !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 0.9375rem !important; color: var(--hfj-text); background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%) !important; box-shadow: var(--hfj-lift) !important; transform-origin: center; transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); } .hfj-filters .hfj-field:hover .form-control:not(.select2-hidden-accessible):not(:focus) { border-color: var(--hfj-brand) !important; background: linear-gradient(180deg, #fff 0%, #faf9fe 100%) !important; box-shadow: 0 0 0 4px var(--hfj-brand-soft), var(--hfj-lift-hover) !important; transform: var(--hfj-zoom); } /* Focus keeps the zoom, so tabbing through reads the same as hovering. */ .hfj-filters .hfj-field .form-control:not(.select2-hidden-accessible):focus { border-color: var(--hfj-brand) !important; box-shadow: 0 0 0 4px var(--hfj-brand-soft), var(--hfj-lift-hover) !important; transform: var(--hfj-zoom); } /* ------------------------------------------------------- select2: shared -- */ /* frontend.css and the theme's style.min.css style Select2 with !important in several places, so the panel has to answer in kind. Everything here is scoped to .hfj-filters / .hfj-dropdown, so nothing else is affected. */ .frontend-wrapper .hfj-filters .select2-container { width: 100% !important; } .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single, .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--multiple { border: 1.5px solid var(--hfj-border) !important; border-radius: 12px !important; background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%) !important; box-shadow: var(--hfj-lift) !important; backdrop-filter: none !important; transform: none !important; transform-origin: center; transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) !important; } /* Hover is driven from .hfj-field, not the selection itself, so the label and the box light up together and the multi-selects react even when the pointer is over the gap beside their chips. The open state is excluded on purpose: Select2 measures the control to place its dropdown, and a scaled box would leave the panel hanging off-edge. */ .frontend-wrapper .hfj-filters .hfj-field:hover .select2-container--default:not(.select2-container--open) .select2-selection--single, .frontend-wrapper .hfj-filters .hfj-field:hover .select2-container--default:not(.select2-container--open) .select2-selection--multiple { border-color: var(--hfj-brand) !important; background: linear-gradient(180deg, #fff 0%, #faf9fe 100%) !important; box-shadow: 0 0 0 4px var(--hfj-brand-soft), var(--hfj-lift-hover) !important; transform: var(--hfj-zoom) !important; } /* Kills the theme's glassmorphism overlay, which sat on top of the chips. */ .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single::before, .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--multiple::before { display: none !important; } .frontend-wrapper .hfj-filters .select2-container--default.select2-container--focus .select2-selection--single, .frontend-wrapper .hfj-filters .select2-container--default.select2-container--focus .select2-selection--multiple, .frontend-wrapper .hfj-filters .select2-container--default.select2-container--open .select2-selection--single, .frontend-wrapper .hfj-filters .select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--hfj-brand) !important; box-shadow: 0 0 0 4px var(--hfj-brand-soft), var(--hfj-lift-hover) !important; } /* Keyboard focus zooms like hover does; opening the list drops back to the measured size so the dropdown lines up with the control. */ .frontend-wrapper .hfj-filters .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single, .frontend-wrapper .hfj-filters .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--multiple { transform: var(--hfj-zoom) !important; } .frontend-wrapper .hfj-filters .select2-container--default.select2-container--open .select2-selection--single, .frontend-wrapper .hfj-filters .select2-container--default.select2-container--open .select2-selection--multiple { transform: none !important; } /* ------------------------------------------------------- select2: single -- */ .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single { height: 48px !important; min-height: 48px !important; display: flex; align-items: center; padding: 0 38px 0 14px !important; } .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.3; font-size: 0.9375rem !important; font-weight: 500; color: var(--hfj-text); } .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single .select2-selection__placeholder { font-size: 0.9375rem !important; font-weight: 400 !important; color: #9ca3af !important; } /* Arrow. frontend.css:638 pins this box to `height: 4rem !important` and `right: 1.75rem !important` — 64px tall on a 48px control — so the theme's triangle, which centres itself inside that box, ended up sitting ~6px below the control's middle with its hit area hanging out the bottom. Re-anchor the box to the control's own height (top/bottom 0 + auto height beats a fixed one) and centre the mark with flex rather than a 50% + margin guess. The !important is answering theirs, not raising the stakes. */ .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0 !important; bottom: 0 !important; right: 13px !important; height: auto !important; width: 20px !important; display: flex; align-items: center; justify-content: center; /* Clicks fall through to the selection, which is what opens the list. */ pointer-events: none; } /* A two-sided chevron instead of the solid triangle: lighter, and it can rotate between states instead of being redrawn with a different border box. */ .frontend-wrapper .hfj-filters .select2-container--default .select2-selection--single .select2-selection__arrow b { position: static !important; width: 9px !important; height: 9px !important; /* The ink sits on the lower-right corner, so once rotated its centroid lands ~2.5px below the box centre. A negative margin in a centring flex parent moves the box by half its value, hence -5px to cancel ~2.5px. */ margin: -5px 0 0 0 !important; border: 0 !important; border-right: 2px solid var(--hfj-brand) !important; border-bottom: 2px solid var(--hfj-brand) !important; border-radius: 0 0 2px 0; transform: rotate(45deg); transition: transform 0.25s ease, border-color 0.25s ease; } /* Open: the chevron flips up rather than swapping border boxes. */ .frontend-wrapper .hfj-filters .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-width: 0 2px 2px 0 !important; border-right-color: var(--hfj-brand-dark) !important; border-bottom-color: var(--hfj-brand-dark) !important; /* Flipped, so the centroid is now above the box centre — mirror the nudge. */ margin-top: 5px !important; transform: rotate(-135deg); } /* A filter that is actually filtering gets the value-purple chevron, matching the text beside it. */ .frontend-wrapper .hfj-filters .select2-container.hfj-has-value .select2-selection--single .select2-selection__arrow b { border-right-color: var(--hfj-value) !important; border-bottom-color: var(--hfj-value) !important; } /* A chosen value looks chosen in every filter, not just in the multi-selects: the "All Countries" style catch-all option is a real