/* css/sidebar.css
Shared cross-product sidebar, lifted from Calibrate's nav.css so Activate
and Educate render the identical navy shell. The ONLY thing that changes
per product is the wordmark accent, driven by --product-accent below.
Mount pattern (same as Calibrate):
... page ...
.app-shell and .main-content already exist in base.css with the same rules
Calibrate uses (flex row, height:100vh), so no shell changes are needed. */
/* ── Per-product wordmark accent ─────────────────────────────────────────── */
:root { --product-accent: #3cb4c8; } /* Calibrate default */
body[data-product="activate"] { --product-accent: #0077B6; }
body[data-product="educate"] { --product-accent: #10b981; }
body[data-product="calibrate"]{ --product-accent: #3cb4c8; }
/* ── Sidebar shell ───────────────────────────────────────────────────────── */
.sidebar {
width: 232px;
height: 100vh;
background: var(--brand-950);
display: flex;
flex-direction: column;
flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,.05);
overflow-y: auto;
}
.sidebar-logo {
height: 64px;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0 1.25rem;
border-bottom: 1px solid rgba(255,255,255,.05);
text-decoration: none;
}
.sidebar-logo-icon {
width: 32px; height: 32px;
background: var(--brand-500);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sidebar-logo-text {
font-family: var(--font-display);
font-size: 1.2rem;
color: white;
letter-spacing: -0.01em;
}
/* The accent half of the wordmark. nav.js writes:
*/
.sidebar-logo-text .wm-accent { color: var(--product-accent); }
.sidebar-account {
padding: 0.6rem 1.25rem 0.65rem;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.sidebar-account-label {
font-size: 0.62rem;
font-weight: 600;
color: rgba(150,185,220,.55);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 0.2rem;
}
.sidebar-account-tier {
font-size: 0.875rem;
font-weight: 600;
color: white;
letter-spacing: -0.01em;
}
.sidebar-tenant {
padding: 0.5rem 1.25rem;
font-size: 0.7rem;
font-weight: 600;
color: rgba(150,185,220,.7);
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid rgba(255,255,255,.05);
}
/* ── Nav body ────────────────────────────────────────────────────────────── */
.sidebar-nav {
flex: 1;
padding: 0.75rem 0.625rem;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-section-label {
padding: 0.75rem 0.75rem 0.35rem;
font-size: 0.65rem;
font-weight: 600;
color: rgba(148,163,184,0.75);
text-transform: uppercase;
letter-spacing: 0.07em;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.75rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
color: rgba(255,255,255,0.85);
text-decoration: none;
transition: all 0.15s;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: white; }
.nav-link.active { background: rgba(45,114,184,0.2); color: var(--brand-300); border-left: 2px solid var(--brand-300); margin-left: -2px; box-shadow: none; }
.nav-link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.nav-link.active svg { opacity: 1; }
.nav-link.external { color: rgba(148,163,184,.85); }
/* Platform links are hidden until auth.js confirms entitlement, exactly like
Calibrate. Each carries data-product and is revealed by applyCrossProductNav. */
.nav-link[data-product] { display: none; }
/* ── Recent courses rail (scrollable middle) ─────────────────────────────── */
.sidebar-mid {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 0 0.625rem;
}
.rc-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.rc-item { min-width: 0; }
.rc-item .rc-name {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── User block (profile + sign out) ─────────────────────────────────────── */
.sidebar-user {
padding: 0;
border-top: 0;
}
/* Collapsible account menu: a tappable row (avatar + name + chevron) that folds
away the Platform links, Help, Account settings, Sign out and legal. Collapsed
by default. Harmonised with Calibrate/Activate. */
.acct-row {
display: flex;
align-items: center;
border-top: 1px solid rgba(255,255,255,.05);
}
.acct-row .user-avatar {
margin-left: 0.75rem;
flex-shrink: 0;
text-decoration: none;
}
.acct-toggle {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.6rem;
background: none;
border: none;
cursor: pointer;
padding: 0.6rem 0.75rem;
text-align: left;
}
.acct-toggle:hover { background: rgba(255,255,255,.05); }
.acct-id { min-width: 0; flex: 1; }
.acct-chev {
flex-shrink: 0;
color: rgba(148,163,184,0.85);
transition: transform 0.2s;
}
.acct-toggle.open .acct-chev { transform: rotate(180deg); }
.acct-menu {
display: none;
padding: 0.25rem 0.625rem 0.625rem;
}
.acct-menu.open { display: block; }
.acct-legal {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.6rem 0.75rem 0.15rem;
}
.acct-legal a {
font-size: 0.6rem;
color: rgba(148,163,184,0.7);
text-decoration: none;
}
.acct-legal a:hover { color: white; }
.acct-copy {
font-size: 0.6rem;
color: rgba(148,163,184,0.7);
margin: 0.25rem 0.75rem 0;
line-height: 1.5;
}
.sidebar-user-info {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.75rem;
margin-bottom: 2px;
}
.user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--brand-500);
color: white;
font-size: 0.75rem;
font-weight: 600;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.user-name { font-size: 0.8rem; font-weight: 500; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-email { font-size: 0.7rem; color: rgba(148,163,184,0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signout-btn {
display: flex; align-items: center; gap: 0.65rem;
padding: 0.5rem 0.75rem; border-radius: 8px;
font-size: 0.8rem; font-weight: 500;
color: rgba(148,163,184,0.85);
background: none; border: none; cursor: pointer; width: 100%;
transition: all 0.15s;
}
.signout-btn:hover { background: rgba(239,68,68,.1); color: #f87171; }
.signout-btn svg { width: 14px; height: 14px; }
/* Platform section sits below the product's own nav, above the user block. */
.sidebar-platform {
padding: 0.4rem 0.625rem 0.6rem;
border-top: 1px solid rgba(255,255,255,.05);
flex-shrink: 0;
}
.icon { display: inline-block; vertical-align: middle; }
/* ── Activate-specific overrides ─────────────────────────────────────────────
Match Calibrate's 232px rail (Activate's native rail is 256px). The study
tools (Progress/Revision/Assessment/Glossary) live as content-top tabs, not
in the rail. Scoped so Educate and Calibrate are untouched. */
body[data-product="activate"] .sb { width: 232px; }
body[data-product="activate"] .sb__inner { min-width: 0; }
/* Selection = Calibrate's blue bar + brand-300 text, used everywhere in the
rail (open module, active topic) so the whole sidebar reads consistently
instead of mixing Activate's old cyan accent with Calibrate's blue. */
body[data-product="activate"] .tree { padding: 8px 8px; }
body[data-product="activate"] .tm__btn { border-radius: 8px; padding-left: 10px; }
body[data-product="activate"] .tm__name { font-weight: 500; }
body[data-product="activate"] .tt__btn { border-radius: 8px; }
body[data-product="activate"] .tm__btn.open {
background: rgba(45,114,184,0.2);
border-left: 2px solid var(--brand-300);
margin-left: -2px;
}
body[data-product="activate"] .tm__btn.open .tm__name { color: var(--brand-300); }
body[data-product="activate"] .tt__btn.active {
background: rgba(45,114,184,0.2);
border-left: 2px solid var(--brand-300);
}
body[data-product="activate"] .tt__btn.active .tt__name { color: var(--brand-300); }
/* ── Educate-specific overrides ──────────────────────────────────────────────
Educate's topic/questions reading rail reuses the same module-tree component
(.tm__* / .tt__*) as Activate. Match Calibrate's 232px rail and the
brand-300 blue active pill from the design reference, so the open module and
active topic read consistently instead of inheriting Activate's cyan accent
or the violet content tokens. Scoped so Activate and Calibrate are untouched. */
body[data-product="educate"] .sb { width: 232px; }
body[data-product="educate"] .sb__inner { min-width: 0; }
body[data-product="educate"] .tree { padding: 8px 8px; }
body[data-product="educate"] .tm__btn { border-radius: 8px; padding-left: 10px; }
body[data-product="educate"] .tm__name { font-weight: 500; }
body[data-product="educate"] .tt__btn { border-radius: 8px; }
body[data-product="educate"] .tm__btn.open {
background: transparent;
border: none;
}
body[data-product="educate"] .tm__btn.open .tm__name { color: var(--brand-300); }
body[data-product="educate"] .tt__btn.active {
background: rgba(45,114,184,0.2);
border-left: 2px solid var(--brand-300);
}
body[data-product="educate"] .tt__btn.active .tt__name { color: var(--brand-300); }