.geness-faq-section {
--geness-faq-section-bg: #f9f5f2;
--geness-faq-pill-bg: #f5f1ed;
--geness-faq-pill-bg-open: #ffffff;
--geness-faq-pill-gap: 12px;
--geness-faq-pill-radius: 18px;
padding: 48px 0 64px;
background-color: var(--geness-faq-section-bg);
}
.geness-faq-section__inner {
max-width: 700px;
margin-left: auto;
margin-right: auto;
} .geness-faq-section__title.pomoc-slider-home-big-title {
text-align: center;
margin: 0 0 6px;
padding-top: 0;
padding-bottom: 0;
font-family: "Playfair Display", serif;
}
.geness-faq-section__intro.banner-descr {
text-align: center;
margin: 0 0 20px;
padding: 0;
font-size: 14px;
line-height: 1.45;
color: #4a4a57;
}
.geness-faq-section__intro p {
margin: 0 0 0.5em;
}
.geness-faq-section__intro p:last-child {
margin-bottom: 0;
}
.geness-faq-accordion {
display: flex;
flex-direction: column;
gap: var(--geness-faq-pill-gap);
background: transparent;
border: 0;
box-shadow: none;
}
.geness-faq-item {
border: 0;
border-radius: var(--geness-faq-pill-radius);
overflow: hidden;
background-color: var(--geness-faq-pill-bg);
transition: background-color 0.35s ease;
}
.geness-faq-item.is-open {
background-color: var(--geness-faq-pill-bg-open);
}
.geness-faq-item__heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.geness-faq-item__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 18px 22px;
margin: 0;
border: 0;
background: transparent;
color: #2f3285;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
text-align: left;
cursor: pointer;
transition: color 0.25s ease;
}
.geness-faq-item__trigger:hover,
.geness-faq-item__trigger:focus-visible {
color: #252066;
}
.geness-faq-item__trigger:focus-visible {
outline: 2px solid #2f3285;
outline-offset: 3px;
border-radius: 4px;
}
.geness-faq-item__question {
flex: 1;
}
.geness-faq-item__icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--geness-faq-section-bg);
position: relative;
transition:
background-color 0.3s ease,
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.geness-faq-item__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -5px 0 0 -4px;
border-right: 2px solid #2f3285;
border-bottom: 2px solid #2f3285;
transform: rotate(45deg);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.geness-faq-item.is-open .geness-faq-item__icon {
background: #2f3285;
}
.geness-faq-item.is-open .geness-faq-item__icon::after {
border-color: #fff;
transform: rotate(-135deg);
margin-top: -3px;
} .geness-faq-item__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.geness-faq-item.is-open .geness-faq-item__panel {
grid-template-rows: 1fr;
}
.geness-faq-item__panel-inner {
overflow: hidden;
min-height: 0;
}
.geness-faq-item__answer {
padding: 0 22px 20px;
color: #3a3a48;
font-size: 14px;
line-height: 1.6;
opacity: 0;
transform: translateY(-6px);
transition:
opacity 0.32s ease 0.06s,
transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0.04s;
}
.geness-faq-item.is-open .geness-faq-item__answer {
opacity: 1;
transform: translateY(0);
}
.geness-faq-item__answer p:last-child {
margin-bottom: 0;
}
.geness-faq-item__answer a {
color: #2f3285;
text-decoration: underline;
text-underline-offset: 2px;
}
.geness-faq-item__answer a:hover {
color: #252066;
}
@media (prefers-reduced-motion: reduce) {
.geness-faq-item__panel,
.geness-faq-item__answer,
.geness-faq-item__icon,
.geness-faq-item__icon::after,
.geness-faq-item {
transition: none;
}
.geness-faq-item__answer {
opacity: 1;
transform: none;
}
.geness-faq-item:not(.is-open) .geness-faq-item__answer {
opacity: 0;
}
}
@media (max-width: 680px) {
.geness-faq-section {
padding: 36px 0 48px;
--geness-faq-pill-gap: 10px;
--geness-faq-pill-radius: 14px;
}
.geness-faq-section__intro.banner-descr {
margin-bottom: 16px;
}
.geness-faq-item__trigger {
font-size: 14px;
padding: 16px 18px;
}
.geness-faq-item__answer {
padding: 0 18px 16px;
font-size: 13px;
}
}