behavior in TI ── */
.ti-learner-view .lc-faq-aapa-wrap details {
display: block;
width: 100%;
}
/* ── Constrain and center the accordion ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa {
max-width: 1020px;
margin: 0 auto;
}
/* ── Individual FAQ rows ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__item {
margin: 0;
padding: 20px 0 20px 0;
}
/* ── Question row (summary) ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
padding: 18px 12px 18px 22px;
font-size: 24px;
font-weight: 600;
line-height: 1.35;
color: #141b4d;
text-transform: uppercase;
background-color: #f9fafb;
}
/* Remove default disclosure marker */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q::-webkit-details-marker {
display: none;
}
/* Vertical blue accent line */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: #009cde;
transition: background-color 180ms ease;
}
/* Hover state */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q:hover {
background-color: #f3f4f6;
color: #009cde;
}
/* Subtle hover shadow (desktop only) */
@media (hover: hover) {
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
}
/* Accent reacts on hover */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q:hover::before {
background-color: #009cde;
}
/* Open state accent */
.ti-learner-view .lc-faq-aapa-wrap details[open] .lc-faq-aapa__q::before {
background-color: #009cde;
}
/* ── Plus / Minus icon ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__icon {
position: relative;
width: 18px;
height: 18px;
flex: 0 0 18px;
}
/* Draw the plus */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__icon::before,
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__icon::after {
content: "";
position: absolute;
background-color: #141b4d;
transition: opacity 180ms ease;
}
/* Horizontal bar */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__icon::before {
top: 50%;
left: 0;
right: 0;
height: 2px;
transform: translateY(-50%);
}
/* Vertical bar */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__icon::after {
left: 50%;
top: 0;
bottom: 0;
width: 2px;
transform: translateX(-50%);
}
/* Open = minus (hide vertical bar) */
.ti-learner-view .lc-faq-aapa-wrap details[open] .lc-faq-aapa__icon::after {
opacity: 0;
}
/* ── Answer content ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__a {
padding: 36px 12px 18px 22px;
font-size: 16px;
line-height: 1.6;
color: #141b4d;
}
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__a p {
margin: 10px 0 0;
}
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__a p:first-child {
margin-top: 0;
}
/* ── Rounded corners on first/last items ── */
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__item:first-of-type .lc-faq-aapa__q {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__item:last-of-type .lc-faq-aapa__q {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ── Section headings ── */
.ti-learner-view .lc-faq-aapa-wrap h2 {
max-width: 1020px;
margin: 16px auto 12px;
font-size: 32px;
font-weight: 700;
color: #141b4d;
}
.ti-learner-view .lc-faq-aapa-wrap h2:first-of-type {
margin-top: 0;
}
/* ── Mobile adjustments ── */
@media (max-width: 520px) {
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__q {
padding: 16px 8px 16px 18px;
}
.ti-learner-view .lc-faq-aapa-wrap .lc-faq-aapa__a {
padding: 0 8px 16px 18px;
}
}
/* ============================================================
END OF 14 — FAQ ACCORDION
============================================================ */
/* ============================================================
15. SNIPPETS — PRICING CARD (.lc-price-card)
Replicates AAPA.org Fellow-tier pricing column style.
HTML: platform/snippets/lc-price-card.html
Checkmark icons: Unicons Line pseudo-element (uil-check-circle \e9c3)
via font-family "unicons-line" — loaded by platform/scripts/header-script.html.
Change the content value here to swap all card checkmarks globally.
CTA button: uses existing .button base class (blue by default).
============================================================ */
/* ── Card shell ── */
.ti-learner-view .lc-price-card {
display: flex;
flex-direction: column;
width: 100%;
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/* ── Header ── */
.ti-learner-view .lc-price-card__header {
background-color: var(--color-primary);
padding: var(--space-8) var(--space-5) var(--space-7);
text-align: center;
}
.ti-learner-view .lc-price-card__plan {
margin: 0 0 var(--space-3);
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
color: var(--color-white);
text-transform: uppercase;
}
.ti-learner-view .lc-price-card__price {
margin: 0 0 var(--space-2);
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
color: var(--color-white);
}
.ti-learner-view .lc-price-card__per {
font-size: var(--text-base);
font-weight: var(--weight-regular);
}
.ti-learner-view .lc-price-card__tier {
margin: 0;
font-size: var(--text-base);
font-weight: var(--weight-bold);
color: var(--color-white);
}
/* ── Body ── */
.ti-learner-view .lc-price-card__body {
flex: 1 1 auto;
padding: var(--space-7) var(--space-5) var(--space-5);
}
/* ── Feature list ── */
.ti-learner-view .lc-price-card__list {
list-style: none;
margin: 0;
padding: 0;
}
.ti-learner-view .lc-price-card__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--color-text-base);
}
/* Checkmark icon — uil-check (\e9c3) via Unicons Line, rendered inside
a CSS-filled circle. Swap icon: change content value. Swap circle color:
change background-color on ::before / --featured::before. */
.ti-learner-view .lc-price-card__item::before {
font-family: "unicons-line";
content: "\e9c3";
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--color-primary);
color: var(--color-white);
font-size: 0.75rem;
margin-top: 2px;
}
/* Featured item — teal text, bold, teal circle */
.ti-learner-view .lc-price-card__item--featured {
font-weight: var(--weight-bold);
color: var(--color-action);
}
.ti-learner-view .lc-price-card__item--featured::before {
background-color: var(--color-action);
}
/* ── Footer / CTA ── */
.ti-learner-view .lc-price-card__footer {
padding: var(--space-5);
}
/* Extends .button — makes it full-width and centered inside the card. */
.ti-learner-view .lc-price-card__cta {
width: 100%;
justify-content: center;
}
/* ── Mobile adjustments ── */
@media (max-width: 520px) {
.ti-learner-view .lc-price-card__header {
padding: var(--space-5) var(--space-4) var(--space-6);
}
.ti-learner-view .lc-price-card__body {
padding: var(--space-5) var(--space-4);
}
.ti-learner-view .lc-price-card__footer {
padding: var(--space-4);
}
}
/* ============================================================
END OF 15 — PRICING CARD
============================================================ */
/* ============================================================
15. CUSTOM COMPONENTS — CME CALLOUT
Scope: .cme-callout
============================================================ */
/* ── Layout: seal + text side by side ── */
.ti-learner-view .cme-callout {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
/* ── Accreditation seal sizing ── */
.ti-learner-view .cme-callout__img {
max-width: 96px;
height: auto;
flex: 0 0 auto;
}
/* ── Text block ── */
.ti-learner-view .cme-callout__text {
margin: 0;
line-height: 1.4;
}
/* ── Mobile: stack vertically ── */
@media (max-width: 600px) {
.ti-learner-view .cme-callout {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
END OF 15 — CME CALLOUT
============================================================ */