:root {
--bg: #0A0F1E;
--bg-2: #0F1626;
--card: #131B2E;
--border: rgba(255,255,255,0.08);
--fg: #F8FAFC;
--muted: #94A3B8;
--blue: #2563EB;
--blue-2: #3B82F6;
--blue-dark: #1D4ED8;
--orange: #F97316;
--orange-2: #FB923C;
--orange-dark: #EA580C;
}
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg);
color: var(--fg);
overflow-x: hidden;
}
.font-display { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; } .hero-bg {
background:
radial-gradient(ellipse 70% 50% at 15% 10%, rgba(37,99,235,0.20), transparent 55%),
radial-gradient(ellipse 50% 40% at 85% 25%, rgba(249,115,22,0.12), transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 110%, rgba(37,99,235,0.14), transparent 55%),
#0A0F1E;
}
.grid-pattern {
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 80% at 50% 30%, black 30%, transparent 90%);
}
.glass {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
}
.gradient-text {
background: linear-gradient(120deg, #3B82F6 0%, #2563EB 40%, #F97316 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
} .logo-box {
background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
box-shadow: 0 4px 16px -4px rgba(37,99,235,0.4);
}
.logo-l { color: #2563EB; }
.logo-n { color: #F97316; }
.logo-search { color: #1E293B; } .btn-primary {
background: linear-gradient(135deg, #2563EB, #1D4ED8);
box-shadow: 0 8px 24px -8px rgba(37,99,235,0.5);
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.btn-primary:hover {
box-shadow: 0 12px 32px -8px rgba(37,99,235,0.7);
transform: translateY(-2px);
}
.btn-orange {
background: linear-gradient(135deg, #F97316, #EA580C);
box-shadow: 0 8px 24px -8px rgba(249,115,22,0.4);
transition: all 0.3s ease;
}
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(249,115,22,0.6); } @keyframes float {
0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
50% { transform: translateY(-14px) rotate(var(--rot,0deg)); }
}
.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 7.5s ease-in-out infinite 0.4s; }
.float-3 { animation: float 8s ease-in-out infinite 0.8s; }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-track { display: flex; width: max-content; animation: marquee 35s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes pulse-dot {
0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(37,99,235,0.7); }
50% { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
@keyframes logo-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
50% { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}
.logo-dot { animation: logo-pulse 2.5s infinite; } .job-card {
background: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid rgba(255,255,255,0.06);
transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
position: relative;
overflow: hidden;
}
.job-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(37,99,235,0.08), transparent 40%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.job-card:hover {
border-color: rgba(37,99,235,0.35);
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(37,99,235,0.25);
}
.job-card:hover::after { opacity: 1; } .category-card {
background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.06);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--blue), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.category-card:hover::before { transform: translateX(100%); }
.category-card:hover {
border-color: rgba(37,99,235,0.3);
transform: translateY(-4px);
}
.category-card:hover .cat-icon {
transform: scale(1.1) rotate(-5deg);
background: linear-gradient(135deg, #2563EB, #1D4ED8);
color: white;
} .nav-scrolled {
background: rgba(10,15,30,0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-link { position: relative; }
.nav-link::after {
content: '';
position: absolute;
bottom: -6px; left: 0;
width: 0; height: 2px;
background: linear-gradient(90deg, #2563EB, #F97316);
transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; } .dropdown {
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s ease;
}
.dropdown-parent:hover .dropdown, .dropdown-parent:focus-within .dropdown {
opacity: 1; visibility: visible; transform: translateY(0);
} .search-glow { transition: all 0.3s ease; }
.search-glow:focus-within {
box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
border-color: rgba(37,99,235,0.5);
}
.custom-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
appearance: none;
padding-right: 2rem;
} .chip {
background: rgba(37,99,235,0.08);
border: 1px solid rgba(37,99,235,0.2);
color: #93C5FD;
transition: all 0.2s ease;
}
.chip:hover {
background: rgba(37,99,235,0.18);
border-color: rgba(37,99,235,0.45);
color: #BFDBFE;
}
.chip.active {
background: linear-gradient(135deg, #2563EB, #1D4ED8);
border-color: transparent;
color: white;
} .badge-fulltime { background: rgba(37,99,235,0.12); color: #93C5FD; border: 1px solid rgba(37,99,235,0.25); }
.badge-parttime { background: rgba(249,115,22,0.12); color: #FDBA74; border: 1px solid rgba(249,115,22,0.25); }
.badge-remote { background: rgba(168,85,247,0.12); color: #C4B5FD; border: 1px solid rgba(168,85,247,0.25); }
.badge-intern { background: rgba(56,189,248,0.12); color: #7DD3FC; border: 1px solid rgba(56,189,248,0.25); }
.badge-kontrak { background: rgba(234,179,8,0.12); color: #FDE68A; border: 1px solid rgba(234,179,8,0.25); } .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); } ::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0F1E; }
::-webkit-scrollbar-thumb { background: #1E293B; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2563EB; } .mobile-menu { transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.mobile-menu.open { transform: translateX(0); } .toast {
position: fixed;
bottom: 2rem; right: 2rem;
transform: translateY(150%);
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
z-index: 9999;
}
.toast.show { transform: translateY(0); } .back-top {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
}
.back-top.visible {
opacity: 1; visibility: visible; transform: translateY(0);
} .testimonial-track { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .aurora {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.5;
pointer-events: none;
} .stat-number { font-variant-numeric: tabular-nums; } .scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .filter-check:checked + label { color: #3B82F6; }
.filter-check:checked + label .check-box {
background: linear-gradient(135deg, #2563EB, #1D4ED8);
border-color: transparent;
}
.filter-check:checked + label .check-box i { opacity: 1; }
.check-box i { opacity: 0; transition: opacity 0.2s; } .section-line {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(37,99,235,0.3), transparent);
} .site-header, .site-footer { display: none; }