/* ============================================================ Meshwar Jobs — Minimal design system Warm neutrals · Meshwar blue accent #0047BB · Inter / Open Sans / Inconsolata Light + dark via . ============================================================ */ :root{ /* Accent (Meshwar blue) */ --blue:#0047BB; --blue-dark:#003C9E; --blue-active:#003084; --blue-tint:#E7EEFA; /* Warm neutral ramp */ --ink:#0C0C09; --text-2:#555550; --muted:#75756B; --bg:#F4F4F1; --card:#FFFFFF; --sunken:#EAEAE5; --hover:#EAEAE5; --line:#DBDBD4; --line-mid:#C3C3BA; --line-strong:#9C9C92; /* Status */ --ok:#15803D; --ok-solid:#16A34A; --ok-bg:#EAF6EE; --bad:#B91C1C; --bad-solid:#DC2626; --bad-bg:#FBEBEB; --warn:#B45309; --warn-solid:#D97706; --warn-bg:#FBF1E3; /* Chart */ --chart-a:#0C0C09; /* Shape & depth */ --radius:8px; --radius-sm:4px; --radius-lg:12px; --shadow-xs:0 1px 2px rgba(12,12,9,.06); --shadow-sm:0 1px 3px rgba(12,12,9,.08),0 1px 2px rgba(12,12,9,.04); --shadow-md:0 4px 12px rgba(12,12,9,.08),0 2px 4px rgba(12,12,9,.05); /* Type */ --font-d:'Inter',system-ui,-apple-system,sans-serif; --font-b:'Open Sans',system-ui,-apple-system,sans-serif; --font-m:'Inconsolata',ui-monospace,'SF Mono',Menlo,monospace; --focus:0 0 0 3px rgba(0,71,187,.3); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font-b);color:var(--ink);background:var(--bg);font-size:15.5px;line-height:1.6} h1,h2,h3,h4{font-family:var(--font-d);letter-spacing:-0.02em;line-height:1.25} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1120px;margin:0 auto;padding:0 18px} /* ---------- Header ---------- */ .topbar{background:var(--card);border-bottom:1px solid var(--line)} .topbar-in{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} .brand{display:flex;align-items:center} .brand img{height:28px;display:block} .logo-d{display:none} .mainnav{display:flex;gap:2px;flex-wrap:wrap;align-items:center} .mainnav a{color:var(--text-2);padding:8px 11px;border-radius:var(--radius-sm);font-family:var(--font-d);font-weight:600;font-size:14.5px;transition:background .15s ease,color .15s ease} .mainnav a:hover{background:var(--hover);color:var(--ink);text-decoration:none} .nav-cta{background:var(--blue);color:#fff!important;border-radius:var(--radius)} .nav-cta:hover{background:var(--blue-dark)!important} .nav-admin{font-family:var(--font-m)!important;font-size:12.5px!important;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)!important;border:1px solid var(--line-mid);border-radius:var(--radius-sm)} /* ---------- Hero ---------- */ .hero{padding:60px 18px 52px;text-align:center} .hero h1{font-size:clamp(30px,4.5vw,52px);font-weight:800;margin:0 0 12px;letter-spacing:-0.02em} .hero p{margin:0 auto 30px;max-width:560px;color:var(--text-2);font-size:17.5px;line-height:1.65} .searchbar{display:flex;gap:8px;max-width:680px;margin:0 auto;background:var(--card); padding:9px;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)} .searchbar input{flex:1;border:0;outline:0;font-size:16px;padding:10px 12px;min-width:0;background:transparent;color:var(--ink);font-family:var(--font-b)} .searchbar input:focus{box-shadow:none;border:0;outline:0} .searchbar button{white-space:nowrap} /* ---------- Cards & lists ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);padding:20px 22px;margin:14px 0} .card h3{margin:0 0 4px;font-size:17px;font-weight:600} .job-meta{color:var(--muted);font-size:13.5px;display:flex;gap:13px;flex-wrap:wrap;margin:4px 0 8px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .grid2 .card,.grid3 .card,.grid4 .card{margin:0} @media(max-width:760px){.grid2,.grid3,.grid4{grid-template-columns:1fr}} /* ---------- Stats ---------- */ .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);padding:18px 20px} .stat .n{font-family:var(--font-d);font-size:30px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)} .stat .l{color:var(--muted);font-family:var(--font-m);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px} .stat .sub{font-size:12.5px;color:var(--muted);margin-top:6px} .stat.glow{background:var(--ink);border-color:var(--ink)} .stat.glow .n{color:var(--card)} .stat.glow .l,.stat.glow .sub{color:rgba(244,244,241,.72)} /* ---------- Buttons & badges ---------- */ .btn{display:inline-block;background:var(--blue);color:#fff!important;border:0;border-radius:var(--radius); padding:10px 18px;font-family:var(--font-d);font-size:14.5px;font-weight:600;cursor:pointer; transition:background .15s ease,border-color .15s ease,box-shadow .15s ease} .btn:hover{background:var(--blue-dark);text-decoration:none} .btn:active{background:var(--blue-active)} .btn:focus-visible{outline:none;box-shadow:var(--focus)} .btn.secondary{background:var(--card);color:var(--ink)!important;border:1px solid var(--line-mid)} .btn.secondary:hover{background:var(--hover)} .btn.danger{background:var(--bad-solid)} .btn.danger:hover{background:var(--bad)} .btn.small{padding:6px 12px;font-size:13px} .badge{display:inline-block;padding:3px 9px;border-radius:var(--radius-sm);font-family:var(--font-m); font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .badge.pending{background:var(--warn-bg);color:var(--warn)} .badge.approved,.badge.open,.badge.active{background:var(--ok-bg);color:var(--ok)} .badge.denied,.badge.removed,.badge.banned{background:var(--bad-bg);color:var(--bad)} .badge.closed{background:var(--sunken);color:var(--text-2)} .badge.cat{background:var(--blue-tint);color:var(--blue)} .score{font-family:var(--font-m);font-weight:700;color:var(--blue)} .mini-caps{font-family:var(--font-m);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)} /* ---------- Forms ---------- */ form.stack label{display:block;font-family:var(--font-d);font-weight:600;font-size:13.5px;margin:14px 0 5px} input[type=text],input[type=email],input[type=password],select,textarea{ width:100%;padding:10px 12px;border:1px solid var(--line-mid);border-radius:var(--radius-sm); font-size:15px;font-family:var(--font-b);background:var(--card);color:var(--ink); transition:border-color .15s ease,box-shadow .15s ease} textarea{min-height:110px;resize:vertical} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.form-row{grid-template-columns:1fr}} .hint{color:var(--muted);font-size:13px;margin-top:3px} /* ---------- Tables ---------- */ table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs)} table.list th,table.list td{padding:11px 12px;text-align:start;border-bottom:1px solid var(--line);font-size:14px} table.list th{background:transparent;color:var(--muted);font-family:var(--font-m);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} table.list tr:last-child td{border-bottom:0} .table-scroll{overflow-x:auto} /* ---------- Misc ---------- */ .flash{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bg);border-radius:var(--radius);padding:11px 15px;margin:16px 0;font-weight:600;font-size:14.5px} .error{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-bg);border-radius:var(--radius);padding:11px 15px;margin:16px 0;font-size:14.5px} .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 6px} .section-title h2{margin:0;font-size:22px;font-weight:700} .section-title a{font-family:var(--font-d);font-weight:600;font-size:14px} .empty{color:var(--muted);background:var(--card);border:1px dashed var(--line-mid);border-radius:var(--radius);padding:28px;text-align:center;margin:14px 0} .footer{border-top:1px solid var(--line);background:var(--card);margin-top:56px;padding:26px 0;color:var(--muted);font-size:13.5px;text-align:center} .footer p{margin:5px 0} .footer-logo{height:20px;opacity:.85;display:block;margin:0 auto 8px} .inline-form{display:inline} .auth-box{max-width:440px;margin:40px auto} .tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px} .item-row{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;margin:8px 0;background:var(--bg)} /* ---------- Language switcher ---------- */ .langsw{display:inline-flex;gap:2px;margin-inline-start:10px;background:var(--sunken);border-radius:var(--radius-sm);padding:2px} .langsw a{color:var(--muted);padding:3px 8px;border-radius:3px;font-family:var(--font-m);font-size:12px;font-weight:700;text-decoration:none} .langsw a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-xs)} /* ---------- Consent & legal ---------- */ .agree-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:12px} .agree-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--blue)} .legal h2{margin-top:0} .legal h3{margin:24px 0 6px} .legal p{line-height:1.65} /* ---------- App shell (company ATS & admin) ---------- */ .shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;margin-top:20px} .shell-nav{position:sticky;top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);padding:10px} .shell-label{font-family:var(--font-m);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:4px 12px 8px} .shell-nav nav{display:flex;flex-direction:column;gap:2px} .shell-nav nav a{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-family:var(--font-d);font-size:14.5px;font-weight:500;color:var(--text-2)} .shell-nav nav a:hover{background:var(--hover);color:var(--ink);text-decoration:none} .shell-nav nav a.on{background:var(--sunken);color:var(--ink);font-weight:600} .shell-main{min-width:0} .shell-main > .section-title:first-child{margin-top:0} @media(max-width:900px){ .shell{grid-template-columns:1fr;gap:14px} .shell-nav{position:static} .shell-nav nav{flex-direction:row;flex-wrap:wrap} .shell-nav nav a{flex:0 0 auto} } /* ---------- Admin dashboard ---------- */ .shell .admin-tabs{display:flex;flex-direction:column;gap:2px;margin:0;border:0;padding:0} .admin-tabs button{border:0;background:transparent;border-radius:var(--radius-sm);padding:9px 12px; font-family:var(--font-d);font-size:14.5px;font-weight:500;color:var(--text-2);cursor:pointer; text-align:start;display:flex;align-items:center;justify-content:space-between;gap:8px; transition:background .15s ease,color .15s ease} .admin-tabs button:hover{background:var(--hover);color:var(--ink)} .admin-tabs button.on{background:var(--sunken);color:var(--ink);font-weight:600} .admin-tabs .pill{background:var(--bad-bg);color:var(--bad);border-radius:999px;padding:1px 8px;font-family:var(--font-m);font-size:11px;font-weight:700} .admin-tab{display:none} .admin-tab.on{display:block;animation:fadeIn .15s ease} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .admin-tab .grid4{margin:14px 0} .admin-chart{width:100%;height:auto;margin-top:6px} .admin-chart .grid{stroke:var(--line);stroke-width:1} .admin-chart .axis{fill:var(--muted);font-size:10px;font-family:var(--font-m)} .admin-chart .bar{transition:opacity .15s} .admin-chart .bu{fill:var(--chart-a)} .admin-chart .bj{fill:var(--blue)} .admin-chart .bargroup:hover .bar{opacity:.75} .chart-legend{display:flex;gap:18px;font-size:12.5px;color:var(--text-2)} .chart-legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:6px} .chart-legend .du{background:var(--chart-a)} .chart-legend .dj{background:var(--blue)} .filter-box{width:100%;max-width:340px;margin:4px 0 12px;padding:9px 12px;border:1px solid var(--line-mid);border-radius:var(--radius-sm);font-size:14.5px;font-family:var(--font-b);background:var(--card);color:var(--ink)} .filter-box:focus{outline:none;border-color:var(--blue);box-shadow:var(--focus)} /* ---------- Impersonation banner ---------- */ .impersonate-bar{background:var(--ink);color:var(--card);text-align:center;padding:9px 14px;font-size:13.5px;font-family:var(--font-d);font-weight:600} .impersonate-bar a{color:inherit;text-decoration:underline;margin-inline-start:10px} /* ---------- Error pages ---------- */ .err-wrap{text-align:center;padding:70px 20px} .err-code{font-family:var(--font-d);font-size:100px;font-weight:800;color:var(--line-mid);line-height:1;letter-spacing:-0.02em} .err-wrap h2{margin:10px 0 8px} .err-wrap .btn{margin:4px} /* ---------- Honeypot ---------- */ .hp{position:absolute !important;left:-9999px !important;top:-9999px !important;height:0;overflow:hidden;opacity:0} /* ---------- Theme toggle ---------- */ .theme-toggle{background:transparent;border:0;border-radius:var(--radius-sm);color:var(--text-2); font-size:16px;padding:6px 9px;cursor:pointer;line-height:1;margin-inline-start:6px;transition:background .15s ease} .theme-toggle:hover{background:var(--hover)} /* ============================================================ DARK MODE — Same warm-neutral system, dark values; accent lightened for contrast. ============================================================ */ html[data-theme=dark]{ --blue:#5B8DEF; --blue-dark:#79A2F2; --blue-active:#4A7DE0; --blue-tint:#1B2A45; --ink:#F4F4F1; --text-2:#BFBFB6; --muted:#8F8F85; --bg:#131312; --card:#1C1C1A; --sunken:#242422; --hover:#282825; --line:#2C2C29; --line-mid:#3A3A35; --line-strong:#4A4A44; --ok:#4ADE80; --ok-bg:#132B1C; --bad:#F87171; --bad-solid:#DC2626; --bad-bg:#301617; --warn:#FBBF24; --warn-bg:#2E2412; --chart-a:#F4F4F1; --shadow-xs:none; --shadow-sm:none; --shadow-md:0 4px 12px rgba(0,0,0,.3); --focus:0 0 0 3px rgba(91,141,239,.35); } html[data-theme=dark] .logo-l{display:none} html[data-theme=dark] .logo-d{display:block} html[data-theme=dark] .nav-cta{color:#0C0C09!important} html[data-theme=dark] .btn{color:#0C0C09!important} html[data-theme=dark] .btn.secondary{color:var(--ink)!important} html[data-theme=dark] .btn.danger{color:#fff!important} html[data-theme=dark] .stat.glow{background:var(--sunken);border-color:var(--line)} html[data-theme=dark] .stat.glow .n{color:var(--ink)} html[data-theme=dark] .stat.glow .l,html[data-theme=dark] .stat.glow .sub{color:var(--muted)} html[data-theme=dark] .impersonate-bar{background:var(--sunken);color:var(--ink)} html[data-theme=dark] .footer-logo{filter:brightness(0) invert(.9)} html[data-theme=dark] .err-code{color:var(--line-mid)} /* ============================================================ MOBILE ============================================================ */ @media (max-width:900px){ .grid4{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .grid4{grid-template-columns:1fr 1fr} .wrap{padding:0 14px} .hero{padding:38px 16px 42px} .section-title{flex-wrap:wrap;gap:10px} table.list th,table.list td{padding:8px 9px;font-size:13px} .card{padding:15px 16px} } @media (max-width:560px){ .grid4{grid-template-columns:1fr} .searchbar{flex-direction:column;padding:10px} .searchbar input{width:100%;max-width:none!important;padding:11px 12px; border:1px solid var(--line-mid);border-radius:var(--radius-sm)} .searchbar button{width:100%;padding:12px} .topbar-in{justify-content:center} .mainnav{justify-content:center;font-size:14px} .mainnav a{padding:8px 8px} .stat .n{font-size:24px} .auth-box{margin:16px auto} .btn{padding:11px 16px} .btn.small{padding:8px 12px} .err-code{font-size:72px} .impersonate-bar{font-size:13px} } @media (pointer:coarse){ .mainnav a,.btn,.langsw a,.theme-toggle,.admin-tabs button{min-height:40px;display:inline-flex;align-items:center;justify-content:center} .admin-tabs button{justify-content:space-between} .shell-nav nav a{min-height:40px;display:flex;align-items:center} }