.cg-faq-page {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 12% 16%, rgba(216, 168, 142, 0.2) 0%, transparent 28%),
radial-gradient(circle at 82% 18%, rgba(127, 143, 115, 0.12) 0%, transparent 26%),
linear-gradient(180deg, #fcf7f3 0%, #fffdfb 48%, #f8f1eb 100%);
}
.cg-faq-page > section {
position: relative;
isolation: isolate;
overflow: hidden;
}
.cg-faq-page > section > .container {
position: relative;
z-index: 2;
}
.cg-faq-page > section::before,
.cg-faq-page > section::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 1;
}
.cg-faq-page > section::before {
top: 8%;
right: -130px;
width: clamp(220px, 24vw, 360px);
height: clamp(220px, 24vw, 360px);
border: 1px solid rgba(183, 141, 121, 0.14);
border-radius: 999px;
background:
radial-gradient(
circle at center,
transparent 58%,
rgba(183, 141, 121, 0.14) 59% 60%,
transparent 61% 100%
),
repeating-linear-gradient(
35deg,
rgba(183, 141, 121, 0.08) 0 1px,
transparent 1px 14px
);
}
.cg-faq-page > section::after {
left: -110px;
bottom: 9%;
width: clamp(190px, 20vw, 290px);
height: clamp(190px, 20vw, 290px);
border: 1px solid rgba(127, 143, 115, 0.13);
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.24),
rgba(226, 233, 215, 0.12)
),
repeating-linear-gradient(
-30deg,
rgba(29, 29, 29, 0.04) 0 1px,
transparent 1px 12px
);
}
.cg-faq-page__hero {
padding-bottom: 44px;
}
.cg-faq-page__hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
align-items: end;
gap: clamp(32px, 5vw, 58px);
}
.cg-faq-page__hero-content {
max-width: 760px;
}
.cg-faq-page .cg-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
color: #9a6f5d;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
margin-bottom: 18px;
}
.cg-faq-page .cg-section-eyebrow::before {
content: "";
display: inline-block;
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.48;
}
.cg-faq-page__title {
margin: 0 0 20px;
font-size: clamp(42px, 6vw, 78px);
line-height: 1.02;
letter-spacing: 0;
color: var(--cg-color-text);
}
.cg-faq-page__text {
max-width: 680px;
font-size: 18px;
line-height: 1.75;
color: var(--cg-color-muted);
}
.cg-faq-page__text p:last-child {
margin-bottom: 0;
}
.cg-faq-page__summary-card {
position: relative;
overflow: hidden;
padding: 28px;
border: 1px solid rgba(183, 141, 121, 0.16);
border-radius: 30px;
background:
radial-gradient(circle at 100% 0%, rgba(216, 168, 142, 0.16) 0%, transparent 36%),
linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 247, 0.84));
box-shadow: 0 24px 60px rgba(58, 47, 41, 0.09);
backdrop-filter: blur(14px);
}
.cg-faq-page__summary-card::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(180px, 52%);
height: 4px;
border-radius: 0 0 999px 999px;
background: linear-gradient(90deg, #9f735f 0%, #d8a88e 100%);
transform: translateX(-50%);
}
.cg-faq-page__summary-card > * {
position: relative;
z-index: 1;
}
.cg-faq-page__summary-kicker {
display: block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a6f5d;
}
.cg-faq-page__summary-card p {
margin: 0 0 22px;
font-size: 16px;
line-height: 1.7;
color: var(--cg-color-muted);
}
.cg-faq-page__body {
padding-top: 36px;
background:
linear-gradient(180deg, #fffdfb 0%, #fff7f1 100%);
}
.cg-faq-page__list {
display: grid;
gap: 14px;
max-width: 940px;
margin: 0 auto;
}
.cg-faq-page__item {
position: relative;
overflow: hidden;
border: 1px solid rgba(183, 141, 121, 0.14);
border-radius: 24px;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 247, 0.92));
box-shadow: 0 16px 42px rgba(58, 47, 41, 0.055);
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s ease;
transition-delay: 0s !important;
}
.cg-faq-page__item:hover,
.cg-faq-page__item:focus-within {
transition-delay: 0s !important;
border-color: rgba(183, 141, 121, 0.28);
box-shadow: 0 24px 60px rgba(58, 47, 41, 0.09);
transform: translateY(-2px);
}
.cg-faq-page__question {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 24px 26px;
background: transparent;
border: 0;
color: var(--cg-color-text);
text-align: left;
cursor: pointer;
transition: background 0.22s ease;
}
.cg-faq-page__question:hover {
background: rgba(243, 231, 223, 0.3);
}
.cg-faq-page__question[aria-expanded="true"] {
background: rgba(243, 231, 223, 0.38);
}
.cg-faq-page__answer {
padding: 0 26px;
}
.cg-faq-page .cg-faq__question-text {
font-size: 20px;
line-height: 1.35;
font-weight: 700;
}
.cg-faq-page .cg-faq__icon {
position: relative;
flex: 0 0 40px;
width: 40px;
height: 40px;
border: 1px solid rgba(183, 141, 121, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 24px rgba(58, 47, 41, 0.06);
transition:
background 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease;
}
.cg-faq-page .cg-faq__icon::before,
.cg-faq-page .cg-faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 999px;
background: #8e6554;
transform: translate(-50%, -50%);
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
.cg-faq-page .cg-faq__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.cg-faq-page .cg-faq__question[aria-expanded="true"] .cg-faq__icon {
border-color: rgba(183, 141, 121, 0.32);
background: #fff;
transform: rotate(180deg);
}
.cg-faq-page .cg-faq__question[aria-expanded="true"] .cg-faq__icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(0deg);
}
.cg-faq-page__answer-inner {
padding: 0 0 24px;
max-width: 780px;
font-size: 16px;
line-height: 1.78;
color: var(--cg-color-muted);
}
.cg-faq-page__answer-inner p:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.cg-faq-page__hero-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.cg-faq-page__summary {
max-width: 520px;
}
}
@media (max-width: 767px) {
.cg-faq-page > section::before {
right: -130px;
opacity: 0.55;
}
.cg-faq-page > section::after {
left: -120px;
opacity: 0.5;
}
.cg-faq-page__hero {
padding-bottom: 28px;
}
.cg-faq-page__title {
font-size: clamp(36px, 12vw, 52px);
}
.cg-faq-page__text {
font-size: 16px;
}
.cg-faq-page__summary-card {
padding: 22px;
border-radius: 24px;
}
.cg-faq-page__body {
padding-top: 24px;
}
.cg-faq-page__item {
border-radius: 22px;
}
.cg-faq-page__question {
gap: 14px;
padding: 20px 18px;
}
.cg-faq-page .cg-faq__icon {
flex-basis: 36px;
width: 36px;
height: 36px;
}
.cg-faq-page__answer {
padding: 0 18px;
}
.cg-faq-page__answer-inner {
padding-bottom: 20px;
font-size: 15px;
}
}