.grooveshow-faq,
.grooveshow-seo-local {
box-sizing: border-box;
width: min(100%, 1180px);
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 56px);
}
.grooveshow-faq {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
width: min(100%, 1040px);
margin-block: clamp(42px, 7vw, 88px);
padding: clamp(28px, 5vw, 64px);
scroll-margin-top: 120px;
overflow: hidden;
background:
radial-gradient(circle at 100% 0, rgba(223, 113, 56, .14), transparent 30%),
linear-gradient(145deg, #fffaf6, #f4f1ed);
border: 1px solid rgba(45, 48, 49, .1);
border-radius: 32px;
box-shadow: 0 24px 64px rgba(23, 25, 26, .1);
}
.grooveshow-faq > h2,
.grooveshow-faq > p {
grid-column: 1 / -1;
}
.grooveshow-faq > h2 {
max-width: 850px;
margin: 0;
color: #252829;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.06;
letter-spacing: -.035em;
}
.grooveshow-faq > h2::after {
content: "";
display: block;
width: 76px;
height: 5px;
margin-top: 18px;
background: linear-gradient(90deg, #df7138, #f5a161);
border-radius: 999px;
}
.grooveshow-faq > p,
.grooveshow-seo-local > p { max-width: 72ch; }
.grooveshow-faq > h2 + p {
margin: -4px 0 10px;
color: #686d70;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.65;
}
.grooveshow-faq__item {
position: relative;
box-sizing: border-box;
min-height: 0;
padding: 0;
overflow: hidden;
background: rgba(255, 255, 255, .94);
border: 1px solid rgba(45, 48, 49, .1);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(23, 25, 26, .06);
transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.grooveshow-faq__item:hover {
border-color: rgba(223, 113, 56, .38);
box-shadow: 0 14px 34px rgba(23, 25, 26, .09);
}
.grooveshow-faq__item.is-open {
background: #ffffff;
border-color: rgba(223, 113, 56, .5);
box-shadow: 0 16px 38px rgba(23, 25, 26, .1);
}
.grooveshow-faq__item h3 {
margin: 0;
color: #252829;
font-size: inherit;
line-height: inherit;
}
.grooveshow-faq__item h3::before {
content: none !important;
display: none !important;
}
.grooveshow-faq__button {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) 34px;
gap: 16px;
align-items: center;
width: 100%;
padding: clamp(19px, 2.5vw, 25px) clamp(18px, 3vw, 28px);
color: #252829;
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
font: inherit;
font-family: "Instrument Sans", Arial, Helvetica, sans-serif !important;
font-size: clamp(19px, 2vw, 24px);
font-weight: 700;
line-height: 1.3;
text-align: left;
}
.grooveshow-faq__button::before {
content: "?";
display: inline-grid;
width: 38px;
height: 38px;
place-items: center;
color: #ffffff;
background: linear-gradient(135deg, #df7138, #bd5325);
border-radius: 50%;
box-shadow: 0 7px 16px rgba(189, 83, 37, .22);
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
font-weight: 900;
}
.grooveshow-faq__button::after {
content: "+";
display: grid;
width: 34px;
height: 34px;
place-items: center;
color: #bd5325;
background: #fff2e8;
border: 1px solid rgba(223, 113, 56, .28);
border-radius: 50%;
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1;
transition: color .2s ease, background-color .2s ease, transform .25s ease;
}
.grooveshow-faq__item.is-open .grooveshow-faq__button::after {
content: "−";
color: #ffffff;
background: #bd5325;
transform: rotate(180deg);
}
.grooveshow-faq__button:focus-visible {
outline: 3px solid rgba(0, 132, 214, .3);
outline-offset: -4px;
}
.grooveshow-faq__answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .32s ease, opacity .24s ease;
}
.grooveshow-faq__item.is-open .grooveshow-faq__answer {
grid-template-rows: 1fr;
opacity: 1;
}
.grooveshow-faq__answer-inner {
min-height: 0;
overflow: hidden;
}
.grooveshow-faq__item > p,
.grooveshow-faq__answer-inner p {
margin: 0;
padding: 0 clamp(22px, 4vw, 80px) clamp(22px, 3vw, 30px) clamp(72px, 7vw, 82px);
color: #555b5e;
font-size: 16px;
line-height: 1.68;
}
@media (prefers-reduced-motion: reduce){.grooveshow-faq__answer,
.grooveshow-faq__button::after { transition: none; }}
.grooveshow-faq > p:last-child:not(:first-of-type) {
margin: 10px 0 0;
}
.grooveshow-faq > p:last-child:not(:first-of-type) a {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 0 20px;
color: #ffffff !important;
background: linear-gradient(135deg, #df7138, #bd5325);
border-radius: 999px;
box-shadow: 0 10px 24px rgba(189, 83, 37, .2);
font-weight: 800;
text-decoration: none !important;
}
@media (max-width: 690px){.grooveshow-faq,
.grooveshow-seo-local { padding-inline: 20px; }.grooveshow-faq {
grid-template-columns: 1fr;
gap: 14px;
margin-block: 34px;
padding: 26px 18px;
border-radius: 22px;
}.grooveshow-faq__item { padding: 0; border-radius: 16px; }.grooveshow-faq__button {
grid-template-columns: 34px minmax(0, 1fr) 32px;
gap: 11px;
padding: 18px 16px;
font-size: 18px;
}.grooveshow-faq__button::before {
width: 34px;
height: 34px;
font-size: 17px;
}.grooveshow-faq__button::after {
width: 32px;
height: 32px;
font-size: 23px;
}.grooveshow-faq__item > p,
.grooveshow-faq__answer-inner p {
padding: 0 16px 22px 61px;
font-size: 15px;
}}