/** * Channel Partner dashboard theme tokens. * Ensures --bs-primary (and soft/darker variants) follow [theme-color] on * so price cards, tabs, breadcrumbs/links, and badges use the active theme. */ :root { --bs-primary-darker: #9e153e; --bs-primary-soft: color-mix(in srgb, var(--bs-primary) 16%, white); --bs-primary-soft-border: color-mix(in srgb, var(--bs-primary) 28%, white); } [theme-color="pink"] { --bs-primary: #C61A4E; --bs-primary-darker: #9e153e; } [theme-color="yellow"] { --bs-primary: #EBA337; --bs-primary-darker: #D78F2B; } [theme-color="green"] { --bs-primary: #1AC688; --bs-primary-darker: #16A275; } [theme-color="blue"] { --bs-primary: #06B6D4; --bs-primary-darker: #0499B0; } [theme-color="indigo"] { --bs-primary: #6366F1; --bs-primary-darker: #4B4DBB; } [theme-color="navy"] { --bs-primary: #396cdd; --bs-primary-darker: #2e5aba; } [theme-color="orange"] { --bs-primary: #F97316; --bs-primary-darker: #D15A11; } [theme-color="purple"] { --bs-primary: #8B5CF6; --bs-primary-darker: #7A4DD6; } [theme-color="red"] { --bs-primary: #EF4444; --bs-primary-darker: #D32F2F; } [theme-color="teal"] { --bs-primary: #14B8A6; --bs-primary-darker: #119B8D; } [theme-color="dark-gray"] { --bs-primary: #1F2937; --bs-primary-darker: #141D28; } [theme-color="dark-blue"] { --bs-primary: #364F6B; --bs-primary-darker: #2D3E53; } [theme-color="moderate-blue"] { --bs-primary: #4F82B6; --bs-primary-darker: #3D6A92; } [theme-color="dark-cyan"] { --bs-primary: #3C93AE; --bs-primary-darker: #31768A; } [theme-color="cobalt-blue"] { --bs-primary: #357dc4; --bs-primary-darker: #2a6b9b; } [theme-color="vivid-pink"] { --bs-primary: #e319a6; --bs-primary-darker: #b21b7f; } [theme-color="azure"] { --bs-primary: #0a87c2; --bs-primary-darker: #08629d; } [theme-color="copper"] { --bs-primary: #d66840; --bs-primary-darker: #b25b36; } [theme-color="amber"] { --bs-primary: #d9961a; --bs-primary-darker: #b77d14; } [theme-color="periwinkle-blue"] { --bs-primary: #5764bd; --bs-primary-darker: #4751a1; } [theme-color="sky-blue"] { --bs-primary: #3887d6; --bs-primary-darker: #164786; } [theme-color="ee-association"] { --bs-primary: #441449; --bs-primary-darker: #330F37; } /* Links / breadcrumbs follow theme */ a { color: var(--bs-primary); } a:hover { color: var(--bs-primary-darker); } /* Subscription / product tabs */ .tabcontainer .nav-link.active { color: var(--bs-primary) !important; } /* Soft badges (App Watch, News tags, etc.) Use Channel Partner --bs-primary so badges match sidebar / btn-primary. Inside home sections, also honor --theme-* when present via inheritance only if we explicitly map them — prefer --bs-primary for consistency. */ .bg-light-primary, .badge.bg-light-primary, .badge.bg-light-primary.text-secondary, small.badge.bg-light-primary, .badge.rounded-pill.bg-light-primary { background-color: color-mix(in srgb, var(--bs-primary) 16%, white) !important; color: var(--bs-primary) !important; } /* Home section cards: align badge with the same theme as theme-btn */ [class*="theme-"] .bg-light-primary, [class*="theme-"] .badge.bg-light-primary, [class*="theme-"] .badge.bg-light-primary.text-secondary, [class*="theme-"] small.badge.bg-light-primary { background-color: var(--theme-bg-light, color-mix(in srgb, var(--theme-primary, var(--bs-primary)) 16%, white)) !important; color: var(--theme-primary, var(--bs-primary)) !important; } .badge.bg-offwhite.text-blue-dark-500, .badge.bg-offwhite.text-blue-dark-500.rounded-pill { color: var(--bs-primary) !important; background-color: color-mix(in srgb, var(--bs-primary) 16%, white) !important; border: 1px solid color-mix(in srgb, var(--bs-primary) 28%, white); } [class*="theme-"] .badge.bg-offwhite.text-blue-dark-500 { color: var(--theme-primary, var(--bs-primary)) !important; background-color: var(--theme-bg-light, color-mix(in srgb, var(--theme-primary, var(--bs-primary)) 16%, white)) !important; border-color: var(--theme-primary-light, color-mix(in srgb, var(--theme-primary, var(--bs-primary)) 28%, white)); } /* Membership / vanilla benefit card badges */ .membership-benefit-card__badge, .benefits-vanilla .membership-benefit-card__badge { background: color-mix(in srgb, var(--bs-primary) 16%, white) !important; color: var(--bs-primary) !important; } [class*="theme-"] .membership-benefit-card__badge, [class*="theme-"] .benefits-vanilla .membership-benefit-card__badge { background: var(--theme-bg-light, color-mix(in srgb, var(--theme-primary, var(--bs-primary)) 16%, white)) !important; color: var(--theme-primary, var(--bs-primary)) !important; } /* Utility text primary follows theme */ .text-primary { color: var(--bs-primary) !important; } [class*="theme-"] .text-primary { color: var(--theme-primary, var(--bs-primary)) !important; } /* Price card on bundle details */ .pricing-card-theme { background: var(--bs-primary) !important; }