/* ============================================================ Expatian design tokens. brand = primary/CTA color, accent = secondary highlight color (badges, "Top" listings, etc.) Font = Inter. Dark mode toggled via a `.dark` class on ; color THEME toggled via one of the `.theme-*` classes on (see the theme blocks below) — set from Admin → Settings → Appearance, applied on load by the inline script in (localStorage-cached, same pattern as dark mode) and kept in sync by assets/js/auth.js. ============================================================ */ :root { /* Default theme: "Ocean Indigo" — deep indigo + warm coral. */ --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-900: #312e81; --accent-50: #fff1f2; --accent-100: #ffe4e6; --accent-400: #fb7185; --accent-500: #f43f5e; --accent-600: #e11d48; --accent-700: #be123c; --bg: #f8fafc; --bg-subtle: #f1f5f9; --surface: #ffffff; --border: #e2e8f0; --text: #0f172a; --text-soft: #64748b; --danger: #dc2626; --success: #16a34a; --radius: 12px; --radius-btn: 8px; --shadow: 0 1px 2px rgba(15,23,42,0.06); --font: 'Inter', system-ui, sans-serif; } /* Explicit theme aliases (selectable in Appearance settings / header switcher). */ html.theme-ocean-indigo { --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5; --brand-700: #4338ca; --brand-900: #312e81; --accent-50: #fff1f2; --accent-100: #ffe4e6; --accent-400: #fb7185; --accent-500: #f43f5e; --accent-600: #e11d48; --accent-700: #be123c; } html.theme-desert-teal { --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-400: #2dd4bf; --brand-500: #14b8a6; --brand-600: #0d9488; --brand-700: #0f766e; --brand-900: #134e4a; --accent-50: #fefce8; --accent-100: #fef9c3; --accent-400: #facc15; --accent-500: #eab308; --accent-600: #ca8a04; --accent-700: #a16207; } /* "Sky" — blue + orange. */ html.theme-sky { --brand-50: #f0f9ff; --brand-100: #e0f2fe; --brand-400: #38bdf8; --brand-500: #0ea5e9; --brand-600: #0284c7; --brand-700: #0369a1; --brand-900: #0c4a6e; --accent-50: #fff7ed; --accent-100: #ffedd5; --accent-400: #fb923c; --accent-500: #f97316; --accent-600: #ea580c; --accent-700: #c2410c; } /* "Terracotta" — warm clay + deep navy. */ html.theme-terracotta { --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-400: #fb923c; --brand-500: #ea580c; --brand-600: #c2410c; --brand-700: #9a3412; --brand-900: #7c2d12; --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-400: #60a5fa; --accent-500: #2563eb; --accent-600: #1d4ed8; --accent-700: #1e40af; } /* "Midnight Emerald" — deep emerald + muted gold. */ html.theme-midnight-emerald { --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-400: #34d399; --brand-500: #10b981; --brand-600: #059669; --brand-700: #047857; --brand-900: #064e3b; --accent-50: #fffbeb; --accent-100: #fef3c7; --accent-400: #fbbf24; --accent-500: #f59e0b; --accent-600: #d97706; --accent-700: #b45309; } html.dark { --bg: #030712; --bg-subtle: #111827; --surface: #111827; --border: #1f2937; --text: #f3f4f6; --text-soft: #9ca3af; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background .15s ease, color .15s ease; } h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; color: var(--text); margin: 0 0 .5rem; line-height: 1.2; } a { color: var(--brand-600); text-decoration: none; } a:hover { text-decoration: underline; } html.dark a { color: var(--brand-400); } img { max-width: 100%; display: block; } button { font-family: inherit; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; } /* ---------------- Header ---------------- */ .site-header { background: var(--brand-900); border-bottom: none; position: sticky; top: 0; z-index: 40; } .site-header .bar { display: flex; align-items: center; gap: 24px; height: 68px; } .site-header .logo { color: #fff; } .site-header .logo span { color: var(--accent-400); } .site-header .logo-icon-box { background: var(--accent-500); } .site-header .nav-links a { color: rgba(255,255,255,.82); } .site-header .nav-links a:hover { color: #fff; } .site-header .icon-btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; } .site-header .icon-btn:hover { background: rgba(255,255,255,.22); } .site-header .btn-outline { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; } .site-header .btn-outline:hover { background: rgba(255,255,255,.12); } .logo { font-family: var(--font); font-weight: 700; font-size: 1.3rem; color: var(--text); white-space: nowrap; } .logo span { color: var(--brand-500); } .nav-links { display: flex; gap: 14px; flex: 2 1 0; align-items: center; flex-wrap: wrap; row-gap: 4px; } .nav-links a { color: var(--text-soft); font-weight: 500; font-size: .92rem; white-space: nowrap; } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-links a.active-link { color: var(--brand-600); } html.dark .nav-links a.active-link { color: var(--brand-400); } .mobile-drawer-subhead { padding: 10px 12px 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft); } .header-actions { display: flex; align-items: center; gap: 10px; } .header-search { flex: 1 1 200px; max-width: 420px; min-width: 0; } .header-search input { width: 100%; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: .88rem; background: var(--bg-subtle); color: var(--text); } .header-search input:focus { outline: 2px solid var(--brand-400); background: var(--surface); } @media (max-width: 900px) { .header-search { display: none; } } .icon-btn { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border); cursor: pointer; color: var(--text-soft); position: relative; } .icon-btn:hover { background: var(--border); } .icon-btn .badge-dot { position: absolute; top: -2px; right: -2px; background: var(--accent-500); color: #fff; font-size: .62rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; cursor: pointer; border: none; padding: 0; overflow: hidden; font-family: inherit; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-btn); font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: transform .05s ease, background .15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.98); } .btn-primary { background: var(--brand-600); color: #fff; } .btn-primary:hover { background: var(--brand-700); } .btn-amber { background: var(--accent-500); color: #fff; } .btn-amber:hover { background: var(--accent-600); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { background: var(--bg-subtle); } .btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: #FEE2E2; } html.dark .btn-danger:hover { background: rgba(220,38,38,0.15); } .btn-block { width: 100%; } .btn-sm { padding: 6px 14px; font-size: .85rem; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------------- Forms ---------------- */ .field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--text); } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: .95rem; background: var(--surface); color: var(--text); } html.dark .field input, html.dark .field select, html.dark .field textarea { border-color: #374151; } .field input::placeholder, .field textarea::placeholder { color: #9ca3af; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-500); } .field textarea { resize: vertical; min-height: 110px; } /* ---------------- Rich-text description editor ---------------- */ .rte-toolbar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; } .rte-btn { border: 1px solid #d1d5db; background: var(--surface); color: var(--text); border-radius: 6px; padding: 5px 10px; font-size: .85rem; cursor: pointer; line-height: 1; } html.dark .rte-btn { border-color: #374151; } .rte-btn:hover { background: var(--bg-subtle); } .rte-editor { width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: .95rem; background: var(--surface); color: var(--text); overflow-y: auto; } html.dark .rte-editor { border-color: #374151; } .rte-editor:focus { outline: 2px solid var(--brand-400); outline-offset: 1px; border-color: var(--brand-500); } .rte-editor:empty:before { content: attr(data-placeholder); color: #9ca3af; } .rte-editor ul, .rte-editor ol { padding-left: 22px; margin: 6px 0; } .rte-editor p, .rte-editor div { margin: 0 0 6px; } .rte-editor-lg { min-height: 320px; max-height: 70vh; line-height: 1.6; } @media (max-width: 640px) { .rte-editor-lg { min-height: 240px; } } .rte-content ul, .rte-content ol { padding-left: 22px; margin: 6px 0; } .rte-content p, .rte-content div { margin: 0 0 6px; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; } .job-type-toggle { display: flex; gap: 10px; } .job-type-option { position: relative; flex: 1; text-align: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--text); transition: border-color .15s, background .15s, color .15s; } .job-type-option input { position: absolute; opacity: 0; pointer-events: none; } .job-type-option.is-active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); } html.dark .job-type-option.is-active { background: rgba(14,165,233,0.12); } .job-photo-dropzone { display: flex; align-items: center; justify-content: center; min-height: 96px; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; color: var(--text-soft); font-size: .9rem; text-align: center; padding: 16px; } .job-photo-dropzone:hover { border-color: var(--brand-500); } .job-photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .job-photo-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .negotiable-box { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: var(--surface); color: var(--text); font-size: .95rem; line-height: 1.25; cursor: pointer; margin: 0; box-sizing: border-box; } html.dark .negotiable-box { border-color: #374151; } .negotiable-box input[type="checkbox"] { width: auto; accent-color: var(--brand-600); margin: 0; } .negotiable-box:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); } html.dark .negotiable-box:has(input:checked) { background: rgba(14,165,233,0.12); } .help-text { font-size: .8rem; color: var(--text-soft); margin-top: 4px; } .error-text { font-size: .85rem; color: var(--danger); margin-top: 6px; } /* ---------------- Card / Ad grid ---------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 20px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 18px; margin: 20px 0; } .mini-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 20px 0; } .listing-grid { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .home-listing-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 18px; } .home-bs-tabs { margin-top: 24px !important; } .home-bs-tabs .nav-link { font-size: 1.15rem !important; font-weight: 700 !important; padding: 18px 28px !important; color: var(--text, #1a1a1a) !important; background: var(--surface, #fff) !important; border: 2px solid var(--border) !important; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: all .18s ease; } .home-bs-tabs .nav-link:hover { border-color: #0D857B !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .home-bs-tabs .nav-link#offering-tab.active { color: #fff !important; background: linear-gradient(90deg, #0D857B 0%, #0F7870 100%) !important; border-color: #0D857B !important; box-shadow: 0 8px 20px rgba(0,0,0,.12); } .home-bs-tabs .nav-link#looking_for-tab.active { color: #fff !important; background: linear-gradient(90deg, #0D857B 0%, #0F7870 100%) !important; border-color: #0D857B !important; box-shadow: 0 8px 20px rgba(0,0,0,.12); } @media (max-width: 600px) { .home-bs-tabs .nav-link { font-size: 1rem !important; padding: 14px 16px !important; } } .home-listing-group-head { justify-content: flex-end; } .home-listing-group { min-width: 0; padding-top: 14px; border-top: 4px solid var(--brand-600); } .home-listing-group-looking_for { border-top-color: var(--accent-500); } .home-listing-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .home-listing-group-head h3 { margin: 0; font-size: 1.15rem; } .home-listing-group-head a { flex-shrink: 0; font-size: .82rem; font-weight: 600; } .home-listing-group .listing-grid { margin-bottom: 0; } .home-listing-group .listing-card { padding: 14px; } .home-listing-group .listing-card-thumb { width: 68px; height: 68px; } .home-listing-empty { padding: 36px 16px; } @media (max-width: 800px) { .home-listing-columns { grid-template-columns: 1fr; gap: 34px; } } .listing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; transition: box-shadow .15s ease; display: block; padding: 16px; } .listing-card:hover { box-shadow: var(--shadow); text-decoration: none; } .listing-card-highlight { border-color: var(--accent-400); box-shadow: 0 0 0 1px var(--accent-400) inset; } .listing-card .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .listing-card-thumb { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--bg-subtle); flex-shrink: 0; position: relative; border: 1px solid var(--border); } .listing-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .listing-card-thumb .thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--text-soft); opacity: .5; } .listing-card-thumb .thumb-count { position: absolute; bottom: 3px; right: 3px; background: rgba(0,0,0,.65); color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 5px; border-radius: 999px; } .listing-card .price { font-weight: 700; color: var(--brand-700); font-size: 1.15rem; } html.dark .listing-card .price { color: var(--brand-400); } /* Ad slots (Google AdSense) — hidden until JS fills them with a configured slot id */ .ad-slot { max-width: 1180px; margin: 16px auto; padding: 0 20px; text-align: center; overflow: hidden; } .ad-slot ins.adsbygoogle { margin: 0 auto; } .ad-slot-label { font-size: .68rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; } .listing-grid .ad-slot-infeed { grid-column: 1 / -1; max-width: none; margin: 0; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .listing-card .title { font-size: .96rem; color: var(--text); margin: 4px 0; font-weight: 500; } .listing-card .meta { font-size: .74rem; color: var(--text-soft); display: flex; align-items: center; gap: 10px; margin-top: 8px; } .listing-card .badges-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .listing-badge { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; display: inline-flex; align-items: center; gap: 3px; } .badge-error { background: #dc2626; } .badge-brand { background: var(--brand-600); } .badge-accent { background: var(--accent-500); } .badge-soft { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); } html.dark .badge-soft { background: rgba(99,102,241,.15); color: var(--brand-400); border-color: rgba(99,102,241,.25); } .badge-success { background: var(--success); } .badge-remote { background: #6366f1; } .badge-urgent { background: #ef4444; } .badge-verified { background: var(--brand-600); } .ad-thumb-row { margin-top: 10px; display: flex; align-items: center; gap: 8px; } .ad-thumb-small { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--border); cursor: zoom-in; flex-shrink: 0; position: relative; border: 1px solid var(--border); } .ad-thumb-small img { width: 100%; height: 100%; object-fit: cover; } .ad-thumb-small.placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-soft); cursor: default; } .ad-thumb-hint { font-size: .72rem; color: var(--text-soft); } .sold-tag { background: #dc2626; color: #fff; font-weight: 700; font-size: .7rem; padding: 2px 10px; border-radius: 6px; display: inline-block; margin-top: 6px; } .expired-tag { background: #6b7280; color: #fff; font-weight: 700; font-size: .7rem; padding: 2px 10px; border-radius: 6px; display: inline-block; margin-top: 6px; } .lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 300; display: none; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; } .lightbox-overlay.open { display: flex; } .lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; } .lightbox-close { position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,.15); color: #fff; border: none; width: 40px; height: 40px; border-radius: 999px; font-size: 1.2rem; cursor: pointer; } .badge { position: absolute; top: 10px; left: 10px; background: var(--accent-500); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } /* ---------------- Filters / toolbar ---------------- */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0; } .toolbar select, .toolbar input[type="text"] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .9rem; background: var(--surface); color: var(--text); } .search-bar { display: flex; flex: 1; min-width: 220px; } .search-bar input { flex: 1; border-radius: 8px 0 0 8px; border-right: none; } .search-bar button { border-radius: 0 8px 8px 0; } /* ---------------- Hero ---------------- */ .hero { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-500) 100%); color: #fff; padding: 48px 0 60px; margin-bottom: -30px; } .hero h1 { color: #fff; font-size: 2.1rem; max-width: 560px; } .hero p { color: var(--brand-50); max-width: 520px; margin-bottom: 20px; } .hero .search-bar { max-width: 560px; } /* ---------------- Misc ---------------- */ .section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 32px 0 4px; } .muted { color: var(--text-soft); } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-soft); } .spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--brand-600); border-radius: 50%; animation: spin .7s linear infinite; margin: 30px auto; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; bottom: 20px; right: 20px; background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow); z-index: 100; font-size: .9rem; max-width: 320px; } .toast.error { background: var(--danger); color: #fff; } .toast.success { background: var(--success); color: #fff; } .footer { background: var(--brand-900); border-top: none; margin-top: 60px; padding: 44px 0 24px; color: rgba(255,255,255,.75); font-size: .85rem; } .footer a { color: rgba(255,255,255,.75); } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } } .footer-brand-col { grid-column: span 2; } @media (min-width: 768px) { .footer-brand-col { grid-column: span 1; } } .footer-col-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin: 0 0 14px; } .footer-social-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); font-size: 1rem; } .footer-social-icon:hover { background: rgba(255,255,255,.2); text-decoration: none; } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; gap: 14px; } .footer .muted { color: rgba(255,255,255,.65); } .footer .logo-icon-box { background: var(--accent-500); } @media (min-width: 640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; } .pill-pending { background: #fef9c3; color: #a16207; } .pill-approved { background: #dcfce7; color: #15803d; } .pill-rejected { background: #fee2e2; color: #b91c1c; } .pill-sold { background: #f3f4f6; color: #374151; } .pill-completed { background: #dcfce7; color: #15803d; } .pill-failed { background: #fee2e2; color: #b91c1c; } .pill-refunded { background: #f3f4f6; color: #374151; } .pill-new { background: #dbeafe; color: #1d4ed8; } .pill-reviewed { background: #e0e7ff; color: #4338ca; } .pill-shortlisted { background: #fef3c7; color: #92400e; } .pill-hired { background: #dcfce7; color: #15803d; } html.dark .pill-pending { background: rgba(202,138,4,0.2); color: #fbbf24; } html.dark .pill-approved { background: rgba(21,128,61,0.2); color: #4ade80; } html.dark .pill-rejected { background: rgba(185,28,28,0.2); color: #f87171; } html.dark .pill-sold { background: #1f2937; color: #d1d5db; } html.dark .pill-completed { background: rgba(21,128,61,0.2); color: #4ade80; } html.dark .pill-failed { background: rgba(185,28,28,0.2); color: #f87171; } html.dark .pill-refunded { background: #1f2937; color: #d1d5db; } html.dark .pill-new { background: rgba(29,78,216,0.2); color: #60a5fa; } html.dark .pill-reviewed { background: rgba(67,56,202,0.2); color: #818cf8; } html.dark .pill-shortlisted { background: rgba(146,64,14,0.2); color: #fbbf24; } html.dark .pill-hired { background: rgba(21,128,61,0.2); color: #4ade80; } /* ---------------- Dashboard layout ---------------- */ .dash-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 30px 0 70px; } .dash-layout > div:last-child { min-width: 0; overflow-x: auto; } .dash-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; } .dash-nav a { padding: 10px 12px; border-radius: 8px; color: var(--text-soft); font-weight: 500; font-size: .92rem; } .dash-nav a:hover { background: var(--bg-subtle); text-decoration: none; } .dash-nav a.active { background: var(--brand-600); color: #fff; } .dash-nav a.admin-link { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--accent-600); } @media (max-width: 780px) { .dash-layout { grid-template-columns: 1fr; } .dash-nav { position: static; flex-direction: row; flex-wrap: wrap; } } /* ---------------- Table (admin lists) ---------------- */ .data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9rem; } .data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .data-table th { color: var(--text-soft); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; } .data-table tr:hover td { background: var(--bg-subtle); } .actions-cell { display: flex; gap: 6px; } /* ---------------- Homepage ---------------- */ .home-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 50%, var(--brand-900) 100%); padding: 72px 0 96px; } .home-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px, transparent 36px), repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px, transparent 36px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); } .home-hero .inner { position: relative; max-width: 860px; margin: 0 auto; text-align: center; } .home-hero h1 { color: #fff; font-size: 2.6rem; } .home-hero h1 span { color: var(--brand-100); } .home-hero p { color: var(--brand-50); font-size: 1.1rem; margin-bottom: 30px; } .home-search-box { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.25); display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; } .home-search-box input, .home-search-box select { border: none; background: #f9fafb; border-radius: 8px; padding: 14px 12px; font-size: .92rem; color: #111827; flex-shrink: 1; min-width: 0; } .home-search-box input { flex: 2 1 160px; } .home-search-box select { flex: 1 1 130px; min-width: 110px; } .home-search-box button { flex-shrink: 0; padding: 14px 26px; font-size: .95rem; } @media (max-width: 860px) { .home-search-box { flex-wrap: wrap; } .home-search-box input { flex: 1 1 100%; } .home-search-box select { flex: 1 1 calc(50% - 5px); } .home-search-box button { flex: 1 1 100%; } } @media (max-width: 480px) { .home-search-box select { flex: 1 1 100%; } } html.dark .home-search-box { background: #111827; } html.dark .home-search-box input, html.dark .home-search-box select { background: #1f2937; color: #f3f4f6; } .hero-stats-row { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 22px; font-size: .85rem; color: var(--brand-50); } .hero-stats-row strong { color: #fff; font-weight: 700; } .popular-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; font-size: .88rem; } .popular-tags a { background: rgba(255,255,255,.2); color: #fff; padding: 5px 14px; border-radius: 999px; } .popular-tags a:hover { background: rgba(255,255,255,.3); text-decoration: none; } .quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0; } @media (min-width: 640px) { .quick-links { grid-template-columns: repeat(6, 1fr); } } .quick-link-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: center; } .quick-link-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); text-decoration: none; } .quick-link-icon { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .quick-link-card span { font-size: .8rem; font-weight: 600; color: var(--text); } .section-block { padding: 40px 0; } .section-block.alt { background: var(--bg-subtle); } .section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; } .section-head h2 { font-size: 1.5rem; margin: 0; } .section-head a { font-size: .88rem; font-weight: 600; } .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } } .cat-grid-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); text-align: center; } .cat-grid-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); text-decoration: none; } .cat-grid-icon { width: 56px; height: 56px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } html.dark .cat-grid-icon { background: rgba(14,165,233,0.15); color: var(--brand-400); } .cat-grid-card span { font-size: .85rem; font-weight: 600; color: var(--text); } .cat-grid-card .count { font-size: .75rem; color: var(--text-soft); } .event-mini-card { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .event-mini-card:hover { box-shadow: var(--shadow); text-decoration: none; } .event-mini-card .thumb { aspect-ratio: 16/9; background: var(--border); } .event-mini-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .event-mini-card .body { padding: 16px; } .city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .city-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .city-grid { grid-template-columns: repeat(5, 1fr); } } .city-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .city-card:hover { border-color: var(--brand-400); box-shadow: var(--shadow); text-decoration: none; } .city-card-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; } html.dark .city-card-icon { background: rgba(14,165,233,0.15); color: var(--brand-400); } .city-card .name { font-size: .88rem; font-weight: 600; color: var(--text); } .city-card .country { font-size: .75rem; color: var(--text-soft); } /* ---------------- Homepage: "choose your path" cards + trust strip ---------------- */ .path-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 40px 0; } .path-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: transform .15s ease, box-shadow .15s ease; } .path-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); text-decoration: none; } .path-card-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 8px; } .path-card h3 { margin: 0; font-size: 1.15rem; color: var(--text); } .path-card p { margin: 0; color: var(--text-soft); font-size: .9rem; line-height: 1.5; } .path-card-cta { margin-top: 10px; font-weight: 700; font-size: .88rem; } .path-card-employer .path-card-icon { background: var(--brand-50); color: var(--brand-600); } .path-card-employer .path-card-cta { color: var(--brand-600); } .path-card-hiring { border-color: var(--accent-400); border-width: 2px; } .path-card-hiring .path-card-icon { background: var(--accent-50); color: var(--accent-600); } .path-card-hiring .path-card-cta { color: var(--accent-600); } .path-card-seeker .path-card-icon { background: var(--bg-subtle); color: var(--text); } .path-card-seeker .path-card-cta { color: var(--text); } .trust-strip { background: var(--bg-subtle); padding: 22px 0; margin-top: 8px; } .trust-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; font-size: .88rem; font-weight: 600; color: var(--text); } .trust-icon { margin-right: 6px; } .steps-grid { display: grid; gap: 24px; text-align: center; } @media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } } .step-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 14px; } html.dark .step-icon { background: rgba(14,165,233,0.15); color: var(--brand-400); } .testimonial-grid { display: grid; gap: 20px; } @media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { padding: 22px; } .testimonial-card .quote-mark { font-size: 1.8rem; color: var(--brand-200); font-weight: 700; } .testimonial-card .stars { color: var(--accent-400); margin: 8px 0; font-size: .9rem; } .testimonial-card .text { font-size: .9rem; color: var(--text-soft); margin-bottom: 16px; } .testimonial-card .who { display: flex; align-items: center; gap: 10px; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-100); color: var(--brand-600); display: flex; align-items: center; justify-content: center; font-weight: 700; } html.dark .testimonial-avatar { background: rgba(14,165,233,0.15); color: var(--brand-400); } .app-cta { border-radius: 16px; background: linear-gradient(135deg, #111827 0%, #1f2937 100%); color: #fff; padding: 40px; display: grid; gap: 24px; align-items: center; } @media (min-width: 768px) { .app-cta { grid-template-columns: 1fr 1fr; } } .app-cta p { color: #d1d5db; } .app-store-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #111827; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: .9rem; border: none; cursor: pointer; } .app-download-icon { width: 190px; height: 190px; border-radius: 16px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 3rem; margin: 0 auto; } .final-cta { border-radius: 16px; border: 1px solid var(--brand-100); background: var(--brand-50); padding: 40px; text-align: center; } html.dark .final-cta { border-color: rgba(14,165,233,0.3); background: rgba(14,165,233,0.08); } .logo-icon-box { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .user-menu { position: relative; } .user-menu-dropdown { position: absolute; right: 0; top: 46px; width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 8px 0; z-index: 60; display: none; } .user-menu-dropdown.open { display: block; } .user-menu-dropdown .head { padding: 10px 16px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .user-menu-dropdown .head .name { font-weight: 600; font-size: .88rem; } .user-menu-dropdown .head .email { font-size: .76rem; color: var(--text-soft); } .user-menu-dropdown a, .user-menu-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 16px; font-size: .87rem; color: var(--text); background: none; border: none; text-align: left; cursor: pointer; } .user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--bg-subtle); text-decoration: none; } .user-menu-dropdown .signout { color: #dc2626; } .user-menu-dropdown .signout:hover { background: #fee2e2; } .mobile-menu-btn { display: none; } @media (max-width: 900px) { .mobile-menu-btn { display: flex; } } .mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; display: none; } .mobile-drawer-overlay.open { display: block; } .mobile-drawer { position: fixed; right: 0; top: 0; height: 100%; width: 85%; max-width: 340px; background: var(--surface); box-shadow: -10px 0 30px rgba(0,0,0,.2); z-index: 91; transform: translateX(100%); transition: transform .2s ease; overflow-y: auto; } .mobile-drawer.open { transform: translateX(0); } .mobile-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); } .mobile-drawer-body { padding: 16px; } .mobile-drawer nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; } .mobile-drawer nav a { padding: 12px; border-radius: 8px; font-weight: 500; color: var(--text); } .mobile-drawer nav a:hover { background: var(--bg-subtle); text-decoration: none; } .mobile-drawer nav a.active-link { background: var(--brand-50); color: var(--brand-700); } html.dark .mobile-drawer nav a.active-link { background: rgba(14,165,233,0.15); color: var(--brand-400); } .mobile-drawer .divider { border-top: 1px solid var(--border); margin: 12px 0; } .mobile-drawer .action-link { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; font-weight: 500; font-size: .9rem; color: var(--text); } .mobile-drawer .action-link:hover { background: var(--bg-subtle); text-decoration: none; } /* ---------------- Modal ---------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-box { background: var(--surface); border-radius: var(--radius); max-width: 480px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.3); max-height: calc(100vh - 40px); display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-header h3 { margin: 0; font-size: 1.05rem; } .modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-soft); line-height: 1; } .modal-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; } .chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; height: 70vh; background: var(--surface); } .conv-list { border-right: 1px solid var(--border); overflow-y: auto; } .conv-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; } .conv-item:hover, .conv-item.active { background: var(--bg-subtle); text-decoration: none; } .conv-item .name { font-weight: 600; font-size: .9rem; color: var(--text); } .conv-item .preview { font-size: .8rem; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-panel { display: flex; flex-direction: column; } .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .msg-bubble { max-width: 70%; padding: 8px 12px; border-radius: 14px; font-size: .9rem; } .msg-bubble.mine { align-self: flex-end; background: var(--brand-600); color: #fff; border-bottom-right-radius: 4px; } .msg-bubble.theirs { align-self: flex-start; background: var(--bg-subtle); border-bottom-left-radius: 4px; } .chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); } .chat-input-row input { flex: 1; } @media (max-width: 780px) { .chat-layout { grid-template-columns: 1fr; height: auto; } .conv-list { max-height: 200px; } } @media (max-width: 720px) { .nav-links { display: none; } .hero h1 { font-size: 1.5rem; } .field-row { flex-direction: column; gap: 0; } } /* ---------------- Mobile "canvas" look ---------------- */ @media (max-width: 720px) { body { background: var(--bg-subtle); } .site-header { margin: 0 8px; border-bottom: none; border-radius: 0 0 18px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.08); } html.dark .site-header { box-shadow: 0 6px 18px rgba(0,0,0,.35); } .footer { background: var(--surface); margin: 40px 8px 8px; padding: 32px 16px 20px; border-top: none; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.06); } html.dark .footer { box-shadow: 0 -6px 18px rgba(0,0,0,.3); } .footer .container { padding: 0; } } /* ---------------- time frame ---------------- */ .timeframe-nav { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 6px 2px 14px; margin-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); } .timeframe-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 9999px; font-size: 0.88rem; font-weight: 500; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; cursor: pointer; transition: all .15s ease; scroll-snap-align: start; flex-shrink: 0; } .timeframe-pill.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25); } .timeframe-nav.at-scroll-end { -webkit-mask-image: none; mask-image: none; } @media (max-width: 480px) { .timeframe-nav { gap: 6px; padding: 4px 2px 12px; } .timeframe-pill { padding: 7px 13px; font-size: 0.82rem; gap: 4px; } } /* ---------------- WordPress-specific additions ---------------- */ .alignnone { margin: 1.5rem auto; } .aligncenter { display: block; margin: 1.5rem auto; } .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-size: .82rem; color: var(--text-soft); margin-top: 6px; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .breadcrumbs { font-size: .82rem; color: var(--text-soft); margin: 12px 0; } .breadcrumbs a { color: var(--text-soft); } .breadcrumbs a:hover { color: var(--brand-600); text-decoration: none; } .breadcrumbs .sep { margin: 0 6px; opacity: .5; } .pagination { display: flex; gap: 6px; justify-content: center; margin: 30px 0; flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border-radius: 8px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none; } .pagination .page-numbers:hover { border-color: var(--brand-400); text-decoration: none; } .pagination .page-numbers.current { background: var(--brand-600); color: #fff; border-color: var(--brand-600); } .pagination .page-numbers.dots { border: none; background: none; } .single-job-content { line-height: 1.7; } .single-job-content h2, .single-job-content h3 { margin-top: 1.5rem; } .job-detail-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; } .job-detail-logo { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--border); flex-shrink: 0; } .job-detail-logo img { width: 100%; height: 100%; object-fit: cover; } .job-detail-info { flex: 1; } .job-detail-info h1 { font-size: 1.6rem; margin-bottom: 4px; } .job-detail-company { font-size: 1rem; color: var(--brand-600); font-weight: 600; margin-bottom: 8px; } html.dark .job-detail-company { color: var(--brand-400); } .job-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .85rem; color: var(--text-soft); } .job-sidebar { display: flex; flex-direction: column; gap: 16px; } .job-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; margin: 24px 0; } @media (max-width: 900px) { .job-detail-grid { grid-template-columns: 1fr; } } .job-info-box { padding: 16px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); } .job-info-box dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--text-soft); letter-spacing: .03em; margin-bottom: 2px; } .job-info-box dd { margin: 0 0 12px; font-size: .9rem; font-weight: 600; color: var(--text); } .job-info-box dd:last-child { margin-bottom: 0; } .apply-section { padding: 24px; border-radius: 12px; background: var(--brand-50); border: 1px solid var(--brand-100); margin: 24px 0; } html.dark .apply-section { background: rgba(14,165,233,0.08); border-color: rgba(14,165,233,0.2); } .share-row { display: flex; gap: 8px; align-items: center; } .share-btn { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); border: 1px solid var(--border); cursor: pointer; font-size: 1rem; color: var(--text-soft); transition: all .15s ease; } .share-btn:hover { background: var(--brand-600); color: #fff; border-color: var(--brand-600); text-decoration: none; } .company-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .company-card-logo { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--border); } .company-card-logo img { width: 100%; height: 100%; object-fit: cover; } .company-card h3 { margin: 0; font-size: 1rem; } .company-card .meta { font-size: .8rem; color: var(--text-soft); } .verified-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--brand-600); color: #fff; } .related-jobs { margin-top: 40px; } .google-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #1f2937; font-weight: 600; font-size: .92rem; cursor: pointer; transition: background .15s ease; } .google-login-btn:hover { background: #f9fafb; } html.dark .google-login-btn { background: var(--surface); color: var(--text); border-color: #374151; } html.dark .google-login-btn:hover { background: var(--bg-subtle); } .google-login-btn svg { width: 18px; height: 18px; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-soft); font-size: .85rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .notice, .notice-success, .notice-error, .notice-warning { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; } .notice-success { background: #dcfce7; color: #15803d; } .notice-error { background: #fee2e2; color: #b91c1c; } .notice-warning { background: #fef9c3; color: #a16207; } html.dark .notice-success { background: rgba(21,128,61,0.15); } html.dark .notice-error { background: rgba(185,28,28,0.15); } html.dark .notice-warning { background: rgba(202,138,4,0.15); } .noindex-meta { display: none; } .theme-switcher { display: flex; gap: 6px; align-items: center; } .theme-switcher button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; } .theme-switcher button:hover { background: rgba(255,255,255,.2); } .saved-job-toggle { background: none; border: none; cursor: pointer; color: var(--text-soft); font-size: 1.2rem; padding: 4px; } .saved-job-toggle.saved { color: var(--accent-500); } /* ---- Single job page: meta line, phone reveal, quick actions, report, posted-by ---- */ .job-meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-soft); font-size: .88rem; margin: 0 0 14px; } .job-meta-line .dot { opacity: .5; } .job-phone-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-600); color: #fff; border: none; border-radius: var(--radius-btn); padding: 14px 16px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 12px; } .job-phone-btn:hover { background: var(--brand-700); } .job-phone-btn:disabled { background: var(--bg-subtle); color: var(--text-soft); cursor: not-allowed; } /* Contact options: every filled-in contact route, never overflowing the card */ .job-contact-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .job-contact-row { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); text-decoration: none; width: 100%; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; } .job-contact-row:hover { background: var(--bg-subtle); text-decoration: none; } .job-contact-row.is-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; } .job-contact-row.is-primary:hover { background: var(--brand-700); } .job-contact-icon { flex: 0 0 auto; font-size: 1.15rem; line-height: 1; } .job-contact-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .job-contact-label { font-size: .75rem; opacity: .7; font-weight: 500; } .job-contact-value { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-contact-empty { text-align: center; padding: 12px 16px; margin-bottom: 12px; border-radius: var(--radius-btn); background: var(--bg-subtle); color: var(--text-soft); font-size: .95rem; } .single-job-content { overflow-wrap: anywhere; word-break: break-word; } .job-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .job-action-btn.job-action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 12px; font-size: .95rem; font-weight: 500; cursor: pointer; text-decoration: none; } .job-action-btn.job-action-btn:hover { background: var(--bg-subtle); text-decoration: none; } .job-action-btn.job-action-btn.saved, .job-action-btn.job-action-btn.is-saved { color: var(--accent-600); border-color: var(--accent-400); background: var(--accent-50); } .job-action-btn.job-action-btn:disabled { opacity: .5; cursor: not-allowed; } .job-report-panel { display: none; margin: -6px 0 20px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); } .job-report-panel.is-open { display: block; } .job-report-panel select, .job-report-panel textarea { width: 100%; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 8px 10px; background: var(--surface); color: var(--text); font-family: inherit; font-size: .9rem; } .posted-by-card { display: flex; align-items: center; gap: 14px; } .posted-by-avatar { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; } .posted-by-since { color: var(--text-soft); font-size: .85rem; } /* ---- Post a Job form ---- */ .page-post-job .card { transition: box-shadow .15s ease, border-color .15s ease; } .page-post-job .card:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50); } .page-post-job .form-section-title { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .page-post-job .form-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-50); font-size: 1rem; flex-shrink: 0; } html.dark .page-post-job .form-section-icon { background: var(--brand-900); } .page-post-job .field label { display: flex; align-items: center; gap: 6px; } .page-post-job .job-photo-dropzone { display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px 16px; border: 2px dashed var(--border); border-radius: var(--radius); color: var(--text-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .page-post-job .job-photo-dropzone:hover { border-color: var(--brand-500); background: var(--brand-50); } html.dark .page-post-job .job-photo-dropzone:hover { background: var(--brand-900); } .page-post-job form > div[style*="display:flex"] { position: sticky; bottom: 0; padding: 14px 0; margin-top: 4px; background: linear-gradient(to top, var(--bg) 60%, transparent); } /* ========================================================================== Approval workflow, notifications and Google auth (v1.1) ========================================================================== */ /* Status pills used by the dashboards — these match the approval statuses returned by expatian_get_job_approval_status(). */ .pill-published { background: #dcfce7; color: #15803d; } .pill-expired { background: #f3f4f6; color: #374151; } .pill-draft { background: #f3f4f6; color: #6b7280; } html.dark .pill-published { background: rgba(21,128,61,0.2); color: #4ade80; } html.dark .pill-expired { background: #1f2937; color: #d1d5db; } html.dark .pill-draft { background: #1f2937; color: #9ca3af; } .reject-reason { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fee2e2; color: #991b1b; font-size: .8rem; line-height: 1.45; } html.dark .reject-reason { background: rgba(185,28,28,0.18); color: #fca5a5; } /* Dashboard notifications */ .notif-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.5; text-align: center; } .expatian-notifications { list-style: none; margin: 0; padding: 0; } .expatian-notification { position: relative; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--border); } .expatian-notification:last-child { border-bottom: 0; } .expatian-notification.unread { background: var(--bg-subtle); } .expatian-notification.unread::before { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500, #0d9488); } .expatian-notification .notif-title { font-weight: 600; font-size: .92rem; color: var(--text); } .expatian-notification .notif-message { font-size: .86rem; color: var(--text-soft); margin-top: 2px; line-height: 1.5; } .expatian-notification .notif-meta { font-size: .74rem; color: var(--text-soft); margin-top: 4px; } .expatian-notification .notif-link { font-size: .8rem; font-weight: 600; } /* Google sign-in block */ .expatian-google-auth { position: relative; display: flex; justify-content: center; margin-bottom: 4px; min-height: 44px; } .expatian-google-auth.is-busy { opacity: .55; pointer-events: none; } .expatian-google-auth > div { width: 100%; } .expatian-google-fallback[hidden] { display: none; } .auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: .8rem; color: var(--text-soft); } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Load-more button on the archives */ .load-more-wrap { display: flex; justify-content: center; margin: 24px 0; } /* Keep long dashboard tables usable on phones */ @media (max-width: 640px) { .data-table { font-size: .84rem; } .actions-cell { display: flex; flex-wrap: wrap; gap: 6px; } .actions-cell .btn { flex: 1 1 auto; text-align: center; } .dash-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } } /* Compact colorful meta chips on single job page */ .job-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .job-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; line-height: 1.2; padding: 4px 10px; border-radius: 999px; white-space: nowrap; max-width: 100%; } .job-chip-muted { background: var(--bg-subtle); color: var(--text-soft); border: 1px solid var(--border); font-weight: 500; } .job-chip-location { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .job-chip-company { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); } .job-chip-salary { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; } .job-chip-type { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .job-chip-category { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; } html.dark .job-chip-muted { background: var(--bg-subtle); color: var(--text-soft); border-color: var(--border); } html.dark .job-chip-location { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.3); } html.dark .job-chip-company { background: rgba(99,102,241,.15); color: var(--brand-400); border-color: rgba(99,102,241,.3); } html.dark .job-chip-salary { background: rgba(249,115,22,.15); color: #fdba74; border-color: rgba(249,115,22,.3); } html.dark .job-chip-type { background: rgba(37,99,235,.15); color: #93c5fd; border-color: rgba(37,99,235,.3); } html.dark .job-chip-category { background: rgba(147,51,234,.15); color: #d8b4fe; border-color: rgba(147,51,234,.3); } /* Advanced filter toolbar spacing */ .advanced-job-filters .filter-row select, .advanced-job-filters .filter-row input[type="text"] { min-height: 40px; border-radius: var(--radius-btn); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 12px; font-size: .9rem; } .advanced-job-filters .filter-row select:focus, .advanced-job-filters .filter-row input[type="text"]:focus { outline: 2px solid var(--brand-400); border-color: transparent; }