/* Theming CSS */
/* Header color */
.u-org--header {
background-color: #10141d !important;
}
/* Header text color */
.u-org--header {
color: #fff;
}
button.u-org--header.appheader__button:hover,
button.u-org--header.appheader__button:active {
background-color: rgba(255, 255, 255, 0.1) !important;
}
button.u-org--header:not(.appnav__link):hover,
button.u-org--header:not(.appnav__link):active,
button.u-org--header:not(.appnav__link):focus {
color: #fff;
}
button.u-org--header.appheader__searchbutton,
button.u-org--header.appheader__categoriesbutton,
input[type="search"].u-org--header {
border-color: rgba(255, 255, 255, 0.3) !important;
}
button.u-org--header.appheader__searchbutton:hover,
button.u-org--header.appheader__searchbutton:active,
button.u-org--header.appheader__searchbutton:focus,
button.u-org--header.appheader__searchbutton:focus-visible,
button.u-org--header.appheader__categoriesbutton:hover,
button.u-org--header.appheader__categoriesbutton:active,
button.u-org--header.appheader__categoriesbutton:focus,
button.u-org--header.appheader__categoriesbutton:focus-visible,
input[type="search"].u-org--header:hover,
input[type="search"].u-org--header:active,
input[type="search"].u-org--header:focus,
input[type="search"].u-org--header:focus-visible {
border-color: rgba(255, 255, 255, 0.5) !important;
}
input[type="search"].u-org--header:focus {
border-color: transparent !important;
}
.u-org--header .search__input--appheader:not(:focus):-ms-input-placeholder {
color: #fff;
}
.u-org--header .search__input--appheader:not(:focus)::-ms-input-placeholder {
color: #fff;
}
.u-org--header .search__input--appheader:not(:focus)::placeholder {
color: #fff;
}
/* Organization color */
.u-orgcolor--color,
.u-orgcolor--hovercolor:hover {
color: #abff44 !important;
}
.u-orgcolor--bg,
.u-orgcolor--hoverbg:hover {
background-color: #abff44 !important;
}
.u-orgcolor--border,
.u-orgcolor--border:link,
.u-orgcolor--border:visited,
.u-orgcolor--border:hover,
.u-orgcolor--border:active,
.u-orgcolor--border:focus {
border-color: #abff44;
color: #abff44;
}
.u-orgcolor--borderonly,
.u-orgcolor--borderonly:link,
.u-orgcolor--borderonly:visited,
.u-orgcolor--borderonly:hover,
.u-orgcolor--borderonly:active,
.u-orgcolor--borderonly:focus {
border-color: #abff44;
}
.u-orgcolor--borderhover:hover,
.u-orgcolor--borderhover:hover {
border-color: #abff44;
}
.u-orgcolor--svgfill {
color: #abff44;
fill: #abff44;
}
.u-orgcolor--svgstroke {
color: #abff44;
stroke: #abff44;
}
.u-orgcolor--svgall {
color: #abff44;
fill: #abff44;
stroke: #abff44;
}
.u-org--svgactive[data-active="true"],
.u-org--svgactive:hover {
color: #abff44 !important;
stroke: #abff44 !important;
}
.u-org--barchart:after {
background-color: #abff44 !important;
}
.u-org--piechart {
color: rgba(0, 0, 0, 0.15);
stroke: #abff44;
}
.u-org--tooltip {
background-color: #abff44;
}
.u-org--tooltiptop:before {
border-top-color: #abff44;
}
.u-org--tooltipright:before {
border-right-color: #abff44;
}
.u-org--tooltipbottom:before {
border-bottom-color: #abff44;
}
.u-org--tooltipleft:before {
border-left-color: #abff44;
}
.updatecard__heading--new:before {
background-color: #abff44;
}
.session:before {
background-color: #abff44;
}
.activityprogress__value {
background-color: #abff44;
}
}
.iconbutton,
.comments__headerbutton, {
color: #abff44;
}
.u-org--catalogflag {
background-image: linear-gradient(225deg, #abff44 50%, transparent 50%);
}
.u-org--catalogflagsearch {
background-image: linear-gradient(225deg, #abff44 50%, transparent 50%);
}
.u-org--catalogflag-in-progress {
background-image: linear-gradient(225deg, #fff 47%, #abff44 3%, transparent 50%);
border-top: 1px solid #abff44;
border-right: 1px solid #abff44;
svg {
color: #abff44;
}
}
.u-org--enrollmentmsgimage {
background-color: #abff44
}
.u-org--catalogflagbg {
background-image: linear-gradient(225deg, #abff44 50%, transparent 50%);
}
.u-org--catalogflagfill {
color: #abff44;
fill: #abff44;
}
.u-org--tabactive,
.u-org--tab:hover,
.u-org--tab:active,
.u-org--tab:focus {
border-color: #abff44;
}
.link--primary,
.u-org--link,
.u-org--link:link,
.u-org--link:visited,
.u-org--link:hover,
.u-org--link:active,
.u-org--link:focus {
color: #abff44;
}
.u-org--linkhover:hover,
.u-org--linkhover:active,
.u-org--linkhover:focus {
color: #abff44;
}
.button--primary:not([disabled]),
.button--primary:link,
.button--primary:visited,
.button--primary:hover,
.button--primary:active,
.button--primary:focus,
.blankslate .button,
.coursebar__btn--active,
.coursebar__btn--active:hover,
.coursebar__btn--active:focus,
.tagbutton--selected:not(.tagbutton--taxonomy) {
background-color: #abff44 !important;
border-color: #abff44 !important;
color: #fff !important;
}
.tooltip {
background-color: #abff44;
}
.tooltip--left::before {
border-left-color: #abff44;
}
.tooltip--right::before {
border-right-color: #abff44;
}
.tooltip--bottom::before,
.tooltip--bottom-left::before,
.tooltip--bottom-right::before {
border-bottom-color: #abff44;
}
.tooltip--top::before,
.tooltip--top-left::before,
.tooltip--top-right::before {
border-top-color: #abff44;
}
.checkbox--primary .checkbox__input:checked + .checkbox__ui {
background-color: #abff44;
border: 2px solid #abff44;
}
.question .checkbox__input:checked + .checkbox__ui {
background-color: #abff44;
border: 1px solid #abff44;
}
.question .radio__input:checked + .radio__ui {
border-color: #abff44;
}
.question .radio__input:checked + .radio__ui::before {
background-color: #abff44;
}
.assessment__completedicon, .assessment__gradingicon {
background-color: #abff44;
}
.enrollmentmsg__image.enrollmentmsg__image--complete {
background-color: #abff44;
}
.rank__listitem .radio__input:checked + .radio__ui {
border-color: #abff44;
}
.rank__listitem .radio__input:checked + .radio__ui::before {
background-color: #abff44;
}
.sharelinks__link:hover,
.sharelinks__link:focus,
.sharelinks__link.button:hover,
.sharelinks__link.button:focus {
color: #abff44;
}
.rating input[type="radio"]:not([disabled]) + label {
color: #abff44;
}
.courselist__item[data-status="completed"] .courselist__marker, .courselist__item[data-status="in-progress"] .courselist__marker,
.pathmenu__sectionitem[data-status="completed"] .pathmenu__itemmarker, .pathmenu__sectionitem[data-status="in-progress"] .pathmenu__itemmarker {
color: #abff44;
}
.courselist__item[data-status="in-progress"]:not([data-shape]) .courselist__marker {
border-color: #abff44;
}
.u-org--catalogflag-in-progress svg {
color: #abff44;
}
}
.pageoutline__currentlink,
.pageoutline__currentlink:hover,
.pageoutline__currentlink:focus {
color: #abff44;
}
.tagbutton--selected,
.tagbutton--selected:hover,
.tagbutton--selected:active,
.tagbutton--selected.tagbutton--taxonomy:hover,
.tagbutton--selected.tagbutton--taxonomy:active {
border-color: inherit !important;
background-color: #abff44;
}
.tagbutton--selected.tagbutton--taxonomy {
background-color: #abff440c !important;
border-color: #abff44 !important;
}
.datepicker .pika-prev,
.datepicker .pika-next {
border: 1px solid #abff44;
}
.datepicker .pika-prev,
.datepicker .is-rtl .pika-next {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2025'%20version%3D'1.1'%3E%3Cpolyline%20fill%3D'none'%20stroke%3D'%23abff44'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20points%3D'16.7%209.4%2011.6%2012.4%2016.6%2015.3'%2F%3E%3C%2Fsvg%3E");
}
.datepicker .pika-next,
.datepicker .is-rtl .pika-prev {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20version%3D'1.1'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M12.6%209.5L17.7%2012.4%2012.6%2015.3'%20fill-opacity%3D'0'%20stroke%3D'%23abff44'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
.datepicker .is-today .pika-button {
color: #abff44;
}
.datepicker .is-selected .pika-button,
.datepicker .is-selected .pika-button:hover {
background: #abff44;
}
.banner__icon {
color: #abff44;
background: #abff44;
}
/* Branding logo */
.header__titleicon.u-org--titleicon {
max-width: 120px;
}
@media (min-width: 370px) {
.header__titleicon.u-org--titleicon {
max-width: 160px;
}
}
.u-org--titleicon + .header__titletext,
.u-org--titleicon + .sidemenu__titletext {
display: none;
}
.u-org--header .header__titlelink {
text-overflow: clip;
}
/* Custom CSS */
/* ================================================================
Optimizely Academy — 2026 Rebrand Custom CSS
================================================================
Paste this into: LMS Admin → Custom CSS textarea
Replaces all previous Custom CSS.
================================================================ */
/* ================================================================
0. FONT FACE DECLARATIONS
================================================================ */
@font-face {
font-family: 'Die Grotesk B';
src: url('https://certification.optimizely.com/fonts/DieGroteskB/die-grotesk-b-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Die Grotesk B';
src: url('https://certification.optimizely.com/fonts/DieGroteskB/die-grotesk-b-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Die Grotesk B';
src: url('https://certification.optimizely.com/fonts/DieGroteskB/die-grotesk-b-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Die Grotesk B';
src: url('https://certification.optimizely.com/fonts/DieGroteskB/die-grotesk-b-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Die Grotesk B';
src: url('https://certification.optimizely.com/fonts/DieGroteskB/die-grotesk-b-bold-italic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Nudge SemiNormal';
src: url('https://certification.optimizely.com/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalRegular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nudge SemiNormal';
src: url('https://certification.optimizely.com/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalSemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nudge SemiNormal';
src: url('https://certification.optimizely.com/fonts/NudgeSemiNormal/NudgeSemiNormal-SemiNormalExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* ================================================================
1. DESIGN TOKENS — Light (default)
================================================================ */
:root {
--t-primary: #aaff42;
--t-primary-hover: #91ec41;
--t-primary-text: #197151;
--t-on-primary: #08251a;
--t-secondary: #197151;
--t-secondary-hover: #0d3a29;
--t-bg: #ffffff;
--t-surface: #eff6e9;
--t-surface-alt: #e4f0db;
--t-surface-raised: #d9e5cd;
--t-surface-inverted: #08251a;
--t-surface-inverted-hover: #0d3a29;
--t-surface-deep: #061d15;
--t-text: #08251a;
--t-text-secondary: #114b36;
--t-text-muted: #717963;
--t-text-inverted: #eff6e9;
--t-text-inverted-muted: #a0ab8c;
--t-border: #d9e5cd;
--t-border-strong: #c4cfb0;
--t-border-focus: rgba(170, 255, 66, 0.35);
--t-accent-1: #aaff42;
--t-accent-1-bg: #e4f0db;
--t-accent-2: #91dbda;
--t-accent-2-bg: #e0f5f5;
--t-accent-3: #ff99b6;
--t-accent-3-bg: #fde5ec;
--t-accent-4: #7cdd3c;
--t-accent-4-bg: #e4f0db;
--t-accent-5: #904764;
--t-accent-5-bg: #f5e0ea;
--t-accent-6: #007a78;
--t-accent-6-bg: #e0f0f0;
--t-font: 'Die Grotesk B', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--t-font-headline: 'Nudge SemiNormal', 'Die Grotesk B', sans-serif;
--t-font-mono: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
--t-font-size-xs: 10px;
--t-font-size-sm: 12px;
--t-font-size-base: 16px;
--t-font-size-md: 18px;
--t-font-size-lg: 20px;
--t-font-size-xl: 24px;
--t-font-size-2xl: 28px;
--t-font-size-3xl: 36px;
--t-font-size-4xl: 48px;
--t-weight-regular: 400;
--t-weight-medium: 500;
--t-weight-semibold: 600;
--t-weight-bold: 700;
--t-weight-extrabold: 800;
--t-weight-button: 500;
--t-leading-tight: 1.25;
--t-leading-snug: 1.3;
--t-leading-normal: 1.5;
--t-space-2xs: 4px;
--t-space-xs: 8px;
--t-space-sm: 12px;
--t-space-md: 16px;
--t-space-lg: 24px;
--t-space-xl: 32px;
--t-space-2xl: 48px;
--t-space-3xl: 64px;
--t-space-4xl: 96px;
--t-radius-sm: 12px;
--t-radius-md: 16px;
--t-radius-lg: 20px;
--t-radius-pill: 40px;
--t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--t-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07);
--t-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
--t-transition-fast: 0.12s ease;
--t-transition: 0.2s ease;
--t-transition-slow: 0.3s ease;
}
/* ================================================================
2. DESIGN TOKENS — Dark
================================================================ */
[data-theme="dark"] {
--t-primary: #aaff42;
--t-primary-hover: #91ec41;
--t-primary-text: #7cdd3c;
--t-on-primary: #08251a;
--t-secondary: #91dbda;
--t-secondary-hover: #007a78;
--t-bg: #08251a;
--t-surface: #0d3a29;
--t-surface-alt: #114b36;
--t-surface-raised: #197151;
--t-surface-inverted: #eff6e9;
--t-surface-inverted-hover: #d9e5cd;
--t-surface-deep: #061d15;
--t-text: #eff6e9;
--t-text-secondary: #c4cfb0;
--t-text-muted: #a0ab8c;
--t-text-inverted: #08251a;
--t-text-inverted-muted: #114b36;
--t-border: #114b36;
--t-border-strong: #197151;
--t-border-focus: rgba(170, 255, 66, 0.3);
--t-accent-1: #aaff42;
--t-accent-1-bg: rgba(170, 255, 66, 0.1);
--t-accent-2: #91dbda;
--t-accent-2-bg: rgba(145, 219, 218, 0.1);
--t-accent-3: #ff99b6;
--t-accent-3-bg: rgba(255, 153, 182, 0.1);
--t-accent-4: #7cdd3c;
--t-accent-4-bg: rgba(124, 221, 60, 0.1);
--t-accent-5: #904764;
--t-accent-5-bg: rgba(144, 71, 100, 0.15);
--t-accent-6: #007a78;
--t-accent-6-bg: rgba(0, 122, 120, 0.15);
--t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
--t-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
--t-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.3);
}
/*
prefers-color-scheme: dark is intentionally disabled.
The LMS platform assumes light backgrounds — auto-dark breaks
card text, tags, FAQ summaries, and heading link colors.
Use [data-theme="dark"] on for explicit opt-in only.
*/
/* ================================================================
3. BASE TYPOGRAPHY
================================================================ */
body,
h1, h2, h3, h4, h5, h6,
p, li, td, th, span:not(.material-symbols-rounded), a,
input, select, textarea, button,
.postcontent, .postcontent p,
.course__description, .course__description p,
.course__postcontent, .course__postcontent p {
font-family: var(--t-font) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
color: var(--t-text);
font-size: var(--t-font-size-base);
line-height: var(--t-leading-normal);
background-color: var(--t-bg);
}
h1, .postcontent h1,
.u-headingpage {
font-family: var(--t-font-headline) !important;
font-weight: var(--t-weight-extrabold) !important;
font-size: var(--t-font-size-4xl) !important;
line-height: var(--t-leading-tight) !important;
color: var(--t-text);
margin-bottom: var(--t-space-lg);
}
h1:not(.u-headingpage--coursebar) {
font-size: var(--t-font-size-4xl) !important;
line-height: var(--t-leading-tight) !important;
margin-bottom: var(--t-space-lg);
}
h2, .postcontent h2 {
font-family: var(--t-font-headline) !important;
font-weight: var(--t-weight-semibold) !important;
font-size: var(--t-font-size-2xl) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text);
margin-bottom: var(--t-space-lg);
}
h3, .postcontent h3 {
font-family: var(--t-font-headline) !important;
font-weight: var(--t-weight-bold) !important;
font-size: var(--t-font-size-md) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text);
margin-bottom: var(--t-space-md);
}
h4, .postcontent h4 {
font-weight: var(--t-weight-bold) !important;
font-size: var(--t-font-size-lg) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text);
margin-bottom: var(--t-space-xs);
}
h5, .postcontent h5 {
font-weight: var(--t-weight-semibold) !important;
font-size: var(--t-font-size-md) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text);
margin-bottom: var(--t-space-xs);
}
h6, .postcontent h6 {
font-weight: var(--t-weight-semibold) !important;
font-size: var(--t-font-size-base) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text);
margin-bottom: var(--t-space-xs);
}
p,
.course__description,
.course__description p,
.course__description ul,
.course__description ol,
.course__description.postcontent,
.course__description.postcontent p,
.course__description.postcontent ul,
.course__description.postcontent ol,
.course__postcontent,
.course__postcontent p,
.course__postcontent ul,
.course__postcontent ol,
.course__postcontent.postcontent,
.course__postcontent.postcontent p,
.course__postcontent.postcontent ul,
.course__postcontent.postcontent ol {
font-weight: var(--t-weight-regular);
font-size: var(--t-font-size-base);
line-height: var(--t-leading-normal);
color: var(--t-text);
}
.u-headingsection {
font-family: var(--t-font-headline) !important;
font-size: var(--t-font-size-2xl) !important;
line-height: var(--t-leading-snug) !important;
font-weight: var(--t-weight-semibold) !important;
}
.u-headingitem {
font-size: var(--t-font-size-lg);
line-height: var(--t-leading-snug);
font-weight: var(--t-weight-semibold);
}
.u-headingitem.activitycard__name {
line-height: var(--t-leading-tight);
max-height: max-content;
}
.appusermenu__heading__user {
font-size: 1.125rem !important;
font-weight: var(--t-weight-medium) !important;
line-height: 1.5rem !important;
margin-bottom: 0 !important;
}
/* ================================================================
4. HEADER / NAVIGATION
================================================================ */
.u-org--header {
background-color: #eff6e9 !important;
color: #08251a !important;
}
button.u-org--header.appheader__button:hover,
button.u-org--header.appheader__button:active {
background-color: rgba(0, 0, 0, 0.05) !important;
}
button.u-org--header:not(.appnav__link):hover,
button.u-org--header:not(.appnav__link):active,
button.u-org--header:not(.appnav__link):focus {
color: var(--t-text);
}
button.u-org--header.appheader__searchbutton,
button.u-org--header.appheader__categoriesbutton,
input[type="search"].u-org--header {
border-color: rgba(0, 0, 0, 0.12) !important;
}
button.u-org--header.appheader__searchbutton:hover,
button.u-org--header.appheader__searchbutton:active,
button.u-org--header.appheader__searchbutton:focus,
button.u-org--header.appheader__searchbutton:focus-visible,
button.u-org--header.appheader__categoriesbutton:hover,
button.u-org--header.appheader__categoriesbutton:active,
button.u-org--header.appheader__categoriesbutton:focus,
button.u-org--header.appheader__categoriesbutton:focus-visible,
input[type="search"].u-org--header:hover,
input[type="search"].u-org--header:active,
input[type="search"].u-org--header:focus,
input[type="search"].u-org--header:focus-visible {
border-color: rgba(0, 0, 0, 0.25) !important;
}
input[type="search"].u-org--header:focus {
border-color: transparent !important;
}
.u-org--header .search__input--appheader:not(:focus)::placeholder {
color: var(--t-text-muted);
}
.u-org--header,
.u-org--header a,
.u-org--header a:link,
.u-org--header a:visited,
.u-org--header span,
.u-org--header button,
.appheader__titlelink {
color: #08251a !important;
}
.appnav__link,
.appnav__link:link,
.appnav__link:visited {
color: #08251a !important;
}
.appnav__link:hover,
.appnav__link:active,
.appnav__link:focus {
color: var(--t-secondary) !important;
}
.appnav__link--mobilecurrent.u-orgcolor--color {
color: var(--t-secondary) !important;
}
/* --- Light mode header logo → Green branded SVG --- */
.appheader__titlelink img {
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
.appheader__titlelink::after {
content: "" !important;
display: inline-block;
width: 120px;
height: 41px;
background-image: url("data:image/svg+xml,");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
.u-orgcolor--color,
.u-orgcolor--hovercolor:hover {
color: var(--t-secondary) !important;
}
/* ================================================================
5. ORGANIZATION COLOR OVERRIDES
================================================================ */
.u-orgcolor--bg,
.u-orgcolor--hoverbg:hover {
background-color: var(--t-primary) !important;
color: var(--t-on-primary) !important;
}
.u-orgcolor--border,
.u-orgcolor--border:link,
.u-orgcolor--border:visited,
.u-orgcolor--border:hover,
.u-orgcolor--border:active,
.u-orgcolor--border:focus {
border-color: var(--t-secondary);
color: var(--t-secondary);
}
.u-orgcolor--borderonly,
.u-orgcolor--borderonly:link,
.u-orgcolor--borderonly:visited,
.u-orgcolor--borderonly:hover,
.u-orgcolor--borderonly:active,
.u-orgcolor--borderonly:focus {
border-color: var(--t-secondary);
}
.u-orgcolor--borderhover:hover {
border-color: var(--t-secondary);
}
.u-orgcolor--svgfill {
color: var(--t-secondary);
fill: var(--t-secondary);
}
.u-orgcolor--svgstroke {
color: var(--t-secondary);
stroke: var(--t-secondary);
}
.u-orgcolor--svgall {
color: var(--t-secondary);
fill: var(--t-secondary);
stroke: var(--t-secondary);
}
.u-org--svgactive[data-active="true"],
.u-org--svgactive:hover {
color: var(--t-secondary) !important;
stroke: var(--t-secondary) !important;
}
.u-org--barchart:after {
background-color: var(--t-primary) !important;
}
.u-org--piechart {
color: rgba(0, 0, 0, 0.15);
stroke: var(--t-secondary);
}
.u-org--tooltip {
background-color: var(--t-surface-inverted);
}
.u-org--tooltiptop:before {
border-top-color: var(--t-surface-inverted);
}
.u-org--tooltipright:before {
border-right-color: var(--t-surface-inverted);
}
.u-org--tooltipbottom:before {
border-bottom-color: var(--t-surface-inverted);
}
.u-org--tooltipleft:before {
border-left-color: var(--t-surface-inverted);
}
.updatecard__heading--new:before {
background-color: var(--t-primary);
}
.session:before {
background-color: var(--t-secondary);
}
.activityprogress__value {
background-color: var(--t-primary);
}
.iconbutton,
.comments__headerbutton {
color: var(--t-secondary);
}
.u-org--catalogflag {
background-image: linear-gradient(225deg, var(--t-secondary) 50%, transparent 50%);
}
.u-org--catalogflagsearch {
background-image: linear-gradient(225deg, var(--t-secondary) 50%, transparent 50%);
}
.u-org--catalogflag-in-progress {
background-image: linear-gradient(225deg, #fff 47%, var(--t-secondary) 3%, transparent 50%);
border-top: 1px solid var(--t-secondary);
border-right: 1px solid var(--t-secondary);
}
.u-org--catalogflag-in-progress svg {
color: var(--t-secondary);
}
.u-org--enrollmentmsgimage {
background-color: var(--t-secondary);
}
.u-org--catalogflagbg {
background-image: linear-gradient(225deg, var(--t-secondary) 50%, transparent 50%);
}
.u-org--catalogflagfill {
color: var(--t-secondary);
fill: var(--t-secondary);
}
.u-org--tabactive,
.u-org--tab:hover,
.u-org--tab:active,
.u-org--tab:focus {
border-color: var(--t-primary);
}
.link--primary,
.u-org--link,
.u-org--link:link,
.u-org--link:visited,
.u-org--link:hover,
.u-org--link:active,
.u-org--link:focus {
color: var(--t-secondary);
}
.u-org--linkhover:hover,
.u-org--linkhover:active,
.u-org--linkhover:focus {
color: var(--t-secondary-hover);
}
/* ================================================================
6. BUTTONS
================================================================ */
.button--primary:not([disabled]),
.button--primary:link,
.button--primary:visited,
.button--primary:active,
.button--primary:focus,
.blankslate .button,
.coursebar__btn--active,
.coursebar__btn--active:focus,
.tagbutton--selected:not(.tagbutton--taxonomy) {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-sm) !important;
font-weight: var(--t-weight-bold) !important;
border-radius: var(--t-radius-pill) !important;
background: var(--t-primary) !important;
border: none !important;
border-color: var(--t-primary) !important;
color: var(--t-on-primary) !important;
transition: all var(--t-transition-fast);
box-shadow: none;
}
.button--primary:hover,
.coursebar__btn--active:hover {
background: var(--t-primary-hover) !important;
box-shadow: var(--t-shadow-md);
}
.button--secondary,
.button--secondary:link,
.button--secondary:visited,
.button--secondary:active,
.button--secondary:focus,
.dropdown__trigger:not(.dropdown__trigger--link) {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-sm) !important;
font-weight: var(--t-weight-bold) !important;
border-radius: var(--t-radius-pill) !important;
background: var(--t-bg) !important;
border: 1px solid var(--t-border) !important;
color: var(--t-text) !important;
transition: all var(--t-transition-fast);
box-shadow: none;
}
.button--secondary:hover {
background: var(--t-surface) !important;
border-color: var(--t-border-strong) !important;
box-shadow: var(--t-shadow-sm);
}
.button--disabled {
font-size: var(--t-font-size-sm);
border-radius: var(--t-radius-pill);
opacity: 0.5;
}
.tooltip {
background-color: var(--t-surface-inverted);
}
.tooltip--left::before {
border-left-color: var(--t-surface-inverted);
}
.tooltip--right::before {
border-right-color: var(--t-surface-inverted);
}
.tooltip--bottom::before,
.tooltip--bottom-left::before,
.tooltip--bottom-right::before {
border-bottom-color: var(--t-surface-inverted);
}
.tooltip--top::before,
.tooltip--top-left::before,
.tooltip--top-right::before {
border-top-color: var(--t-surface-inverted);
}
/* ================================================================
7. CARDS / CATALOG
================================================================ */
.catalogcard__container {
border-radius: var(--t-radius-md) !important;
overflow: hidden;
border: 1px solid var(--t-border);
transition: all var(--t-transition);
box-shadow: var(--t-shadow-sm);
}
.catalogcard__container:hover {
transform: translateY(-2px);
box-shadow: var(--t-shadow-md);
border-color: var(--t-border-strong);
}
.catalogflag__container {
border-radius: var(--t-radius-md);
}
.catalogflag,
.catalogflag[data-hint] {
border-top-right-radius: var(--t-radius-md);
}
.catalogcards__description {
font-size: var(--t-font-size-md);
line-height: var(--t-leading-normal);
color: var(--t-text-secondary);
}
.catalogcards__footer {
margin-top: var(--t-space-lg);
}
.catalogcards__footerlink {
color: var(--t-text);
border-radius: var(--t-radius-pill);
border: 1px solid var(--t-border);
background: var(--t-bg);
transition: all var(--t-transition-fast);
font-weight: var(--t-weight-bold);
font-size: var(--t-font-size-sm);
}
.catalogcards__footerlink svg {
display: none;
}
.catalogcards__footerlink span::after {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: 2px;
content: "\e5cc";
}
.catalogcards__footerlink:hover {
text-decoration: none;
background: var(--t-surface);
border-color: var(--t-border-strong);
box-shadow: var(--t-shadow-md);
}
.catalogcards__navbutton--prev,
.catalogcards__navbutton--next {
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 30px;
height: 40px;
transition: all var(--t-transition-fast);
}
.catalogcards__navbutton--next {
background-image: url('data:image/svg+xml,');
}
.catalogcards__navbutton--prev {
background-image: url('data:image/svg+xml,');
}
.catalogcards__navbutton--prev svg,
.catalogcards__navbutton--next svg {
display: none;
}
@media (min-width: 880px) {
.cardgrid__item {
width: 33.333%;
font-size: 0.8em;
}
}
@media (min-width: 1024px) {
.cardgrid__item {
width: 25%;
font-size: 0.8em;
}
}
@media only screen and (min-width: 992px) {
.catalogcards__listitem--event .catalogcard--event {
border-radius: var(--t-radius-md);
}
}
/* ================================================================
8. FORMS / CHECKBOXES / RADIOS
================================================================ */
.checkbox--primary .checkbox__input:checked + .checkbox__ui {
background-color: var(--t-primary);
border: 2px solid var(--t-primary);
}
.question .checkbox__input:checked + .checkbox__ui {
background-color: var(--t-primary);
border: 1px solid var(--t-primary);
}
.question .radio__input:checked + .radio__ui {
border-color: var(--t-secondary);
}
.question .radio__input:checked + .radio__ui::before {
background-color: var(--t-secondary);
}
.assessment__completedicon,
.assessment__gradingicon {
background-color: var(--t-secondary);
}
.enrollmentmsg__image.enrollmentmsg__image--complete {
background-color: var(--t-secondary);
}
.rank__listitem .radio__input:checked + .radio__ui {
border-color: var(--t-secondary);
}
.rank__listitem .radio__input:checked + .radio__ui::before {
background-color: var(--t-secondary);
}
.sharelinks__link:hover,
.sharelinks__link:focus,
.sharelinks__link.button:hover,
.sharelinks__link.button:focus {
color: var(--t-secondary);
}
.rating input[type="radio"]:not([disabled]) + label {
color: var(--t-primary);
}
.datepicker .pika-prev,
.datepicker .pika-next {
border: 1px solid var(--t-secondary);
}
.datepicker .pika-prev,
.datepicker .is-rtl .pika-next {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2030%2025'%20version%3D'1.1'%3E%3Cpolyline%20fill%3D'none'%20stroke%3D'%23197151'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20points%3D'16.7%209.4%2011.6%2012.4%2016.6%2015.3'%2F%3E%3C%2Fsvg%3E");
}
.datepicker .pika-next,
.datepicker .is-rtl .pika-prev {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20version%3D'1.1'%20viewBox%3D'0%200%2030%2025'%3E%3Cpath%20d%3D'M12.6%209.5L17.7%2012.4%2012.6%2015.3'%20fill-opacity%3D'0'%20stroke%3D'%23197151'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
.datepicker .is-today .pika-button {
color: var(--t-secondary);
}
.datepicker .is-selected .pika-button,
.datepicker .is-selected .pika-button:hover {
background: var(--t-primary);
color: var(--t-on-primary);
}
.banner__icon {
color: var(--t-primary);
background: var(--t-primary);
}
/* ================================================================
9. PROGRESS / COURSE LIST
================================================================ */
.courselist__item[data-status="completed"] .courselist__marker,
.courselist__item[data-status="in-progress"] .courselist__marker,
.pathmenu__sectionitem[data-status="completed"] .pathmenu__itemmarker,
.pathmenu__sectionitem[data-status="in-progress"] .pathmenu__itemmarker {
color: var(--t-secondary);
}
.courselist__item[data-status="in-progress"]:not([data-shape]) .courselist__marker {
border-color: var(--t-secondary);
}
.courselist__itemcontent {
display: flex;
flex-direction: row-reverse;
}
.pageoutline__currentlink,
.pageoutline__currentlink:hover,
.pageoutline__currentlink:focus {
color: var(--t-secondary);
}
/* ================================================================
10. TAGS / FILTERS
================================================================ */
.tagbutton--selected,
.tagbutton--selected:hover,
.tagbutton--selected:active,
.tagbutton--selected.tagbutton--taxonomy:hover,
.tagbutton--selected.tagbutton--taxonomy:active {
border-color: inherit !important;
background-color: var(--t-secondary);
color: var(--t-text-inverted);
}
.tagbutton--selected.tagbutton--taxonomy {
background-color: rgba(25, 113, 81, 0.05) !important;
border-color: var(--t-secondary) !important;
color: var(--t-secondary) !important;
}
/* ================================================================
11. SESSION / EVENT LINKS
================================================================ */
.session__headinglinks .session__link,
.session__headinglinks .session__link:link,
.session__headinglinks .session__link:visited,
.session__headinglinks .session__link:hover,
.session__headinglinks .session__link:active,
.session__headinglinks .session__link:focus {
background: var(--t-primary);
color: var(--t-on-primary);
border-radius: var(--t-radius-pill);
border: none;
font-size: var(--t-font-size-sm);
font-weight: var(--t-weight-bold);
text-decoration: none;
padding: 8px 20px;
margin-left: 10px;
transition: all var(--t-transition-fast);
}
.session__headinglinks .session__link:hover {
background: var(--t-primary-hover);
box-shadow: var(--t-shadow-md);
}
.session__headinglinks .session__link:after {
content: "";
}
.session__container--occurrence {
max-width: 100%;
}
/* ================================================================
12. LAYOUT / SPACING
================================================================ */
.main__content {
width: 92% !important;
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.oac-paths,
.oac-cert {
max-width: 100% !important;
width: 100% !important;
}
.categoryheader,
.pageheader,
.tabs__tablist--page {
max-width: 1400px !important;
width: 92% !important;
}
.coursepage__contentmain:not(:has(.pageoutline)) .pgheading,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent[data-display-style="normal"],
.coursepage__contentmain:not(:has(.pageoutline)) .course__header,
.coursepage__contentmain:not(:has(.pageoutline)) .course__contentcontainer,
.coursepage__contentmain:not(:has(.pageoutline)) .course__footercontainer {
max-width: 900px !important;
}
.faq-accordion {
max-width: 900px !important;
width: 100% !important;
}
@media (min-width: 1200px) {
.faq-accordion {
max-width: 1000px !important;
}
.coursepage__contentmain:not(:has(.pageoutline)) .pgheading,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent[data-display-style="normal"],
.coursepage__contentmain:not(:has(.pageoutline)) .course__header,
.coursepage__contentmain:not(:has(.pageoutline)) .course__contentcontainer,
.coursepage__contentmain:not(:has(.pageoutline)) .course__footercontainer {
max-width: 1000px !important;
}
}
@media (min-width: 1600px) {
.main__content {
width: 90% !important;
max-width: 1600px !important;
}
.categoryheader,
.pageheader,
.tabs__tablist--page {
max-width: 1600px !important;
width: 90% !important;
}
.faq-accordion {
max-width: 1100px !important;
}
.coursepage__contentmain:not(:has(.pageoutline)) .pgheading,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent[data-display-style="normal"],
.coursepage__contentmain:not(:has(.pageoutline)) .course__header,
.coursepage__contentmain:not(:has(.pageoutline)) .course__contentcontainer,
.coursepage__contentmain:not(:has(.pageoutline)) .course__footercontainer {
max-width: 1100px !important;
}
}
@media (min-width: 1920px) {
.main__content {
width: 88% !important;
max-width: 1800px !important;
}
.categoryheader,
.pageheader,
.tabs__tablist--page {
max-width: 1800px !important;
width: 88% !important;
}
.faq-accordion {
max-width: 1200px !important;
}
.coursepage__contentmain:not(:has(.pageoutline)) .pgheading,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent,
.coursepage__contentmain:not(:has(.pageoutline)) .pgcomponent[data-display-style="normal"],
.coursepage__contentmain:not(:has(.pageoutline)) .course__header,
.coursepage__contentmain:not(:has(.pageoutline)) .course__contentcontainer,
.coursepage__contentmain:not(:has(.pageoutline)) .course__footercontainer {
max-width: 1200px !important;
}
}
section {
margin-bottom: var(--t-space-xl) !important;
}
.catalogcards__htmlcontent section {
margin-bottom: 0 !important;
}
.course__quickstart {
margin-bottom: var(--t-space-4xl);
}
.activitysection__list .activitymeta {
margin-right: 15px;
}
.activitymeta {
font-size: var(--t-font-size-base);
color: var(--t-text-secondary);
}
.carousel__controls {
margin-top: 10px;
}
exceed-scroll-row .catalogcards__list--scroll {
overflow-x: hidden;
}
.main--student {
margin-bottom: 0 !important;
}
/* ================================================================
13. LOGIN PAGE
================================================================ */
.publiclogin .login {
display: flex;
flex-direction: column-reverse;
}
.publiclogin .login .login__emailintro {
width: 100%;
}
.noresults:has(.login-form) {
display: flex;
flex-direction: column;
}
.noresults:has(.login-form) .noresults__image {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
.noresults:has(.login-form) .noresults__image svg {
display: none;
}
.noresults:has(.login-form) .login-form {
order: 3;
}
.noresults:has(.login-form) .login__emailintro {
order: 2;
width: 100%;
}
.noresults:has(.login-form) .login__form {
order: 1;
}
/* ================================================================
14. REGISTRATION PAGE
================================================================ */
[data-action="register"] .hero__image {
image-rendering: auto;
}
[data-action="register"] header.pageheader {
width: 100%;
}
[data-action="register"] .main__header header.pageheader {
display: none;
}
[data-action="register"] .studentform__section--main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
[data-action="register"] .studentform__section--main .studentform__section {
max-width: none;
margin-bottom: 0;
}
[data-action="register"] .studentform__section--main > .studentform__section {
display: flex;
flex-direction: column;
flex-basis: 50%;
max-width: 50%;
padding-left: 1.5%;
padding-right: 1.5%;
}
@media (max-width: 1024px) {
[data-action="register"] .studentform__section--main > .studentform__section {
max-width: 100%;
flex-basis: 100%;
padding-left: 0;
padding-right: 0;
}
}
[data-action="register"] .studentform__section--main > .studentform__section:last-of-type {
max-width: 100%;
flex-basis: 100%;
}
/* ================================================================
15. HEADING LINK COLORS
================================================================
Section headings (h2) are wrapped in tags by the LMS.
The platform sets a:link color to #393b3d which clashes.
================================================================ */
.catalogcards__heading a,
.catalogcards__heading a:link,
.catalogcards__heading a:visited,
.u-headingsection a,
.u-headingsection a:link,
.u-headingsection a:visited {
color: var(--t-text) !important;
text-decoration: none;
}
.catalogcards__heading a:hover {
color: var(--t-secondary) !important;
}
/* ================================================================
16. CARD VISIBILITY
================================================================
Stronger borders and shadows so cards pop on light bg.
================================================================ */
.catalogcard__container {
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
background: var(--t-bg);
}
.catalogcard__container:hover {
border-color: rgba(0, 0, 0, 0.15) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}
.catalogcard__content {
background: var(--t-bg);
}
.catalogcard__heading,
.catalogcard__heading a,
.catalogcard__heading a:link,
.catalogcard__heading a:visited {
color: var(--t-text) !important;
}
.catalogcard__content--activity {
padding: var(--t-space-sm) var(--t-space-md) var(--t-space-md) !important;
}
/* ================================================================
17. VIEW ALL CTA — MATERIAL SYMBOL ARROW
================================================================ */
.catalogcards__navbutton--next {
background-image: none !important;
}
.catalogcards__navbutton--next::after {
font-family: 'Material Symbols Rounded';
content: "\e5e1";
font-size: 24px;
color: var(--t-text);
}
.catalogcards__navbutton--prev {
background-image: none !important;
}
.catalogcards__navbutton--prev::after {
font-family: 'Material Symbols Rounded';
content: "\e5e0";
font-size: 24px;
color: var(--t-text);
}
/* --- UIKit "View All" CTA (carousel sections) → match footerlink pill --- */
[class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"] {
color: var(--t-text) !important;
border-radius: var(--t-radius-pill) !important;
border: 1px solid var(--t-border) !important;
background: var(--t-bg) !important;
font-family: var(--t-font) !important;
font-weight: var(--t-weight-bold) !important;
font-size: var(--t-font-size-sm) !important;
padding: 10px 10px 10px 14px !important;
line-height: 1 !important;
transition: all var(--t-transition-fast);
text-decoration: none !important;
}
[class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"] svg {
display: none !important;
}
[class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"] span::after {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
display: inline-block;
vertical-align: middle;
margin-left: 2px;
content: "\e5cc";
}
[class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"]:hover {
background: var(--t-surface) !important;
border-color: var(--t-border-strong) !important;
box-shadow: var(--t-shadow-md);
text-decoration: none !important;
}
[data-theme="dark"] [class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"] {
color: var(--t-text) !important;
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] [class*="catalogCards-module-viewAllContainer"] a[class*="uikitButtonsButton-module"]:hover {
background: var(--t-surface-alt) !important;
border-color: var(--t-border-strong) !important;
}
/* ================================================================
18. RECOMMENDED TAG
================================================================ */
.tag,
.tag--recommended,
span.tag {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-xs) !important;
font-weight: var(--t-weight-semibold) !important;
border-radius: var(--t-radius-pill) !important;
padding: 3px 10px !important;
line-height: 1.6 !important;
}
.tag--recommended {
background-color: var(--t-primary) !important;
color: var(--t-on-primary) !important;
border: none !important;
vertical-align: middle;
}
.catalogcards__heading .tag {
vertical-align: middle;
position: relative;
top: -2px;
margin-left: var(--t-space-xs);
}
.tag {
background-color: var(--t-surface) !important;
color: var(--t-text-secondary) !important;
border: 1px solid var(--t-border) !important;
}
/* ================================================================
19. CARD TITLES
================================================================ */
.catalogcard__heading {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-sm) !important;
font-weight: var(--t-weight-semibold) !important;
line-height: var(--t-leading-snug) !important;
color: var(--t-text) !important;
overflow: hidden;
}
.catalogcard__heading a,
.catalogcard__heading a:link,
.catalogcard__heading a:visited {
color: var(--t-text) !important;
}
/* ================================================================
20. FAQ ACCORDION
================================================================ */
.faq-accordion {
font-family: var(--t-font) !important;
}
.faq-item summary {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-base) !important;
font-weight: var(--t-weight-medium) !important;
color: var(--t-text) !important;
line-height: var(--t-leading-normal) !important;
padding: var(--t-space-md) var(--t-space-lg) !important;
cursor: pointer;
border: 1px solid var(--t-border);
border-radius: var(--t-radius-sm);
background: var(--t-bg);
transition: background var(--t-transition-fast);
}
.faq-item summary::after {
font-family: 'Material Symbols Rounded' !important;
content: "\e5cf" !important;
font-size: 20px !important;
color: var(--t-text-muted) !important;
font-weight: normal !important;
font-style: normal !important;
transition: transform var(--t-transition-fast);
}
.faq-item[open] summary::after {
transform: rotate(180deg) !important;
}
.faq-item summary:hover {
background: var(--t-surface);
}
.faq-item[open] summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.faq-content {
font-family: var(--t-font) !important;
font-size: var(--t-font-size-base) !important;
color: var(--t-text-secondary) !important;
line-height: var(--t-leading-normal) !important;
padding: var(--t-space-lg) var(--t-space-lg) var(--t-space-md) !important;
border: 1px solid var(--t-border);
border-top: none;
border-bottom-left-radius: var(--t-radius-sm);
border-bottom-right-radius: var(--t-radius-sm);
background: var(--t-bg);
}
.faq-content ol,
.faq-content ul {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.faq-content li:last-child {
margin-bottom: 0;
}
.faq-accordion *,
.faq-accordion li,
.faq-accordion ol,
.faq-accordion p {
font-family: var(--t-font) !important;
color: var(--t-text-secondary);
}
.faq-title {
font-family: var(--t-font-headline) !important;
color: var(--t-text) !important;
font-weight: var(--t-weight-bold) !important;
}
/* ================================================================
20b. FOOTER LAYOUT
================================================================ */
.appfooter,
.appfooter .footer__content,
.appfooter .footer__customcontent,
.appfooter .appfooter__customcontent {
background-color: var(--t-surface-deep) !important;
color: var(--t-text-inverted-muted) !important;
}
.appfooter {
padding: var(--t-space-2xl) var(--t-space-xl) var(--t-space-lg) !important;
}
.appfooter .footer__content {
text-align: center;
}
.appfooter .appfooter__content {
flex-direction: column !important;
align-items: center !important;
text-align: center;
}
.appfooter__item {
text-align: center !important;
width: 100% !important;
justify-content: center !important;
}
.appfooter__item a,
.appfooter__item a:link,
.appfooter__item a:visited {
color: var(--t-primary) !important;
text-decoration: none;
font-size: var(--t-font-size-sm);
transition: opacity var(--t-transition-fast);
}
.appfooter__item a:hover {
opacity: 0.8;
}
.opt-footer {
background-color: var(--t-surface-deep) !important;
text-align: center;
padding: 0 var(--t-space-xl) var(--t-space-lg) !important;
}
.opt-footer-divider {
width: 200px;
margin: var(--t-space-lg) auto !important;
border: none !important;
height: 1px;
background: rgba(255, 255, 255, 0.1) !important;
}
.opt-footer-meta {
color: #a0ab8c !important;
font-size: var(--t-font-size-xs) !important;
}
.appfooter__logo,
.footer__logo,
.appfooter .appfooter__link--poweredby,
.appfooter .appfooter__link--poweredby span {
color: #eff6e9 !important;
filter: brightness(0) invert(1) !important;
}
.appfooter__item p {
color: var(--t-text-inverted-muted) !important;
font-size: var(--t-font-size-xs) !important;
}
/* ================================================================
21. THEME TOGGLE BUTTON
================================================================ */
.ods-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background var(--t-transition-fast);
flex-shrink: 0;
margin: 0 2px;
}
.ods-theme-toggle:hover {
background: rgba(0, 0, 0, 0.06);
}
.ods-theme-toggle__icon {
font-family: 'Material Symbols Rounded' !important;
font-size: 20px !important;
font-weight: normal !important;
font-style: normal !important;
line-height: 1 !important;
color: #08251a !important;
}
[data-theme="dark"] .ods-theme-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .ods-theme-toggle__icon {
color: #eff6e9 !important;
}
/* ================================================================
22. DARK MODE OVERRIDES
================================================================
The LMS has hundreds of hardcoded colors. This section forces
dark backgrounds/text on every major surface and element.
================================================================ */
/* --- Global surfaces --- */
[data-theme="dark"] body,
[data-theme="dark"] .main,
[data-theme="dark"] .main__content,
[data-theme="dark"] .main__content--catalog,
[data-theme="dark"] .main__header,
[data-theme="dark"] #main {
background-color: var(--t-bg) !important;
color: var(--t-text) !important;
}
/* --- All text --- */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] span:not(.material-symbols-rounded),
[data-theme="dark"] span:not(.material-symbols-outlined),
[data-theme="dark"] label,
[data-theme="dark"] .postcontent,
[data-theme="dark"] .postcontent p {
color: var(--t-text) !important;
}
[data-theme="dark"] a,
[data-theme="dark"] a:link,
[data-theme="dark"] a:visited {
color: var(--t-primary-text) !important;
}
[data-theme="dark"] a:hover {
color: var(--t-primary) !important;
}
/* --- Section headings (inside tags) --- */
[data-theme="dark"] .catalogcards__heading a,
[data-theme="dark"] .catalogcards__heading a:link,
[data-theme="dark"] .catalogcards__heading a:visited,
[data-theme="dark"] .u-headingsection a,
[data-theme="dark"] .u-headingsection a:link,
[data-theme="dark"] .u-headingsection a:visited {
color: var(--t-text) !important;
}
[data-theme="dark"] .catalogcards__description {
color: var(--t-text-muted) !important;
}
/* --- Cards --- */
[data-theme="dark"] .catalogcard__container {
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
box-shadow: var(--t-shadow-sm) !important;
}
[data-theme="dark"] .catalogcard__container:hover {
border-color: var(--t-border-strong) !important;
box-shadow: var(--t-shadow-md) !important;
}
[data-theme="dark"] .catalogcard__content,
[data-theme="dark"] .catalogcard__content--activity {
background: var(--t-surface) !important;
}
[data-theme="dark"] .catalogcard__heading,
[data-theme="dark"] .catalogcard__heading a,
[data-theme="dark"] .catalogcard__heading a:link,
[data-theme="dark"] .catalogcard__heading a:visited {
color: var(--t-text) !important;
}
[data-theme="dark"] .activitymeta,
[data-theme="dark"] .activitymeta *,
[data-theme="dark"] .catalogcard__meta,
[data-theme="dark"] .catalogcard__meta * {
color: var(--t-text-secondary) !important;
}
/* --- Catalog sections --- */
[data-theme="dark"] .catalogcards {
background-color: transparent !important;
}
[data-theme="dark"] .catalogcards__header {
background-color: transparent !important;
}
/* --- View All / nav buttons --- */
[data-theme="dark"] .catalogcards__footerlink {
color: var(--t-text) !important;
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .catalogcards__footerlink:hover {
background: var(--t-surface-alt) !important;
border-color: var(--t-border-strong) !important;
}
[data-theme="dark"] .catalogcards__footerlink span::after {
color: var(--t-text) !important;
}
/* --- Tags --- */
[data-theme="dark"] .tag {
background-color: var(--t-surface-alt) !important;
color: var(--t-text-secondary) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .tag--recommended,
[data-theme="dark"] span.tag.tag--recommended {
background-color: var(--t-primary) !important;
color: var(--t-on-primary) !important;
}
/* --- Buttons --- */
[data-theme="dark"] .button--secondary,
[data-theme="dark"] .button--secondary:link,
[data-theme="dark"] .button--secondary:visited,
[data-theme="dark"] .dropdown__trigger:not(.dropdown__trigger--link) {
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
color: var(--t-text) !important;
}
[data-theme="dark"] .button--secondary:hover {
background: var(--t-surface-alt) !important;
}
/* --- FAQ --- */
[data-theme="dark"] .faq-item summary {
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
color: var(--t-text) !important;
}
[data-theme="dark"] .faq-item summary:hover {
background: var(--t-surface-alt) !important;
}
[data-theme="dark"] .faq-content {
background: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .faq-accordion *,
[data-theme="dark"] .faq-accordion li,
[data-theme="dark"] .faq-accordion p {
color: var(--t-text-secondary) !important;
}
/* --- Mobile nav --- */
[data-theme="dark"] .appnav--mobile {
background: var(--t-surface) !important;
}
[data-theme="dark"] .appnav__link--mobile {
color: var(--t-text) !important;
}
/* --- Header stays dark in both modes --- */
[data-theme="dark"] .u-org--header {
background-color: #061d15 !important;
color: #eff6e9 !important;
}
[data-theme="dark"] .u-org--header a,
[data-theme="dark"] .u-org--header a:link,
[data-theme="dark"] .u-org--header a:visited,
[data-theme="dark"] .u-org--header span,
[data-theme="dark"] .u-org--header button,
[data-theme="dark"] .appnav__link,
[data-theme="dark"] .appheader__titlelink {
color: #eff6e9 !important;
}
[data-theme="dark"] .appheader__titlelink img {
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
[data-theme="dark"] .appheader__titlelink::after {
content: "" !important;
display: inline-block;
width: 120px;
height: 41px;
background-image: url("data:image/svg+xml,");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
[data-theme="dark"] .appnav__link--mobilecurrent,
[data-theme="dark"] .u-orgcolor--color {
color: var(--t-primary) !important;
}
/* --- Hero / carousel area --- */
[data-theme="dark"] .carousel-heading,
[data-theme="dark"] .carousel__heading,
[data-theme="dark"] section[aria-labelledby="carousel-heading"] {
background-color: var(--t-surface-deep) !important;
}
/* --- Carousel arrows --- */
[data-theme="dark"] .catalogcards__navbutton--next::after,
[data-theme="dark"] .catalogcards__navbutton--prev::after {
color: #eff6e9 !important;
}
[data-theme="dark"] [class*="catalogCarousel-module"] button[class*="uikitButtonsButton-module"] {
color: #eff6e9 !important;
}
/* --- UIKit carousel disabled arrows → match catalogcards disabled style --- */
[class*="catalogCarousel-module"] button[class*="uikitButtonsButton-module"][disabled],
[class*="catalogCarousel-module"] button[class*="uikitButtonsButton-module"]:disabled {
opacity: .25 !important;
cursor: default !important;
}
/* --- Card descriptions in dark --- */
[data-theme="dark"] .catalogcard__description,
[data-theme="dark"] .catalogcard__description p {
color: var(--t-text-muted) !important;
}
/* --- Forms / inputs --- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
color: var(--t-text) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: var(--t-text-muted) !important;
}
/* --- Dialogs / modals --- */
[data-theme="dark"] .dialog,
[data-theme="dark"] [role="dialog"],
[data-theme="dark"] .modal__content {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
color: var(--t-text) !important;
}
/* --- Dropdowns / menus --- */
[data-theme="dark"] .dropdown__content,
[data-theme="dark"] .appusermenu,
[data-theme="dark"] .categoriesmenu,
[data-theme="dark"] .appsearchmenu {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .dropdown__content a,
[data-theme="dark"] .appusermenu a,
[data-theme="dark"] .categoriesmenu a {
color: var(--t-text) !important;
}
[data-theme="dark"] .dropdown__content a:hover,
[data-theme="dark"] .appusermenu a:hover,
[data-theme="dark"] .categoriesmenu a:hover {
background-color: var(--t-surface-alt) !important;
}
/* --- Misc platform surfaces with white backgrounds --- */
[data-theme="dark"] .course__container,
[data-theme="dark"] .course__header,
[data-theme="dark"] .coursebar,
[data-theme="dark"] .pageheader,
[data-theme="dark"] .activitycard,
[data-theme="dark"] .hero,
[data-theme="dark"] .blankslate {
background-color: var(--t-bg) !important;
color: var(--t-text) !important;
}
/* --- Event cards --- */
[data-theme="dark"] .catalogcard--event {
background: var(--t-surface) !important;
}
/* --- Session cards --- */
[data-theme="dark"] .session__container,
[data-theme="dark"] .session__container--occurrence {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
/* --- Breadcrumbs --- */
.breadcrumbs,
.breadcrumbs__link,
.breadcrumbs__link:link,
.breadcrumbs__link:visited,
.breadcrumbs__text,
.breadcrumbs__item::after {
color: #08251a !important;
}
[data-theme="dark"] .breadcrumbs,
[data-theme="dark"] .breadcrumbs__link,
[data-theme="dark"] .breadcrumbs__link:link,
[data-theme="dark"] .breadcrumbs__link:visited,
[data-theme="dark"] .breadcrumbs__text,
[data-theme="dark"] .breadcrumbs__item::after,
[data-theme="dark"] .u-org--header .breadcrumbs__link,
[data-theme="dark"] .u-org--header .breadcrumbs__link:link,
[data-theme="dark"] .u-org--header .breadcrumbs__link:visited,
[data-theme="dark"] .u-org--header .breadcrumbs__text,
[data-theme="dark"] .breadcrumbs__item--current .breadcrumbs__text {
color: #08251a !important;
}
/* --- Code blocks --- */
[data-theme="dark"] code {
background-color: #0a0a0a !important;
color: #aaff42 !important;
border: none !important;
}
[data-theme="dark"] pre,
[data-theme="dark"] .code-block,
[data-theme="dark"] .code-block pre {
background-color: #0a0a0a !important;
color: #aaff42 !important;
border: 1px solid var(--t-border) !important;
border-radius: var(--t-radius-sm) !important;
}
[data-theme="dark"] .copy-btn {
background-color: var(--t-surface) !important;
color: var(--t-text) !important;
border-color: var(--t-border) !important;
}
/* --- Page outline sidebar --- */
[data-theme="dark"] .pageoutline {
background: rgba(13, 58, 41, 0.95) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .pageoutline__title {
color: var(--t-text) !important;
}
[data-theme="dark"] .pageoutline__listitem a,
[data-theme="dark"] .pageoutline__listitem a:link,
[data-theme="dark"] .pageoutline__listitem a:visited {
color: var(--t-primary-text) !important;
}
[data-theme="dark"] .pageoutline__currentlink,
[data-theme="dark"] .pageoutline__currentlink:hover,
[data-theme="dark"] .pageoutline__currentlink:focus {
color: var(--t-primary) !important;
}
/* --- Search --- */
[data-theme="dark"] .appsearch__backdrop {
background-color: rgba(0, 0, 0, 0.7) !important;
}
[data-theme="dark"] .appsearch__results {
background-color: var(--t-surface) !important;
}
/* --- Footer --- */
[data-theme="dark"] .appfooter,
[data-theme="dark"] .opt-footer {
background-color: var(--t-surface-deep) !important;
color: var(--t-text-inverted-muted) !important;
}
[data-theme="dark"] .appfooter a,
[data-theme="dark"] .opt-footer a,
[data-theme="dark"] .appfooter a:link,
[data-theme="dark"] .opt-footer a:link,
[data-theme="dark"] .appfooter a:visited,
[data-theme="dark"] .opt-footer a:visited {
color: var(--t-primary) !important;
}
[data-theme="dark"] .appfooter__item p {
color: #a0ab8c !important;
}
/* --- Carousel / "Up Next" card text --- */
[data-theme="dark"] [class*="uikitCardsCard-module"],
[data-theme="dark"] [class*="catalogCarousel-module"] {
color: var(--t-text) !important;
}
[data-theme="dark"] [class*="uikitCardsCard-module-title"] h3,
[data-theme="dark"] [class*="uikitCardsCard-module-content"] h3,
[data-theme="dark"] [class*="uikitCardsCard-module"] h3 {
color: #eff6e9 !important;
}
[data-theme="dark"] [class*="uikitCardsCard-module-description"],
[data-theme="dark"] [class*="uikitCardsCard-module"] p {
color: var(--t-text-muted) !important;
}
[data-theme="dark"] [class*="uikitCardsCard-module-content"] {
background-color: var(--t-surface) !important;
}
[data-theme="dark"] [class*="uikitCardsCard-module-element"] {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
/* --- Borders that are hardcoded --- */
[data-theme="dark"] hr,
[data-theme="dark"] .separator {
background-color: var(--t-border) !important;
border-color: var(--t-border) !important;
}
/* --- Filter dropdowns (event pages) --- */
[data-theme="dark"] .menulist__trigger,
[data-theme="dark"] .menulist__trigger span,
[data-theme="dark"] .menulist__trigger svg {
color: var(--t-text) !important;
}
[data-theme="dark"] .menulist__listbox,
[data-theme="dark"] [role="listbox"] {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .menulist__option,
[data-theme="dark"] [role="option"] {
color: var(--t-text) !important;
}
[data-theme="dark"] .menulist__option:hover,
[data-theme="dark"] [role="option"]:hover {
background-color: var(--t-surface-alt) !important;
}
/* --- Session / event list items --- */
[data-theme="dark"] .session__content,
[data-theme="dark"] .session--activity {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .session__dates,
[data-theme="dark"] .session__meta,
[data-theme="dark"] .session__meta * {
color: var(--t-text-muted) !important;
}
[data-theme="dark"] .session__title,
[data-theme="dark"] .session__title a {
color: var(--t-text) !important;
}
/* --- Session date badge --- */
[data-theme="dark"] .session__date {
background-color: var(--t-surface-alt) !important;
color: var(--t-text) !important;
}
/* --- Enroll button text in dark mode --- */
[data-theme="dark"] .button--primary:not([disabled]),
[data-theme="dark"] .button--primary:link,
[data-theme="dark"] .button--primary:visited,
[data-theme="dark"] .button--primary:active,
[data-theme="dark"] .button--primary:focus,
[data-theme="dark"] .session__link,
[data-theme="dark"] .session__link:link,
[data-theme="dark"] .session__link:visited {
color: var(--t-on-primary) !important;
}
/* --- Session list spacing --- */
.session {
justify-content: space-around !important;
}
.session::before,
.session::after {
left: var(--t-space-md) !important;
}
/* --- Filter dropdown arrows → Material Symbols --- */
.menulist__trigger svg.menulist__triggericon {
display: none !important;
}
.menulist__trigger::after {
content: "\e5cf";
font-family: 'Material Symbols Rounded';
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1;
margin-left: 2px;
vertical-align: middle;
color: inherit;
}
/* --- Notification drawer --- */
[data-theme="dark"] .updatedrawer,
[data-theme="dark"] .updatedrawer__content {
background-color: var(--t-surface) !important;
color: var(--t-text) !important;
}
[data-theme="dark"] .updatedrawer__header {
background-color: var(--t-surface) !important;
border-color: var(--t-border) !important;
}
[data-theme="dark"] .updatecard,
[data-theme="dark"] .updatecard__content {
background-color: var(--t-surface-alt) !important;
border-color: var(--t-border) !important;
color: var(--t-text) !important;
}
[data-theme="dark"] .updatecard__heading {
color: #08251a !important;
}
[data-theme="dark"] .updatecard__heading a,
[data-theme="dark"] .updatedrawer .updatecard__headingtext,
[data-theme="dark"] .updatecard__heading span.updatecard__headingtext {
color: #08251a !important;
}
[data-theme="dark"] .updatecard__date,
[data-theme="dark"] .updatecard__timestamp {
color: var(--t-text-muted) !important;
}
[data-theme="dark"] .updatecard__body,
[data-theme="dark"] .updatecard__body p {
color: var(--t-text) !important;
}
[data-theme="dark"] .updatecard__body a {
color: var(--t-primary-text) !important;
}
[data-theme="dark"] .updatedrawer__dateheading {
color: var(--t-text-muted) !important;
}
[data-theme="dark"] .updatedrawer__empty,
[data-theme="dark"] .updatedrawer__empty p {
color: var(--t-text-muted) !important;
}
/* --- Event card time --- */
.catalogcard__time {
text-transform: none !important;
}
/* --- Notification badge --- */
.notifications-count-badge,
.hint__badge {
color: #08251a !important;
}
/* --- Scrollbar (webkit) --- */
[data-theme="dark"] ::-webkit-scrollbar-track {
background: var(--t-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--t-border-strong);
border-radius: 4px;
}