.lpt-career-benefits {
--lpt-career-circle-size:470px;
--lpt-career-icon-size:78px;
position:relative;
isolation:isolate;
width:min(100%,1120px);
min-height:620px;
margin:0 auto;
overflow:visible;
} .lpt-career-benefits__ring {
position:absolute;
z-index:0;
top:50%;
left:50%;
width:var(--lpt-career-circle-size);
height:var(--lpt-career-circle-size);
border:1px dashed rgba(45,91,145,.48);
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%) scale(.96);
animation:lptCareerRingIn .9s ease forwards;
} .lpt-career-benefits__ring::before {
content:"";
position:absolute;
inset:-3px;
border-radius:50%;
background:conic-gradient(
from 0deg,
transparent 0deg,
transparent 280deg,
rgba(45,91,145,.03) 295deg,
rgba(45,91,145,.20) 315deg,
rgba(45,91,145,.80) 338deg,
rgba(45,91,145,.15) 350deg,
transparent 360deg
);
-webkit-mask:radial-gradient(
farthest-side,
transparent calc(100% - 4px),
#000 calc(100% - 3px)
);
mask:radial-gradient(
farthest-side,
transparent calc(100% - 4px),
#000 calc(100% - 3px)
);
animation:lptCareerOrbit 9s linear infinite;
} .lpt-career-benefits__ring::after {
content:"";
position:absolute;
top:-5px;
left:50%;
width:10px;
height:10px;
border-radius:50%;
background:var(--lp-color-primary);
box-shadow:
0 0 0 5px rgba(45,91,145,.08),
0 0 18px rgba(45,91,145,.42);
transform:translateX(-50%);
} .lpt-career-benefits__logo {
position:absolute;
z-index:2;
top:50%;
left:50%;
display:flex;
align-items:center;
justify-content:center;
width:190px;
height:190px;
padding:30px;
border-radius:50%;
background:var(--lp-color-primary);
box-shadow:
0 18px 42px rgba(30,68,112,.20),
0 0 0 8px rgba(45,91,145,.045);
transform:translate(-50%,-50%);
animation:lptCareerLogoPulse 4.8s ease-in-out infinite;
} .lpt-career-benefits__logo::before,
.lpt-career-benefits__logo::after {
content:"";
position:absolute;
inset:-1px;
z-index:-1;
border:1px solid rgba(45,91,145,.18);
border-radius:50%;
pointer-events:none;
}
.lpt-career-benefits__logo::before {
animation:lptCareerLogoWave 4.5s ease-out infinite;
}
.lpt-career-benefits__logo::after {
animation:lptCareerLogoWave 4.5s 2.25s ease-out infinite;
}
.lpt-career-benefits__logo img {
position:relative;
z-index:2;
display:block;
width:100%;
height:100%;
object-fit:contain;
filter:brightness(0) invert(1);
} .lpt-career-benefits__items {
position:absolute;
inset:0;
}
.lpt-career-benefit {
position:absolute;
z-index:3;
top:var(--lpt-benefit-y);
left:var(--lpt-benefit-x);
display:flex;
align-items:center;
gap:18px;
width:max-content;
max-width:370px;
opacity:0;
filter:blur(8px);
}
.lpt-career-benefits.is-ready .lpt-career-benefit {
animation:lptCareerBenefitIn .7s cubic-bezier(.2,.8,.2,1) forwards;
animation-delay:var(--lpt-delay,0s);
} .lpt-career-benefit__icon {
position:relative;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 var(--lpt-career-icon-size);
width:var(--lpt-career-icon-size);
height:var(--lpt-career-icon-size);
border-radius:50%;
background:var(--lp-color-primary);
color:#fff;
box-shadow:
0 12px 30px rgba(45,91,145,.17),
0 0 0 7px rgba(45,91,145,.055);
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
box-shadow .4s cubic-bezier(.2,.8,.2,1),
background .4s ease;
} .lpt-career-benefit:nth-child(even) .lpt-career-benefit__icon {
background:#6387b2;
}
.lpt-career-benefit__icon i,
.lpt-career-benefit__icon svg {
position:relative;
z-index:2;
color:#fff;
fill:currentColor;
font-size:30px;
transition:transform .4s cubic-bezier(.2,.8,.2,1);
} .lpt-career-benefit__icon::before {
content:"";
position:absolute;
inset:-1px;
z-index:-1;
border:2px solid rgba(45,91,145,.45);
border-radius:50%;
opacity:0;
pointer-events:none;
}
.lpt-career-benefit.is-spotlight .lpt-career-benefit__icon::before {
animation:lptCareerPing 1.15s ease-out;
} .lpt-career-benefit__icon::after {
content:"";
position:absolute;
inset:5px;
border-radius:50%;
background:radial-gradient(
circle at 35% 25%,
rgba(255,255,255,.22),
rgba(255,255,255,0) 55%
);
pointer-events:none;
} .lpt-career-benefit__text {
width:250px;
color:var(--lp-color-text);
font-size:17px;
font-weight:var(--lp-font-weight-medium);
line-height:1.4;
transition:
color .35s ease,
transform .35s cubic-bezier(.2,.8,.2,1);
} .lpt-career-benefit.is-right {
flex-direction:row;
transform:translate(
calc(-1 * var(--lpt-career-icon-size) / 2),
-50%
);
}
.lpt-career-benefit.is-left {
flex-direction:row-reverse;
text-align:right;
transform:translate(
calc(-100% + var(--lpt-career-icon-size) / 2),
-50%
);
}
.lpt-career-benefit.is-top {
flex-direction:column-reverse;
gap:9px;
text-align:center;
transform:translate(-50%,-50%);
}
.lpt-career-benefit.is-bottom {
flex-direction:column;
gap:9px;
text-align:center;
transform:translate(-50%,-50%);
}
.lpt-career-benefit.is-top .lpt-career-benefit__text,
.lpt-career-benefit.is-bottom .lpt-career-benefit__text {
width:230px;
} .lpt-career-benefit::after {
content:"";
position:absolute;
z-index:-1;
top:50%;
width:26px;
height:1px;
background:linear-gradient(
90deg,
rgba(45,91,145,.08),
rgba(45,91,145,.48)
);
opacity:0;
transform:translateY(-50%) scaleX(.4);
transition:
opacity .35s ease,
transform .35s ease;
}
.lpt-career-benefit.is-right::after {
left:-18px;
transform-origin:right center;
}
.lpt-career-benefit.is-left::after {
right:-18px;
transform-origin:left center;
}
.lpt-career-benefit.is-top::after,
.lpt-career-benefit.is-bottom::after {
display:none;
}
.lpt-career-benefit:hover::after,
.lpt-career-benefit.is-spotlight::after {
opacity:1;
transform:translateY(-50%) scaleX(1);
} .lpt-career-benefit:hover .lpt-career-benefit__icon {
background:var(--lp-color-primary);
box-shadow:
0 20px 45px rgba(45,91,145,.27),
0 0 0 9px rgba(45,91,145,.085);
transform:translateY(-5px) scale(1.06);
}
.lpt-career-benefit:nth-child(even):hover .lpt-career-benefit__icon {
background:#5279a8;
}
.lpt-career-benefit:hover .lpt-career-benefit__icon i,
.lpt-career-benefit:hover .lpt-career-benefit__icon svg {
transform:scale(1.08);
}
.lpt-career-benefit:hover .lpt-career-benefit__text {
color:var(--lp-color-primary);
transform:translateY(-2px);
} .lpt-career-benefit.is-spotlight .lpt-career-benefit__icon {
background:var(--lp-color-primary);
box-shadow:
0 22px 50px rgba(45,91,145,.30),
0 0 0 10px rgba(45,91,145,.09);
transform:translateY(-7px) scale(1.08);
}
.lpt-career-benefit:nth-child(even).is-spotlight .lpt-career-benefit__icon {
background:#5279a8;
}
.lpt-career-benefit.is-spotlight .lpt-career-benefit__icon i,
.lpt-career-benefit.is-spotlight .lpt-career-benefit__icon svg {
transform:scale(1.1);
}
.lpt-career-benefit.is-spotlight .lpt-career-benefit__text {
color:var(--lp-color-primary);
transform:translateY(-2px);
} @keyframes lptCareerRingIn {
from {
opacity:0;
transform:translate(-50%,-50%) scale(.96);
}
to {
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
}
@keyframes lptCareerBenefitIn {
from {
opacity:0;
filter:blur(8px);
}
to {
opacity:1;
filter:blur(0);
}
}
@keyframes lptCareerOrbit {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes lptCareerPing {
0% {
opacity:.65;
transform:scale(1);
}
60% {
opacity:.18;
}
100% {
opacity:0;
transform:scale(1.48);
}
}
@keyframes lptCareerLogoPulse {
0%,
100% {
box-shadow:
0 18px 42px rgba(30,68,112,.20),
0 0 0 7px rgba(45,91,145,.045);
transform:translate(-50%,-50%) scale(1);
}
50% {
box-shadow:
0 22px 50px rgba(30,68,112,.25),
0 0 0 11px rgba(45,91,145,.065);
transform:translate(-50%,-50%) scale(1.015);
}
}
@keyframes lptCareerLogoWave {
0% {
opacity:.35;
transform:scale(1);
}
75%,
100% {
opacity:0;
transform:scale(1.28);
}
} @media (max-width:980px) {
.lpt-career-benefits {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
min-height:0;
gap:16px;
}
.lpt-career-benefits__ring {
display:none;
animation:none;
}
.lpt-career-benefits__logo {
position:relative;
top:auto;
left:auto;
grid-column:1 / -1;
justify-self:center;
width:160px;
height:160px;
margin-bottom:12px;
padding:27px;
transform:none;
animation:none;
}
.lpt-career-benefits__logo::before,
.lpt-career-benefits__logo::after {
display:none;
}
.lpt-career-benefits__items {
position:static;
display:contents;
}
.lpt-career-benefit,
.lpt-career-benefit.is-left,
.lpt-career-benefit.is-right,
.lpt-career-benefit.is-top,
.lpt-career-benefit.is-bottom {
position:relative;
inset:auto;
display:flex;
flex-direction:row;
width:100%;
max-width:none;
min-height:108px;
padding:14px;
gap:14px;
border:1px solid var(--lp-color-border-primary);
border-radius:var(--lp-radius-md);
background:var(--lp-color-white);
box-shadow:var(--lp-shadow-sm);
text-align:left;
opacity:1;
filter:none;
transform:none;
animation:none;
}
.lpt-career-benefit::after {
display:none;
}
.lpt-career-benefit__icon::before {
display:none;
}
.lpt-career-benefit__text,
.lpt-career-benefit.is-top .lpt-career-benefit__text,
.lpt-career-benefit.is-bottom .lpt-career-benefit__text {
flex:1;
width:auto;
}
.lpt-career-benefit:hover .lpt-career-benefit__icon,
.lpt-career-benefit.is-spotlight .lpt-career-benefit__icon {
transform:none;
}
.lpt-career-benefit:hover .lpt-career-benefit__text,
.lpt-career-benefit.is-spotlight .lpt-career-benefit__text {
transform:none;
}
} @media (max-width:767px) {
.lpt-career-benefits {
grid-template-columns:1fr;
gap:12px;
}
.lpt-career-benefits__logo {
width:135px;
height:135px;
margin-bottom:10px;
padding:24px;
}
.lpt-career-benefit,
.lpt-career-benefit.is-left,
.lpt-career-benefit.is-right,
.lpt-career-benefit.is-top,
.lpt-career-benefit.is-bottom {
min-height:86px;
padding:12px 14px;
}
.lpt-career-benefit__icon {
flex-basis:62px;
width:62px;
height:62px;
box-shadow:
0 8px 20px rgba(45,91,145,.14),
0 0 0 5px rgba(45,91,145,.05);
}
.lpt-career-benefit__icon i,
.lpt-career-benefit__icon svg {
font-size:25px;
}
.lpt-career-benefit__text {
font-size:16px;
}
} @media (hover:none) {
.lpt-career-benefit:hover .lpt-career-benefit__icon {
transform:none;
}
.lpt-career-benefit:hover .lpt-career-benefit__text {
transform:none;
}
} @media (prefers-reduced-motion:reduce) {
.lpt-career-benefits__logo,
.lpt-career-benefits__logo::before,
.lpt-career-benefits__logo::after,
.lpt-career-benefits__ring,
.lpt-career-benefits__ring::before,
.lpt-career-benefit,
.lpt-career-benefit__icon,
.lpt-career-benefit__icon::before {
animation:none !important;
transition:none !important;
}
.lpt-career-benefit {
opacity:1 !important;
filter:none !important;
}
}