/* ============================================================================ Oasis hiring screening — candidate-facing design system. Scoped under `.hr-screen` (set on by screen_base.html) so it never touches the internal admin app. Self-contained: no dependency on oasis.css. ========================================================================== */ .hr-screen { --ink:#20242e; --muted:#6b7280; --faint:#9aa1ac; --line:#e9e5dd; --line-2:#f0ede6; --bg:#f4f1ea; --card:#ffffff; --accent:#ea6a1f; --accent-d:#c65710; --accent-soft:#fff2e6; --green:#15803d; --green-soft:#eaf7ee; --red:#c92a2a; --red-soft:#fdecec; --blue:#2563eb; --amber:#b45309; --ring:0 0 0 3px rgba(234,106,31,.28); --shadow-sm:0 1px 2px rgba(24,27,34,.06), 0 1px 3px rgba(24,27,34,.05); --shadow:0 6px 24px -8px rgba(24,27,34,.18); margin:0; color:var(--ink); background:var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.55; background-image:radial-gradient(1200px 500px at 100% -10%, #fff6ec 0%, transparent 60%), radial-gradient(900px 500px at -10% 0%, #eef4ff 0%, transparent 55%); min-height:100vh; } .hr-screen *{ box-sizing:border-box; } /* ── Top bar ──────────────────────────────────────────────────────────────── */ .hr-top{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 22px; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); } .hr-brand{ font-weight:800; letter-spacing:-.01em; font-size:16px; display:flex; align-items:center; gap:9px; } .hr-brand .dot{ width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--accent),#f79e5c); box-shadow:0 2px 8px rgba(234,106,31,.4); display:inline-block; } .hr-brand span{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; } .hr-main{ max-width:760px; margin:0 auto; padding:26px 20px 80px; } .hr-narrow{ max-width:560px; } /* The proctored test needs room — wider canvas so the proctor + self video sit large side-by-side and the matching tray/rows spread across the screen. */ .hr-main.hr-wide{ max-width:1240px; } /* ── Stepper ──────────────────────────────────────────────────────────────── */ .stepper{ display:flex; align-items:center; gap:0; margin:2px 0 22px; } .step{ display:flex; align-items:center; gap:9px; color:var(--faint); font-size:13px; font-weight:600; } .step .num{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12.5px; background:#fff; border:2px solid var(--line); color:var(--faint); flex:0 0 auto; transition:.2s; } .step.done .num{ background:var(--green); border-color:var(--green); color:#fff; } .step.active{ color:var(--ink); } .step.active .num{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 3px 10px rgba(234,106,31,.35); } .stepper .bar{ flex:1; max-width:48px; height:2px; background:var(--line); margin:0 8px; border-radius:2px; } .stepper .bar.done{ background:var(--green); } @media (max-width:560px){ .step .label{ display:none; } .stepper .bar{ margin:0 5px; } } /* ── Panels + typography ──────────────────────────────────────────────────── */ .panel{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow-sm); margin-bottom:16px; } .panel--soft{ background:linear-gradient(180deg,#fffdfa,#fbf7f0); } .panel--accent{ border-color:#f4d3b6; background:linear-gradient(180deg,#fff8f1,#fff); } .hr-screen h1{ font-size:26px; line-height:1.2; letter-spacing:-.02em; margin:0 0 6px; font-weight:800; } .hr-screen h2{ font-size:16px; margin:0 0 8px; font-weight:700; } .lead{ color:var(--muted); font-size:15px; margin:0 0 14px; } .muted{ color:var(--muted); } .eyebrow{ font-weight:800; color:var(--accent); text-transform:uppercase; font-size:11.5px; letter-spacing:.09em; margin:0 0 8px; } .center{ text-align:center; } .hr-screen code{ background:var(--line-2); padding:1px 6px; border-radius:5px; font-size:.92em; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .hbtn{ appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-weight:600; padding:11px 20px; border-radius:11px; cursor:pointer; transition:.16s; display:inline-flex; align-items:center; gap:8px; justify-content:center; text-decoration:none; box-shadow:var(--shadow-sm); } .hbtn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); } .hbtn:active{ transform:translateY(0); } .hbtn--primary{ background:linear-gradient(180deg,#f2803a,var(--accent)); border-color:var(--accent-d); color:#fff; } .hbtn--primary:hover{ background:linear-gradient(180deg,#ee7530,var(--accent-d)); } .hbtn--success{ background:linear-gradient(180deg,#22a45a,#15803d); border-color:#0f6a31; color:#fff; } .hbtn--ghost{ background:transparent; box-shadow:none; } .hbtn--lg{ padding:14px 30px; font-size:16px; border-radius:13px; } .hbtn--block{ width:100%; } /* ── Forms ────────────────────────────────────────────────────────────────── */ .field{ margin:14px 0; } .field > label, .flabel{ display:block; font-weight:650; font-size:13.5px; margin:0 0 6px; } .hr-screen input[type=text], .hr-screen input[type=email], .hr-screen input[type=number], .hr-screen input[type=date], .hr-screen select, .hr-screen textarea{ width:100%; padding:12px 13px; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; transition:.15s; } .hr-screen input:focus, .hr-screen select:focus, .hr-screen textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); } .hr-screen textarea{ min-height:96px; resize:vertical; } .hint{ color:var(--faint); font-size:12.5px; margin-top:4px; } .errorlist{ color:var(--red); font-size:13px; margin:5px 0 0; padding-left:18px; } .req{ color:var(--red); font-weight:700; } /* Cold pay input — no suggested number. A live reaction meter fills + reddens as the requested rate climbs, so a bigger ask visibly reads as a worse fit. */ .pay-input{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--muted); } .pay-input input{ width:120px; text-align:center; font-size:18px; font-weight:800; } .pay-input input.locked{ background:var(--line-2); color:var(--muted); cursor:not-allowed; } .pay-react{ font-size:13px; font-weight:700; min-height:18px; margin-top:8px; } .pay-react.good{ color:var(--green); } .pay-react.warn{ color:#a06e00; } .pay-react.bad{ color:var(--red); animation:pay-shake .35s ease; } @keyframes pay-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } } .opt{ color:var(--faint); font-weight:400; font-size:12.5px; } .formerr{ background:var(--red-bg,#fecaca33); border:1px solid var(--red); color:var(--red); border-radius:10px; padding:10px 14px; margin:0 0 14px; font-size:14px; font-weight:600; } /* ── Messages ─────────────────────────────────────────────────────────────── */ .msgbar{ border-radius:11px; padding:11px 14px; margin-bottom:14px; font-size:14px; font-weight:500; } .msgbar--error{ background:var(--red-soft); color:#8f1d1d; border:1px solid #f3c9c9; } .msgbar--info{ background:#eef4ff; color:#274690; border:1px solid #cfe0ff; } .msgbar--success{ background:var(--green-soft); color:#166534; border:1px solid #c3e9cf; } /* ── Timer pill ───────────────────────────────────────────────────────────── */ .timer{ display:flex; align-items:center; gap:10px; } .timer .t-label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); font-weight:700; text-align:right; } .timer .clock{ font-variant-numeric:tabular-nums; font-weight:800; font-size:22px; letter-spacing:.5px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:5px 12px; box-shadow:var(--shadow-sm); } .timer .clock.danger{ color:#fff; background:var(--red); border-color:var(--red); animation:tpulse 1s infinite; } @keyframes tpulse{ 50%{ opacity:.55; } } /* ── Availability grid (survey) ───────────────────────────────────────────── */ .avail{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; } .avail .day{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; font-weight:600; font-size:14px; } .avail select{ width:auto; padding:7px 9px; } .checkline{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-weight:500; } .checkline input{ margin-top:3px; width:18px; height:18px; accent-color:var(--accent); } @media (max-width:560px){ .avail{ grid-template-columns:1fr; } } /* ── Phone-interview slot picker (calendar) ───────────────────────────────── */ .slotgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:16px 0; } .slotday{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px; } .slotday h3{ margin:0 0 8px; font-size:13px; text-align:center; } .slotday form{ margin:0 0 6px; } .slotbtn{ width:100%; } .slotempty{ color:var(--muted); font-size:12.5px; text-align:center; padding:8px 0; } @media (max-width:800px){ .slotgrid{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .slotgrid{ grid-template-columns:1fr; } } /* ── Rule list (consent) ──────────────────────────────────────────────────── */ .rule-list{ list-style:none; padding:0; margin:14px 0; } .rule-list li{ display:flex; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:15px; } .rule-list li:last-child{ border-bottom:0; } .consent-box{ display:flex; gap:11px; align-items:flex-start; background:var(--accent-soft); border:1px solid #f2c69f; border-radius:12px; padding:13px 15px; margin:16px 0; } .consent-box input{ margin-top:2px; width:20px; height:20px; accent-color:var(--accent); } /* ── Document facsimiles (work order / invoice) ───────────────────────────── */ .doc{ border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); padding:12px 14px; font-size:13px; box-shadow:var(--shadow-sm); } .doc.wo-doc{ border-left:5px solid var(--blue); } .doc.inv-doc{ border-left:5px solid var(--green); } .doc-h{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:7px; } .doc-tag{ font-size:9.5px; font-weight:800; letter-spacing:.09em; color:#fff; padding:3px 8px; border-radius:6px; } .wo-doc .doc-tag{ background:var(--blue); } .inv-doc .doc-tag{ background:var(--green); } .doc-no{ font-weight:800; } .doc-row{ display:flex; justify-content:space-between; gap:8px; padding:2px 0; align-items:baseline; } .doc-row .lbl{ color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; margin-right:8px; } /* line1 (Bill to / Address) is header metadata, not a billable line — separated from the line items below by a divider instead of being bolded like a price. */ .doc-row.line1{ padding-bottom:7px; margin-bottom:5px; border-bottom:1px dashed var(--line-2); } .doc .amt{ font-weight:800; white-space:nowrap; } .doc .miss{ color:var(--red); font-style:italic; font-weight:600; } .doc-row.doc-total{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); font-weight:800; } .doc-row.doc-total.free{ color:var(--red); } .doc-row.doc-total.free .amt{ color:var(--red); } /* ── Reading page relationship + pricing ──────────────────────────────────── */ .pair{ display:grid; grid-template-columns:1fr 40px 1fr; gap:8px; align-items:center; } .pair .arrow{ text-align:center; font-size:22px; color:var(--faint); } .rel{ font-size:14px; color:#3d434f; margin:12px 0 0; padding-left:20px; } .rel li{ margin:5px 0; } .conv li{ margin:7px 0; } .hr-screen table.price{ width:100%; border-collapse:collapse; font-size:14px; } .hr-screen table.price th, .hr-screen table.price td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-2); } .hr-screen table.price th{ background:var(--line-2); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); } .hr-screen table.price td.p{ text-align:right; font-weight:800; } .redact{ display:inline-block; background:#1b1e26; color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; padding:1px 8px; border-radius:4px; } .keep{ background:var(--green-soft); border-bottom:2px solid var(--green); padding:0 4px; border-radius:4px; font-weight:600; } @media (max-width:560px){ .pair{ grid-template-columns:1fr; } .pair .arrow{ transform:rotate(90deg); } } /* ── Test: rules banner + monitor ─────────────────────────────────────────── */ .rulebar{ background:linear-gradient(180deg,#23262f,#181b22); color:#e8eaef; border-radius:14px; padding:13px 16px; margin-bottom:14px; font-size:13.5px; line-height:1.55; box-shadow:var(--shadow); } .rulebar b{ color:#ffcf94; } .monitor{ font-size:12px; color:#b23; font-weight:700; } /* ── Matching: tray + work-order rows ─────────────────────────────────────── */ .q-head{ display:flex; align-items:center; gap:10px; margin:0 0 6px; } .q-num{ width:28px; height:28px; border-radius:9px; background:var(--accent); color:#fff; font-weight:800; font-size:14px; display:grid; place-items:center; flex:0 0 auto; } .q-title{ font-weight:750; font-size:17px; } .tray-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700; margin:4px 0 7px; } .tray{ display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:11px; padding:13px; border:2px dashed var(--line); border-radius:14px; background:#faf7f1; min-height:64px; } .card-item{ cursor:grab; touch-action:none; transition:transform .12s, box-shadow .12s; border-radius:12px; } .card-item:hover{ transform:translateY(-2px); } .card-item:hover .doc{ box-shadow:var(--shadow); } .card-item.selected .doc{ outline:3px solid var(--accent); outline-offset:1px; } .card-item.dragging{ opacity:.4; } /* Each row stacks the drop zone ABOVE its work order — the matched invoice reads top-down with the WO it belongs to, and rows can wrap into as many columns as fit instead of each one eating a full-width side-by-side pair. */ .wo-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:14px; align-items:start; } .wo-row{ display:flex; flex-direction:column; gap:8px; } .zone-slot{ position:relative; border:2px dashed var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:13px; font-weight:600; padding:8px; min-height:66px; text-align:center; transition:.14s; } .zone-slot.filled{ border-style:solid; border-color:var(--green); background:var(--green-soft); color:inherit; } .zone-slot.filled::after{ content:'✓ matched'; position:absolute; top:6px; right:8px; font-size:10.5px; font-weight:800; color:#fff; background:var(--green); border-radius:20px; padding:2px 9px; box-shadow:var(--shadow); z-index:2; } .zone-slot.just-matched{ animation:hr-pop .55s ease; } @keyframes hr-pop{ 0%{ transform:scale(.98); box-shadow:0 0 0 0 rgba(34,160,90,.45); } 50%{ transform:scale(1.015); box-shadow:0 0 0 10px rgba(34,160,90,0); } 100%{ transform:scale(1); } } .zone-slot.over{ background:var(--accent-soft); border-color:var(--accent); } .num-in{ font-size:17px !important; width:280px !important; max-width:100%; } /* Quick multiple-choice questions */ .mathq{ margin:0 0 18px; } .mathq:last-child{ margin-bottom:0; } .mathq .qtext{ font-weight:650; margin:0 0 8px; } .choices{ display:grid; gap:8px; } .choice{ display:flex; align-items:center; gap:11px; border:1px solid var(--line); border-radius:11px; padding:11px 14px; cursor:pointer; transition:.14s; font-weight:600; background:#fff; } .choice:hover{ border-color:var(--accent); background:#fffaf4; } .choice:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring); } .choice input{ accent-color:var(--accent); width:18px; height:18px; flex:0 0 auto; } .choice.idk{ color:var(--muted); font-weight:500; font-style:italic; } /* ── Proctor "call bar" — a FIXED picture-in-picture dock pinned to the bottom- right corner. It follows the candidate down the page so Muhammed + the self- view are always visible while they scroll and answer. (Chat dock is bottom- LEFT, so the two never collide.) */ .callbar{ position:fixed; right:16px; bottom:16px; top:auto; left:auto; z-index:60; display:flex; flex-direction:column; gap:8px; margin:0; width:300px; } .pv{ width:100%; min-width:0; border-radius:14px; overflow:hidden; background:#0d0f13; box-shadow:var(--shadow); position:relative; border:1px solid rgba(255,255,255,.18); } .pv video{ width:100%; display:block; background:#0d0f13; } /* Proctor clip: kept SMALL on purpose — big enough to read as "a person is on camera" but too small to actually study (can't tell it's a loop/not a real person). Self-view can crop-to-fill since it's the candidate's own webcam. */ .pv.proctor{ width:130px; margin:0 auto; } .pv.proctor video{ height:90px; object-fit:contain; } .pv.you video{ height:170px; object-fit:cover; transform:scaleX(-1); } .pv .cap{ position:absolute; bottom:0; left:0; right:0; font-size:11px; font-weight:700; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.75)); padding:18px 9px 6px; display:flex; align-items:center; gap:6px; } .pv.you .cap::before{ content:""; width:8px; height:8px; border-radius:50%; background:#ff5a5a; box-shadow:0 0 0 3px rgba(255,90,90,.25); } .pv-live{ position:absolute; top:8px; right:9px; font-size:9.5px; font-weight:800; letter-spacing:.05em; color:#fff; background:rgba(193,18,31,.88); padding:2px 7px; border-radius:5px; } /* Proctor clip on the consent page — autoplays inline before they turn on their camera. */ .consent-proctor{ position:relative; max-width:130px; margin:0 0 16px; border-radius:14px; overflow:hidden; background:#0d0f13; border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow); } .consent-proctor video{ width:100%; height:90px; object-fit:contain; display:block; background:#0d0f13; } .consent-proctor .cap{ position:absolute; bottom:0; left:0; right:0; font-size:11px; font-weight:700; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.75)); padding:18px 9px 6px; } @media (max-width:640px){ .callbar{ width:190px; right:10px; bottom:10px; } .pv.you video{ height:120px; } } .cam-gate{ position:fixed; inset:0; z-index:70; background:rgba(18,20,26,.93); backdrop-filter:blur(3px); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; } .cam-gate .box{ max-width:460px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:28px 26px; } .cam-gate .box h2{ color:#fff; font-size:22px; } .cam-gate .box p{ opacity:.85; } /* ── Proctor chat (bottom-left overlay, collapsible so it can't block Submit) ─ */ .chat{ position:fixed; left:14px; bottom:14px; z-index:60; width:280px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; max-height:min(70vh,320px); } .chat.collapsed{ max-height:none; } .chat.collapsed .chat-msgs{ display:none; } .chat-h{ display:flex; align-items:center; gap:8px; padding:10px 13px; font-size:13px; font-weight:700; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#faf7f1); cursor:pointer; } .chat-h .avatar{ width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#3b4252,#20242e); color:#fff; display:grid; place-items:center; font-size:12px; flex:0 0 auto; } .chat-h .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(21,128,61,.18); } .chat-h .toggle{ margin-left:auto; color:var(--faint); font-size:11px; font-weight:700; } .chat-msgs{ max-height:190px; overflow-y:auto; padding:11px; display:flex; flex-direction:column; gap:7px; font-size:12.5px; } .msg-p{ padding:7px 11px; border-radius:12px; max-width:90%; line-height:1.4; background:#eef1f6; align-self:flex-start; border-bottom-left-radius:4px; } .msg-p.typing{ display:flex; gap:4px; align-items:center; padding:10px 12px; } .msg-p.typing span{ width:6px; height:6px; border-radius:50%; background:var(--faint); opacity:.4; animation:hr-typing 1s infinite ease-in-out; } .msg-p.typing span:nth-child(2){ animation-delay:.18s; } .msg-p.typing span:nth-child(3){ animation-delay:.36s; } @keyframes hr-typing{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:.9; transform:translateY(-3px); } } @media (max-width:720px){ .chat{ width:min(240px,calc(100vw - 28px)); } .chat:not(.collapsed){ max-height:44vh; } } /* ── Live match counter ────────────────────────────────────────────────────── */ .match-counter{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--muted); background:var(--line-2); padding:5px 12px; border-radius:999px; } .match-counter .n{ color:var(--accent); } .match-counter.full{ background:var(--green-soft); color:#166534; } .match-counter.full .n{ color:#166534; } @media (prefers-reduced-motion: reduce){ .timer .clock.danger{ animation:none !important; } } /* ── Badges ───────────────────────────────────────────────────────────────── */ .hbadge{ display:inline-block; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; } .hbadge--green{ background:var(--green-soft); color:#166534; } .hbadge--red{ background:var(--red-soft); color:#8f1d1d; } .hbadge--gray{ background:#eef0f3; color:#4b5563; } /* ── Big status icon (done pages) ─────────────────────────────────────────── */ .big-icon{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; font-size:36px; margin:0 auto 12px; background:var(--accent-soft); } .big-icon.green{ background:var(--green-soft); }