/* ========================================================================== MAANG.io — /curriculum hub ("console" layout) Two panes: a persistent track rail and the selected track's levels. Progressive enhancement: the server renders EVERY track pane and the rail links are real in-page anchors, so with JavaScript off the page is one long readable document. curriculum-hub.js adds `.hub-js` to and turns the same markup into a tabbed console. Depends on tokens.css + editorial.css. All colour comes from tokens so the dark theme works with no overrides here. ========================================================================== */ /* ---- page width --------------------------------------------------------- Match the per-level curriculum pages, which widen the shared container and use a 320px rail (see CurriculumRenderer's .page-curriculum block). Without this the hub sits at the 1120px marketing width while the level page you land on is 1720px, so the layout jumps on every click through. Scoped to .page-curriculum-hub on rather than overriding .ed-container bare: same reasoning as the level pages — keep the widening opt-in to this page so nothing else inherits a 1720px container. */ .page-curriculum-hub .ed-container { width: min(100% - 48px, 1720px); } .hub-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; } @media (max-width: 1200px) { .hub-shell { grid-template-columns: 300px minmax(0, 1fr); } } /* ---- breadcrumbs -------------------------------------------------------- */ .hub-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: 18px; } .hub-crumbs a { color: var(--text-faint); } .hub-crumbs a:hover { color: var(--brand); } .hub-crumbs i { font-size: .6rem; opacity: .7; } .hub-crumbs [aria-current] { color: var(--text-muted); font-weight: 600; } /* ---- rail --------------------------------------------------------------- */ .hub-rail { position: sticky; top: 70px; max-height: calc(100vh - 70px); overflow-y: auto; padding: 24px 20px 32px 0; border-right: 1px solid var(--border); } .hub-rail-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 12px; padding-left: 12px; } .hub-rail-k + * { margin-top: 0; } .hub-rail-k.is-later { margin-top: 28px; } .hub-rail-total { margin: -6px 0 12px; padding-left: 12px; font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint); } .hub-you { padding: 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 26px; } .hub-you .top { display: flex; align-items: center; gap: 12px; } .hub-you .n { font-family: var(--font-display); font-size: 1.28rem; font-weight: 600; line-height: 1; } .hub-you .l { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 4px; } .hub-you .stat { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-xs); color: var(--text-muted); } .hub-you .stat b { color: var(--text); } /* progress ring — conic-gradient, no SVG */ .hub-ring { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; position: relative; background: conic-gradient(var(--brand) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--brand) 16%, transparent) 0); } .hub-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); } .hub-ring b { position: relative; z-index: 1; font-size: .7rem; font-weight: 700; color: var(--brand); } .hub-nav { display: grid; gap: 2px; } .hub-nav-item { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); } .hub-nav-item:hover { background: var(--surface-2); color: var(--text); } .hub-nav-item[aria-current="true"] { background: var(--brand-soft); color: var(--brand); } .hub-nav-item[aria-current="true"] .nm { font-weight: 700; } .hub-nav-item .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .84rem; background: var(--surface-2); color: var(--text-faint); } .hub-nav-item[aria-current="true"] .ico { background: var(--brand); color: var(--text-on-brand); } .hub-nav-item .nm { font-size: var(--fs-sm); font-weight: 600; display: block; line-height: 1.25; } .hub-nav-item .sub { font-size: .7rem; color: var(--text-faint); display: block; margin-top: 2px; font-family: var(--font-mono); } .hub-nav-item[aria-current="true"] .sub { color: color-mix(in srgb, var(--brand) 72%, var(--text-muted)); } .hub-nav-item .hub-bar { grid-column: 2; margin-top: 6px; } .hub-nav-item.is-soon { opacity: .62; } .hub-links { display: grid; gap: 1px; } .hub-links a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-muted); } .hub-links a:hover { background: var(--surface-2); color: var(--text); } .hub-links a i { width: 16px; text-align: center; color: var(--text-faint); font-size: .82rem; } /* ---- shared bar --------------------------------------------------------- */ .hub-bar { height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .hub-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--brand); } .hub-bar.is-done > i { background: var(--good); } /* ---- pane --------------------------------------------------------------- */ .hub-main { padding: 24px 0 var(--sp-8) clamp(22px, 3vw, 44px); min-width: 0; } /* The container is wide (matching the level pages) but the reading column is not: cap it at the same 1080px the level pages cap their prose at, so cards don't stretch to ~1350px and the two pages line up. */ .hub-main > * { max-width: 1080px; } /* Inactive panes carry the `hidden` attribute (native display:none). The