/** * Daily Jobs – Homepage job-posting section styles * Extracted 1:1 from previous theme jobposting.php */ /* 1. Glass Engine Variables – theme-aware (Astra + WP presets + safe fallbacks) * * Astra Global Palette (Customize → Global → Colors) exposes: * --ast-global-color-0 Brand / primary accent * --ast-global-color-1 Alt brand / hover * --ast-global-color-2 Heading * --ast-global-color-3 Body text * --ast-global-color-4 Subtle / muted background * --ast-global-color-5 Paper / main background (often white) * --ast-global-color-6 Border / divider * --ast-global-color-7 Dark subtle * --ast-global-color-8 Strongest dark / black * * Priority: Astra vars → WP theme.json presets → plugin brand fallbacks. * Non-Astra themes simply skip missing vars and use the next fallback. */ #job-posting-section.glass-liquid-theme { --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.9); --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05); --liquid-highlight: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 70%); /* Accent / brand */ --accent-color: var(--ast-global-color-0, var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #0F4CFF))); --brand-600: var(--ast-global-color-0, #2159E5); --brand-400: var(--ast-global-color-1, #7CA2FF); --brand-200: var(--ast-global-color-4, #BCCFFF); --brand-050: var(--ast-global-color-4, var(--wp--preset--color--base, #F0F4FF)); /* Text */ --text-primary: var(--ast-global-color-2, var(--ast-global-color-3, var(--wp--preset--color--foreground, var(--wp--preset--color--contrast, #1a1a1a)))); --text-secondary: var(--ast-global-color-3, var(--wp--preset--color--secondary, #555555)); /* Surfaces */ --paper: var(--ast-global-color-5, var(--wp--preset--color--base, #FFFFFF)); --djm-border-color: var(--ast-global-color-6, rgba(0, 0, 0, 0.1)); /* Layout tokens */ --djm-section-pad-x: 30px; /* desktop horizontal; mobile overrides to 10px */ --djm-sidebar-min: 260px; --djm-sidebar-max: 300px; --djm-grid-gap: clamp(1rem, 2vw, 1.625rem); background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, var(--brand-050) 95%, rgba(0, 0, 0, 0.05) 100%); /* Desktop: 30px horizontal padding (plugin-owned, not .site-content) */ padding: 1.25rem 30px 3rem; position: relative; width: 100%; box-sizing: border-box; } /* 2. Layout & Grid – plugin-owned container, no global .site-content override */ #job-posting-section.glass-liquid-theme .container { max-width: 100%; width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; box-sizing: border-box; } /* Responsive sidebar + results: fixed 300px only as preferred min, not a hard desktop lock */ #job-posting-section.glass-liquid-theme .job-listing-wrapper { display: grid; grid-template-columns: minmax(var(--djm-sidebar-min), var(--djm-sidebar-max)) minmax(0, 1fr); gap: var(--djm-grid-gap); align-items: start; width: 100%; box-sizing: border-box; } #job-posting-section.glass-liquid-theme .job-results-column, #job-posting-section.glass-liquid-theme .sidebar-filter-column { min-width: 0; width: 100%; box-sizing: border-box; } /* Keep tabs and job grid on the same horizontal content boundary */ #job-posting-section.glass-liquid-theme .job-results-column .jst-tabs, #job-posting-section.glass-liquid-theme .job-results-column .job_listings.glass-grid, #job-posting-section.glass-liquid-theme .job-results-column .job_listings { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* 3. Typography & Heading */ #job-posting-section.glass-liquid-theme .section-title { text-align: center; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; color: var(--text-primary); margin-bottom: 32px; letter-spacing: -0.5px; position: relative; display: inline-block; width: 100%; } #job-posting-section.glass-liquid-theme .section-title::after { content: ''; display: block; width: 64px; height: 3px; background: var(--accent-color); margin: 12px auto 0; border-radius: 2px; } /* 4. Glass Panel (Sidebar & Cards Base) */ #job-posting-section.glass-liquid-theme .glass-panel, #job-posting-section.glass-liquid-theme .job_listings li.job_listing { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--glass-shadow); overflow: hidden; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease; position: relative; } /* Liquid Highlight Effect (Pure CSS, GPU Accelerated) */ #job-posting-section.glass-liquid-theme .job_listings li.job_listing::before, #job-posting-section.glass-liquid-theme .glass-panel::before { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: var(--liquid-highlight); transform: rotate(30deg); pointer-events: none; opacity: 0; transition: opacity 0.4s ease, transform 0.6s ease; will-change: transform, opacity; } #job-posting-section.glass-liquid-theme .job_listings li.job_listing:hover::before, #job-posting-section.glass-liquid-theme .glass-panel:hover::before { opacity: 1; transform: rotate(0deg) translate(10%, 10%); } /* 5. Sidebar Specifics */ #job-posting-section.glass-liquid-theme .sidebar-mobile-header { display: none; } #job-posting-section.glass-liquid-theme .sidebar-item-wrap { margin-bottom: 14px; } #job-posting-section.glass-liquid-theme .sidebar-filter-toggle { padding: 14px 18px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.05); transition: background 0.2s; } #job-posting-section.glass-liquid-theme .sidebar-filter-toggle:hover { background: rgba(255,255,255,0.5); } #job-posting-section.glass-liquid-theme .sidebar-filter-toggle h4 { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary); } #job-posting-section.glass-liquid-theme .toggle-icon { color: var(--text-secondary); transition: transform 0.3s; } #job-posting-section.glass-liquid-theme .sidebar-filter-toggle.is-collapsed .toggle-icon { transform: rotate(-90deg); } #job-posting-section.glass-liquid-theme .filter-content { padding: 14px 18px 18px; } /* 6. Glass Inputs */ #job-posting-section.glass-liquid-theme .glass-input { width: 100%; max-width: 100%; border-radius: 12px; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.6); color: var(--text-primary); font-size: 16px; outline: none; transition: all 0.3s; box-sizing: border-box; /* ✅ Prevent select elements from blowing out the drawer width */ min-width: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #job-posting-section.glass-liquid-theme .glass-input:focus { background: rgba(255,255,255,0.9); border-color: var(--accent-color); box-shadow: 0 10px 25px rgba(5, 26, 155, 0.18); } /* ✅ Custom select arrow (replaces the one stripped by appearance:none) */ #job-posting-section.glass-liquid-theme select.glass-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* ✅ Constrain glass-panel cards so they never exceed the drawer width */ #job-posting-section.glass-liquid-theme .sidebar-item-wrap { max-width: 100%; overflow: hidden; } /* 7. Tabs */ #job-posting-section.glass-liquid-theme .jst-tabs { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; } #job-posting-section.glass-liquid-theme .jst-tab { flex: 1; min-width: 120px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.4); color: var(--text-secondary); cursor: pointer; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } #job-posting-section.glass-liquid-theme .jst-tab--active { background: linear-gradient(135deg, #0F4CFF 0%, #2563EB 100%)!important; border-color: transparent; box-shadow: 0 8px 20px rgba(5, 26, 155, 0.16); } #job-posting-section.glass-liquid-theme .jst-tab--active, #job-posting-section.glass-liquid-theme .jst-tab--active span { color: #ffffff !important; } #job-posting-section.glass-liquid-theme .jst-count { background: #0f4cff0f; color: #0f4cff; padding: 2px 7px; border-radius: 20px; font-size: 11px; margin-left: auto; } #job-posting-section.glass-liquid-theme .jst-tab--active .jst-count { background: rgba(255,255,255,0.25); } /* Inline Filters tab button — compact, accent-outline "action" style so it reads as a button, not a filter state; mobile/tablet only (sidebar is a hidden drawer there) */ #job-posting-section.glass-liquid-theme .jst-tab-filter { display: none; flex: 0 0 auto; min-width: 0; padding: 9px 15px; background: #fff; border: 1.5px solid var(--accent-color); color: var(--accent-color); font-weight: 700; } #job-posting-section.glass-liquid-theme .jst-tab-filter:hover { background: var(--brand-050); } #job-posting-section.glass-liquid-theme .jst-tab-filter:active { background: var(--accent-color); color: #ffffff; } /* 7b. Same row: [Grade dropdown] | Category pills — drilldown replaces pills in-place */ #job-posting-section.glass-liquid-theme .jst-grade-row { margin: 0 0 16px; } #job-posting-section.glass-liquid-theme .jst-grade-scroll { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; flex-wrap: nowrap; } #job-posting-section.glass-liquid-theme .jst-grade-scroll::-webkit-scrollbar { height: 0; } #job-posting-section.glass-liquid-theme .jst-grade-select-wrap { flex: 0 0 auto; display: inline-flex; align-items: center; } #job-posting-section.glass-liquid-theme .jst-grade-select, #job-posting-section.glass-liquid-theme #job_filter_grade_top { appearance: none; -webkit-appearance: none; -moz-appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 7px 28px 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f4cff' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; background-size: 12px; color: var(--text-primary) !important; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.3; max-width: 160px; min-height: 34px; transition: border-color 0.15s ease; } #job-posting-section.glass-liquid-theme .jst-grade-select:hover, #job-posting-section.glass-liquid-theme .jst-grade-select:focus, #job-posting-section.glass-liquid-theme #job_filter_grade_top:hover, #job-posting-section.glass-liquid-theme #job_filter_grade_top:focus { border-color: var(--brand-400); outline: none; } #job-posting-section.glass-liquid-theme .jst-grade-select option, #job-posting-section.glass-liquid-theme #job_filter_grade_top option { color: #111; background: #fff; font-weight: 500; } /* Pills share the same flex row as the grade select */ #job-posting-section.glass-liquid-theme .jst-category-pills, #job-posting-section.glass-liquid-theme #jst-category-pills { display: contents; } #job-posting-section.glass-liquid-theme .jst-grade-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.8); background: transparent; color: var(--text-primary)!important; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease; } #job-posting-section.glass-liquid-theme .jst-grade-chip:hover { border-color: var(--brand-400); } #job-posting-section.glass-liquid-theme .jst-grade-chip--active, #job-posting-section.glass-liquid-theme .jst-grade-chip--active span:not(.jst-grade-count) { background: rgba(255,255,255,0.4); border-color:#0f4cff; color: #0f4cff !important; } #job-posting-section.glass-liquid-theme .jst-grade-count { font-family: ui-monospace, SFMono-Regular, "Roboto Mono", monospace; font-size: 11px; background: rgba(15,76,255,0.10); color: var(--accent-color); padding: 1px 7px; border-radius: 20px; } #job-posting-section.glass-liquid-theme .jst-grade-back { gap: 7px; } #job-posting-section.glass-liquid-theme .jst-grade-back-arrow { font-size: 14px; line-height: 1; } #job-posting-section.glass-liquid-theme .jst-grade-scroll { padding-right: 4px; } /* Desktop: no touch/swipe, so give a real (thin) scrollbar instead of hiding it entirely */ @media (min-width: 992px) { #job-posting-section.glass-liquid-theme .jst-grade-scroll { scrollbar-width: thin; scrollbar-color: var(--brand-400) transparent; cursor: grab; } #job-posting-section.glass-liquid-theme .jst-grade-scroll::-webkit-scrollbar { height: 6px; } #job-posting-section.glass-liquid-theme .jst-grade-scroll::-webkit-scrollbar-track { background: transparent; } #job-posting-section.glass-liquid-theme .jst-grade-scroll::-webkit-scrollbar-thumb { background: var(--brand-200); border-radius: 10px; } #job-posting-section.glass-liquid-theme .jst-grade-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-400); } } /* 8. Job Grid & Card Meta Overrides */ #job-posting-section.glass-liquid-theme .job_listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 0; } #job-posting-section.glass-liquid-theme #jst-results { min-height: 220px; } #job-posting-section.glass-liquid-theme .job_listings li.job_listing { padding: 0; margin: 0; border-radius: 24px; /* Override default WPJM styles */ } #job-posting-section.glass-liquid-theme .job_listings li.job_listing:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 15px 40px rgba(31, 38, 135, 0.15); border-color: rgba(255,255,255,1); } /* Glass Meta Tags (Pills) */ #job-posting-section.glass-liquid-theme .job_type, #job-posting-section.glass-liquid-theme .location, #job-posting-section.glass-liquid-theme .company_name { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); display: inline-block; margin: 4px 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* Specific Type Colors */ #job-posting-section.glass-liquid-theme .job_type.full_time { background: rgba(16, 185, 129, 0.15); color: #065f46; border-color: rgba(16, 185, 129, 0.3); } #job-posting-section.glass-liquid-theme .job_type.part_time { background: rgba(59, 130, 246, 0.15); color: #1e3a8a; border-color: rgba(59, 130, 246, 0.3); } #job-posting-section.glass-liquid-theme .job_type.contractor { background: rgba(249, 115, 22, 0.15); color: #7c2d12; border-color: rgba(249, 115, 22, 0.3); } /* 9. Load More & Buttons — compact, minimal, accent-outline pill that fills on interaction */ #job-posting-section.glass-liquid-theme .glass-btn, #job-posting-section.glass-liquid-theme .glass-btn-load { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--accent-color); background: #fff; color: var(--accent-color); font-weight: 700; font-size: 13px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; box-shadow: 0 2px 8px rgba(15,76,255,0.08); } #job-posting-section.glass-liquid-theme .glass-btn:hover, #job-posting-section.glass-liquid-theme .glass-btn-load:hover { background: var(--accent-color); color: #ffffff; box-shadow: 0 8px 18px rgba(15,76,255,0.22); } #job-posting-section.glass-liquid-theme .glass-btn:active, #job-posting-section.glass-liquid-theme .glass-btn-load:active { box-shadow: 0 2px 8px rgba(15,76,255,0.18); } #job-posting-section.glass-liquid-theme #jst-load-more { display: block; margin: 26px auto 6px; text-transform: uppercase; letter-spacing: 0.6px; font-size: 12.5px; padding: 10px 26px; } /* 10. Responsive & Mobile Drawer */ #job-posting-section.glass-liquid-theme .jst-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #job-posting-section.glass-liquid-theme .jst-filter-overlay.active { opacity: 1; pointer-events: auto; } @media(max-width: 991px) { /* Mobile: 10px horizontal padding as required */ #job-posting-section.glass-liquid-theme { padding: 1rem 10px 3rem !important; --djm-section-pad-x: 10px; } #job-posting-section.glass-liquid-theme .job-listing-wrapper { display: block; } /* App-style bottom sheet instead of a side drawer */ #job-posting-section.glass-liquid-theme .sidebar-filter-column { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: auto; max-height: 82vh; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 22px 22px 0 0; z-index: 9999; padding: 22px 20px 30px; overflow-y: auto; overflow-x: hidden; /* ✅ Prevent horizontal blowout from long select options */ transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 -12px 40px rgba(11,29,58,0.18); border: none; border-top: 1px solid rgba(0,0,0,0.06); box-sizing: border-box; /* ✅ Padding doesn't add to width */ } #job-posting-section.glass-liquid-theme .sidebar-filter-column.active { transform: translateY(0); } #job-posting-section.glass-liquid-theme .sidebar-mobile-header { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 14px; padding-top: 8px; border-bottom: 1px solid rgba(0,0,0,0.08); } #job-posting-section.glass-liquid-theme .sidebar-mobile-header::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 4px; background: rgba(0,0,0,0.15); } #job-posting-section.glass-liquid-theme .sidebar-mobile-header h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary); } #job-posting-section.glass-liquid-theme .sidebar-mobile-header button { background: none; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--text-secondary); cursor: pointer; } #job-posting-section.glass-liquid-theme .jst-filter-overlay { backdrop-filter: none; background: rgba(11,29,58,0.45); } /* Sticky segmented tab bar, brand-blue active state, monospace counts */ #job-posting-section.glass-liquid-theme .jst-tabs { position: static; top: 0; z-index: 20; display: flex; flex-wrap: nowrap; gap: 6px; padding: 8px 4px; margin: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,0.07); overflow-x: auto; scrollbar-width: none; } #job-posting-section.glass-liquid-theme .jst-tabs::-webkit-scrollbar { display: none; } #job-posting-section.glass-liquid-theme .jst-tab { flex: 1 0 auto; min-width: 100px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.8); box-shadow: none; font-size: 13px; } #job-posting-section.glass-liquid-theme .jst-tab-filter { display: flex; min-width: 0; flex: 0 0 auto; padding: 9px 14px; background: #fff; border: 1.5px solid var(--accent-color); color: var(--accent-color); font-weight: 700; } #job-posting-section.glass-liquid-theme .jst-tab-filter:active { background: var(--accent-color); color: #ffffff; } #job-posting-section.glass-liquid-theme .jst-tab--active { background: var(--accent-color) !important; box-shadow: none; } #job-posting-section.glass-liquid-theme .jst-tab--active, #job-posting-section.glass-liquid-theme .jst-tab--active span { color: #ffffff !important; } #job-posting-section.glass-liquid-theme .jst-count { font-family: ui-monospace, SFMono-Regular, "Roboto Mono", monospace; font-size: 11px; } #job-posting-section.glass-liquid-theme .jst-tab--active .jst-count { background: rgba(255,255,255,0.28); } /* Flat, lightweight cards — no blur, no hover shimmer (touch has no hover anyway) */ #job-posting-section.glass-liquid-theme .glass-panel, #job-posting-section.glass-liquid-theme .job_listings li.job_listing { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.05); } #job-posting-section.glass-liquid-theme .job_listings li.job_listing::before, #job-posting-section.glass-liquid-theme .glass-panel::before { display: none; } #job-posting-section.glass-liquid-theme .job_listings li.job_listing:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } #job-posting-section.glass-liquid-theme .glass-btn { box-shadow: none; } } @media(max-width: 768px) { #job-posting-section.glass-liquid-theme .job_listings { grid-template-columns: 1fr; gap: 14px; } #job-posting-section.glass-liquid-theme .jst-tab .tab-icon { display: none; } #job-posting-section.glass-liquid-theme .jst-tab span:not(.jst-count) { font-size: 12.5px; } } /* ===== Sponsored / Native Ad Card ===== */ /* jobposting.php এর