/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/components/Sections/FAQ/styles.scss
@import "styles/_typography.scss";
@import "styles/_mixins.scss";
.faq {
margin-top: 120px;
padding-bottom: 120px;
$gap: 20px;
&-sidetext {
position: sticky;
top: 96px;
h2 {
max-width: 360px;
margin: 24px 0;
}
&__stills {
border-radius: 4px;
background: var(--Light-Grey);
padding: 11px 20px;
width: fit-content;
@include w($sm) {
width: 100% !important;
}
.body2 {
opacity: 0.6;
margin-bottom: 8px;
}
.button-text {
display: flex;
cursor: pointer;
gap: 8px;
align-items: center;
color: var(--Blue-purple);
}
}
}
&-section {
display: flex;
gap: $gap;
flex-wrap: wrap;
&-items {
width: 100%;
.body1 {
opacity: 0.6;
margin-bottom: 20px;
}
& + & {
margin-bottom: 44px;
}
&:last-child {
margin-bottom: 0;
}
}
}
&-item {
cursor: pointer;
width: 100%;
border-radius: 8px;
border: 1px solid var(--Grey);
background: var(--White);
padding: 24px;
transition: 0.5s;
&__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
&-cross {
max-width: 40px;
max-height: 40px;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--Light-Grey);
padding: 10px;
color: var(--Dark);
transition: 0.5s;
svg {
height: 20px;
width: 20px;
transition: 0.5s;
}
}
}
&__body {
overflow: hidden;
transition: max-height 0.6s ease;
.body2 {
margin-top: 24px;
opacity: 0.8;
a {
@include button-text;
color: var(--Blue-purple);
}
}
}
&:hover {
box-shadow: 0px 16px 48px -16px rgba(59, 44, 177, 0.16);
}
&.--open {
border-radius: 8px;
border: 1px solid var(--Grey);
background: var(--Light-Grey);
.faq-item__header-cross {
background: var(--White);
color: var(--Blue-purple);
svg {
transform: rotate(45deg);
}
}
}
}
&-item + &-item {
margin-top: 20px;
}
@include w($sm) {
margin-top: 64px;
padding-bottom: 40px;
&-item + &-item {
margin-top: 16px;
}
}
}