/* ========================================================================== faq-2027.css — page-specific rules for /faq -------------------------------------------------------------------------- Everything structural comes from css/site-2027.css (.cy27-phero, .cy27-field, .cy27-search, .cy27-seg, .cy27-acc__*, .cy27-card--feature, .cy27-beam, .cy27-btn). Only the values this page states differently from the shared defaults live here. Specificity note: several rules below deliberately run at 0,2,0 so they beat the shared 0,1,1 element rules (.cy27-page h1, .cy27-acc__panel > div) without needing an importance override. ========================================================================== */ /* -------------------------------------------------------------------------- No-JS safety net The accordion panels are collapsed with max-height:0, so without the script every answer would be invisible. .no-js is stamped on and removed by an inline script the moment JS runs. -------------------------------------------------------------------------- */ .no-js .cy27-acc__panel { max-height: none; } /* -------------------------------------------------------------------------- Hero — copy left, search right, baselines aligned -------------------------------------------------------------------------- */ .cy27-faq-hero .cy27-phero__inner { align-items: end; padding-bottom: 50px; } .cy27-faq-hero .cy27-phero__eyebrow { margin-bottom: 22px; } .cy27-faq-hero .cy27-faq-hero__title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.03; margin-bottom: 26px; } .cy27-faq-hero .cy27-phero__lead { max-width: 520px; } /* -------------------------------------------------------------------------- Search field -------------------------------------------------------------------------- */ .cy27-faq-search { gap: 10px; margin-bottom: 0; } .cy27-faq-search > label { font-size: .7rem; letter-spacing: .12em; color: var(--cy27-muted); } .cy27-faq-search .cy27-input { min-height: 52px; border-radius: 12px; font-size: 1rem; } /* The count line is sentence case here, not an uppercase micro-label. */ .cy27-faq-count { margin-top: 12px; font-size: .72rem; letter-spacing: .06em; text-transform: none; } /* -------------------------------------------------------------------------- Category filter — a segmented control on the recessed card surface -------------------------------------------------------------------------- */ .cy27-faq-cats-sec { padding-bottom: 30px; } .cy27-faq-cats { gap: 8px; padding: 8px; border-radius: 14px; background: linear-gradient(160deg, rgba(20, 27, 40, .5), rgba(11, 16, 25, .42)); } .cy27-faq-cats .cy27-faq-cats__btn { flex-shrink: 0; min-height: 44px; padding: 11px 18px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--cy27-body); font-family: var(--cy27-sans); font-size: .88rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; } .cy27-faq-cats .cy27-faq-cats__btn:hover { color: var(--cy27-text); background: rgba(255, 255, 255, .05); } .cy27-faq-cats .cy27-faq-cats__btn[aria-selected="true"] { background: rgba(0, 192, 250, .14); border-color: rgba(0, 192, 250, .5); color: #fff; box-shadow: 0 8px 24px rgba(0, 150, 250, .22); } /* -------------------------------------------------------------------------- The accordion Narrower measure than the rest of the page — long answers read badly at 1200px. -------------------------------------------------------------------------- */ .cy27-faq-list-sec { max-width: 900px; margin: 0 auto; padding: 0 var(--cy27-gutter) 90px; } .cy27-faq-list { display: grid; } /* Each question is a real heading, but it must not inherit the H2 display scale — the button inside carries the type. */ .cy27-faq-list .cy27-faq-acc__h { font-size: 1rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; color: inherit; } .cy27-faq-acc__trigger { gap: 24px; padding: 26px 0; } .cy27-faq-acc__q { font-size: 1.12rem; font-weight: 700; line-height: 1.45; letter-spacing: normal; color: var(--cy27-text); transition: color .25s ease; } .cy27-acc__trigger[aria-expanded="true"] .cy27-faq-acc__q { color: var(--cy27-heading); } /* A boxed plus that turns into a close mark at 45deg, not a chevron. */ .cy27-faq-acc__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; color: var(--cy27-muted); font-size: .8rem; transition: transform .3s var(--cy27-ease), border-color .3s ease, color .3s ease; } .cy27-acc__trigger[aria-expanded="true"] .cy27-faq-acc__icon { transform: rotate(45deg); border-color: rgba(0, 192, 250, .5); color: var(--cy27-accent); } /* The shared rule paints and rotates the raw ; here the box rotates instead, so neutralise both on the glyph. */ .cy27-faq-acc__icon i { color: inherit; font-size: inherit; transition: none; } .cy27-acc__trigger[aria-expanded="true"] .cy27-faq-acc__icon i { transform: none; } .cy27-acc__panel > .cy27-faq-acc__body { max-width: 640px; padding: 0 0 28px; font-size: 1.02rem; line-height: 1.8; color: var(--cy27-body); } /* Filtering hides rows, so the closing hairline has to be reassigned to whichever row is currently last. */ .cy27-faq-acc__item.is-last { border-bottom: 1px solid rgba(255, 255, 255, .09); } .cy27-faq-empty { padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, .09); font-family: var(--cy27-sans); font-size: 1.02rem; line-height: 1.8; color: var(--cy27-body); } /* -------------------------------------------------------------------------- Closing CTA -------------------------------------------------------------------------- */ .cy27-faq-cta-sec { padding-bottom: 140px; } .cy27-faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 56px); border-radius: 20px; background: radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .14), transparent 60%), linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6)); } .cy27-faq-cta__copy { max-width: 560px; } .cy27-faq-cta .cy27-faq-cta__title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; margin-bottom: 12px; } .cy27-faq-cta__text { font-size: 1.05rem; line-height: 1.7; color: var(--cy27-body); } .cy27-faq-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; } .cy27-faq-cta .cy27-btn { font-size: 1rem; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .cy27-faq-hero .cy27-phero__inner { align-items: start; gap: 36px; } .cy27-faq-cta { align-items: flex-start; flex-direction: column; } } @media (max-width: 760px) { .cy27-faq-cats { display: flex; width: 100%; } .cy27-faq-cta__actions { width: 100%; } .cy27-faq-cta__actions .cy27-btn { flex: 1 1 auto; } } /* -------------------------------------------------------------------------- Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cy27-faq-acc__icon, .cy27-faq-acc__q, .cy27-faq-cats .cy27-faq-cats__btn { transition: none; } }