.workscout-modern-faq {
box-sizing: border-box;
width: 100%;
}
.workscout-modern-faq *,
.workscout-modern-faq *::before,
.workscout-modern-faq *::after {
box-sizing: border-box;
}
.workscout-modern-faq__grid {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
column-gap: 64px;
align-items: start;
}
.workscout-modern-faq__left {
min-width: 0;
}
.workscout-modern-faq__kicker {
margin: 0 0 18px;
color: #999;
font-size: 14px;
font-weight: 500;
letter-spacing: 3px;
line-height: 20px;
text-transform: uppercase;
}
.workscout-modern-faq .workscout-accent-headline {
max-width: none;
margin: 0;
text-align: left;
}
.workscout-modern-faq .workscout-accent-headline__title,
.workscout-modern-faq .workscout-accent-headline__subtitle {
margin-left: 0;
margin-right: 0;
}
.workscout-modern-faq .workscout-accent-headline__title {
max-width: 520px;
}
.workscout-modern-faq .workscout-accent-headline__subtitle {
max-width: 460px;
}
.workscout-modern-faq .workscout-accent-headline--separator .workscout-accent-headline__subtitle::before {
margin-left: 0;
}
.workscout-modern-faq__help {
max-width: 380px;
margin-top: 46px;
padding: 26px;
border-radius: 12px;
background-color: #f4f4f4;
}
.workscout-modern-faq__help-top {
display: flex;
gap: 14px;
align-items: center;
}
.workscout-modern-faq__help-top img {
flex: 0 0 46px;
width: 46px;
height: 46px;
border-radius: 100px;
object-fit: cover;
}
.workscout-modern-faq__help-top strong,
.workscout-modern-faq__help-top span {
display: block;
}
.workscout-modern-faq__help-top strong {
color: #111;
font-size: 16px;
font-weight: 500;
line-height: 22px;
}
.workscout-modern-faq__help-top span {
margin-top: 3px;
color: #888;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.workscout-modern-faq__help-link {
display: inline-flex;
gap: 8px;
align-items: center;
margin-top: 18px;
color: var(--workscout-primary-color, #26ae61);
font-size: 15px;
font-weight: 500;
line-height: 22px;
text-decoration: none;
}
.workscout-modern-faq__help-link:hover,
.workscout-modern-faq__help-link:focus {
color: var(--workscout-primary-color, #26ae61);
box-shadow: none;
}
.workscout-modern-faq__help-link svg {
width: 16px;
height: 16px;
transition: transform 300ms ease;
}
.workscout-modern-faq__help-link:hover svg {
transform: translateX(4px);
}
.workscout-modern-faq__panel {
position: relative;
min-width: 0;
padding: 16px 44px;
border-radius: 12px;
background: #111;
}
.workscout-modern-faq__question-mark {
position: absolute;
top: -30px;
right: 34px;
width: 34px;
height: 46px;
transform: rotate(10deg);
}
.workscout-modern-faq__question-mark path {
fill: none;
stroke: var(--workscout-primary-color, #26ae61);
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 80;
stroke-dashoffset: 80;
}
.workscout-modern-faq.is-visible .workscout-modern-faq__question-mark path {
animation: workscout-modern-faq-draw 700ms ease forwards 500ms;
}
.workscout-modern-faq__item {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.workscout-modern-faq__item:first-of-type {
border-top: 0;
}
.workscout-modern-faq__question {
display: flex;
gap: 18px;
align-items: center;
width: 100%;
padding: 24px 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #fff;
font-family: inherit;
font-size: 17px;
font-weight: 500;
line-height: 24px;
text-align: left;
cursor: pointer;
}
.workscout-modern-faq__question:hover,
.workscout-modern-faq__question:focus {
background: none;
box-shadow: none;
color: #fff;
}
.workscout-modern-faq__question:focus-visible {
outline: 2px solid var(--workscout-primary-color, #26ae61);
outline-offset: 4px;
}
.workscout-modern-faq__arrow {
display: grid;
flex: 0 0 34px;
place-items: center;
width: 34px;
height: 34px;
border-radius: 6px;
background: #fff;
color: #111;
transition: transform 450ms cubic-bezier(0.22, 0.61, 0.25, 1), background-color 300ms ease, color 300ms ease;
}
.workscout-modern-faq__arrow svg {
width: 15px;
height: 15px;
}
.workscout-modern-faq__item:not(.is-open) .workscout-modern-faq__question:hover .workscout-modern-faq__arrow {
transform: translateX(4px);
}
.workscout-modern-faq .workscout-modern-faq__panel .workscout-modern-faq__item.is-open .workscout-modern-faq__arrow {
background: var(--workscout-primary-color, #26ae61);
color: #fff;
transform: rotate(90deg);
}
.workscout-modern-faq__answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 500ms cubic-bezier(0.22, 0.61, 0.25, 1), opacity 350ms ease;
}
.workscout-modern-faq__item.is-open .workscout-modern-faq__answer {
grid-template-rows: 1fr;
opacity: 1;
}
.workscout-modern-faq__answer-inner {
min-height: 0;
overflow: hidden;
padding: 0 8px 0 52px;
color: #b9b9b9;
font-size: 15px;
font-weight: 400;
line-height: 26px;
transition: padding 500ms cubic-bezier(0.22, 0.61, 0.25, 1);
}
.workscout-modern-faq__item.is-open .workscout-modern-faq__answer-inner {
padding-top: 2px;
padding-bottom: 26px;
}
.workscout-modern-faq__answer-inner p {
margin: 0;
color: inherit;
font-size: inherit !important;
font-weight: inherit;
line-height: inherit !important;
}
@keyframes workscout-modern-faq-draw {
to { stroke-dashoffset: 0; }
}
@media (max-width: 980px) {
.workscout-modern-faq__grid {
grid-template-columns: 1fr !important;
row-gap: 44px;
}
.workscout-modern-faq__help {
max-width: none;
}
.workscout-modern-faq__panel {
padding: 10px 28px;
}
}
@media (max-width: 520px) {
.workscout-modern-faq__panel {
padding: 8px 20px;
}
.workscout-modern-faq__question {
gap: 14px;
padding: 20px 0;
font-size: 16px;
line-height: 23px;
}
.workscout-modern-faq__answer-inner {
padding-left: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.workscout-modern-faq *,
.workscout-modern-faq *::before,
.workscout-modern-faq *::after {
animation: none !important;
transition: none !important;
}
.workscout-modern-faq__question-mark path {
stroke-dashoffset: 0;
}
}