html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; color: #1B1730; -webkit-font-smoothing: antialiased; }
.display { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
.fade-up {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view {
opacity: 1;
transform: translateY(0);
}
.float-mockup {
animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 4px 6px rgba(27,23,48,0.05), 0 12px 28px -8px rgba(27,23,48,0.14); }
.btn-lift { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn-lift:hover { transform: translateY(-2px); }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid #6D3EF0;
outline-offset: 2px;
}
/* ---- How it works: icon tiles + curved dashed connectors ---- */
.hiw-steps {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 44px 24px;
}
.hiw-step { text-align: center; }
.hiw-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 92px;
height: 92px;
margin: 0 auto;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, #8B5CF6 0%, #6D3EF0 58%, #5B2FDB 100%);
box-shadow: 0 16px 32px -12px rgba(109, 62, 240, 0.55);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* soft diagonal sheen across the top-left corner */
.hiw-icon::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 45%, transparent 45%);
}
.hiw-icon svg {
position: relative;
width: 40px;
height: 40px;
color: #fff;
}
.hiw-step:hover .hiw-icon {
transform: translateY(-4px);
box-shadow: 0 22px 40px -12px rgba(109, 62, 240, 0.6);
}
/* step number, tucked into the tile's corner */
.hiw-num {
position: absolute;
top: -6px;
right: calc(50% - 58px);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 9999px;
background: #fff;
color: #6D3EF0;
font-size: 11.5px;
font-weight: 700;
box-shadow: 0 2px 8px rgba(27, 23, 48, 0.14);
}
.hiw-head { position: relative; }
.hiw-title {
margin-top: 22px;
color: #6D3EF0;
font-size: 16.5px;
font-weight: 700;
}
.hiw-text {
max-width: 300px;
margin: 8px auto 0;
color: #6B6680;
font-size: 14.5px;
line-height: 1.7;
}
.hiw-arrow {
position: absolute;
display: none;
width: 22%;
height: auto;
color: #CBC7D6;
pointer-events: none;
}
.hiw-arrow--1 { top: 8px; left: 22.5%; }
.hiw-arrow--2 { top: 54px; left: 55.5%; }
@media (min-width: 768px) {
.hiw-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.hiw-arrow { display: block; }
}
/* Hero banner: a strip of the LinkedIn page grey under the screenshot, so the
shot reads as part of the page rather than a cut-off rectangle. */
.hero-banner {
padding-bottom: 10px;
background-color: #f3f2f0;
}
/* ---- Hero: centred, product shot beneath the copy ---- */
.hero-center {
position: relative;
max-width: 1120px;
margin: 0 auto;
padding: 56px 24px 72px;
text-align: center;
}
.hero-brand {
display: block;
width: 84px;
height: 84px;
margin: 0 auto;
}
/* full width to play with now, so the headline can carry the section */
.hero-title {
margin-top: 26px;
font-size: clamp(34px, 5vw, 60px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.025em;
color: #1B1730;
}
.hero-lede {
max-width: 640px;
margin: 22px auto 0;
font-size: 18px;
line-height: 1.65;
color: #6B6680;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
padding: 17px 34px;
border-radius: 9999px;
background: #6D3EF0;
color: #fff;
font-size: 16.5px;
font-weight: 600;
box-shadow: 0 10px 26px -10px rgba(109, 62, 240, 0.75);
}
.hero-cta:hover { background: #5B2FDB; }
.hero-cta svg { width: 19px; height: 19px; }
.hero-note {
margin-top: 15px;
font-size: 14px;
color: #8A8598;
}
.hero-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 30px;
margin-top: 30px;
}
.hero-points li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
color: rgba(27, 23, 48, 0.9);
}
.hero-points svg {
flex-shrink: 0;
width: 18px;
height: 18px;
color: #6D3EF0;
}
.hero-figure {
max-width: 1000px;
margin: 58px auto 0;
}
.hero-shot {
position: relative;
aspect-ratio: 1912 / 961;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px -15px rgba(76, 29, 224, 0.25);
/* the live panels below size themselves against this box */
container-type: inline-size;
}
/* Each frame is as tall as its own screenshot, so the overlays inside it
line up with that shot rather than with the container. */
.hero-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
backface-visibility: hidden;
}
.hero-screen--home { animation: rc-frame-home 26s ease-in-out infinite; }
.hero-screen--linked { opacity: 0; animation: rc-frame-linked 26s ease-in-out infinite; }
.hero-screen--result { opacity: 0; animation: rc-frame-result 26s ease-in-out infinite; }
.hero-screen--indeed { opacity: 0; animation: rc-frame-indeed 26s ease-in-out infinite; }
.hero-shot-img {
display: block;
width: 100%;
}
.hero-blob {
position: absolute;
z-index: -10;
top: 40px;
left: 50%;
width: 420px;
height: 420px;
margin-left: -210px;
border-radius: 9999px;
background: rgba(221, 214, 254, 0.4);
filter: blur(64px);
}
@media (max-width: 640px) {
.hero-center { padding: 40px 20px 56px; }
.hero-brand { width: 68px; height: 68px; }
.hero-lede { font-size: 16.5px; }
.hero-cta { padding: 15px 26px; font-size: 15.5px; }
.hero-points { gap: 10px 20px; }
.hero-figure { margin-top: 42px; }
}
/* ---- Platform logo marquee (Works Everywhere) ---- */
.marquee {
position: relative;
overflow: hidden;
/* fade the strip out at both edges instead of a hard cut */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
}
.marquee-track {
display: flex;
align-items: center;
width: max-content;
/* room for the card shadows, which the overflow:hidden would otherwise clip */
padding: 20px 0;
/* the list is rendered twice over; sliding one half puts it back where it started */
animation: marquee-ltr 45s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-ltr {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.plat-item {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 13px;
margin: 0 13px;
padding: 15px 26px;
border: 1px solid #F1EFF7;
border-radius: 14px;
background: #fff;
box-shadow: 0 2px 5px rgba(27, 23, 48, 0.05), 0 12px 26px -14px rgba(27, 23, 48, 0.22);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.plat-item:hover {
transform: translateY(-3px);
border-color: #E4DDFB;
box-shadow: 0 4px 8px rgba(27, 23, 48, 0.05), 0 18px 34px -14px rgba(109, 62, 240, 0.38);
}
/* sized by height, not a fixed square: square app marks and landscape
wordmarks then carry the same optical weight */
.plat-item img {
width: auto;
height: 46px;
max-width: 118px;
object-fit: contain;
}
/* Job Hai is a wordmark, not a square mark — it reads heavier at the shared
height, so it gets trimmed to sit level with the others. */
.plat-item--jobhai img { height: 39px; }
.plat-item span {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: #4A4560;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
/* the global animation kill leaves the track parked — let it be scrolled instead */
.marquee { overflow-x: auto; }
}
@media (max-width: 640px) {
.plat-item { margin: 0 8px; padding: 12px 18px; gap: 10px; }
.plat-item img { height: 36px; max-width: 96px; }
.plat-item--jobhai img { height: 30px; }
.plat-item span { font-size: 15px; }
}
/* Brand logo (header + footer) */
.site-logo {
width: auto;
display: block;
}
.site-logo--header { height: 47px; }
.site-logo--footer { height: 47px; }
@media (max-width: 400px) {
.site-logo--header { height: 34px; }
}
/* Not present in the compiled Tailwind build — used by the Key Insights rows */
.nowrap { white-space: nowrap; }
/* ---- Simple text pages (FAQ, Privacy, Terms) ---- */
.page-hero {
background: linear-gradient(to bottom, rgba(245,243,255,0.7), #fff);
border-bottom: 1px solid #F3F4F6;
padding: 56px 0 44px;
}
.page-wrap {
max-width: 46rem;
margin: 0 auto;
padding: 0 24px;
}
.page-hero h1 {
font-size: 38px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
}
.page-hero .page-sub {
margin-top: 12px;
font-size: 16px;
color: #6B6680;
}
.page-body { padding: 48px 0 72px; }
.page-body h2 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 40px 0 12px;
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 {
font-size: 16px;
font-weight: 600;
margin: 26px 0 8px;
}
.page-body p {
font-size: 15.5px;
line-height: 1.7;
color: #4A4560;
margin-bottom: 14px;
}
.page-body ul {
margin: 0 0 16px;
padding-left: 20px;
list-style: disc;
}
.page-body li {
font-size: 15.5px;
line-height: 1.7;
color: #4A4560;
margin-bottom: 8px;
}
.page-body a { color: #6D3EF0; }
.page-body a:hover { text-decoration: underline; }
.page-body .meta {
font-size: 13.5px;
color: #6B6680;
padding-bottom: 8px;
}
.page-body hr {
border-top: 1px solid #F3F4F6;
margin: 40px 0;
}
@media (max-width: 640px) {
.page-hero h1 { font-size: 30px; }
.page-hero { padding: 40px 0 32px; }
}
/* ---- Login / signup ---- */
.auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
background: linear-gradient(to bottom, rgba(245,243,255,0.8), #fff 60%);
}
.auth-logo {
display: block;
height: 47px;
width: auto;
margin: 0 auto 28px;
}
.auth-card {
width: 100%;
max-width: 420px;
background: #fff;
border: 1px solid #F3F4F6;
border-radius: 16px;
padding: 32px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04), 0 12px 32px -12px rgba(27,23,48,0.14);
}
.auth-card h1 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
text-align: center;
}
.auth-card .auth-sub {
margin-top: 6px;
margin-bottom: 24px;
font-size: 14px;
color: #6B6680;
text-align: center;
}
.auth-field { margin-bottom: 16px; }
.auth-field label {
display: block;
font-size: 13.5px;
font-weight: 600;
color: #1B1730;
margin-bottom: 6px;
}
.auth-field input {
width: 100%;
height: 44px;
padding: 0 14px;
font-size: 14.5px;
color: #1B1730;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-field input::placeholder { color: #9CA3AF; }
.auth-field input:focus {
outline: none;
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.auth-field input.is-invalid {
border-color: #DC2626;
box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}
.auth-error {
display: none;
margin-top: 6px;
font-size: 12.5px;
color: #DC2626;
}
.auth-error.show { display: block; }
.auth-btn {
width: 100%;
height: 46px;
margin-top: 8px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: #6D3EF0;
border-radius: 10px;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.auth-btn:hover { background: #5B2FDB; transform: translateY(-1px); }
.auth-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
font-size: 13.5px;
}
.auth-row label {
display: flex;
align-items: center;
gap: 7px;
color: #4A4560;
cursor: pointer;
}
.auth-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: #6D3EF0; }
.auth-alt {
margin-top: 22px;
text-align: center;
font-size: 14px;
color: #6B6680;
}
.auth-link { color: #6D3EF0; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }
.auth-back {
margin-top: 22px;
text-align: center;
font-size: 13.5px;
color: #6B6680;
}
.auth-terms {
margin-top: 14px;
font-size: 12.5px;
line-height: 1.6;
color: #6B6680;
text-align: center;
}
@media (max-width: 480px) {
.auth-card { padding: 26px 20px; }
}
/* =========================================================
Logged-in app: header, home, saved
========================================================= */
/* viewport minus the 72px app header and the ~158px footer (logo row + bar) */
.app-shell { background: #FAFAFC; min-height: calc(100vh - 72px - 158px); }
.app-wrap { width: 100%; padding: 0 28px; }
/* ---- App header ---- */
.app-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
border-bottom: 1px solid #F0EFF4;
}
.app-header__inner {
width: 100%;
padding: 0 28px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.app-brand { display: flex; align-items: center; }
.app-brand__mark { display: none; width: 38px; height: 38px; }
.app-tabs { display: flex; align-items: center; gap: 4px; }
.app-tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border-radius: 9px;
font-size: 14.5px;
font-weight: 600;
color: #6B6680;
white-space: nowrap;
transition: color 0.15s ease, background-color 0.15s ease;
}
.app-tab svg { width: 17px; height: 17px; }
.app-tab:hover { color: #1B1730; background: #F4F3F8; }
.app-tab.is-active {
color: #6D3EF0;
background: rgba(109,62,240,0.09);
}
.app-user { display: flex; align-items: center; gap: 14px; }
.app-avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(to bottom right, #DDD6FE, #A78BFA);
color: #fff;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
}
.app-signout {
font-size: 13.5px;
font-weight: 500;
color: #6B6680;
transition: color 0.15s ease;
}
.app-signout:hover { color: #6D3EF0; }
/* ---- App footer ---- */
.app-footer { border-top: 1px solid #F0EFF4; background: #fff; }
.app-footer__logo {
display: flex;
justify-content: center;
padding: 30px 24px 24px;
}
.app-footer__inner {
border-top: 1px solid #F0EFF4;
padding: 20px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 12.5px;
color: #6B6680;
}
.app-footer__links { display: flex; gap: 20px; }
.app-footer__links a { transition: color 0.15s ease; }
.app-footer__links a:hover { color: #6D3EF0; }
/* ---- Section headings ---- */
.app-section { padding: 44px 0 8px; }
.app-section h1 {
font-size: 27px;
font-weight: 700;
letter-spacing: -0.025em;
color: #1B1730;
}
.app-section h2 {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1B1730;
}
.app-section .app-sub {
margin-top: 7px;
font-size: 15px;
color: #6B6680;
}
/* ---- Platform grid ---- */
.platform-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: 26px;
padding-bottom: 48px;
}
.platform-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: #fff;
border: 1px solid #EDECF2;
border-radius: 14px;
padding: 30px 20px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.platform-card:hover {
transform: translateY(-3px);
border-color: #DDD6FE;
box-shadow: 0 4px 8px rgba(27,23,48,0.05), 0 16px 32px -14px rgba(76,29,224,0.22);
}
.platform-mark {
width: 54px;
height: 54px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #EFEEF4;
flex-shrink: 0;
overflow: hidden;
}
.platform-mark img {
width: 82%;
height: 82%;
object-fit: contain;
}
.platform-card__name {
font-size: 15.5px;
font-weight: 600;
color: #1B1730;
transition: color 0.18s ease;
}
.platform-card:hover .platform-card__name { color: #6D3EF0; }
/* ---- Saved: search box ---- */
.saved-search { position: relative; }
.saved-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
color: #9CA3AF;
pointer-events: none;
}
.saved-search input {
width: 260px;
height: 42px;
padding: 0 14px 0 34px;
font-size: 14px;
color: #1B1730;
background: #fff;
border: 1px solid #EDECF2;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.saved-search input::placeholder { color: #9CA3AF; }
.saved-search input:focus {
outline: none;
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
/* ---- Saved: table cells ---- */
.is-hidden { display: none !important; }
.cell-person { display: flex; align-items: center; gap: 11px; }
.cell-avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(to bottom right, #DDD6FE, #A78BFA);
color: #fff;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cell-skills { display: inline-flex; align-items: center; gap: 5px; }
.skill-tag {
font-size: 11.5px;
font-weight: 500;
color: #5B2FDB;
background: rgba(109,62,240,0.07);
border-radius: 6px;
padding: 3px 8px;
white-space: nowrap;
}
.skill-tag.is-more { color: #8A8598; background: #F4F3F8; }
.cell-source { display: inline-flex; align-items: center; gap: 8px; }
.cell-source .platform-mark {
width: 24px;
height: 24px;
border-radius: 7px;
}
.cell-source .platform-mark img { width: 80%; height: 80%; }
.score { font-size: 15px; font-weight: 700; color: #6D3EF0; }
.score.is-strong { color: #16A34A; }
@media (max-width: 1024px) {
.platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.app-brand__full { display: none; }
.app-brand__mark { display: block; }
}
@media (max-width: 720px) {
.app-header__inner { gap: 12px; padding: 0 16px; }
.app-wrap { padding: 0 16px; }
.app-footer__inner { padding: 18px 16px; }
.app-tab { padding: 0 11px; }
.app-signout { display: none; }
.platform-grid { grid-template-columns: 1fr; }
.saved-search input { width: 100%; }
.saved-search { width: 100%; }
.app-section h1 { font-size: 23px; }
}
/* ---- Jobs table screen ---- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.app-back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 28px;
font-size: 13.5px;
font-weight: 500;
color: #6B6680;
transition: color 0.15s ease;
}
.app-back svg { width: 15px; height: 15px; }
.app-back:hover { color: #6D3EF0; }
.app-section--row { padding-top: 18px; }
.app-section__title { display: flex; align-items: center; gap: 16px; }
.app-section__title h1 { line-height: 1.2; }
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 26px;
}
.seg-tabs {
display: inline-flex;
padding: 4px;
background: #F1F0F6;
border-radius: 10px;
}
.seg-tab {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 16px;
border-radius: 7px;
font-size: 14px;
font-weight: 600;
color: #6B6680;
transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.seg-tab:hover { color: #1B1730; }
.seg-tab.is-active {
background: #fff;
color: #6D3EF0;
box-shadow: 0 1px 2px rgba(27,23,48,0.08);
}
.seg-count { font-size: 12px; font-weight: 600; opacity: 0.6; }
.btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
height: 42px;
padding: 0 18px;
font-size: 14px;
font-weight: 600;
color: #fff;
background: #6D3EF0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04), 0 8px 20px -10px rgba(76,29,224,0.5);
transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-primary svg { width: 16px; height: 16px; }
.btn-primary:hover { background: #5B2FDB; transform: translateY(-1px); }
.table-card {
margin-top: 18px;
margin-bottom: 56px;
background: #fff;
border: 1px solid #EDECF2;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04);
overflow-x: auto;
}
.data-table {
width: 100%;
min-width: 940px;
border-collapse: collapse;
text-align: left;
}
.data-table th {
padding: 14px 16px;
font-size: 12.5px;
font-weight: 500;
color: #9490A5;
background: #FBFAFD;
border-bottom: 1px solid #EDECF2;
white-space: nowrap;
}
.data-table td {
padding: 14px 16px;
font-size: 14px;
color: #4A4560;
border-bottom: 1px solid #F5F4F9;
vertical-align: middle;
white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color 0.15s ease; }
.data-table tbody tr:hover { background: #FBFAFD; }
.data-table .is-num { text-align: right; }
.data-table .is-right { text-align: right; }
.data-table .is-muted { color: #8A8598; }
.data-table .is-overdue { color: #DC2626; }
.cell-title {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: #1B1730;
}
.cell-title .star { width: 13px; height: 13px; fill: #EF4444; flex-shrink: 0; }
.cell-title .platform-mark {
width: 22px;
height: 22px;
border-radius: 6px;
flex-shrink: 0;
}
.cell-title .platform-mark img { width: 80%; height: 80%; }
.cell-sub {
display: block;
margin-top: 2px;
font-size: 12.5px;
color: #9490A5;
}
.row-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 7px;
color: #9490A5;
transition: color 0.15s ease, background-color 0.15s ease;
}
.row-action svg { width: 16px; height: 16px; }
.row-action:hover { color: #6D3EF0; background: rgba(109,62,240,0.09); }
.table-empty {
padding: 46px 20px !important;
text-align: center;
color: #6B6680;
white-space: normal !important;
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
.pill--published { color: #16A34A; }
.pill--expired { color: #EF4444; }
@media (max-width: 720px) {
.app-section__title { gap: 12px; }
.table-toolbar { align-items: stretch; flex-direction: column; }
.seg-tabs { justify-content: center; }
.btn-primary { justify-content: center; }
}
/* =========================================================
Candidate screen: Copilot panel beside the platform page
========================================================= */
.ext-screen {
display: flex;
align-items: stretch;
min-height: calc(100vh - 72px - 158px);
background: #F1F0F5;
}
/* ---- Left: the Copilot side panel ---- */
.ext-panel {
width: 400px;
flex-shrink: 0;
display: flex;
flex-direction: column;
background: #fff;
border-right: 1px solid #E4E2EC;
}
.ext-panel__head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid #F0EFF4;
}
.ext-panel__mark { width: 26px; height: 26px; flex-shrink: 0; }
.ext-panel__brand { font-size: 14.5px; font-weight: 700; color: #1B1730; }
.ext-panel__user {
margin-left: auto;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
color: #9490A5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
.ext-panel__close {
display: flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 7px;
color: #9490A5;
flex-shrink: 0;
transition: color 0.15s ease, background-color 0.15s ease;
}
.ext-panel__close svg { width: 15px; height: 15px; }
.ext-panel__close:hover { color: #1B1730; background: #F4F3F8; }
.ext-panel__body { padding: 18px 16px 28px; }
.ext-tabline { font-size: 12.5px; color: #6B6680; }
.ext-tabline b { color: #1B1730; font-weight: 600; }
.ext-rowhead {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #6B6680;
}
.ext-rowhead b { color: #6D3EF0; }
.ext-refresh {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border: 1px solid #EDECF2;
border-radius: 8px;
color: #6D3EF0;
transition: background-color 0.15s ease;
}
.ext-refresh svg { width: 14px; height: 14px; }
.ext-refresh:hover { background: #F6F4FE; }
.ext-select {
width: 100%;
height: 42px;
margin-top: 10px;
padding: 0 34px 0 12px;
font-size: 13.5px;
color: #1B1730;
background: #fff;
border: 1px solid #E4E2EC;
border-radius: 10px;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 15px;
}
.ext-select:focus {
outline: none;
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.ext-drop {
margin-top: 12px;
padding: 14px;
background: #FBFAFD;
border: 1px solid #EDECF2;
border-radius: 12px;
}
.ext-drop__btn {
display: block;
padding: 11px;
text-align: center;
font-size: 13.5px;
font-weight: 600;
color: #1B1730;
background: #fff;
border: 1px dashed #D8D5E2;
border-radius: 9px;
}
.ext-drop__note {
margin-top: 10px;
font-size: 11.5px;
line-height: 1.55;
color: #8A8598;
}
.ext-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.ext-analyse { width: 100%; justify-content: center; height: 52px; }
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 12px;
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
text-align: center;
color: #5B2FDB;
background: #F3F0FE;
border: 1px solid #E4DCFD;
border-radius: 10px;
transition: background-color 0.15s ease;
}
.btn-secondary:hover { background: #EBE5FD; }
.ext-hint { margin-top: 10px; font-size: 11.5px; color: #8A8598; }
.ext-sectiontitle {
margin-top: 24px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6B6680;
}
.ext-card {
margin-top: 10px;
padding: 16px;
background: #fff;
border: 1px solid #EDECF2;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04);
}
.ext-score { display: flex; align-items: center; gap: 14px; }
.ext-score__text { flex: 1; min-width: 0; }
.ext-score__label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #9490A5;
}
.ext-score__verdict {
margin-top: 5px;
font-size: 14px;
font-weight: 600;
color: #1B1730;
}
.ext-score__verdict span {
display: block;
margin-top: 3px;
font-size: 12.5px;
font-weight: 400;
line-height: 1.5;
color: #6B6680;
}
.ext-ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; text-align: center; }
.ext-ring svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.ext-ring__track { fill: none; stroke: #F1F0F6; stroke-width: 5; }
.ext-ring__fill { fill: none; stroke-width: 5; stroke-linecap: round; }
.ext-ring--strong .ext-ring__fill { stroke: #16A34A; }
.ext-ring--good .ext-ring__fill { stroke: #6D3EF0; }
.ext-ring--partial .ext-ring__fill { stroke: #F59E0B; }
.ext-ring__num {
position: absolute;
top: 46%;
left: 0; right: 0;
transform: translateY(-50%);
font-size: 21px;
font-weight: 700;
color: #1B1730;
}
.ext-ring--strong .ext-ring__num { color: #16A34A; }
.ext-ring--partial .ext-ring__num { color: #D97706; }
.ext-ring__of {
position: absolute;
top: 60%;
left: 0; right: 0;
font-size: 8.5px;
letter-spacing: 0.04em;
color: #9490A5;
}
.ext-bar {
height: 5px;
margin-top: 14px;
background: #F1F0F6;
border-radius: 999px;
overflow: hidden;
}
.ext-bar span {
display: block;
height: 100%;
border-radius: 999px;
}
.ext-bar--partial span { background: linear-gradient(to right, #F59E0B, #FBBF24); }
.ext-bar--good span { background: linear-gradient(to right, #6D3EF0, #A78BFA); }
.ext-bar--strong span { background: linear-gradient(to right, #16A34A, #4ADE80); }
.ext-card__title {
margin-top: 14px;
font-size: 13px;
font-weight: 600;
line-height: 1.45;
color: #1B1730;
}
.ext-card__note {
margin-top: 7px;
font-size: 12px;
line-height: 1.6;
color: #6B6680;
}
/* ---- Right: the platform page ---- */
.site-pane { flex: 1; min-width: 0; background: #F1F0F5; }
.site-topbar {
display: flex;
align-items: center;
gap: 28px;
padding: 0 24px;
height: 58px;
background: #fff;
border-bottom: 1px solid #E4E2EC;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
font-weight: 700;
color: #1B1730;
}
.site-brand img { width: 24px; height: 24px; object-fit: contain; }
.site-nav { display: flex; gap: 22px; font-size: 14px; color: #4A4560; }
.site-nav a { padding: 18px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: #1B1730; }
.site-nav a.is-active { color: #1B1730; font-weight: 600; border-bottom-color: #6D3EF0; }
.site-body { padding: 20px 24px 40px; }
.crumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 14px;
color: #6B6680;
}
.crumb svg { width: 14px; height: 14px; color: #C3C0CE; }
.crumb a:hover { color: #6D3EF0; }
.crumb__now { font-weight: 700; color: #1B1730; }
.crumb__match {
padding: 3px 10px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: #B45309;
background: #FEF3C7;
}
.act-bar {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-top: 16px;
}
.act-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.act {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 14px;
font-size: 13.5px;
font-weight: 500;
color: #4A4560;
background: #fff;
border: 1px solid #DDDAE6;
border-radius: 8px;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.act svg { width: 15px; height: 15px; }
.act:hover { border-color: #B9B4CB; color: #1B1730; }
.act--yes { color: #16A34A; border-color: #A7E3BC; }
.act--yes:hover { color: #15803D; border-color: #16A34A; background: #F0FDF4; }
.act--no { color: #DC2626; border-color: #F3B6B6; }
.act--no:hover { color: #B91C1C; border-color: #DC2626; background: #FEF2F2; }
.site-card {
margin-top: 16px;
padding: 20px;
background: #fff;
border: 1px solid #E7E5EF;
border-radius: 10px;
}
.site-card__head {
font-size: 16px;
font-weight: 700;
color: #1B1730;
padding-bottom: 14px;
margin-bottom: 4px;
border-bottom: 1px solid #F0EFF4;
}
.prof-top { display: flex; align-items: flex-start; gap: 20px; }
.prof-name { font-size: 19px; font-weight: 700; color: #1B1730; }
.prof-summary {
margin-top: 7px;
font-size: 13.5px;
line-height: 1.65;
color: #4A4560;
max-width: 62ch;
}
.prof-link { color: #6D3EF0; font-weight: 600; }
.prof-link:hover { text-decoration: underline; }
.prof-photo {
width: 52px; height: 52px;
flex-shrink: 0;
border-radius: 8px;
background: linear-gradient(to bottom right, #DDD6FE, #A78BFA);
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.prof-tags {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 16px;
padding: 11px 14px;
background: #FFFBEB;
border: 1px solid #FDE68A;
border-radius: 8px;
font-size: 13px;
color: #4A4560;
}
.prof-tag { display: inline-flex; align-items: center; gap: 6px; }
.prof-tag svg { width: 13px; height: 13px; color: #16A34A; }
.prof-contact {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #F0EFF4;
}
.detail-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 8px 40px;
margin-top: 16px;
}
.detail-grid dl > div {
display: flex;
gap: 7px;
padding: 6px 0;
font-size: 13.5px;
line-height: 1.55;
}
.detail-grid dt { color: #8A8598; flex-shrink: 0; }
.detail-grid dd { color: #1B1730; }
.detail-applied {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #F0EFF4;
font-size: 12.5px;
color: #8A8598;
}
.jump-bar {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 16px;
padding: 13px 20px;
background: #fff;
border: 1px solid #E7E5EF;
border-radius: 10px;
font-size: 13.5px;
color: #6D3EF0;
}
.jump-bar span { color: #8A8598; font-weight: 600; }
.jump-bar a:hover { text-decoration: underline; }
@media (max-width: 1080px) {
.ext-screen { flex-direction: column; }
.ext-panel { width: 100%; border-right: 0; border-bottom: 1px solid #E4E2EC; }
.detail-grid { grid-template-columns: 1fr; gap: 0; }
}
/* =========================================================
Create Job drawer (slides in from the right)
========================================================= */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer__scrim {
position: absolute;
inset: 0;
background: rgba(27,23,48,0.45);
opacity: 0;
transition: opacity 0.28s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 680px;
max-width: 100%;
display: flex;
flex-direction: column;
background: #fff;
box-shadow: -20px 0 60px -20px rgba(27,23,48,0.35);
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 26px;
border-bottom: 1px solid #EDECF2;
flex-shrink: 0;
}
.drawer__head h2 {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.015em;
color: #1B1730;
}
.drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 8px;
color: #6B6680;
transition: color 0.15s ease, background-color 0.15s ease;
}
.drawer__close svg { width: 17px; height: 17px; }
.drawer__close:hover { color: #1B1730; background: #F4F3F8; }
.stepper {
display: flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
padding: 16px 26px;
border-bottom: 1px solid #EDECF2;
flex-shrink: 0;
}
.step {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 14px;
font-weight: 500;
color: #9490A5;
}
.step b {
display: flex;
align-items: center;
justify-content: center;
width: 25px; height: 25px;
border-radius: 999px;
border: 1px solid #DDDAE6;
font-size: 12.5px;
font-weight: 600;
color: #9490A5;
background: #fff;
transition: all 0.2s ease;
}
.step.is-active { color: #6D3EF0; font-weight: 600; }
.step.is-active b { background: #6D3EF0; border-color: #6D3EF0; color: #fff; }
.step.is-done { color: #4A4560; }
.step.is-done b { background: #EDE7FE; border-color: #D6C9FC; color: #5B2FDB; }
.drawer__body { flex: 1; overflow-y: auto; padding: 24px 26px 32px; }
.step-pane { display: none; }
.step-pane.is-active { display: block; }
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 22px;
}
.field--wide { grid-column: 1 / -1; }
.field label {
display: block;
font-size: 13.5px;
font-weight: 500;
color: #4A4560;
margin-bottom: 7px;
}
.field label i { color: #EF4444; font-style: normal; }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select,
.field textarea {
width: 100%;
height: 42px;
padding: 0 12px;
font-size: 14px;
color: #1B1730;
background: #fff;
border: 1px solid #DDDAE6;
border-radius: 8px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea {
height: auto;
padding: 11px 12px;
line-height: 1.6;
resize: vertical;
font-family: inherit;
}
.field select {
appearance: none;
padding-right: 32px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 15px;
}
.field input::placeholder, .field textarea::placeholder { color: #A9A5B6; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.field input.is-invalid {
border-color: #DC2626;
box-shadow: 0 0 0 3px rgba(220,38,38,0.10);
}
.field-range { display: flex; align-items: center; gap: 10px; }
.field-range > * { flex: 1 1 0; min-width: 0; }
/* the "to" separator only, not the money wrappers, which are spans too */
.field-range > span:not(.field-money) { flex: 0 0 auto; font-size: 13px; color: #8A8598; }
.field-money { position: relative; display: block; }
.field-money i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-style: normal;
font-size: 14px;
color: #8A8598;
pointer-events: none;
}
.field .field-money input[type="number"] { padding-left: 28px; }
.field-note { margin-top: 7px; font-size: 12px; line-height: 1.5; color: #8A8598; }
.tag-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: 42px;
padding: 6px 10px;
background: #fff;
border: 1px solid #DDDAE6;
border-radius: 8px;
cursor: text;
}
.tag-input:focus-within {
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.tag-input input {
flex: 1;
min-width: 160px;
height: 28px;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
font-size: 14px;
}
.tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 6px 4px 9px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
color: #5B2FDB;
background: rgba(109,62,240,0.09);
}
.tag button {
font-size: 15px;
line-height: 1;
color: #8B7BC8;
padding: 0 2px;
}
.tag button:hover { color: #5B2FDB; }
.btn-generate { margin-top: 16px; height: 40px; }
.pane-label {
font-size: 13.5px;
font-weight: 600;
color: #1B1730;
margin-bottom: 10px;
}
.publish-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 22px;
}
.publish-row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
border: 1px solid #DDDAE6;
border-radius: 9px;
font-size: 14px;
color: #1B1730;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.publish-row:hover { border-color: #C9C3DC; background: #FBFAFD; }
.publish-row input { width: 16px; height: 16px; accent-color: #6D3EF0; }
.publish-row .platform-mark { width: 26px; height: 26px; border-radius: 7px; }
.publish-row .platform-mark img { width: 80%; height: 80%; }
.drawer__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 26px;
border-top: 1px solid #EDECF2;
background: #fff;
flex-shrink: 0;
}
.btn-ghost {
height: 40px;
padding: 0 18px;
font-size: 14px;
font-weight: 600;
color: #4A4560;
background: #fff;
border: 1px solid #DDDAE6;
border-radius: 9px;
transition: border-color 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover:not(:disabled) { border-color: #B9B4CB; color: #1B1730; }
.btn-ghost:disabled { color: #C3C0CE; border-color: #EDECF2; cursor: default; }
@media (max-width: 720px) {
.field-grid { grid-template-columns: 1fr; }
.publish-list { grid-template-columns: 1fr; }
.stepper { gap: 14px; }
.step { font-size: 13px; }
}
/* ---- Drawer step 2: description editor ---- */
.pane-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.pane-head__label {
font-size: 14px;
font-weight: 600;
color: #1B1730;
}
.pane-head__label i { color: #EF4444; font-style: normal; }
.pane-head__note {
margin-top: 3px;
font-size: 12.5px;
color: #8A8598;
}
.btn-regen {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
flex-shrink: 0;
}
.btn-regen svg { width: 15px; height: 15px; color: #6D3EF0; }
.rte {
border: 1px solid #DDDAE6;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.rte:focus-within {
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.rte__bar {
display: flex;
align-items: center;
gap: 2px;
padding: 7px 9px;
border-bottom: 1px solid #EDECF2;
background: #fff;
}
.rte__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
border-radius: 7px;
font-size: 13.5px;
color: #4A4560;
transition: background-color 0.15s ease, color 0.15s ease;
}
.rte__btn svg { width: 16px; height: 16px; }
.rte__btn sub { font-size: 9px; }
.rte__btn:hover { background: #F4F3F8; color: #1B1730; }
.rte__btn.is-on { background: rgba(109,62,240,0.11); color: #6D3EF0; }
.rte__sep {
width: 1px;
height: 18px;
margin: 0 5px;
background: #E7E5EF;
}
.rte__area {
height: 380px;
overflow-y: auto;
padding: 16px 18px;
font-size: 13.5px;
line-height: 1.65;
color: #4A4560;
}
.rte__area:focus { outline: none; }
.rte__area p { margin-bottom: 12px; }
.rte__area strong { color: #1B1730; font-weight: 600; }
.rte__area h1 {
font-size: 18px;
font-weight: 700;
color: #1B1730;
margin: 18px 0 8px;
}
.rte__area h2 {
font-size: 15.5px;
font-weight: 700;
color: #1B1730;
margin: 16px 0 7px;
}
.rte__area ul, .rte__area ol {
margin: 0 0 14px;
padding-left: 22px;
}
.rte__area ul { list-style: disc; }
.rte__area ol { list-style: decimal; }
.rte__area li { margin-bottom: 8px; padding-left: 4px; }
.rte__area li::marker { color: #B9B4CB; }
.rte__area a { color: #6D3EF0; text-decoration: underline; }
/* =========================================================
Job detail: pipeline and candidate list
========================================================= */
.job-head {
display: flex;
align-items: flex-start;
gap: 14px;
flex-wrap: wrap;
padding: 24px 0 18px;
}
.job-back {
display: flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
margin-top: 2px;
border-radius: 8px;
color: #6B6680;
flex-shrink: 0;
transition: color 0.15s ease, background-color 0.15s ease;
}
.job-back svg { width: 18px; height: 18px; }
.job-back:hover { color: #1B1730; background: #EFEEF4; }
.job-head__id { flex: 1; min-width: 220px; }
.job-head__title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.job-head__title h1 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: #1B1730;
}
.tag-status {
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.tag-status--published { color: #16A34A; background: #F0FDF4; }
.tag-status--expired { color: #DC2626; background: #FEF2F2; }
.job-head__meta {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 8px;
font-size: 13.5px;
color: #6B6680;
}
.job-head__meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-head__meta svg { width: 14px; height: 14px; color: #A9A5B6; }
.job-head__acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg { width: 15px; height: 15px; }
.view-toggle {
display: inline-flex;
gap: 4px;
padding: 3px;
background: #F1F0F6;
border-radius: 9px;
}
.view-btn {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border-radius: 7px;
font-size: 13.5px;
font-weight: 600;
color: #6B6680;
}
.view-btn svg { width: 15px; height: 15px; }
.view-btn.is-active { background: #6D3EF0; color: #fff; }
.view-btn.is-off { color: #A9A5B6; cursor: not-allowed; }
.stage-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
border-bottom: 1px solid #E7E5EF;
}
.stage-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stage-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 12px 12px 13px;
font-size: 14px;
font-weight: 500;
color: #6B6680;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.stage-tab span {
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 999px;
background: #F1F0F6;
font-size: 11.5px;
font-weight: 600;
color: #6B6680;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stage-tab:hover { color: #1B1730; }
.stage-tab.is-active { color: #6D3EF0; font-weight: 600; border-bottom-color: #6D3EF0; }
.stage-tab.is-active span { background: rgba(109,62,240,0.12); color: #6D3EF0; }
.stage-totals { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.total {
display: inline-flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.total svg { width: 14px; height: 14px; }
.total--hired { color: #16A34A; background: #F0FDF4; border: 1px solid #C4EBD3; }
.total--archived { color: #DC2626; background: #FEF2F2; border: 1px solid #F6CACA; }
.cand-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin: 20px 0 16px;
}
.cand-heading {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 16px;
font-weight: 600;
color: #1B1730;
}
.cand-heading span {
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #F1F0F6;
font-size: 11.5px;
font-weight: 600;
color: #6B6680;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cand-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cand-tools .saved-search input { width: 230px; }
.cand-layout {
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
gap: 18px;
align-items: start;
padding-bottom: 56px;
}
.cand-layout.no-rail { grid-template-columns: minmax(0, 1fr); }
.cand-layout.no-rail .filter-rail { display: none; }
.cand-layout .table-card { margin-top: 0; margin-bottom: 0; }
.filter-rail {
background: #fff;
border: 1px solid #E7E5EF;
border-radius: 12px;
padding: 8px;
box-shadow: 0 1px 2px rgba(27,23,48,0.04);
}
.filter-rail__head {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 10px 12px;
font-size: 14px;
font-weight: 600;
color: #1B1730;
}
.filter-rail__head svg { width: 15px; height: 15px; color: #6B6680; }
.filter-group { border-top: 1px solid #F1F0F6; }
.filter-group summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 10px;
font-size: 13.5px;
color: #4A4560;
cursor: pointer;
list-style: none;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary:hover { color: #1B1730; }
.filter-group summary svg {
width: 15px; height: 15px;
color: #A9A5B6;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.filter-group[open] summary svg { transform: rotate(180deg); }
.filter-group__body { padding: 2px 10px 14px; }
.filter-opt {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 0;
font-size: 13px;
color: #4A4560;
cursor: pointer;
}
.filter-opt:hover { color: #1B1730; }
.filter-opt input { width: 15px; height: 15px; accent-color: #6D3EF0; flex-shrink: 0; }
.filter-text,
.filter-range select,
.filter-money input {
width: 100%;
height: 36px;
padding: 0 10px;
font-size: 13px;
color: #1B1730;
background: #fff;
border: 1px solid #DDDAE6;
border-radius: 7px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-text::placeholder, .filter-money input::placeholder { color: #A9A5B6; }
.filter-text:focus,
.filter-range select:focus,
.filter-money input:focus {
outline: none;
border-color: #6D3EF0;
box-shadow: 0 0 0 3px rgba(109,62,240,0.12);
}
.filter-range select {
appearance: none;
padding-right: 26px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 13px;
}
.filter-range { display: flex; align-items: center; gap: 7px; }
.filter-range > * { flex: 1 1 0; min-width: 0; }
.filter-range > span:not(.filter-money) { flex: 0 0 auto; font-size: 12px; color: #9490A5; }
.filter-money { position: relative; display: block; }
.filter-money i {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-style: normal;
font-size: 12.5px;
color: #9490A5;
pointer-events: none;
}
.filter-money input[type="number"] { padding-left: 22px; }
.filter-apply:not(:disabled) {
color: #fff;
background: #6D3EF0;
cursor: pointer;
transition: background-color 0.15s ease;
}
.filter-apply:not(:disabled):hover { background: #5B2FDB; }
.filter-apply {
width: 100%;
height: 42px;
margin-top: 10px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
color: #A9A5B6;
background: #F1F0F6;
}
.filter-apply:disabled { cursor: default; }
.data-table th.is-check, .data-table td.is-check { width: 40px; padding-right: 0; }
.data-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: #6D3EF0; }
.match-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
color: #5B2FDB;
background: rgba(109,62,240,0.10);
}
.match-pill svg { width: 12px; height: 12px; }
.cell-place { display: inline-flex; align-items: center; gap: 6px; }
.cell-place svg { width: 13px; height: 13px; color: #A9A5B6; }
.chip-soft {
padding: 3px 9px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
color: #4A4560;
background: #F1F0F6;
}
.cell-contact { display: block; font-size: 13px; color: #4A4560; }
.table-foot {
padding: 14px 16px;
border-top: 1px solid #F1F0F6;
font-size: 13px;
color: #8A8598;
}
@media (max-width: 1100px) {
.cand-layout { grid-template-columns: minmax(0, 1fr); }
.filter-rail { display: none; }
}
.cell-open { color: inherit; }
.cell-open:hover { color: #6D3EF0; }
/* ==================================================================
Live side panels drawn over the hero screenshots.
Geometry is measured off the three shots — img/app-home.webp (1912x961),
img/app-linkedin.webp (1761x893) and img/app-candidate.webp (1916x977) —
so each overlay sits exactly on top of the flat panel it replaces and
hides it. Everything inside is
sized in em against a root of 16 screenshot-pixels, so the panels scale
with the image at every viewport.
One 26s loop runs the whole story. The pointer moves first, so the
click lands almost immediately; each result holds just long enough to
read the score, then the pointer moves on to the next platform:
0.2s the pointer is already moving for the LinkedIn tile
1.2s click -> frame 2, the LinkedIn profile (84)
7.7s back to frame 1, refresh + reopen the dropdown + retype
12.8s click Naukri -> frame 3, the Naukri candidate (89)
19.1s back to frame 1
20.5s click Indeed -> frame 4, the Indeed candidate (88)
25.8s back to frame 1
================================================================== */
.rc-panel {
position: absolute;
left: 0;
bottom: 0;
background: #3C3C3C;
font-family: inherit;
text-align: left;
user-select: none;
}
/* resolved against .hero-shot, i.e. the full width of each screenshot:
16 / 1912 and 16 / 1916 — so 1em == 16px as measured in that shot */
.rc-panel--home {
top: 5.723%; /* 55 / 961 */
width: 24.477%; /* 468 / 1912 */
font-size: 0.8368cqw;
}
.rc-panel--linked {
top: 6.159%; /* 55 / 893 */
width: 24.532%; /* 432 / 1761 */
font-size: 0.8398cqw;
}
.rc-panel--result {
top: 6.960%; /* 68 / 977 */
width: 24.739%; /* 474 / 1916 */
font-size: 0.8351cqw;
}
.rc-panel--indeed {
top: 6.376%; /* 57 / 894 */
width: 25.000%; /* 440 / 1760 */
font-size: 0.8443cqw;
}
/* the dark title bar is native window chrome, drawn independently of the
web view inside it, so its height is not the same fraction in every shot */
.rc-panel--indeed .rc-chrome { height: 3.23em; }
/* --- dark window chrome, shared --- */
.rc-chrome {
display: flex;
align-items: center;
height: 3.0625em; /* 49px */
padding: 0 0.75em 0 1.3125em;
color: #F2F2F2;
}
.rc-dot {
width: 0.625em;
height: 0.625em;
border-radius: 50%;
background: #0FC79B;
box-shadow: 0 0 0 0.1875em rgba(15, 199, 155, 0.22);
animation: rc-dot-pulse 2.6s ease-in-out infinite;
}
.rc-chrome-title {
margin-left: 0.875em;
font-size: 0.9375em;
font-weight: 700;
letter-spacing: -0.01em;
}
.rc-chrome-ico {
width: 0.875em;
height: 0.875em;
color: #D8D8D8;
}
.rc-chrome-ico:first-of-type { margin-left: auto; }
.rc-chrome-ico + .rc-chrome-ico { margin-left: 1.375em; }
/* --- white card, shared --- */
.rc-card {
position: absolute;
top: 3.0625em; /* 49px */
display: flex;
flex-direction: column;
border-radius: 0.75em;
background: #fff;
overflow: hidden;
}
.rc-panel--home .rc-card { left: 0.375em; right: 0.8125em; bottom: 0.4375em; }
.rc-panel--linked .rc-card { left: 0.40625em; right: 0.75em; bottom: 1em; }
.rc-panel--result .rc-card { left: 0.75em; right: 0.8125em; bottom: 0.6875em; }
.rc-panel--indeed .rc-card { left: 0.27em; right: 1.28em; bottom: 0.74em; top: 3.23em; }
.rc-head {
display: flex;
align-items: center;
gap: 0.625em;
padding: 1.375em 1em 0.875em;
border-bottom: 0.0625em solid #F0F0F4;
}
.rc-logo {
width: 1.625em;
height: 1.625em;
flex-shrink: 0;
color: #6D5BD0;
}
.rc-word {
font-size: 1.1875em;
font-weight: 700;
letter-spacing: -0.02em;
color: #14121F;
white-space: nowrap;
}
.rc-word span { color: #6D5BD0; }
.rc-pill,
.rc-kebab {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2em;
border: 0.0625em solid #ECECF2;
border-radius: 0.625em;
background: #F5F6FA;
color: #3A3648;
}
.rc-pill {
gap: 0.4375em;
margin-left: auto;
padding: 0 0.8125em;
border-radius: 1em;
font-size: 0.875em;
white-space: nowrap;
}
.rc-pill svg { width: 1em; height: 1em; }
.rc-kebab { width: 2.375em; flex-shrink: 0; }
.rc-kebab svg { width: 1.0625em; height: 1.0625em; }
.rc-foot {
margin-top: auto;
padding-bottom: 0.9375em;
text-align: center;
}
.rc-save {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.0625em;
height: 2.625em;
border-radius: 0.625em;
background: #6D5BD0;
color: #fff;
font-size: 1em;
font-weight: 700;
box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7);
}
/* ---------- frame 1: pick a job, score it ---------- */
.rc-body { padding: 1.25em 1em 0; }
.rc-tab {
font-size: 0.9375em;
color: #6E6A7D;
}
.rc-jobs-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.3125em;
}
.rc-jobs {
font-size: 0.9375em;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
color: #14121F;
}
.rc-count {
display: inline-block;
color: #6D5BD0;
animation: rc-count-pop 26s ease-in-out infinite;
}
.rc-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.125em;
height: 1.9375em;
border: 0.0625em solid #EDEBF5;
border-radius: 0.5em;
background: #F7F6FB;
color: #6D5BD0;
}
.rc-refresh svg {
width: 1.0625em;
height: 1.0625em;
animation: rc-spin 26s ease-in-out infinite;
}
.rc-select {
display: flex;
align-items: center;
justify-content: space-between;
height: 2.9375em;
margin-top: 0.625em;
padding: 0 0.875em;
border: 0.0625em solid #E4E7EE;
border-radius: 0.625em;
color: #14121F;
animation: rc-select-focus 26s ease-in-out infinite;
}
.rc-select-label { font-size: 1em; }
.rc-select-label b { font-weight: 600; }
.rc-chev {
width: 1.125em;
height: 1.125em;
color: #6B6880;
animation: rc-chev-turn 26s ease-in-out infinite;
}
.rc-scoring {
position: relative;
display: inline-block;
margin-top: 0.75em;
font-size: 0.9375em;
color: #6E6A7D;
white-space: nowrap;
}
/* base state is the finished one, so the panel still reads correctly
when animations are switched off */
.rc-type {
display: inline-block;
clip-path: inset(0 0 0 0);
animation: rc-type 26s infinite;
}
.rc-caret {
position: absolute;
top: 0;
left: 100%;
height: 100%;
opacity: 0;
animation: rc-caret-move 26s infinite;
}
.rc-caret i {
display: block;
width: 0.09em;
height: 1.05em;
background: #6D5BD0;
animation: rc-blink 1s steps(1) infinite;
}
.rc-progress {
height: 0.1875em;
margin-top: 0.9375em;
border-radius: 999px;
background: #EFEDF5;
opacity: 0;
overflow: hidden;
animation: rc-prog-show 26s ease-in-out infinite;
}
.rc-progress i {
display: block;
width: 34%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #A99BEE, #6D5BD0);
animation: rc-prog-run 1.5s ease-in-out infinite;
}
/* ---------- the pointer, and the Naukri tile it picks ---------- */
/* tile boxes measured in app-home.webp: LinkedIn x 557-858, Naukri x 880-1181,
both y 241-393 */
.rc-tilehit {
position: absolute;
top: 12.60cqw;
width: 15.74cqw;
height: 7.95cqw;
border-radius: 0.6cqw;
opacity: 0;
}
.rc-tilehit--li { left: 29.13cqw; animation: rc-tile-li 26s ease-in-out infinite; }
.rc-tilehit--nk { left: 46.03cqw; animation: rc-tile-nk 26s ease-in-out infinite; }
.rc-tilehit--in { left: 62.92cqw; animation: rc-tile-in 26s ease-in-out infinite; }
.rc-ripple {
position: absolute;
top: 16.58cqw;
width: 2cqw;
height: 2cqw;
margin: -1cqw 0 0 -1cqw;
border-radius: 50%;
background: rgba(109, 91, 208, 0.32);
opacity: 0;
}
.rc-ripple--li { left: 37.00cqw; animation: rc-ripple-li 26s ease-out infinite; }
.rc-ripple--nk { left: 53.90cqw; animation: rc-ripple-nk 26s ease-out infinite; }
.rc-ripple--in { left: 70.76cqw; animation: rc-ripple-in 26s ease-out infinite; }
.rc-cursor {
position: absolute;
top: 0;
left: 0;
width: 2.4cqw;
height: 2.4cqw;
opacity: 0;
filter: drop-shadow(0 0.2cqw 0.35cqw rgba(27, 23, 48, 0.35));
animation: rc-cursor 26s cubic-bezier(0.45, 0.05, 0.2, 1) infinite;
}
/* ---------- frame 2: the scored candidate ---------- */
.rc-head--bare { padding-bottom: 0.875em; }
.rc-well {
position: relative;
width: 24.6875em; /* 395px */
margin-left: 1.0625em; /* 17px in from the card's left edge */
flex: 1;
border: 0.0625em solid #E4E7EE;
border-bottom: 0;
background: #F5F6FA;
overflow: hidden;
}
.rc-well-cut {
position: relative;
height: 1.5em;
border-bottom: 0.0625em solid #E4E7EE;
}
.rc-well-cut span {
position: absolute;
right: 1.9375em;
top: 0.5625em;
width: 2.3125em;
height: 1.375em;
border: 0.0625em solid #B9AEEB;
border-radius: 0.75em;
}
.rc-rcard {
margin: 1.125em 1.125em 0;
padding: 0.9375em 1em 1.0625em;
border: 0.0625em solid #E4E7EE;
border-radius: 0.5em;
background: #fff;
animation: rc-card-in-nk 26s ease-out infinite;
}
.rc-panel--linked .rc-rcard { animation-name: rc-card-in-li; }
.rc-panel--indeed .rc-rcard { animation-name: rc-card-in-in; }
.rc-rcard--1 { animation-delay: 0s; }
.rc-rcard--2 { animation-delay: 0.35s; }
.rc-rcard--3 { animation-delay: 0.7s; }
.rc-eyebrow {
font-size: 0.6875em;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #14121F;
}
.rc-match-top {
display: flex;
align-items: flex-start;
gap: 0.75em;
margin-top: 0.875em;
}
.rc-match-txt {
flex: 1;
font-size: 0.9375em;
line-height: 1.4;
color: #1F1B2E;
}
.rc-ring {
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 4.8125em; /* 77px */
height: 4.8125em;
border-radius: 50%;
background: #E7F6EC;
}
.rc-ring svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.rc-ring-bg,
.rc-ring-fg {
fill: none;
stroke-width: 2.4;
}
.rc-ring-bg { stroke: rgba(5, 96, 58, 0.14); }
.rc-ring-fg {
stroke: #05603A;
stroke-linecap: round;
stroke-dasharray: 138.23; /* 2 * pi * 22 */
stroke-dashoffset: 0;
animation: rc-ring-89 26s ease-out infinite;
}
.rc-panel--linked .rc-ring-fg { animation-name: rc-ring-84; }
.rc-panel--indeed .rc-ring-fg { animation-name: rc-ring-88; }
.rc-ring-num {
position: relative;
font-size: 1.375em;
font-weight: 700;
line-height: 1;
color: #05603A;
}
.rc-ring-sub {
position: relative;
margin-top: 0.15em;
font-size: 0.5625em;
font-style: normal;
color: #3B6B52;
}
.rc-bar {
display: block;
height: 0.4375em;
margin-top: 1.0625em;
border-radius: 999px;
background: #EFF0F4;
overflow: hidden;
}
.rc-bar i {
display: block;
width: 0;
height: 100%;
border-radius: 999px;
background: #12B76A;
}
/* the filled widths are the base state, so the scores still read correctly
when animations are switched off */
.rc-bar--89 i { width: 89%; animation: rc-fill-89 26s ease-out infinite; }
.rc-bar--100 i { width: 100%; animation: rc-fill-100 26s ease-out infinite; }
.rc-match-name {
margin-top: 0.5em;
font-size: 0.875em;
font-weight: 700;
color: #14121F;
}
.rc-about {
display: grid;
grid-template-columns: 8em 1fr;
gap: 0.5em 0.55em;
margin-top: 0.875em;
font-size: 0.875em;
line-height: 1.35;
}
.rc-about dt { color: #6B7280; white-space: nowrap; }
.rc-about dd { color: #1F1B2E; }
.rc-chip-warn {
display: inline-block;
padding: 0.05em 0.5em;
border-radius: 999px;
background: #FDE6E4;
color: #C03949;
font-size: 0.93em;
white-space: nowrap;
}
.rc-skills-head {
display: flex;
align-items: center;
gap: 0.5em;
}
.rc-skills-head b {
font-size: 1em;
font-weight: 700;
color: #14121F;
}
.rc-chip-mute,
.rc-chip-ok {
padding: 0.15em 0.6em;
border-radius: 999px;
font-size: 0.75em;
}
.rc-chip-mute { background: #F1F2F6; color: #6B7280; }
.rc-chip-ok { margin-left: auto; background: #E7F6EC; color: #12804E; font-weight: 600; }
.rc-skills-note {
margin-top: 0.4375em;
font-size: 0.875em;
color: #1F1B2E;
}
.rc-skills-sub {
margin-top: 0.75em;
font-size: 0.8125em;
letter-spacing: 0.04em;
color: #B9BAC4;
}
.rc-scroll {
position: absolute;
right: 0.3125em; /* the track sits in the card, outside the well */
top: 11.9375em;
width: 0.625em;
height: 20.5625em;
border-radius: 999px;
background: #8B8B8B;
opacity: 0.85;
}
.rc-panel--result .rc-foot {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-bottom: 0.8125em;
}
.rc-panel--result .rc-save { animation: rc-save-pop 26s ease-in-out infinite; }
/* ---------- frame 2: the LinkedIn profile, scored in place ---------- */
.rc-panel--indeed .rc-body,
.rc-panel--linked .rc-body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding-bottom: 0;
overflow: hidden;
}
.rc-scored {
margin-top: 0.75em;
font-size: 0.9375em;
color: #6E6A7D;
}
.rc-well--break {
width: auto;
margin: 0.875em 0 0;
flex: 1;
min-height: 0;
border-radius: 0.5em;
border-bottom: 0.0625em solid #E4E7EE;
}
.rc-break-head {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.8125em 0.875em;
border-bottom: 0.0625em solid #E4E7EE;
}
.rc-break-head b {
font-size: 0.75em;
font-weight: 700;
letter-spacing: 0.075em;
text-transform: uppercase;
color: #14121F;
}
.rc-dl {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 2.25em;
height: 2em;
border: 0.0625em solid #DEDCF4;
border-radius: 0.5em;
background: #fff;
color: #6D5BD0;
}
.rc-dl svg { width: 1.0625em; height: 1.0625em; }
.rc-break-note {
padding: 0.8125em 0.875em 0;
font-size: 0.875em;
color: #8A8698;
}
.rc-well--break .rc-rcard { margin: 0.875em 0.875em 0; }
/* the LinkedIn read scores in blue rather than green */
.rc-ring--blue { background: #EAF1FD; }
.rc-ring--blue .rc-ring-bg { stroke: rgba(43, 111, 222, 0.18); }
.rc-ring--blue .rc-ring-fg { stroke: #2B6FDE; }
.rc-ring--blue .rc-ring-num { color: #1E4CA8; }
.rc-ring--blue .rc-ring-sub { color: #5A7BB8; }
.rc-bar--blue i { background: #2B6FDE; }
.rc-bar--84 i { width: 84%; animation: rc-fill-84 26s ease-out infinite; }
.rc-scroll--linked {
top: 5.8125em;
height: 24.5em;
}
.rc-scroll--indeed {
top: 5.7875em;
height: 24.1em;
}
.rc-bar--88 i { width: 88%; animation: rc-fill-88 26s ease-out infinite; }
.rc-panel--indeed .rc-foot,
.rc-panel--linked .rc-foot {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding-bottom: 0.875em;
}
.rc-panel--linked .rc-save { animation: rc-save-pop-li 26s ease-in-out infinite; }
.rc-panel--indeed .rc-save { animation: rc-save-pop-in 26s ease-in-out infinite; }
/* ================= the 26s loop ================= */
@keyframes rc-frame-home {
0%, 6.5% { opacity: 1; transform: scale(1); }
8.5%, 26.9% { opacity: 0; transform: scale(0.985); }
29.6%, 51.2% { opacity: 1; transform: scale(1); }
53.1%, 70.8% { opacity: 0; transform: scale(0.985); }
73.5%, 80.8% { opacity: 1; transform: scale(1); }
82.7%, 96.9% { opacity: 0; transform: scale(0.985); }
99.2%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes rc-frame-linked {
0%, 6.5% { opacity: 0; transform: scale(1.012); }
8.5%, 26.9% { opacity: 1; transform: scale(1); }
29.6%, 100% { opacity: 0; transform: scale(1.012); }
}
@keyframes rc-frame-result {
0%, 51.2% { opacity: 0; transform: scale(1.012); }
53.1%, 70.8% { opacity: 1; transform: scale(1); }
73.5%, 100% { opacity: 0; transform: scale(1.012); }
}
@keyframes rc-frame-indeed {
0%, 80.8% { opacity: 0; transform: scale(1.012); }
82.7%, 96.9% { opacity: 1; transform: scale(1); }
99.2%, 100% { opacity: 0; transform: scale(1.012); }
}
@keyframes rc-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0.1875em rgba(15, 199, 155, 0.22); }
50% { box-shadow: 0 0 0 0.375em rgba(15, 199, 155, 0.05); }
}
/* the pointer leads, then works left to right: LinkedIn, Naukri, Indeed */
@keyframes rc-cursor {
0% { opacity: 0; transform: translate(58cqw, 30cqw) scale(1); }
0.6% { opacity: 1; transform: translate(58cqw, 30cqw) scale(1); }
4% { opacity: 1; transform: translate(37cqw, 16.6cqw) scale(1); }
4.6% { opacity: 1; transform: translate(37cqw, 16.6cqw) scale(0.86); }
5.4%, 6.5% { opacity: 1; transform: translate(37cqw, 16.6cqw) scale(1); }
7.5%, 44% { opacity: 0; transform: translate(37cqw, 16.6cqw) scale(1); }
45% { opacity: 1; transform: translate(37cqw, 16.6cqw) scale(1); }
48.5% { opacity: 1; transform: translate(53.9cqw, 16.6cqw) scale(1); }
49.2% { opacity: 1; transform: translate(53.9cqw, 16.6cqw) scale(0.86); }
50%, 51.2% { opacity: 1; transform: translate(53.9cqw, 16.6cqw) scale(1); }
52.5%, 73.6% { opacity: 0; transform: translate(53.9cqw, 16.6cqw) scale(1); }
74.6% { opacity: 1; transform: translate(53.9cqw, 16.6cqw) scale(1); }
78.1% { opacity: 1; transform: translate(70.76cqw, 16.6cqw) scale(1); }
78.8% { opacity: 1; transform: translate(70.76cqw, 16.6cqw) scale(0.86); }
79.6%, 80.8% { opacity: 1; transform: translate(70.76cqw, 16.6cqw) scale(1); }
82%, 100% { opacity: 0; transform: translate(70.76cqw, 16.6cqw) scale(1); }
}
@keyframes rc-tile-li {
0%, 4.1% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
4.7% { opacity: 1; transform: scale(0.975); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.55); }
5.9% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.35); }
7%, 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
}
@keyframes rc-tile-nk {
0%, 48.6% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
49.3% { opacity: 1; transform: scale(0.975); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.55); }
50.5% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.35); }
51.8%, 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
}
@keyframes rc-tile-in {
0%, 78.2% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
78.9% { opacity: 1; transform: scale(0.975); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.55); }
80.1% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0.18cqw rgba(109, 91, 208, 0.35); }
81.4%, 100% { opacity: 0; transform: scale(1); box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
}
@keyframes rc-ripple-li {
0%, 4.4% { opacity: 0; transform: scale(0.3); }
4.8% { opacity: 1; transform: scale(0.3); }
7.1% { opacity: 0; transform: scale(7); }
100% { opacity: 0; transform: scale(7); }
}
@keyframes rc-ripple-nk {
0%, 48.9% { opacity: 0; transform: scale(0.3); }
49.4% { opacity: 1; transform: scale(0.3); }
51.7% { opacity: 0; transform: scale(7); }
100% { opacity: 0; transform: scale(7); }
}
@keyframes rc-ripple-in {
0%, 78.5% { opacity: 0; transform: scale(0.3); }
79% { opacity: 1; transform: scale(0.3); }
81.3% { opacity: 0; transform: scale(7); }
100% { opacity: 0; transform: scale(7); }
}
/* frame 2 — LinkedIn, 84 */
@keyframes rc-card-in-li {
0%, 7.5% { opacity: 0; transform: translateY(0.75em); }
11.2%, 26.9% { opacity: 1; transform: translateY(0); }
28.5%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes rc-ring-84 {
0%, 9.6% { stroke-dashoffset: 138.23; }
15.4% { stroke-dashoffset: 22.12; } /* 84% of the way round */
100% { stroke-dashoffset: 22.12; }
}
@keyframes rc-fill-84 {
0%, 9.6% { width: 0; }
15.4% { width: 84%; }
100% { width: 84%; }
}
@keyframes rc-save-pop-li {
0%, 20% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
21.5% { transform: scale(1.07); box-shadow: 0 0.4em 1em -0.2em rgba(109, 91, 208, 0.85); }
23%, 100% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
}
/* the job-picking beat, on the way to Naukri */
@keyframes rc-spin {
0%, 30.8% { transform: rotate(0deg); }
34.6%, 100% { transform: rotate(720deg); }
}
@keyframes rc-count-pop {
0%, 34.6% { transform: scale(1); }
35.4% { transform: scale(1.35); }
36.5%, 100% { transform: scale(1); }
}
@keyframes rc-select-focus {
0%, 35.8% { border-color: #E4E7EE; box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
36.6%, 38.8% { border-color: #6D5BD0; box-shadow: 0 0 0 0.1875em rgba(109, 91, 208, 0.13); }
40%, 100% { border-color: #E4E7EE; box-shadow: 0 0 0 0 rgba(109, 91, 208, 0); }
}
@keyframes rc-chev-turn {
0%, 36% { transform: rotate(0deg); }
36.8%, 38.8% { transform: rotate(180deg); }
39.8%, 100% { transform: rotate(0deg); }
}
/* the line is already typed when the loop opens; it clears when the job is
re-picked, then types itself back in */
@keyframes rc-type {
0%, 39.2% { clip-path: inset(0 0 0 0); }
39.6% { clip-path: inset(0 100% 0 0); }
40.4% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(14, end); }
44.6% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@keyframes rc-caret-move {
0%, 39.2% { left: 100%; opacity: 0; }
39.6% { left: 0; opacity: 1; }
40.4% { left: 0; opacity: 1; animation-timing-function: steps(14, end); }
44.6%, 46.5% { left: 100%; opacity: 1; }
47.3%, 100% { left: 100%; opacity: 0; }
}
@keyframes rc-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes rc-prog-show {
0%, 40.4% { opacity: 0; }
41.9%, 47.3% { opacity: 1; }
48.5%, 100% { opacity: 0; }
}
@keyframes rc-prog-run {
0% { transform: translateX(-110%); }
100% { transform: translateX(330%); }
}
/* frame 3 — Naukri, 89 */
@keyframes rc-card-in-nk {
0%, 51.2% { opacity: 0; transform: translateY(0.75em); }
55.8%, 70.8% { opacity: 1; transform: translateY(0); }
72.3%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes rc-ring-89 {
0%, 54.2% { stroke-dashoffset: 138.23; }
60% { stroke-dashoffset: 15.20; } /* 89% of the way round */
100% { stroke-dashoffset: 15.20; }
}
@keyframes rc-fill-89 {
0%, 54.2% { width: 0; }
60% { width: 89%; }
100% { width: 89%; }
}
@keyframes rc-fill-100 {
0%, 55% { width: 0; }
60.8% { width: 100%; }
100% { width: 100%; }
}
@keyframes rc-save-pop {
0%, 64.5% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
66.2% { transform: scale(1.07); box-shadow: 0 0.4em 1em -0.2em rgba(109, 91, 208, 0.85); }
67.5%, 100% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
}
/* frame 4 — Indeed, 88 */
@keyframes rc-card-in-in {
0%, 80.8% { opacity: 0; transform: translateY(0.75em); }
85.4%, 96.9% { opacity: 1; transform: translateY(0); }
98.4%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes rc-ring-88 {
0%, 83.8% { stroke-dashoffset: 138.23; }
89.6% { stroke-dashoffset: 16.59; } /* 88% of the way round */
100% { stroke-dashoffset: 16.59; }
}
@keyframes rc-fill-88 {
0%, 83.8% { width: 0; }
89.6% { width: 88%; }
100% { width: 88%; }
}
@keyframes rc-save-pop-in {
0%, 92.5% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
94.2% { transform: scale(1.07); box-shadow: 0 0.4em 1em -0.2em rgba(109, 91, 208, 0.85); }
95.5%, 100% { transform: scale(1); box-shadow: 0 0.25em 0.75em -0.25em rgba(109, 91, 208, 0.7); }
}
/* Container queries are what keep the overlays aligned. Where they are not
supported, or the shot is too small for the panels to be legible, fall
back to the flat panels already baked into the screenshots. */
@supports not (container-type: inline-size) {
.rc-panel, .rc-cursor, .rc-ripple, .rc-tilehit { display: none; }
}
@media (max-width: 700px) {
.rc-panel, .rc-cursor, .rc-ripple, .rc-tilehit { display: none; }
}
/* ---- Install guide (install.php) ---- */
.install-hero {
background: linear-gradient(to bottom, rgba(245,243,255,0.7), #fff);
border-bottom: 1px solid #F3F4F6;
padding: 56px 0 48px;
text-align: center;
}
.install-eyebrow {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #8A7BD8;
}
.install-hero h1 {
margin-top: 10px;
font-size: 38px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
}
.install-hero .page-sub {
margin: 12px auto 0;
max-width: 34rem;
font-size: 16px;
line-height: 1.6;
color: #6B6680;
}
/* A tinted aside for the "expect a SmartScreen warning" heads-up. */
.install-note {
display: flex;
gap: 12px;
margin: 8px 0 4px;
padding: 16px 18px;
border: 1px solid #E7E0FC;
border-radius: 12px;
background: #F8F6FF;
}
.install-note svg {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px;
color: #6D3EF0;
}
.install-note p { margin-bottom: 0; }
.install-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: install-step;
}
.install-step {
display: flex;
gap: 16px;
margin: 0 0 12px;
padding-bottom: 28px;
border-bottom: 1px solid #F3F4F6;
}
.install-step:last-child { border-bottom: 0; padding-bottom: 0; }
.install-step__num {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
margin-top: 2px;
border-radius: 9999px;
background: #6D3EF0;
color: #fff;
font-size: 15px;
font-weight: 700;
}
.install-step__body { min-width: 0; }
.install-step__body h3 { margin-top: 4px; }
.install-step__body p:last-child { margin-bottom: 0; }
.page-body code {
padding: 1px 5px;
border-radius: 5px;
background: #F4F2FB;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
color: #3B3560;
/* Setup filenames are long enough to push a phone-width column sideways. */
overflow-wrap: anywhere;
}
.install-figure { margin: 16px 0 4px; }
.install-figure img {
display: block;
width: 100%;
max-width: 480px;
height: auto;
border: 1px solid #E9E6F2;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(27,23,48,0.05), 0 12px 28px -8px rgba(27,23,48,0.12);
}
.install-figure figcaption {
margin-top: 10px;
font-size: 13.5px;
line-height: 1.55;
color: #6B6680;
}
.install-footer-cta {
margin-top: 44px;
padding-top: 36px;
border-top: 1px solid #F3F4F6;
text-align: center;
}
/* .page-body a wins on specificity over .hero-cta, so restate the colour. */
.install-footer-cta .hero-cta {
margin-top: 0;
color: #fff;
}
.install-footer-cta .hero-cta:hover { text-decoration: none; }
@media (max-width: 640px) {
.install-hero h1 { font-size: 30px; }
.install-hero { padding: 40px 0 36px; }
.install-step { gap: 12px; }
.install-step__num { width: 28px; height: 28px; font-size: 14px; }
}