/* Sectioned curriculum resource ledger: video/tutorial rows inside existing sections. */ /* Anti-flash. curriculum-ledger.js adds .cl-pending to before enhancement and removes it as soon as the first pass finishes (or after 1.5s, whichever comes first), so the card-grid layout is not painted only to be replaced by the ledger a moment later. visibility keeps the space reserved, so nothing around it shifts, and the rule only ever applies when the script is running. */ html.cl-pending :is(.sys-pair, .cb-activities, .phase-step-track, .phase2-video-grid):not(.cl-ledger):not(.cl-pair-enhanced) { visibility: hidden; } :root { --cl-navy: #1a2540; --cl-teal: #1aa7a1; --cl-amber: #f5b84b; --cl-line: #dbe6f3; --cl-muted: #526174; --cl-soft: #f8fbfd; } .cl-ledger { background: transparent; border: 0; border-radius: 0; box-shadow: none; display: grid !important; gap: 12px !important; overflow: visible; } .phase-2-hub #phase3-videos .cb-activities.cl-ledger { align-items: stretch !important; display: grid !important; gap: 12px !important; grid-template-columns: 1fr !important; justify-content: stretch !important; } .phase-2-hub #phase3-videos .phase3-video-sections.cb-modules.cl-modules-enhanced { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } .phase-2-hub #phase3-videos .phase3-video-sections.cb-modules.cl-modules-enhanced > .cb-mod.cl-module-enhanced { max-width: none !important; width: 100% !important; } .phase-2-hub #phase3-videos .cb-activities.cl-ledger > .cb-act { height: auto !important; max-height: none !important; min-height: 132px !important; overflow: visible !important; } .cl-ledger::before { content: none; display: none; } .cl-ledger > .cb-act, .cl-sys-ledger .cl-row { align-items: center; background: #ffffff; border: 1px solid rgba(26, 37, 64, 0.12); border-radius: 12px; box-shadow: 0 10px 24px rgba(19, 33, 58, 0.06); color: var(--cl-navy); display: grid !important; font: inherit; column-gap: 18px; row-gap: 10px; grid-template-areas: "visual copy time" "visual focus action"; grid-template-columns: 190px minmax(0, 1fr) 124px; min-height: 132px; padding: 18px 16px; position: relative; text-align: left; text-decoration: none; transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; width: 100%; } /* Legacy tile children. Pages may re-inject these after enhancement (see prepareActivityVideoTile in systems/cell-biology.html), and the hub stylesheets style them with !important, so this has to win outright. */ .cl-ledger > .cb-act[data-cl-enhanced="true"] > :is(strong, .cb-act-title, .cb-act-topics, .cb-act-go, .cb-act-tag) { display: none !important; } .cl-ledger > .cb-act + .cb-act, .cl-sys-ledger .cl-row + .cl-row { border-top-width: 1px; } .cl-ledger > .cb-act-video, .cl-sys-ledger .cl-row-video { background: linear-gradient(90deg, rgba(31, 115, 214, 0.055), #ffffff 28%); border-color: rgba(31, 115, 214, 0.22); border-left: 6px solid rgba(31, 115, 214, 0.82) !important; } .cl-ledger > .cb-act-video::before, .cl-ledger > .phase-video-button::before, .cl-ledger > .phase-video-button::after, .cl-ledger > .cb-act-video::after, .cl-sys-ledger .phase-video-button::before, .cl-sys-ledger .phase-video-button::after { content: none !important; display: none !important; } .cl-ledger > .cb-act-tut, .cl-sys-ledger .cl-row-tutorial { background: linear-gradient(90deg, rgba(245, 184, 75, 0.14), #ffffff 30%); border-color: rgba(245, 184, 75, 0.38); border-left: 6px solid rgba(245, 184, 75, 0.95) !important; } .cl-ledger > .cb-act:hover, .cl-sys-ledger .cl-row:hover { transform: translateY(-1px); } .cl-ledger > .cb-act-video:hover, .cl-sys-ledger .cl-row-video:hover { background: linear-gradient(90deg, rgba(31, 115, 214, 0.11), #ffffff 34%); border-color: rgba(31, 115, 214, 0.38); box-shadow: 0 16px 34px rgba(31, 115, 214, 0.16); } .cl-ledger > .cb-act-tut:hover, .cl-sys-ledger .cl-row-tutorial:hover { background: linear-gradient(90deg, rgba(245, 184, 75, 0.22), #ffffff 35%); border-color: rgba(245, 184, 75, 0.58); box-shadow: 0 16px 34px rgba(245, 184, 75, 0.2); } .cl-ledger .cb-act-thumb, .cl-ledger .cb-act-tband, .cl-sys-ledger .cl-media { aspect-ratio: 16 / 9; background: #ffffff; border: 1px solid rgba(26, 37, 64, 0.14); border-radius: 9px; box-shadow: 0 10px 22px rgba(19, 33, 58, 0.08); display: block; grid-area: visual; overflow: hidden; position: relative; width: 176px; } .cl-ledger :is(.cb-act-thumb, .cb-act-tband):not(.cl-media-empty)::before, .cl-ledger :is(.cb-act-thumb, .cb-act-tband):not(.cl-media-empty)::after, .cl-sys-ledger .cl-media:not(.cl-media-empty)::before, .cl-sys-ledger .cl-media:not(.cl-media-empty)::after { content: none !important; display: none !important; } .cl-ledger .cb-act-tut .cb-act-tband, .cl-sys-ledger .cl-row-tutorial .cl-media { border-color: rgba(245, 184, 75, 0.3); box-shadow: 0 10px 22px rgba(19, 33, 58, 0.08); } .cl-ledger .cb-act-video:hover .cb-act-thumb, .cl-sys-ledger .cl-row-video:hover .cl-media { border-color: rgba(31, 115, 214, 0.46); box-shadow: 0 0 0 4px rgba(31, 115, 214, 0.1), 0 12px 26px rgba(31, 115, 214, 0.16); } .cl-ledger .cb-act-tut:hover .cb-act-tband, .cl-sys-ledger .cl-row-tutorial:hover .cl-media { border-color: rgba(245, 184, 75, 0.52); box-shadow: 0 0 0 4px rgba(245, 184, 75, 0.14), 0 12px 26px rgba(245, 184, 75, 0.18); } .cl-tutorial-mark { align-items: center; background: rgba(255, 255, 255, 0.94); border: 2px solid rgba(245, 184, 75, 0.9); border-radius: 50%; box-shadow: 0 6px 16px rgba(26, 37, 64, 0.2); color: #7a4300; display: inline-flex; height: 44px; justify-content: center; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 44px; z-index: 2; } .cl-tutorial-mark svg { height: 22px; width: 22px; } .cl-ledger .cb-act-thumb img, .cl-ledger .cb-act-tband img, .cl-sys-ledger .cl-media img { display: block; height: 100%; object-fit: contain; object-position: center; padding: 0; width: 100%; } body.systems-hub .cl-sys-ledger .cl-media img, body.phase-hub .cl-ledger :is(.cb-act-thumb, .cb-act-tband, .cl-media) img { object-fit: contain !important; object-position: center !important; } .cl-ledger .cb-act-play, .cl-sys-ledger .cl-play { align-items: center; background: rgba(26, 37, 64, 0.9); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; bottom: 10px; box-shadow: 0 8px 20px rgba(26, 37, 64, 0.28), 0 0 0 5px rgba(255, 153, 0, 0.16); color: #ffffff; display: flex; font-size: 0; height: 40px; justify-content: center; line-height: 1; padding-left: 2px; pointer-events: none; position: absolute; right: 10px; width: 40px; z-index: 2; } .cl-ledger .cb-act-play::before, .cl-sys-ledger .cl-play::before { border-bottom: 8px solid transparent; border-left: 12px solid #ffffff; border-top: 8px solid transparent; content: ""; display: block; height: 0; margin-left: 2px; width: 0; } .cl-copy { display: grid; gap: 6px; grid-area: copy; min-width: 0; } .cl-kicker-row { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; } .cl-format-label { align-items: center; gap: 5px; } /* Registry id (VID-0129 / NA-380). A reference code, not a headline: monospace and tabular so ids line up down a column of tiles, and quiet enough that it never competes with the title sitting directly beneath it. */ .cl-id-chip { align-items: center; background: var(--cl-soft); border: 1px solid var(--cl-line); border-radius: 5px; color: var(--cl-muted); display: inline-flex; font-family: "Cascadia Mono", Consolas, "SFMono-Regular", ui-monospace, monospace; font-size: 10.5px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em; line-height: 1; padding: 3px 6px; white-space: nowrap; } .cl-format-icon { height: 13px; width: 13px; } .cl-module-identity { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cl-module-identity > span { border: 1px solid rgba(26, 37, 64, 0.14); border-radius: 6px; display: inline-flex; font-family: Arial, sans-serif; font-size: 0.64rem; font-weight: 850; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; padding: 5px 7px; } .cl-section-outcomes { background: #fff5d8; border: 1px solid rgba(232, 123, 44, 0.34); border-radius: 8px; box-sizing: border-box; margin: 0; min-width: 0; padding: 12px 14px; } .cl-section-outcomes h4 { color: #7a4a12; font-size: 0.69rem; font-weight: 850; letter-spacing: 0; margin: 0 0 8px; text-transform: uppercase; } .cl-section-outcomes ul { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; } .cl-section-outcomes li { color: var(--cl-navy); font-size: 0.72rem; font-weight: 650; line-height: 1.35; padding-left: 18px; position: relative; } .cl-section-outcomes li::before { color: #ff9900; content: "\2713"; font-weight: 900; left: 0; position: absolute; top: 0; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .hub-section-outcomes { display: none !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes { display: grid !important; grid-template-areas: "module-head outcomes" "module-body module-body" !important; grid-template-columns: minmax(0, 1fr) minmax(420px, 48%) !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes > .cb-mod-head { grid-area: module-head; height: 100%; min-width: 0; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes > .cb-mod-body { grid-area: module-body; min-width: 0; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes > .cl-section-outcomes { align-self: stretch; grid-area: outcomes; } @media (max-width: 900px) { body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes { grid-template-areas: "module-head" "outcomes" "module-body" !important; grid-template-columns: minmax(0, 1fr) !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced.cl-module-with-outcomes > .cl-section-outcomes { border-radius: 0 0 8px 8px !important; } } .cl-module-id { background: #eef6ff; color: #164b86; } .cl-section-id { background: #ecfdf8; color: #11645f; } .cl-ledger .cb-act-tag, .cl-sys-ledger .cl-kind, .cl-code { align-self: center; border-radius: 6px; display: inline-flex; font-family: Arial, sans-serif; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.06em; line-height: 1; padding: 5px 7px; text-transform: uppercase; width: fit-content; } .cl-ledger .cb-act-video .cb-act-tag, .cl-sys-ledger .cl-row-video .cl-kind { background: #eef6ff; border: 1px solid rgba(31, 115, 214, 0.32); color: #164b86; } .cl-ledger .cb-act-tut .cb-act-tag, .cl-sys-ledger .cl-row-tutorial .cl-kind { background: #fff8eb; border: 1px solid rgba(245, 184, 75, 0.58); color: #7a4300; } .cl-code { background: transparent; color: #667085; padding-left: 0; } .cl-title, .cl-sys-ledger .cl-title { color: var(--cl-navy); font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 0.92rem; font-weight: 850; line-height: 1.25; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .cl-summary, .cl-sys-ledger .cl-summary, .cl-ledger .cb-act-topics { color: var(--cl-muted); display: -webkit-box; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 0.76rem; line-height: 1.45; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .cl-ledger .cb-act-tut .cl-summary, .cl-sys-ledger .cl-row-tutorial .cl-summary { -webkit-line-clamp: 3; } .cl-focus { align-content: start; display: flex; flex-wrap: wrap; gap: 6px; grid-area: focus; } .cl-focus span { background: #f8fbfd; border: 1px solid rgba(26, 37, 64, 0.1); border-radius: 6px; color: #294667; display: inline-flex; font-family: Arial, sans-serif; font-size: 0.62rem; font-weight: 850; line-height: 1; padding: 5px 6px; text-transform: uppercase; } .cl-time { align-content: start; color: var(--cl-navy); display: grid; font-size: 0.76rem; font-weight: 850; gap: 5px; grid-area: time; } .cl-time b { color: var(--cl-navy); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .cl-time span { border-radius: 6px; display: inline-flex; justify-content: center; padding: 6px 8px; width: fit-content; } .cb-act-video .cl-time span, .cl-row-video .cl-time span { background: #eef6ff; border: 1px solid rgba(31, 115, 214, 0.26); } .cb-act-tut .cl-time span, .cl-row-tutorial .cl-time span { background: #fff8eb; border: 1px solid rgba(232, 123, 44, 0.28); } .cl-action { display: grid; gap: 8px; grid-area: action; } .cl-action .btn, .cl-action .cl-button { align-items: center; background: var(--cl-navy); border: 1.5px solid var(--cl-navy); border-radius: 8px; color: #ffffff; display: inline-flex; font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 0.78rem; font-weight: 850; justify-content: center; min-height: 34px; padding: 8px 12px; text-decoration: none; } /* Reads as a continuation of the clamped summary above it, not a second button. */ .cl-more { align-items: center; background: none; border: 0; color: #1f73d6; cursor: pointer; display: inline-flex; font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 0.72rem; font-weight: 850; justify-self: start; /* The row itself is a link, so a small target means a near-miss navigates instead of expanding. Pad the hit area out to ~46x26 and pull the padding back off with negative margins so the tile does not get taller. */ margin: -5px 0 0 -10px; min-height: 26px; padding: 5px 10px; position: relative; text-decoration: underline; z-index: 1; text-underline-offset: 2px; width: fit-content; } .cl-more:hover { color: var(--cl-navy); } /* Keep the CTA at the top of its cell instead of centred in the leftover height. */ .cl-action { align-self: start; } .cl-more:focus-visible { outline: 3px solid rgba(31, 115, 214, 0.28); outline-offset: 2px; } .cl-details { color: var(--cl-muted); display: none; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 0.74rem; grid-column: 2 / -1; line-height: 1.45; min-width: 0; } .cl-expanded .cl-details { display: grid; gap: 8px; } .cl-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; } .cl-detail-meta span { background: #f8fbfd; border: 1px solid rgba(26, 37, 64, 0.12); border-radius: 6px; color: #526174; font-size: 0.62rem; font-weight: 850; line-height: 1; padding: 5px 6px; text-transform: uppercase; } .cl-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cl-detail-tags span { background: #ffffff; border: 1px solid rgba(26, 37, 64, 0.12); border-radius: 6px; color: #294667; font-size: 0.62rem; font-weight: 800; line-height: 1; padding: 5px 6px; } .cl-detail-copy { max-width: 96ch; } .cl-media-empty { background: linear-gradient(135deg, rgba(245, 184, 75, 0.1), rgba(26, 167, 161, 0.08)), #ffffff; } .cl-media-empty::before { color: #667085; content: "Tutorial"; display: grid; font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 0.72rem; font-weight: 850; height: 100%; letter-spacing: 0.06em; place-items: center; text-transform: uppercase; } /* .cl-phase-ledger is deliberately not body-scoped: mental-health.html carries neither .systems-hub nor .phase-hub, and a ledger row should look the same wherever it is built. */ .phase-2-hub #phase3-videos .cl-ledger > .cb-act, body.systems-hub .cl-sys-ledger .cl-row, .cl-phase-ledger .cl-row { grid-template-areas: "visual copy focus time action"; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 0.52fr) 116px 144px; min-height: 144px; } .cl-phase-ledger .cl-media { width: 188px; } .phase-2-hub #phase3-videos .cl-ledger :is(.cb-act-thumb, .cb-act-tband), body.systems-hub .cl-sys-ledger .cl-media { width: 188px; } /* Also not body-scoped. base.css:894 lays .phase-step-track out in two columns, so a ledger built inside one is split in half unless this collapses it to a single column - and mental-health.html has no body class for a body-scoped rule to hook onto. */ .cl-phase-ledger { box-sizing: border-box; display: grid !important; gap: 12px !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; width: 100%; } .cl-phase-ledger .cl-row { box-sizing: border-box; flex: none !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } .phase-step-track.cl-phase-ledger, .phase-step-track.multi-video.cl-phase-ledger, .phase2-video-grid.cl-phase-ledger, body.phase-3-hub.phase-hub #phase3-video-grid .phase3-video-subgroup .phase-step-track.cl-phase-ledger, body.phase-3-hub.phase-hub #phase3-video-grid .phase3-video-subgroup .phase-step-track.multi-video.cl-phase-ledger { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; } .phase-step-track.cl-phase-ledger > .cl-row, .phase-step-track.multi-video.cl-phase-ledger > .cl-row, .phase2-video-grid.cl-phase-ledger > .cl-row, body.phase-3-hub.phase-hub #phase3-video-grid .phase3-video-subgroup .phase-step-track.cl-phase-ledger > .cl-row { max-width: none !important; width: 100% !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced > .cb-mod-body { display: grid !important; grid-template-columns: 1fr !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced > .cb-mod-body { display: grid !important; grid-template-columns: 1fr !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { display: grid !important; grid-template-areas: "visual copy focus time action" !important; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 0.52fr) 116px 144px !important; width: 100% !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { display: grid !important; grid-template-areas: "visual copy focus time action" !important; grid-template-columns: 210px minmax(0, 1fr) minmax(0, 0.52fr) 116px 144px !important; width: 100% !important; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list { grid-template-columns: minmax(0, 1fr) !important; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list > .cb-mod.cl-module-enhanced .cb-activities.cl-ledger { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list > .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act[data-cl-enhanced="true"] { height: auto !important; max-height: none !important; max-width: none !important; min-width: 0 !important; min-height: 144px !important; overflow: visible !important; width: 100% !important; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list > .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act-video[data-cl-enhanced="true"] > .cb-act-thumb { aspect-ratio: 16 / 9 !important; height: auto !important; max-height: none !important; min-height: 0 !important; } body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list > .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act-video[data-cl-enhanced="true"] > .cb-act-thumb img { height: 100% !important; object-fit: contain !important; object-position: center !important; padding: 0 !important; width: 100% !important; } /* Release the fixed 360x540 card footprint (--foundation-tile-width/height, set with !important by the hub stylesheets) for any ledger-enhanced row. This is the Fundamentals treatment above, generalised to every section rather than #phase1-fundamentals alone. */ body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act[data-cl-enhanced="true"] { height: auto !important; max-height: none !important; max-width: none !important; min-width: 0 !important; min-height: 144px !important; overflow: visible !important; width: 100% !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act-video[data-cl-enhanced="true"] > .cb-act-thumb { aspect-ratio: 16 / 9 !important; height: auto !important; max-height: none !important; min-height: 0 !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act-video[data-cl-enhanced="true"] > .cb-act-thumb img { height: 100% !important; object-fit: contain !important; object-position: center !important; padding: 0 !important; width: 100% !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act-tut[data-cl-enhanced="true"] > .cb-act-tband { height: auto !important; max-height: none !important; min-height: 0 !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: 188px !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: 188px !important; } body.phase-3-hub.phase-hub #phase3-video-grid.phase3-video-sections { display: grid !important; grid-template-columns: 1fr !important; } .cl-row-tutorial .cl-action .cl-button, .cb-act-tut .cl-action .cl-button { background: #ffffff; color: var(--cl-navy); } .cl-ledger .cb-act-go { display: none; } .cl-sys-ledger { display: grid; gap: 0; } body.systems-hub .sys-pair.cl-pair-enhanced, body.systems-hub:not(.phase-hub) .sys-pair.cl-pair-enhanced { border-left: 0 !important; display: block !important; margin: 0 0 22px !important; padding: 0 !important; width: 100% !important; } body.systems-hub .sys-pair.cl-pair-enhanced > .cl-sys-ledger, body.systems-hub:not(.phase-hub) .sys-pair.cl-pair-enhanced > .cl-sys-ledger { box-sizing: border-box !important; max-width: none !important; width: 100% !important; } body.systems-hub .sys-pair.cl-pair-enhanced .cl-row, body.systems-hub:not(.phase-hub) .sys-pair.cl-pair-enhanced .cl-row { box-sizing: border-box !important; flex: none !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } @media (max-width: 1040px) { .cl-ledger > .cb-act, .cl-sys-ledger .cl-row, body.systems-hub .cl-sys-ledger .cl-row, body.systems-hub:not(.phase-hub) .cl-sys-ledger .cl-row, .cl-phase-ledger .cl-row { grid-template-areas: "visual copy time" "visual focus action"; grid-template-columns: 176px minmax(0, 1fr) 148px; } .phase-2-hub #phase3-videos .cl-ledger :is(.cb-act-thumb, .cb-act-tband), body.systems-hub .cl-sys-ledger .cl-media, body.systems-hub:not(.phase-hub) .cl-sys-ledger .cl-media, .cl-phase-ledger .cl-media { width: 176px; } .cl-action { grid-template-columns: minmax(140px, 180px); } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { grid-template-areas: "visual copy time" "visual focus action" !important; grid-template-columns: 176px minmax(0, 1fr) 148px !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { grid-template-areas: "visual copy time" "visual focus action" !important; grid-template-columns: 176px minmax(0, 1fr) 148px !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: 176px !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: 176px !important; } } @media (max-width: 720px) { .cl-ledger::before { content: "Section resources"; word-spacing: normal; } .cl-ledger > .cb-act, .cl-sys-ledger .cl-row, body.systems-hub .cl-sys-ledger .cl-row, body.systems-hub:not(.phase-hub) .cl-sys-ledger .cl-row { grid-template-areas: "visual" "copy" "focus" "time" "action"; grid-template-columns: 1fr; } .cl-ledger .cb-act-thumb, .cl-ledger .cb-act-tband, .cl-sys-ledger .cl-media, body.systems-hub .cl-sys-ledger .cl-media, body.systems-hub:not(.phase-hub) .cl-sys-ledger .cl-media { width: min(100%, 260px); } .cl-details { grid-column: 1; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { grid-template-areas: "visual" "copy" "focus" "time" "action" !important; grid-template-columns: 1fr !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { grid-template-areas: "visual" "copy" "focus" "time" "action" !important; grid-template-columns: 1fr !important; } body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: min(100%, 260px) !important; } body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { width: min(100%, 260px) !important; } } /* ── Paired layout ────────────────────────────────────────────────────────────── Lay a section's resource rows out two-up so its video tile and tutorial tile sit side by side. Selectors mirror the single-column container rules above (including the id-bearing ones) so they tie on specificity and win on source order. At half width the five-column row cannot fit - 210 + 116 + 144 plus gaps leaves almost nothing for the copy - so a paired row uses the compact stacked template and a smaller type scale, which buys room for a 3-line title and a 4-line summary instead of the truncated 2 lines. Below 1200px pairing drops back to full width. */ @media (min-width: 1200px) { .cl-sys-ledger, .cl-phase-ledger, .phase-step-track.cl-phase-ledger, .phase-step-track.multi-video.cl-phase-ledger, .phase2-video-grid.cl-phase-ledger, .phase-2-hub #phase3-videos .cb-activities.cl-ledger, body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger, body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger, body.systems-hub.cell-biology-hub.foundations-hub #phase1-fundamentals > .cb-module-list > .cb-mod.cl-module-enhanced .cb-activities.cl-ledger, body.phase-3-hub.phase-hub #phase3-video-grid .phase3-video-subgroup .phase-step-track.cl-phase-ledger, body.phase-3-hub.phase-hub #phase3-video-grid .phase3-video-subgroup .phase-step-track.multi-video.cl-phase-ledger { align-items: stretch !important; display: grid !important; gap: 14px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .cl-ledger > .cb-act, .cl-sys-ledger .cl-row, .cl-phase-ledger .cl-row, body.systems-hub .cl-sys-ledger .cl-row, .phase-2-hub #phase3-videos .cl-ledger > .cb-act, .phase-2-hub #phase3-videos .cb-activities.cl-ledger > .cb-act, body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act, body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger > .cb-act { align-items: start !important; column-gap: 14px !important; grid-template-areas: "visual copy time" "visual copy action" "visual focus focus" !important; grid-template-columns: 208px minmax(0, 1fr) 118px !important; grid-template-rows: auto auto 1fr !important; height: 100% !important; min-height: 176px !important; padding: 14px !important; } .cl-ledger :is(.cb-act-thumb, .cb-act-tband), .cl-sys-ledger .cl-media, .cl-phase-ledger .cl-media, .phase-2-hub #phase3-videos .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband), body.systems-hub.cell-biology-hub .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband), body.systems-hub.cell-biology-hub #phase1-modules .cb-mod.cl-module-enhanced .cb-activities.cl-ledger :is(.cb-act-thumb, .cb-act-tband) { align-self: start !important; width: 208px !important; } /* Smaller type scale, and the room it frees spent on more visible text. */ .cl-ledger .cl-title, .cl-sys-ledger .cl-title { font-size: 0.8rem !important; line-height: 1.28 !important; -webkit-line-clamp: 3 !important; } .cl-ledger .cl-summary, .cl-sys-ledger .cl-summary, .cl-sys-ledger .cl-row-tutorial .cl-summary { font-size: 0.72rem !important; line-height: 1.42 !important; -webkit-line-clamp: 4 !important; } .cl-ledger .cl-focus span, .cl-sys-ledger .cl-focus span { font-size: 0.55rem !important; padding: 4px 5px !important; } .cl-ledger .cl-time, .cl-sys-ledger .cl-time { font-size: 0.7rem !important; } .cl-ledger .cl-time b, .cl-sys-ledger .cl-time b { font-size: 0.55rem !important; letter-spacing: 0.06em !important; } .cl-ledger .cl-time span, .cl-sys-ledger .cl-time span { padding: 4px 6px !important; } .cl-ledger .cl-button, .cl-sys-ledger .cl-button { font-size: 0.66rem !important; padding: 7px 8px !important; } .cl-ledger .cl-more, .cl-sys-ledger .cl-more { font-size: 0.66rem !important; } } /* Phase 3 caps main.container at 1180px (phase-hub.css:1461 and an inline copy in nclex-readiness.html). That width was chosen for the old three-across 360px card grid; with the ledger it just leaves desktop space unused and squeezes a paired row to ~540px against ~675px on every other hub. Match the other hubs from 1200px up. */ @media (min-width: 1200px) { body.phase-3-hub.phase-hub main.container, body.phase-3-hub.phase-hub .site-header .container { max-width: 1420px !important; } } /* The compact template's action column is narrower than the five-column one, and at the full type scale "Start tutorial" needs ~140px - it was overflowing its cell on tablet and small-laptop widths. Scale the controls down to match the paired tiles. */ @media (max-width: 1199px) { .cl-ledger .cl-button, .cl-sys-ledger .cl-button, .cl-phase-ledger .cl-button { font-size: 0.66rem; padding: 7px 8px; text-align: center; } .cl-ledger .cl-more, .cl-sys-ledger .cl-more, .cl-phase-ledger .cl-more { font-size: 0.66rem; } } /* ── Compact hub headers below the paired breakpoint ──────────────────────────── On an iPad the module head and the section head stack to ~441px before the first tile is reached (768px wide: 248px head + 193px section head), so you scroll to a module and see nothing but headings - "barely see the top of the tile". The module head's chips and long description are the cheapest ~100px to reclaim: both are restated immediately below, as per-tile tag chips and the section summary. Everything else is tightened rather than removed, and the outcomes panel is kept - it is the one part not repeated anywhere else. Selectors carry a section id on purpose. The hub styles these elements with `.cell-biology-hub #phase1-modules ...`, so a class-only override loses on the id column however many classes it has. */ @media (max-width: 1199px) { body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-mod > .cb-mod-head { padding: 12px 14px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-mod > .cb-mod-head .cb-mod-thumb img { height: 56px !important; width: 76px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-mod-desc { display: -webkit-box !important; font-size: 0.76rem !important; line-height: 1.4 !important; margin: 2px 0 0 !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } /* Restated as per-tile tag chips a few hundred pixels further down. */ body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-mod > .cb-mod-head .cb-chips { display: none !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-mod-audio { font-size: 0.72rem !important; margin-top: 6px !important; padding: 6px 12px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .cb-section > .cb-section-title { gap: 10px !important; padding: 12px 14px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .hub-section-main > :is(h3, strong, .cb-section-name) { font-size: 1rem !important; line-height: 1.2 !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) .hub-section-main > p { display: -webkit-box !important; font-size: 0.78rem !important; line-height: 1.4 !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) :is(.hub-section-outcomes, .cl-section-outcomes) { padding: 10px 12px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) :is(.hub-section-outcomes, .cl-section-outcomes) h4 { font-size: 0.62rem !important; margin-bottom: 5px !important; } body.systems-hub.cell-biology-hub :is(#phase1-modules, #phase1-fundamentals, #memorization-drills) :is(.hub-section-outcomes, .cl-section-outcomes) li { font-size: 0.7rem !important; line-height: 1.32 !important; } } /* base.css:64 gives body.systems-hub main.container a clamp(8px, 0.6vw, 12px) gutter. 0.6vw is tuned for a wide desktop where the container runs full-bleed; on any tablet it resolves to the 8px floor, so tiles sit 8px off the screen edge and the text reads as though it runs off the page. Give the narrower devices a real gutter. */ @media (max-width: 1199px) { body.systems-hub main.container { padding-left: clamp(14px, 2.4vw, 24px) !important; padding-right: clamp(14px, 2.4vw, 24px) !important; } }