/* ========================================================================== Intelsense — Premium FAQ page Scoped under .faq-premium. Base brand #00256b. WCAG 2.1 AA. The accordion open/close is driven by jQuery (slideUp/Down + .active) in footer.php — this file styles appearance only and never forces `display`. ========================================================================== */ .faq-premium{ --q-navy: #00256b; --q-navy-deep: #001a4d; --q-navy-mid: #143a86; --q-ink: #1d2b47; /* body — 12:1 */ --q-ink-soft: #45577a; /* secondary — 6:1 */ --q-amber: #f99e1e; /* decorative accent only */ --q-surface: #ffffff; --q-tint: #f4f7fc; --q-open: #eef3fb; /* open-row tint */ --q-line: rgba(0, 37, 107, .10); --q-shadow: 0 1px 2px rgba(0, 37, 107, .05), 0 10px 26px rgba(0, 37, 107, .07); --q-shadow-lg: 0 16px 40px rgba(0, 37, 107, .14); --q-radius: 14px; --q-ease: cubic-bezier(.4, 0, .2, 1); font-family: 'Poppins', sans-serif; color: var(--q-ink); } /* ------------------------------------------------------------------ hero */ .faq-premium .page-8{ float: none; width: 100%; height: auto; padding: 88px 0 74px; background: linear-gradient(120deg, rgba(0, 37, 107, .90) 0%, rgba(0, 26, 77, .82) 100%), url(../images/page-bnnr8.jpg) center / cover no-repeat; } .faq-premium .page-inr1{ float: none; width: 100%; } .faq-premium .page-inr1 h1{ color: #fff; font-weight: 700; letter-spacing: -.01em; font-size: clamp(30px, 4.4vw, 48px); margin: 0 0 16px; line-height: 1.1; } .faq-premium .footer-link{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; } .faq-premium .footer-link i{ color: #ffd07a; font-size: 13px; margin: 0; } .faq-premium .footer-link a{ margin: 0; color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; } .faq-premium .footer-link a:hover{ text-decoration: underline; } /* --------------------------------------------------------- accordion shell */ .faq-premium .page-10{ float: none; width: 100%; margin-top: 0; padding: 72px 0; background: var(--q-tint); } .faq-premium .page-inr10{ float: none; width: 100%; } .faq-premium #faq__accordian-main-wrapper{ max-width: 880px; margin: 0 auto; padding: 0 15px; } /* each Q+A becomes a card */ .faq-premium .faq__accordion-wrapper{ background: var(--q-surface); border: 1px solid var(--q-line); border-radius: var(--q-radius); box-shadow: var(--q-shadow); margin-bottom: 16px; overflow: hidden; transition: box-shadow .2s var(--q-ease); } .faq-premium .faq__accordion-wrapper:hover{ box-shadow: var(--q-shadow-lg); } /* --------------------------------------------------- question (toggle) */ .faq-premium .faq__accordian-heading{ display: block; position: relative; margin: 0; padding: 20px 60px 20px 24px; background: var(--q-surface); border-radius: 0; color: var(--q-navy); font-size: clamp(15px, 1.7vw, 17px); font-weight: 600; line-height: 1.45; text-decoration: none; cursor: pointer; transition: background .18s var(--q-ease), color .18s var(--q-ease); } .faq-premium .faq__accordian-heading:hover, .faq-premium .faq__accordian-heading:focus-visible{ background: var(--q-open); color: var(--q-navy) !important; /* beat legacy :hover{color:#fff !important} */ } /* open state — subtle navy tint, NOT the old yellow bar */ .faq-premium .faq__accordian-heading.active{ background: var(--q-open); color: var(--q-navy) !important; /* beat legacy .active{color:#000 !important} */ } /* expand indicator: navy "+" that rotates to "x". Kept navy (not amber) because it is a functional control and must meet the 3:1 non-text-contrast rule — amber on white is only 2.1:1. */ .faq-premium .faq__accordian-heading::before{ content: "\f067"; /* fa plus (FA4 + FA6) */ font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; left: auto; right: 22px; top: 50%; color: var(--q-navy) !important; /* beat legacy ::before color rules */ font-size: 15px; transform: translateY(-50%) rotate(0deg); transition: transform .25s var(--q-ease); } .faq-premium .faq__accordian-heading.active::before{ content: "\f067"; transform: translateY(-50%) rotate(45deg); /* + -> x */ color: var(--q-navy) !important; } /* --------------------------------------------------------------- answer */ .faq-premium .faq__accordion-content{ /* NOTE: display is controlled by jQuery slideUp/Down — do not set it here */ padding: 4px 24px 22px; border-top: 1px solid var(--q-line); color: var(--q-ink); } .faq-premium .faq__accordion-content p{ margin: 14px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--q-ink); } .faq-premium .faq__accordion-content ul{ margin: 12px 0 0 4px; padding: 0; list-style: none; } .faq-premium .faq__accordion-content ul li{ position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: var(--q-ink); } .faq-premium .faq__accordion-content ul li::before{ content: "\f058"; /* fa check-circle */ font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--q-amber); /* decorative bullet — exempt */ font-size: 14px; } /* -------------------------------------------------------------- a11y focus */ .faq-premium .faq__accordian-heading:focus-visible{ outline: 3px solid var(--q-navy-mid); outline-offset: -3px; } .faq-premium .page-8 a:focus-visible{ outline: 3px solid #ffd07a; outline-offset: 3px; border-radius: 6px; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 991.98px){ .faq-premium .page-8{ padding: 62px 0 52px; } .faq-premium .page-10{ padding: 48px 0; } } @media (max-width: 575.98px){ .faq-premium .faq__accordian-heading{ padding: 16px 52px 16px 18px; } .faq-premium .faq__accordion-content{ padding: 4px 18px 18px; } } @media (prefers-reduced-motion: reduce){ .faq-premium .faq__accordion-wrapper, .faq-premium .faq__accordian-heading, .faq-premium .faq__accordian-heading::before{ transition: none; } }