/* CTSA Certification — page-scoped styles.
*
* The cert pages reuse the site's existing classes from styles.css
* (order-now-button, reading-custom, software-container, etc.) so this
* stylesheet only needs to carry cert-only additions.
*
* Kept isolated from styles.css / queries.css so the cert-only footprint
* stays a single file that can be edited safely without touching the rest
* of the site.
*/
.small-text {
font-size: 14px;
}
/* ─────────────────────────────────────────────────────────────────────────
* Sales page (public /certification) — the CTSA badge visual anchor.
*
* Rendered as a CSS background-image on a plain div rather than an ![]()
* tag. Trade-off: right-click "Save image as", drag-to-desktop, and
* "View image in new tab" are unavailable on a CSS background element in
* every major browser. This is intentional — the badge must not be
* downloaded from the public sales page. Legitimate downloads happen
* from the CTSA dashboard after certification.
*
* Determined visitors can still find the file URL in devtools; nothing
* short of a JS watermark prevents that. This blocks the casual 95%.
*
* The three defensive properties (user-select, -webkit-user-drag,
* -webkit-touch-callout) add extra small speed bumps on iOS Safari and
* older Chrome/Safari, where drag-to-save can bypass background-image
* protection via long-press. pointer-events: none disables all interaction
* since the badge is purely decorative.
* ───────────────────────────────────────────────────────────────────────── */
.cert-badge-display {
width: 280px;
aspect-ratio: 1 / 1;
max-width: 80vw;
margin: 32px auto;
background-image: url('/images/certification/ctsa-badge-standard.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
pointer-events: none;
}
/* Candidate dashboard — cert-specific additions to partners-dashboard.css
* (which is loaded by topminimal.hbs and provides dashboard-container,
* dashboard-stat-card, dashboard-info-card, etc.). Only the classes below
* are new; everything else reuses the existing dashboard visual language.
*/
/* Long link text (verification URLs, truesky.masteringthezodiac.com, etc.)
* has no spaces and won't wrap by default, causing horizontal bleed on
* narrow mobile viewports. Breaks anywhere the anchor text would overflow;
* short link text is unaffected because it fits without needing to break. */
.dashboard-container a {
overflow-wrap: anywhere;
}
/* .order-now-button doesn't set display or text-align, so on narrow mobile
* viewports its uppercase text wraps left-aligned with awkward whitespace
* (Activate CTSA Membership button in the Actions card). Scoped to the
* dashboard so the site-wide button style is untouched. */
.dashboard-container .order-now-button {
display: inline-block;
text-align: center;
max-width: 100%;
box-sizing: border-box;
}
/* Global styles.css sets `p { text-align: justify }` which creates huge
* word gaps on narrow dashboard paragraphs (e.g. "Questions? Email" pushes
* "Email" to the far right; the Activate Membership blurb gets stretched
* word spacing on mobile). Same override pattern already used for
* .dashboard-login-container p in partners-dashboard.css. */
.dashboard-container p {
text-align: left;
}
.cert-status-active {
background: #eaf5ea;
border-left: 4px solid #4a7a4a;
}
.cert-resource-list {
margin: 0 0 16px 0;
padding-left: 24px;
line-height: 1.6;
}
/* Collapsible "See all member benefits" disclosure under the Activate
* CTSA Membership button in the dashboard's Actions card. Hides the
* browser-default disclosure triangle (which doesn't match the site's
* aesthetic) and replaces it with a custom arrow that flips on expand.
* Summary uses the site's purple accent to signal interactivity. The
* expanded list uses .cert-resource-list for typographic consistency
* with the Documents section below on the same page. */
.cert-benefits-details {
margin: 4px 0 16px 0;
}
.cert-benefits-details > summary {
cursor: pointer;
color: #5d4fad;
font-weight: bold;
padding: 4px 0 8px 0;
list-style: none;
}
.cert-benefits-details > summary::-webkit-details-marker {
display: none;
}
.cert-benefits-details > summary::before {
content: "\25B8";
display: inline-block;
margin-right: 6px;
}
.cert-benefits-details[open] > summary::before {
content: "\25BE";
}
.cert-benefits-details li {
font-size: 16px;
padding-bottom: 16px;
padding-left: 26px;
position: relative;
color: #444;
}
/* Bold text acts as the benefit's section title: same 16px size as the
* description below it, but bolded, darker, and forced onto its own line.
* Weight + position + color contrast provide the hierarchy. */
.cert-benefits-details li b {
display: block;
margin-bottom: 2px;
line-height: 1.3;
color: #111;
}
/* Purple check before each benefit item — turns the 13-row pitch list
* into a scannable "here's what you get" list. Scoped to
* .cert-benefits-details so the other uses of .cert-resource-list
* (Documents, Study materials) keep their default bullets. */
.cert-benefits-details ul {
list-style: none;
padding-left: 0;
}
.cert-benefits-details li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #5d4fad;
font-weight: bold;
font-size: 16px;
}
/* Course-page modifier for .cert-resource-list. Bumps the PDF-link font
* size on the course lesson page so it matches the assignment list weight.
* Scoped as a modifier (used alongside .cert-resource-list) so the CTSA
* certification dashboard's resource lists keep their existing size. */
.course-resource-list {
font-size: 17px;
}
/* Assignment card on the course lesson page. Scoped to .course-assignment
* so no other lists or paragraphs are affected. The container is a subtle
* lavender-tinted callout with a purple left rule; the numbered list inside
* uses purple markers (via ::marker) so the numbers themselves become the
* visual accent. Each list item is a discrete task, so students can see the
* structure of the assignment at a glance rather than parsing a wall of prose. */
.course-assignment {
background: #f7f5fd;
border-left: 3px solid #5d4fad;
padding: 14px 20px;
border-radius: 4px;
margin: 0;
}
.course-assignment ol {
margin: 0;
padding-left: 24px;
font-size: 18px;
line-height: 1.65;
color: #333;
}
.course-assignment li {
padding-bottom: 12px;
}
.course-assignment li:last-child {
padding-bottom: 0;
}
.course-assignment li::marker {
color: #5d4fad;
font-weight: bold;
}
/* "In this lesson" key-concepts list on the course lesson page. Scoped to
* .course-key-concepts so it can't leak into other resource lists. Purple
* dot bullets (matching the site's accent color) frame the list as a clean,
* neutral preview of what's coming in the lesson. */
.course-key-concepts {
list-style: none;
padding-left: 0;
margin: 0;
}
.course-key-concepts li {
font-size: 17px;
line-height: 1.55;
padding: 0 0 14px 22px;
position: relative;
color: #333;
}
.course-key-concepts li:last-child {
padding-bottom: 0;
}
.course-key-concepts li::before {
content: "\2022";
position: absolute;
left: 4px;
top: -2px;
color: #5d4fad;
font-weight: bold;
font-size: 22px;
line-height: 1.55;
}
/* Small section header inside the "Study materials & documents" card,
* used to group resources by which exam they support. Overrides the global
* `p { padding-bottom: 16px }` rule from styles.css so the label sits
* tight to its list. */
.cert-resource-group-label {
margin: 0;
padding-bottom: 0;
font-size: 16px;
color: #444;
text-align: left;
}
.cert-resource-note {
color: #666;
font-size: 14px;
}
.cert-resource-note-block {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #eee;
font-size: 14px;
color: #666;
}
/* Dashboard's Start Exam / Resume Exam launch button lives inside a