* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg2: #151515;
--bg-rgb: 21,21,21;
--bg-rgb2: 21,21,21;
--card-bg: #1d1e1d;
--card-hover: #252625;
--text: #e3e3e3;
--text-secondary: #909090;
--text-muted: #666;
--text-faint: #666;
--accent: #9b8bf5;
--search-bg: #1d1e1d;
--search-border: rgba(255,255,255,0.07);
--search-border-focus: rgba(255,255,255,0.13);
--search-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 18px rgba(0,0,0,0.4);
--search-shadow-focus: 0 1px 4px rgba(0,0,0,0.4), 0 8px 30px rgba(0,0,0,0.5);
--kbd-bg: #2a2a2a;
--kbd-border: #333;
--divider: #333;
--footer-border: rgba(255,255,255,0.08);
--pagination-border: #333;
--pagination-hover-bg: #191919;
--pagination-hover-border: #333;
--pagination-hover-text: #aaa;
--logo-shadow: 0px 2px 4px rgba(0,0,0,.5);
--logo-shadow-hover: 0px 3px 8px rgba(0,0,0,.7);
--logo-filter: grayscale(100%) opacity(0.25);
--logo-filter-hover: grayscale(100%) opacity(0.5);
--job-title-color: #c8c8c8;
--job-location-color: var(--text-muted);
--star-color: var(--text-muted);
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg2);
color: var(--text);
line-height: 1.5;
}
a {
text-decoration: none;
color: inherit;
}
/* TOP CONTROLS */
#top-controls {
position: fixed;
top: 20px;
right: 22px;
z-index: 1000;
display: flex;
align-items: center;
}
#theme-switcher {
position: fixed;
top: 20px;
right: 22px;
z-index: 1001;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.theme-dot {
position: relative;
width: 14px;
height: 14px;
padding: 0;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.18);
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-dot-lavender {
background: linear-gradient(135deg, #a89cf5 0%, #a89cf5 50%, #63b770 50%, #63b770 100%);
}
.theme-dot-citrus { background: #fbbf24; }
.theme-dot-lime { background: #d3f27e; }
.theme-dot:hover {
border-color: rgba(255,255,255,0.55);
transform: scale(1.12);
}
.theme-dot.active {
border-color: rgba(255,255,255,0.9);
box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
/* Hover legend — small label that appears below the dot. */
.theme-dot::after {
content: attr(data-label);
position: absolute;
top: calc(100% + 10px);
left: 50%;
background: rgba(10,10,10,0.95);
color: #ddd;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.08);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(-2px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.theme-dot:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Themes — overrides applied via [data-theme] on ───────────── */
html[data-theme="citrus"] {
--accent: #fbbf24;
}
html[data-theme="citrus"] .brand-accent { color: #fbbf24; font-weight: 600; }
html[data-theme="citrus"] .job-new { color: #fbbf24; }
html[data-theme="citrus"] .group-chip.active .group-label { color: #fbbf24; }
html[data-theme="citrus"] .job-card-featured {
background: linear-gradient(180deg, rgba(251,191,36,0.07), rgba(251,191,36,0.03));
border-color: rgba(251,191,36,0.24);
}
html[data-theme="citrus"] .job-card-featured:hover {
background: linear-gradient(180deg, rgba(251,191,36,0.1), rgba(251,191,36,0.05));
border-color: rgba(251,191,36,0.38);
}
html[data-theme="citrus"] .job-card-featured .job-company,
html[data-theme="citrus"] .job-featured-tag {
color: rgba(251,210,120,0.95);
}
html[data-theme="citrus"] .job-featured-tag {
background: rgba(251,191,36,0.1);
border-color: rgba(251,191,36,0.26);
}
html[data-theme="citrus"] .ad-brand { color: rgba(251,191,36,0.6); }
html[data-theme="lime"] {
--accent: #d3f27e;
}
html[data-theme="lime"] .brand-accent { color: #d3f27e; font-weight: 600; }
html[data-theme="lime"] .job-new { color: #d3f27e; }
html[data-theme="lime"] .group-chip.active .group-label { color: #d3f27e; }
html[data-theme="lime"] .job-card-featured {
background: linear-gradient(180deg, rgba(211,242,126,0.06), rgba(211,242,126,0.025));
border-color: rgba(211,242,126,0.22);
}
html[data-theme="lime"] .job-card-featured:hover {
background: linear-gradient(180deg, rgba(211,242,126,0.09), rgba(211,242,126,0.045));
border-color: rgba(211,242,126,0.36);
}
html[data-theme="lime"] .job-card-featured .job-company,
html[data-theme="lime"] .job-featured-tag {
color: rgba(225,245,160,0.95);
}
html[data-theme="lime"] .job-featured-tag {
background: rgba(211,242,126,0.1);
border-color: rgba(211,242,126,0.26);
}
html[data-theme="lime"] .ad-brand { color: rgba(211,242,126,0.6); }
/* Default theme — also style the brand-accent class (no [data-theme] attr). */
.brand-accent { color: #c5c4fd; font-weight: 600; }
#badge-switcher {
display: flex;
background: rgba(255,255,255,0.07);
border-radius: 6px;
padding: 3px;
gap: 2px;
}
.badge-dot {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.badge-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 7px;
}
#icon-switcher {
display: flex;
background: rgba(255,255,255,0.07);
border-radius: 6px;
padding: 3px;
gap: 2px;
margin-right: 6px;
}
.icon-btn {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 4px;
padding: 5px 8px;
cursor: pointer;
color: #666;
transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { color: #bbb; background: rgba(255,255,255,0.07); }
.icon-btn.active { background: #2a2a2a; color: #ddd; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
#bg-switcher {
display: flex;
background: rgba(255,255,255,0.07);
border-radius: 6px;
padding: 4px;
gap: 3px;
}
.bg-btn {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid rgba(255,255,255,0.28);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
padding: 0;
display: block;
}
.bg-btn[data-bg="default"] { background: #131413; }
.bg-btn[data-bg="dim"] { background: #080808; }
.bg-btn[data-bg="dark"] { background: #040404; }
.bg-btn[data-bg="void"] { background: #000000; }
.bg-btn:hover { border-color: rgba(255,255,255,0.6); }
.bg-btn.active { border-color: rgba(255,255,255,0.85); box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
.font-btn {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
color: #666;
background: none;
border: none;
border-radius: 4px;
padding: 4px 7px;
cursor: pointer;
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.font-btn:hover {
color: #bbb;
background: rgba(255,255,255,0.07);
}
.font-btn.active {
background: #2a2a2a;
color: #ddd;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* HERO SECTION WITH SMOOTH TRANSITION (NO BLUR) */
#hero {
position: relative;
background-color: var(--bg2);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 72px 0 32px;
transition: background-color 0.2s;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('bgbg.jpg');
background-size: cover;
background-position: 35% 0%;
background-repeat: no-repeat;
image-rendering: auto;
/* Stronger blur for real depth-of-field; saturate+brightness compensate
for the darkening/desaturation that filter:blur() inherently introduces. */
filter: blur(22px) saturate(1.1) brightness(1.04);
-webkit-mask-image: url("data:image/svg+xml,");
-webkit-mask-size: 120% 120%;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,");
mask-size: 120% 120%;
mask-repeat: no-repeat;
z-index: 1;
}
/* Tilt-shift: sharp focus band layered on top of the blurred .hero-bg.
Same image + position so the sharp band registers exactly with the blur. */
#hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('bgbg.jpg');
background-size: cover;
background-position: 35% 0%;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
/* Longer falloff (38% sharp end → 72% fully blurred ≈ 34% of height
easing the seam) so the sharp-to-blurred boundary reads as a
depth-of-field gradient, not a hard band edge. Three stops shape
the curve so the middle 50% feels gradual rather than linear. */
-webkit-mask-image: linear-gradient(to bottom,
black 0%,
black 38%,
rgba(0,0,0,0.55) 55%,
transparent 72%,
transparent 100%);
mask-image: linear-gradient(to bottom,
black 0%,
black 38%,
rgba(0,0,0,0.55) 55%,
transparent 72%,
transparent 100%);
}
.hero-fade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 58% 68% at 50% 35%, transparent 0%, transparent 28%, rgba(var(--bg-rgb2),0.58) 63%, rgba(var(--bg-rgb2),0.93) 100%),
linear-gradient(to right, rgba(var(--bg-rgb2),0.3) 0%, transparent 18%, transparent 82%, rgba(var(--bg-rgb2),0.3) 100%),
linear-gradient(to bottom, transparent 60%, rgba(var(--bg-rgb2),0.38) 75%, rgba(var(--bg-rgb2),0.88) 92%, var(--bg2) 100%),
radial-gradient(ellipse 50% 42% at 50% 95%, rgba(var(--bg-rgb2),0.9) 0%, transparent 100%);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 10;
width: 100%;
max-width: 600px;
text-align: center;
padding: 0 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin-top: 0;
overflow: visible;
}
#logo {
margin-top: 5px;
margin-bottom: -5px;
overflow: visible;
width: 100%;
}
.logo-text {
display: inline-block;
position: relative;
z-index: 1;
font-family: 'Jua', sans-serif;
font-weight: 400;
font-size: 88px;
letter-spacing: -0.06em;
line-height: 0.9;
background: linear-gradient(180deg, #fff 45%, rgba(255,255,255,0.5) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(0 4px 12px rgba(0,0,0,0.4))
drop-shadow(0 1px 2px rgba(255,255,255,0.1));
margin-bottom: 24px;
}
#search-container {
position: relative;
z-index: 100;
width: 80%;
}
.search-box {
/* liquid glass: neutral dark gray base, untinted, with frosted backdrop */
background: rgba(150, 150, 150, 0.01);
backdrop-filter: blur(8px) saturate(90%);
-webkit-backdrop-filter: blur(6px) saturate(90%);
border-radius: 28px;
/* Merged shadows: Inner highlight first, then subtle outer depth */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0px 20px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
padding: 8px 20px 8px 24px;
margin-bottom: 14px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.search-box:focus-within {
box-shadow: inset 2px 2px 12px rgba(255,255,255,0.1),
0 0px 20px rgba(0, 0, 0, 0.2);
}
.search-icon {
display: flex;
align-items: center;
margin-right: 16px;
flex-shrink: 0;
color: #999;
}
.search-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 19px;
color: var(--text);
padding: 10px 0;
font-family: inherit;
background: transparent;
}
.search-input::placeholder {
color: rgba(255,255,255,0.4);
}
.search-box.has-pills .search-input::placeholder {
color: transparent;
}
.search-clear {
-webkit-appearance: none;
appearance: none;
background: rgba(255,255,255,0.10);
border: none;
padding: 4px;
margin-right: 4px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s, background 0.15s;
flex-shrink: 0;
}
.search-clear:hover {
color: #fff;
background: rgba(255,255,255,0.18);
}
.location-divider {
width: 1px;
height: 28px;
background-color: rgba(0, 0, 0, 0.08);
margin: 0 20px;
}
.location-select {
display: flex;
align-items: center;
color: var(--text-secondary);
font-weight: 600;
cursor: pointer;
font-size: 15px;
opacity: 0.8;
transition: opacity 0.15s;
}
.location-select:hover {
opacity: 1;
}
.location-select span {
margin-right: 10px;
}
#active-filters {
display: flex;
flex-shrink: 0;
flex-wrap: nowrap;
gap: 5px;
align-items: center;
margin-right: 4px;
}
#active-filters:empty { display: none; }
.filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 12px;
background: rgba(var(--bg-rgb), 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 99px;
font-size: 13px;
color: #fff;
white-space: nowrap;
cursor: default;
}
.filter-pill button {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: rgba(255,255,255,0.5);
line-height: 1;
width: 12px;
height: 12px;
transition: color 0.15s ease;
}
.filter-pill button:hover { color: #fff; }
.quick-searches {
display: flex;
flex-wrap: wrap;
gap: 7px;
justify-content: center;
margin-top: 18px;
width: 900px;
max-width: 90vw;
}
.qs-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 15px 7px 12px;
background: rgba(255,255,255,0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 100px;
color: rgba(255,255,255,0.55);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.qs-chip svg {
opacity: 0.7;
transition: opacity 0.2s ease;
flex-shrink: 0;
}
.qs-chip:hover {
background: rgba(255,255,255,0.11);
color: rgba(255,255,255,0.9);
border-color: rgba(255,255,255,0.16);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.qs-chip:hover svg {
opacity: 0.85;
}
.qs-chip:active {
transform: translateY(0);
box-shadow: none;
}
/* MAIN CONTAINER */
#main-container {
max-width: 990px;
margin: 24px auto 0;
padding: 0 30px;
position: relative;
z-index: 2;
}
.content-layout {
display: flex;
gap: 40px;
padding-top: 0;
}
.jobs-column {
flex: 2.8;
min-width: 0;
position: relative;
}
.jobs-column::before {
display: none;
content: '';
position: absolute;
top: 0;
left: -30px;
right: -10px;
height: 90px;
background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
pointer-events: none;
z-index: 10;
}
/* GROUP STRIP */
#group-strip {
display: none;
justify-content: flex-start;
gap: 4px;
padding: 2px 0 14px;
}
.group-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
cursor: pointer;
user-select: none;
padding: 4px 8px;
flex: 1;
max-width: 120px;
}
.group-icons {
position: relative;
width: 68px;
height: 54px;
flex-shrink: 0;
}
.group-chip:has(.group-icon:nth-child(6)) .group-icons {
width: 82px;
}
.group-icon {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin-top: -13px;
margin-left: -13px;
border-radius: 8px;
border: 1.5px solid var(--bg);
object-fit: contain;
background: var(--card-bg);
box-shadow: 0 2px 5px rgba(0,0,0,0.45);
transition: transform 0.25s ease;
}
/* z-index base — child 3 (center) is second highest, overlapped by child 1 only */
.group-icon:nth-child(1) { z-index: 6; }
.group-icon:nth-child(2) { z-index: 4; }
.group-icon:nth-child(3) { z-index: 5; }
.group-icon:nth-child(4) { z-index: 3; }
.group-icon:nth-child(5) { z-index: 2; }
.group-icon:nth-child(6) { z-index: 1; }
/* ── Fan: pentagon with one in center ── */
body.icon-layout-fan .group-icon:nth-child(1) { transform: translate(-14px, -13px) rotate(-6deg); }
body.icon-layout-fan .group-icon:nth-child(2) { transform: translate( 12px, -13px) rotate( 4deg); }
body.icon-layout-fan .group-icon:nth-child(3) { transform: translate( -2px, 0px) rotate(-3deg); }
body.icon-layout-fan .group-icon:nth-child(4) { transform: translate(-16px, 6px) rotate( 5deg); }
body.icon-layout-fan .group-icon:nth-child(5) { transform: translate( 12px, 6px) rotate(-2deg); }
body.icon-layout-fan .group-icon:nth-child(6) { transform: translate( 0px, 13px) rotate( 3deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(1) { transform: translate(-22px, -19px) rotate(-6deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(2) { transform: translate( 19px, -19px) rotate( 4deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(3) { transform: translate( -3px, 0px) rotate(-3deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(4) { transform: translate(-23px, 10px) rotate( 5deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(5) { transform: translate( 19px, 10px) rotate(-2deg); }
body.icon-layout-fan .group-chip:hover .group-icon:nth-child(6) { transform: translate( 0px, 20px) rotate( 3deg); }
/* ── Tight: max overlap, loose drop ── */
body.icon-layout-tight .group-icon:nth-child(1) { transform: translate( -9px, -10px) rotate(-9deg); }
body.icon-layout-tight .group-icon:nth-child(2) { transform: translate( 7px, -8px) rotate( 6deg); }
body.icon-layout-tight .group-icon:nth-child(3) { transform: translate( 10px, 3px) rotate(-7deg); }
body.icon-layout-tight .group-icon:nth-child(4) { transform: translate( -2px, 10px) rotate( 8deg); }
body.icon-layout-tight .group-icon:nth-child(5) { transform: translate( -9px, 2px) rotate(-4deg); }
body.icon-layout-tight .group-icon:nth-child(6) { transform: translate( 4px, -2px) rotate( 5deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(1) { transform: translate(-15px, -16px) rotate(-9deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(2) { transform: translate( 12px, -13px) rotate( 6deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(3) { transform: translate( 16px, 5px) rotate(-7deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(4) { transform: translate( -4px, 16px) rotate( 8deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(5) { transform: translate(-15px, 4px) rotate(-4deg); }
body.icon-layout-tight .group-chip:hover .group-icon:nth-child(6) { transform: translate( 6px, -4px) rotate( 5deg); }
/* ── Cards: fanned like a hand of playing cards ── */
body.icon-layout-cards .group-icon:nth-child(1) { transform: translate(-16px, 1px) rotate(-16deg); }
body.icon-layout-cards .group-icon:nth-child(2) { transform: translate( -9px, -7px) rotate( -9deg); }
body.icon-layout-cards .group-icon:nth-child(3) { transform: translate( -2px, -9px) rotate( -2deg); }
body.icon-layout-cards .group-icon:nth-child(4) { transform: translate( 5px, -7px) rotate( 5deg); }
body.icon-layout-cards .group-icon:nth-child(5) { transform: translate( 11px, -2px) rotate( 11deg); }
body.icon-layout-cards .group-icon:nth-child(6) { transform: translate( 16px, 3px) rotate( 17deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(1) { transform: translate(-24px, 2px) rotate(-16deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(2) { transform: translate(-14px, -12px) rotate(-9deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(3) { transform: translate( -3px, -15px) rotate(-2deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(4) { transform: translate( 8px, -12px) rotate( 5deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(5) { transform: translate( 18px, -3px) rotate(11deg); }
body.icon-layout-cards .group-chip:hover .group-icon:nth-child(6) { transform: translate( 24px, 5px) rotate(17deg); }
/* ── Orbit: circular ring, nothing at center ── */
body.icon-layout-orbit .group-icon:nth-child(1) { transform: translate( 0px, -13px) rotate(-5deg); }
body.icon-layout-orbit .group-icon:nth-child(2) { transform: translate( 12px, -6px) rotate( 4deg); }
body.icon-layout-orbit .group-icon:nth-child(3) { transform: translate( 12px, 7px) rotate(-6deg); }
body.icon-layout-orbit .group-icon:nth-child(4) { transform: translate( 0px, 13px) rotate( 5deg); }
body.icon-layout-orbit .group-icon:nth-child(5) { transform: translate(-12px, 7px) rotate(-4deg); }
body.icon-layout-orbit .group-icon:nth-child(6) { transform: translate(-12px, -6px) rotate( 6deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(1) { transform: translate( 0px, -21px) rotate(-5deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(2) { transform: translate( 19px, -10px) rotate( 4deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(3) { transform: translate( 19px, 12px) rotate(-6deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(4) { transform: translate( 0px, 21px) rotate( 5deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(5) { transform: translate(-19px, 12px) rotate(-4deg); }
body.icon-layout-orbit .group-chip:hover .group-icon:nth-child(6) { transform: translate(-19px, -10px) rotate( 6deg); }
.group-label {
font-size: 10.5px;
font-weight: 600;
color: rgba(255,255,255,0.35);
letter-spacing: 0.02em;
white-space: nowrap;
text-align: center;
}
.group-chip:hover .group-label { color: rgba(255,255,255,0.5); }
.group-chip.active .group-label { color: #a89cf5; }
.stats-bar {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--text-muted);
font-size: 13px;
font-weight: 400;
margin-bottom: 12px;
padding-left: 20px;
position: relative;
z-index: 11;
}
#stats-text {
display: inline;
}
.stat-count {
font-weight: 600;
color: var(--text-secondary);
}
.stat-query {
font-weight: 600;
color: var(--text);
}
/* Tiny inline company logo rendered before .stat-query when the search term
resolves to a known company. Scaled to fit the stats line. */
.stat-query-logo {
width: 18px;
height: 18px;
border-radius: 4px;
object-fit: cover;
vertical-align: -5px;
margin-right: 6px;
filter: grayscale(100%) opacity(0.7);
}
/* Inline chip glyph rendered before .stat-query when a quick-chip is active.
Uses the chip's own SVG (with its per-chip stroke color) so the stats line
gets a tiny dab of color matching the chip the user clicked. */
.stat-chip-icon {
display: inline-flex;
align-items: center;
margin-right: 6px;
vertical-align: -3px;
}
.stat-chip-icon svg {
width: 15px;
height: 15px;
}
.search-time {
font-size: 11px;
color: var(--text-muted);
margin-left: 4px;
display: none;
}
body.dev-mode .search-time { display: inline; }
.feed-back {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
transition: color 0.15s;
}
.feed-back:hover {
color: var(--text);
}
/* JOB GRID */
.job-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.job-card {
background: rgba(255, 255, 255, 0);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 16px 16px;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.25s ease-out;
min-width: 0;
}
.job-card:hover {
background: rgba(255, 255, 255, 0.01);
border-color: rgba(255, 255, 255, 0.1);
}
.job-logo-wrapper {
position: absolute;
top: 14px;
left: -22px;
width: 44px;
height: 44px;
background:transparent;
padding: 0px;
border-radius: 18px;
box-shadow: var(--logo-shadow);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-decoration: none;
cursor: pointer;
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.job-logo-wrapper:hover {
box-shadow: var(--logo-shadow-hover);
transform: scale(1.10);
}
.job-logo {
width: 78%;
height: 78%;
object-fit: contain;
border-radius: 14px;
}
.job-info {
flex: 1;
margin-left: 22px;
min-width: 0;
}
.job-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.job-company {
display: inline-block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.3);
text-transform: uppercase;
letter-spacing: 0.12em;
white-space: nowrap;
flex-shrink: 0;
}
.job-location {
display: inline-block;
color: rgba(255,255,255,0.34);
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.job-location::before {
content: "· ";
margin-right: 2px;
}
.job-title {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: rgba(255,255,255,0.7);
letter-spacing: -0.015em;
line-height: 1.35;
transition: color 0.25s ease;
}
.job-card:hover .job-title {
color: #fff;
}
.job-new {
display: inline-block;
flex-shrink: 0;
color: #63b770;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.02em;
white-space: nowrap;
line-height: 1;
}
.job-new::before {
content: "· ";
margin-right: 2px;
color: rgba(255,255,255,0.18);
}
/* Featured slot — held at position 1 on the default view. The card reads
as "highlighted" via a faint lavender tint + lavender border, echoing
the brand accent (--accent #a89cf5). Stands out without looking like
a banner ad. The Featured pill anchors the cue typographically. */
.job-card-featured {
background: linear-gradient(
180deg,
rgba(168, 156, 245, 0.055),
rgba(168, 156, 245, 0.025)
);
border-color: rgba(168, 156, 245, 0.22);
box-shadow: 0 1px 0 rgba(168, 156, 245, 0.03) inset;
}
.job-card-featured:hover {
background: linear-gradient(
180deg,
rgba(168, 156, 245, 0.085),
rgba(168, 156, 245, 0.04)
);
border-color: rgba(168, 156, 245, 0.34);
}
.job-card-featured .job-company {
color: rgba(197, 196, 253, 0.95);
}
.job-featured-tag {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 1px 7px;
border-radius: 99px;
background: rgba(168, 156, 245, 0.08);
border: 1px solid rgba(168, 156, 245, 0.22);
color: rgba(197, 196, 253, 0.85);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.4;
white-space: nowrap;
}
/* Reposted badge — dev-mode only. Same vertical rhythm as .job-new but in
muted violet to read as a different signal at a glance. */
.job-reposted {
display: none;
flex-shrink: 0;
color: rgba(168, 156, 245, 0.7);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.02em;
white-space: nowrap;
line-height: 1;
}
.job-reposted::before {
content: "· ";
margin-right: 2px;
color: rgba(255,255,255,0.18);
}
body.dev-mode .job-reposted { display: inline-block; }
/* Sponsored slot — Pure typographic/alignment-based layout.
Indented and narrower than .job-card to feel secondary. */
.ad-card {
background: transparent;
border: none;
border-radius: 0;
padding: 10px 40px; /* Increased horizontal padding makes the content area narrower */
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
cursor: pointer;
}
.ad-card:hover .ad-text {
color: #fff;
}
.ad-logo {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.ad-card:hover .ad-logo {
transform: scale(1.1);
}
.ad-text {
flex: 1;
font-family: 'Inter', sans-serif;
font-size: 13.5px;
font-weight: 500;
color: rgba(255,255,255,0.7);
letter-spacing: -0.01em;
line-height: 1.4;
}
.ad-brand {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
font-size: 10.5px;
font-weight: 600;
color: rgba(197, 196, 253, 0.6);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-left: 14px;
}
.ad-brand svg {
transition: transform 0.25s ease;
}
.ad-card:hover .ad-brand svg {
transform: translateX(3px);
}
@media (max-width: 640px) {
.ad-card { padding: 12px 16px; gap: 10px; }
.ad-text { font-size: 13px; }
.ad-brand { font-size: 10px; letter-spacing: 0.1em; }
.board-tabs { display: none; }
.job-title { font-size: 15px; }
.job-star { display: none; }
/* iOS Safari hero-bleed trick: at scrollY=0 Safari fills the URL-bar
zone with a sampled flat color (looks like a black rectangle).
Give the document a 62px scroll runway and bump #hero's top padding
to match — main.js scrolls to 62 on load, so the layout is visually
unchanged but Safari now composites the real .hero-bg pixels behind
the URL bar. */
body { min-height: calc(100dvh + 62px); }
#hero { padding-top: calc(72px + 62px); }
}
.job-filled {
display: flex;
align-items: center;
align-self: center;
flex-shrink: 0;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.35);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
padding: 3px 7px;
white-space: nowrap;
margin-left: 12px;
margin-right: 6px;
}
.board-tabs {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
background: rgba(0,0,0,0.35);
border-radius: 9px;
padding: 2px;
gap: 0;
border: 1px solid rgba(255,255,255,0.04);
}
.board-tabs-pill {
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
width: calc(50% - 2px);
background: rgba(255,255,255,0.07);
border-radius: 7px;
box-shadow: 0 1px 6px rgba(0,0,0,0.6);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.board-tabs-pill.right { transform: translateX(100%); }
@keyframes pill-switch {
0% { opacity: 1; filter: brightness(1); }
30% { opacity: 0.4; filter: brightness(2.5); }
100% { opacity: 1; filter: brightness(1); }
}
.board-tabs-pill.switching {
animation: pill-switch 0.35s ease-out forwards;
}
.board-tab {
-webkit-appearance: none;
appearance: none;
flex: 1;
position: relative;
z-index: 1;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.03em;
color: rgba(255,255,255,0.22);
background: transparent;
border: none;
border-radius: 7px;
padding: 4px 12px;
cursor: pointer;
font-size: 11px;
line-height: 1;
white-space: nowrap;
text-align: center;
}
.board-tab:hover {
color: rgba(255,255,255,0.5);
}
.board-tab-active {
color: rgba(255,255,255,0.62) !important;
}
.job-card-filled {
opacity: 0.45;
}
.job-star {
margin-left: 12px;
margin-right: 6px;
cursor: pointer;
opacity: 0.45;
transition: opacity 0.2s, transform 0.2s;
flex-shrink: 0;
display: flex;
align-items: center;
align-self: center;
}
.job-star svg {
transition: fill 0.2s, stroke 0.2s;
}
.job-star:hover {
opacity: 0.6;
transform: scale(1.12);
}
.job-star.starred {
opacity: 1;
}
.job-star.starred .star-icon {
fill: #f5a623;
stroke: #f5a623;
}
.job-star.starred .sparkle-icon {
fill: #f5a623;
}
/* Icon switcher visibility — default: star */
.sparkle-icon { display: none; }
body.icon-sparkle .sparkle-icon { display: block; }
body.icon-sparkle .star-icon { display: none; }
.job-star.pop {
animation: starPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes starPop {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* LIVE PILL — floating "+N new jobs" indicator that suggests live scraping */
.job-grid-wrap {
position: relative;
}
/* FOUNDER STRIP — overlapping circular portrait avatars that filter by founder */
.founder-strip { display: none; }
.founder-strip.is-on {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin: 0 0 14px;
padding: 2px 0 6px;
}
.founder-face {
position: relative;
width: 40px;
height: 40px;
margin: 0 -7px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--card-bg);
cursor: pointer;
overflow: visible;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.founder-face:nth-child(1) { z-index: 4; }
.founder-face:nth-child(2) { z-index: 3; }
.founder-face:nth-child(3) { z-index: 2; }
.founder-face:nth-child(4) { z-index: 1; }
.founder-face img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: 50% 25%;
display: block;
box-shadow: inset 0 0 0 2px var(--bg);
}
.founder-face[data-group="musk"] img { object-position: 50% 18%; }
.founder-face[data-group="altman"] img { object-position: 50% 22%; }
.founder-face[data-group="dario"] img { object-position: 46% 24%; }
.founder-face[data-group="meta"] img { object-position: 50% 22%; }
.founder-face:hover {
transform: translateY(-3px) scale(1.10);
z-index: 10;
}
.founder-face.active {
transform: translateY(-2px) scale(1.06);
z-index: 10;
}
.founder-face.active img {
box-shadow: inset 0 0 0 2px var(--bg), 0 0 0 2px var(--accent, #c5c4fd);
}
.founder-label {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(-2px);
padding: 4px 9px;
border-radius: 10px;
background: rgba(28, 28, 28, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #e8e8e8;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 20;
}
.founder-face:hover .founder-label,
.founder-face.active .founder-label {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
.founder-face { width: 36px; height: 36px; margin: 0 -6px; }
.founder-strip { margin-bottom: 10px; }
}
.live-pill {
position: absolute;
top: -50px;
left: 50%;
z-index: 50;
display: inline-flex;
align-items: center;
gap: 0;
padding: 8px 18px 8px 14px;
background: rgba(28, 28, 28, 0.9);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: none;
border-radius: 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
cursor: pointer;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, 16px);
pointer-events: none;
transition:
opacity 0.3s ease,
transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
background 0.2s ease;
}
.live-pill.visible {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.live-pill:hover {
background: rgba(36, 36, 36, 0.95);
}
.live-pill-logos {
display: inline-flex;
align-items: center;
gap: 0;
}
.live-pill-logo {
width: 42px;
height: 42px;
border-radius: 18px;
background: #2a2a2a;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
margin-right: -16px;
opacity: 0;
transform: translateY(4px) scale(0.85);
animation: liveLogoIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.live-pill-logo:nth-child(1) { animation-delay: 0.05s; }
.live-pill-logo:nth-child(2) { animation-delay: 0.15s; }
.live-pill-logo:nth-child(3) { animation-delay: 0.25s; z-index: 0; }
.live-pill-logo:last-child { margin-right: 0; }
.live-pill-logo img {
width: 78%;
height: 78%;
object-fit: contain;
border-radius: 14px;
}
@keyframes liveLogoIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
.live-pill-text {
font-size: 12.5px;
font-weight: 600;
color: #c0c0c0;
margin-left: 16px;
letter-spacing: 0.01em;
}
/* Freshly revealed cards briefly glow green, then settle */
@keyframes liveCardFresh {
0% { background: rgba(52, 211, 153, 0.08); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18); }
100% { background: var(--card-bg); box-shadow: none; }
}
.job-card-fresh {
animation: liveCardFresh 1.6s ease forwards;
}
/* SIDEBAR */
.sidebar {
flex: 1;
min-width: 0;
padding-top: 23px;
}
.stared-box {
margin-bottom: 28px;
min-height: 44px;
padding: 10px;
background: rgba(255, 255, 255, 0.015);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 20px;
transition: all 0.3s ease;
}
.starred-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 10px;
text-align: center;
}
.starred-empty svg {
color: rgba(255, 255, 255, 0.15);
}
.starred-empty span {
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.starred-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.starred-company-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.starred-company-row:hover {
background: rgba(255, 255, 255, 0.04);
}
.starred-company-row.active {
background: rgba(168, 156, 245, 0.12);
}
.starred-company-icon {
width: 26px;
height: 26px;
background: transparent;
border: none;
border-radius: 10px;
box-shadow: var(--logo-shadow);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.starred-company-icon img {
width: 78%;
height: 78%;
object-fit: contain;
border-radius: 8px;
}
.starred-job-title {
flex: 1;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
transition: color 0.2s ease;
}
.starred-company-row:hover .starred-job-title {
color: rgba(255, 255, 255, 0.85);
}
.starred-company-row.active .starred-job-title {
color: #fff;
font-weight: 600;
}
.starred-badge {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.3);
font-size: 9px;
font-weight: 700;
min-width: 17px;
height: 17px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.starred-jobs {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.starred-job-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: 10px;
transition: all 0.2s ease;
}
.starred-job-item:hover {
background: rgba(255,255,255,0.05);
transform: translateX(4px);
}
.starred-job-link {
font-size: 13px;
color: rgba(255,255,255,0.55);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color 0.2s;
}
.starred-job-link:hover {
color: #fff;
}
.starred-job-remove {
opacity: 0;
background: none;
border: none;
color: rgba(255,255,255,0.25);
cursor: pointer;
font-size: 14px;
padding: 6px;
transition: all 0.2s;
border-radius: 50%;
}
.starred-job-item:hover .starred-job-remove {
opacity: 1;
}
.starred-job-remove:hover {
color: #ff453a;
background: rgba(255, 69, 58, 0.1);
transform: scale(1.1);
}
.sidebar-text {
padding: 0 4px;
margin-bottom: 36px;
}
.sidebar-text p {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
line-height: 1.65;
font-weight: 450;
letter-spacing: -0.01em;
}
.sidebar-text strong {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
.sidebar-divider {
height: 1px;
background: rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.01);
margin: 36px 0;
border: none;
box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.sidebar-section-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 18px;
padding-left: 4px;
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-section-title::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.06);
}
.sidebar-company-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.sidebar-company {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
overflow: hidden;
}
.sidebar-company:hover {
background: rgba(255, 255, 255, 0.04);
color: #fff;
}
.sidebar-company img {
width: 22px;
height: 22px;
border-radius: 6px;
object-fit: contain;
background: rgba(255, 255, 255, 0.04);
padding: 2px;
flex-shrink: 0;
filter: grayscale(0.5) brightness(0.9) opacity(0.75);
transition: filter 0.2s ease, opacity 0.2s ease;
}
.sidebar-company:hover img {
filter: none;
opacity: 1;
}
.sidebar-company span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* PAGINATION */
.pagination {
margin-top: 40px;
display: flex;
justify-content: center;
gap: 8px;
}
.pagination a {
padding: 10px 20px;
border-radius: 10px;
border: 1px solid var(--pagination-border);
color: var(--text-muted);
font-weight: 500;
font-size: 14px;
transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.pagination a:hover {
color: var(--pagination-hover-text);
border-color: var(--pagination-hover-border);
background-color: var(--pagination-hover-bg);
}
.pagination a.active {
background-color: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* FOOTER */
.footer-rich {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1160px;
margin: 48px auto 32px;
padding: 20px 30px 0;
border-top: 1px solid var(--footer-border);
}
.footer-brand-name {
font-size: 13px;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: -0.01em;
}
.footer-meta {
font-size: 12px;
color: var(--text-muted);
}
.footer-meta span {
margin: 0 8px;
opacity: 0.4;
}
.footer-credit {
font-size: 12px;
color: var(--text-muted);
}
.footer-credit a {
color: var(--text-muted);
text-decoration: none;
font-weight: 600;
transition: color 0.15s;
}
.footer-credit a:hover {
color: var(--text);
}
/* MOBILE RESPONSIVE */
@media (max-width: 1100px) {
.content-layout {
flex-direction: column;
}
.job-grid {
grid-template-columns: 1fr;
}
#main-container {
padding: 0 40px;
}
#logo {
margin-top: -20px;
}
}