/* =================================================================
ai-case-selection.css
=================================================================
AI-site colour overrides. Load AFTER case-selection.css.
Strategy:
- Scoped to .cx-root[data-site="ai"] (the JS sets this attribute
on the mount element), so this file is safe to load even on pages
that aren't the AI cases page — the selectors simply won't match.
- Swaps the periwinkle accent palette for the purple tokens used
throughout the AI-site (user-dashboard.css: #7c3aed / #8b5cf6).
- Overrides every HARDCODED peri rgba/hex value in the base CSS.
(CSS variables can't cover the linear-gradient progress bars.)
- Swaps the "done" checkbox from green to purple to match the
AI-site convention (user's legacy inline style used #7c4dff for
completion ticks; we use #7c3aed for consistency with the
dashboard elsewhere on this site).
================================================================= */
/* =======================================================
Palette — redefine the peri tokens as purple
======================================================= */
.cx-root[data-site="ai"] {
/* Primary purple — matches --sd-purple in user-dashboard.css */
--cx-peri: #7c3aed;
/* Pale violet — used for ring outlines, card-ring text, hover accents */
--cx-peri-ink: #c4b5fd;
/* Muted purple-grey — hero subtitle text etc. */
--cx-peri-mute: #8b7fa8;
/* Soft tint — chip backgrounds, "peri" priority column, result hover */
--cx-peri-soft: #f3f0ff;
/* List-row hover — base CSS had #e5ecf4 (powder blue). We move it into
the purple family so hover doesn't read as "blue" on an otherwise
purple-accented page. */
--cx-row-hover: #ede9fe;
/* Keep the generic var aliases in sync with the overrides above */
--peri: var(--cx-peri);
--peri-soft: var(--cx-peri-soft);
--peri-mute: var(--cx-peri-mute);
}
/* =======================================================
Hero — orb glow, subtitle bold text
=======================================================
The hero uses two hardcoded rgba peri values for the blurred
background orbs. We replace them with violet.
*/
.cx-root[data-site="ai"] .cx-hero::before {
background:
radial-gradient(700px 200px at 100% 0%, rgba(139, 92, 246, 0.32), transparent 60%),
radial-gradient(500px 160px at 0% 100%, rgba(196, 181, 253, 0.18), transparent 55%);
}
/* =======================================================
Buttons — ghost hover uses peri rgba
======================================================= */
.cx-root[data-site="ai"] .cx-btn-ghost:hover {
background: rgba(124, 58, 237, 0.14);
border-color: var(--cx-peri);
color: var(--cx-peri);
}
/* =======================================================
Active-filter chips — hardcoded peri rgba border
======================================================= */
.cx-root[data-site="ai"] .cx-chip {
border-color: rgba(124, 58, 237, 0.35);
}
.cx-root[data-site="ai"] .cx-chip:hover {
border-color: var(--cx-peri);
}
/* =======================================================
Progress bar gradient (LIST VIEW + DRAWER)
=======================================================
The base CSS paints the fill with a hardcoded peri → navy
gradient. We replace with a light-violet → deep-purple ramp
so the "story" of the bar stays the same (pale where you're
starting, rich where you're near done) but in AI colours.
Both selectors must be overridden — the list-view fill and
the drawer bar use separate rules pointing at the same hex.
*/
.cx-root[data-site="ai"] .cx-row:not(.open) .cx-row-track > span {
background-image: linear-gradient(90deg,
#a78bfa 0%,
#8b5cf6 45%,
#7c3aed 75%,
#5b21b6 100%
);
}
/* Drawer progress bar (lives on body, outside .cx-root — scope
to the [data-site="ai"] attribute we set on .cx-drawer-wrap). */
.cx-drawer-wrap[data-site="ai"] .cx-drawer-bar > span {
background-image: linear-gradient(90deg,
#a78bfa 0%,
#8b5cf6 45%,
#7c3aed 75%,
#5b21b6 100%
);
}
/* =======================================================
Completion checkbox — green → purple
=======================================================
The base site uses green (#4fbf67) to match the legacy SCA
site's fa-square-check. On AI, the user's existing inline
styles use purple for completion indicators — so we match.
*/
.cx-root[data-site="ai"] .cx-case-check.done {
background: #7c3aed;
border-color: #7c3aed;
}
.cx-root[data-site="ai"] .cx-case-check.done:hover {
background: #5b21b6;
border-color: #5b21b6;
}
/* Drawer version (outside .cx-root scope) */
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check.done {
background: #7c3aed;
border-color: #7c3aed;
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check.done:hover {
background: #5b21b6;
border-color: #5b21b6;
}
/* Since the checkbox is non-interactive on AI (completion comes
from finishing a consultation, not clicking), disable the hover
styling that implies interactivity. The ".done" version still
gets its purple background — but the empty checkbox stays visually
quiet rather than suggesting "click me". */
.cx-root[data-site="ai"] .cx-case-check {
cursor: default;
}
.cx-root[data-site="ai"] .cx-case-check:not(.done):hover {
border-color: var(--cx-rule-2); /* revert to default — no hover invitation */
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check {
cursor: default;
}
.cx-drawer-wrap[data-site="ai"] .cx-drawer-cases .cx-case-check:not(.done):hover {
border-color: var(--cx-rule-2, #bfc8d9);
}
/* =======================================================
Priority view — "Keep going" (peri-tone) column border
=======================================================
The base CSS uses rgba(125, 168, 240, 0.3) for the border
of the partial-progress column. Swap to violet.
*/
.cx-root[data-site="ai"] .cx-prio-peri {
background: var(--cx-peri-soft);
border-color: rgba(124, 58, 237, 0.3);
}
/* =======================================================
Active "dark" surfaces — navy → dark purple
=======================================================
The base CSS uses var(--cx-ink) = #253551 for several active
states: open list-row header, selected segment-button, active
filter-button. On a purple-themed page those navy blocks stand
out like "this was designed somewhere else" — swap to a dark
purple so active states feel part of the palette.
Notes on colour choice:
#4c1d95 (Tailwind violet-900) is a recognised "dark purple"
that's clearly violet in hue (not the ambiguous blue-purple
that navy reads as), and has the same visual weight as the
old navy — so the UI hierarchy doesn't shift.
*/
/* List row when expanded/open */
.cx-root[data-site="ai"] .cx-row.open {
border-color: #4c1d95;
}
.cx-root[data-site="ai"] .cx-row.open .cx-row-head {
background: #4c1d95;
}
/* Track fill on the open row — base CSS makes it pale paper-3;
use light lavender instead for a purple-family accent. */
.cx-root[data-site="ai"] .cx-row.open .cx-row-track > span {
background: #c4b5fd;
}
/* Segment buttons (Clinical topics / Experience groups, List / Grid / Priority) */
.cx-root[data-site="ai"] .cx-seg button.on {
background: #4c1d95;
}
/* Icon inside the active segment button — base uses peri, but on
a dark-purple bg peri is too similar to the background. Bump to
the light-lavender accent so the icon pops. */
.cx-root[data-site="ai"] .cx-seg button.on .cx-ico {
color: #c4b5fd;
}
/* Filter button when it has active filters applied */
.cx-root[data-site="ai"] .cx-filterbtn.on {
background: #4c1d95;
border-color: #4c1d95;
}
.cx-root[data-site="ai"] .cx-filterbtn.on .cx-ico {
color: #c4b5fd;
}
/* =======================================================
Hero — eyebrow + italic mode accent
=======================================================
The eyebrow ("AI ROLE-PLAY") and the italic hero-mode word use
var(--cx-peri) by default. On the navy hero bg the saturated
peri reads muddy. Bump both to light lavender so they register
as proper brand accents on dark.
*/
.cx-root[data-site="ai"] .cx-hero .cx-eyebrow,
.cx-root[data-site="ai"] .cx-hero-mode {
color: #c4b5fd;
}
/* =======================================================
Priority view — full purple gradient
=======================================================
Four columns: white paper → pale lavender → muted medium purple
→ deep violet. This replaces the base site's navy-centric ramp
(peri → steel blue → navy) which felt disconnected on an
otherwise purple page.
Nearly there (col 3): #6b46c1 — Tailwind violet-600.
Deliberately muted rather than saturated: the previous
candidate #6d28d9 (violet-700) read "neon" — this is a
softer, more grown-up mid-purple.
Mastered (col 4): #2e1065 — deepest violet; completes the
gradient + keeps the "mastered is serious" feel the navy had.
*/
/* Col 3 — "Nearly there" (was steel blue #5d77a8) */
.cx-root[data-site="ai"] .cx-prio-steel {
background: #6b46c1;
border-color: #6b46c1;
}
/* Col 4 — "Mastered" (was navy var(--cx-ink)) */
.cx-root[data-site="ai"] .cx-prio-ink {
background: #2e1065;
border-color: #2e1065;
}
/* Progress-line fills on both dark columns — base uses peri, but
peri is darker than the col-3 bg. Use light lavender so the
line is always visible. */
.cx-root[data-site="ai"] .cx-prio-steel .cx-prio-line > span,
.cx-root[data-site="ai"] .cx-prio-ink .cx-prio-line > span {
background: #c4b5fd;
}
/* =======================================================
Grid card — "Complete" status pill on mastered topics
=======================================================
Base CSS paints the pill navy + peri text. Keep the idea but
swap navy for the new dark purple + brighten the text to the
lavender accent so the pill matches the rest of the active-state
palette.
*/
.cx-root[data-site="ai"] .cx-card-status.complete {
background: #4c1d95;
color: #c4b5fd;
}
/* =======================================================
Focus states — purple glow instead of peri glow
=======================================================
Matches the legacy inline style you had on the AI site:
box-shadow: 0 4px 12px rgba(124, 77, 255, 0.10)
*/
.cx-root[data-site="ai"] .cx-search:focus-within {
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
}
.cx-root[data-site="ai"] .cx-hero {
background: #1e1b4b;
}
/* =================================================================
End ai-case-selection.css
================================================================= */