/* ========================================================================= Nursing School LMS — front-end design system · KMTC Brand Navy / v1.3 Apple-inspired: SF system type, hairline borders, soft layered depth, generous spacing, and subtle, tasteful motion. Scoped to .nslms-dashboard. ========================================================================= */ /* Design tokens live on :root so elements moved out of .nslms-dashboard (e.g. modals appended to ) still inherit them. */ :root { --nslms-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --nslms-ink: #1d1d1f; --nslms-sub: #6e6e73; --nslms-faint: #86868b; --nslms-hair: #d2d2d7; --nslms-hair2: #e8e8ed; --nslms-bg: #f5f5f7; --nslms-surface: #ffffff; /* Re-skinned to KMTC brand navy (var names kept for stability). */ --nslms-teal: #15396f; --nslms-teal-d: #1d4a8f; --nslms-teal-700: #0f2a52; --nslms-teal-50: #eef3fb; --nslms-teal-100:#dbe6f5; --r-xl: 24px; --r-lg: 18px; --r: 14px; --r-sm: 10px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05); --sh: 0 4px 16px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04); --sh-lg: 0 24px 60px -16px rgba(0,0,0,.18), 0 8px 24px -12px rgba(0,0,0,.10); --ease: cubic-bezier(.4, 0, .2, 1); --spring: cubic-bezier(.34, 1.4, .5, 1); } .nslms-dashboard { max-width: 1100px; margin: 0 auto; color: var(--nslms-ink); font-family: var(--nslms-font); line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .nslms-dashboard * { box-sizing: border-box; } /* Left-align the theme's page title on dashboard pages and widen its box to match the app-shell column (1180px) so its left edge lines up with the "Welcome, …" heading below it. Block themes constrain the title to the narrower content width and centre it; we override that, scoped to our pages only via the body class. (Dashboard pages always use .nslms-app = 1180px.) */ body.nslms-dashboard-page .wp-block-post-title, body.nslms-dashboard-page .wp-block-post-title.has-text-align-center, body.nslms-dashboard-page h1.entry-title { max-width: 1180px; margin-left: auto; margin-right: auto; text-align: left; } /* ---- Entrance reveal (driven by JS adding .is-visible) ---------------- */ .nslms-reveal { opacity: 0; transform: translateY(18px); } .nslms-reveal.is-visible { opacity: 1; transform: none; transition: opacity .65s var(--ease), transform .65s var(--ease); } /* ---- Notices ---------------------------------------------------------- */ .nslms-notice { padding: 14px 18px; border-radius: var(--r); margin-bottom: 24px; font-weight: 590; font-size: .95rem; box-shadow: var(--sh-sm); } .nslms-notice--success { background: #ecfdf5; color: #0b6b50; border: 1px solid #a7f3d0; } .nslms-notice--error { background: #fef2f2; color: #b42318; border: 1px solid #fecaca; } /* ---- Banner / hero ---------------------------------------------------- */ .nslms-banner { position: relative; overflow: hidden; background: radial-gradient(130% 130% at 0% 0%, #1d4a8f 0%, #15396f 46%, #0f2a52 100%); color: #fff; padding: 38px 40px; border-radius: var(--r-xl); margin-bottom: 34px; box-shadow: 0 22px 48px -20px rgba(21,57,111,.55); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .nslms-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%); pointer-events: none; } .nslms-banner__title { margin: 0 0 6px; font-size: clamp(1.7rem, 1.1rem + 2vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1.1; } .nslms-banner__cohort { margin: 0; font-size: 1.05rem; opacity: .92; font-weight: 450; } .nslms-banner .nslms-label { opacity: .75; margin-right: 4px; } /* ---- Sections / headings --------------------------------------------- */ .nslms-section { margin-bottom: 44px; } .nslms-section__title { font-size: 1.35rem; font-weight: 680; letter-spacing: -0.02em; color: var(--nslms-ink); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--nslms-hair2); } .nslms-subhead { font-size: .8rem; font-weight: 680; text-transform: uppercase; letter-spacing: .06em; color: var(--nslms-faint); margin: 26px 0 14px; } .nslms-empty { color: var(--nslms-sub); background: var(--nslms-bg); padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--nslms-hair2); font-size: .95rem; } .nslms-muted { color: var(--nslms-faint); } /* ---- Summary stat strip (student) ------------------------------------ */ .nslms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; margin-bottom: 36px; } /* ---- Stat tiles ------------------------------------------------------- */ .nslms-stat { background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r); padding: 22px 18px; text-align: center; box-shadow: var(--sh-sm); transition: transform .35s var(--spring), box-shadow .35s var(--ease); } .nslms-stat:hover { transform: translateY(-3px); box-shadow: var(--sh); } /* Stat cards are clickable links to their section; keep block layout + no underline. */ a.nslms-stat { display: block !important; text-decoration: none; color: inherit; cursor: pointer; } a.nslms-stat:focus-visible { outline: 2px solid var(--nslms-teal); outline-offset: 2px; } .nslms-stat__num { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--nslms-teal-d); line-height: 1; font-variant-numeric: tabular-nums; } .nslms-stat__label { display: block; margin-top: 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nslms-faint); font-weight: 600; } /* ---- Cards (lessons) -------------------------------------------------- */ .nslms-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; } .nslms-card { border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); background: var(--nslms-surface); box-shadow: var(--sh-sm); display: flex; flex-direction: column; overflow: hidden; transition: transform .4s var(--spring), box-shadow .4s var(--ease); } .nslms-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); } .nslms-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 16px; } .nslms-card__title { margin: 0; font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em; color: var(--nslms-ink); line-height: 1.25; } .nslms-card__body { padding: 0 22px 18px; flex: 1; font-size: .95rem; color: var(--nslms-sub); } .nslms-card__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); } .nslms-card__foot { padding: 18px 22px; border-top: 1px solid var(--nslms-hair2); background: #fbfbfd; } .nslms-video { margin: 14px 0; } .nslms-video iframe { max-width: 100%; border-radius: var(--r-sm); } .nslms-grade { margin-top: 14px; color: var(--nslms-ink); } /* ---- Badges ----------------------------------------------------------- */ .nslms-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill); font-size: .73rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; background: #f0f0f3; color: #515154; } .nslms-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; } .nslms-badge--not_started { background: #f0f0f3; color: #6e6e73; } .nslms-badge--in_progress { background: #fff4e5; color: #ad6800; } .nslms-badge--submitted { background: #e8f1ff; color: #1f5fc4; } .nslms-badge--graded { background: #e3f9f1; color: #0b6b50; } .nslms-badge--completed { background: #e3f9f1; color: #0b6b50; } .nslms-badge--competent { background: #e3f9f1; color: #0b6b50; } .nslms-badge--not_competent { background: #fdeaea; color: #c0392b; } .nslms-badge--not_passed { background: #fdeaea; color: #c0392b; } .nslms-badge--pending { background: #f0f0f3; color: #6e6e73; } /* ---- Buttons ---------------------------------------------------------- */ .nslms-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--nslms-teal); color: #fff; border: none; padding: 11px 22px; border-radius: var(--r-pill); font-family: inherit; font-weight: 600; font-size: .92rem; letter-spacing: -0.01em; cursor: pointer; transition: background .25s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease); box-shadow: 0 1px 2px rgba(21,57,111,.25); } .nslms-btn:hover { background: var(--nslms-teal-d); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(21,57,111,.5); } .nslms-btn:active { transform: translateY(0) scale(.98); } .nslms-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(21,57,111,.3); } /* ---- Inputs ----------------------------------------------------------- */ .nslms-input { width: 96px; padding: 8px 11px; border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: var(--nslms-surface); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .nslms-input:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.16); } /* ---- Upload form ------------------------------------------------------ */ /* Sits below the completion action in the card footer; a hairline divider and its own vertical rhythm keep the file picker, pledge and button uncramped. */ .nslms-upload-form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--nslms-hair2); } .nslms-file-label { display: block; width: 100%; font-size: .85rem; font-weight: 600; color: var(--nslms-ink); margin: 0; } .nslms-file-label input[type="file"] { display: block; margin-top: 10px; font-weight: 400; font-size: .85rem; width: 100%; color: var(--nslms-sub); } .nslms-file-label input[type="file"]::file-selector-button { border: 1px solid var(--nslms-hair); background: #fff; color: var(--nslms-teal-d); padding: 7px 14px; border-radius: var(--r-pill); font-family: inherit; font-weight: 600; cursor: pointer; margin-right: 12px; transition: background .2s var(--ease), border-color .2s var(--ease); } .nslms-file-label input[type="file"]::file-selector-button:hover { background: var(--nslms-teal-50); border-color: var(--nslms-teal); } .nslms-submitted { font-size: .85rem; margin: 0; color: #0b6b50; } .nslms-submitted a, .nslms-card a, .nslms-clinical-table a, .nslms-grid-table a { color: var(--nslms-teal-d); text-decoration: none; font-weight: 600; } .nslms-submitted a:hover, .nslms-card a:hover { text-decoration: underline; } /* ---- Clinical tracker table (student) -------------------------------- */ .nslms-clinical-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .nslms-clinical-table th, .nslms-clinical-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--nslms-hair2); } .nslms-clinical-table th { background: #fbfbfd; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nslms-faint); font-weight: 600; } .nslms-clinical-table tr:last-child td { border-bottom: none; } .nslms-clinical-table tbody tr { transition: background .2s var(--ease); } .nslms-clinical-table tbody tr:hover { background: #fbfcfd; } /* ========================================================================= Instructor portal ========================================================================= */ .nslms-cohort { background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-xl); box-shadow: var(--sh); padding: 28px 30px; margin-bottom: 30px; } .nslms-cohort__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .nslms-cohort__title { margin: 0; font-size: 1.45rem; font-weight: 680; letter-spacing: -0.02em; color: var(--nslms-ink); } .nslms-pill { display: inline-block; background: var(--nslms-teal-50); color: var(--nslms-teal-d); border: 1px solid var(--nslms-teal-100); padding: 6px 14px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; } .nslms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; } .nslms-stats .nslms-stat { background: var(--nslms-bg); box-shadow: none; } .nslms-stats .nslms-stat:hover { box-shadow: var(--sh-sm); } /* ---- Collapsible panels ---------------------------------------------- */ .nslms-panel { border: 1px solid var(--nslms-hair2); border-radius: var(--r); margin-bottom: 14px; overflow: hidden; background: var(--nslms-surface); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); } .nslms-panel[open] { box-shadow: var(--sh); border-color: var(--nslms-hair); } .nslms-panel__summary { list-style: none; cursor: pointer; padding: 17px 20px; font-weight: 620; letter-spacing: -0.01em; color: var(--nslms-ink); display: flex; align-items: center; justify-content: space-between; transition: background .2s var(--ease); } .nslms-panel__summary:hover { background: #fbfbfd; } .nslms-panel__summary::-webkit-details-marker { display: none; } .nslms-chevron { width: 9px; height: 9px; border-right: 2px solid var(--nslms-faint); border-bottom: 2px solid var(--nslms-faint); transform: rotate(45deg); transition: transform .3s var(--spring); flex: none; } .nslms-panel[open] .nslms-chevron { transform: rotate(-135deg); } .nslms-panel__body { padding: 4px 20px 18px; animation: nslms-fade-in .35s var(--ease); } .nslms-panel__actions { margin-top: 16px; } @keyframes nslms-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---- Grid (grading) tables ------------------------------------------- */ .nslms-grid-table { width: 100%; border-collapse: separate; border-spacing: 0; } .nslms-grid-table th, .nslms-grid-table td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--nslms-hair2); font-size: .92rem; } .nslms-grid-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nslms-faint); font-weight: 600; } .nslms-grid-table tbody tr { transition: background .2s var(--ease); } .nslms-grid-table tbody tr:hover { background: #fbfcfd; } .nslms-grid-table tr:last-child td { border-bottom: none; } /* ---- Segmented competency control ------------------------------------ */ .nslms-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #f0f0f3; padding: 4px; border-radius: var(--r-pill); } .nslms-seg { position: relative; border-radius: var(--r-pill); padding: 6px 14px; font-size: .8rem; font-weight: 600; color: var(--nslms-sub); cursor: pointer; user-select: none; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } .nslms-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .nslms-seg:hover { color: var(--nslms-ink); } .nslms-seg--pass:has(input:checked) { background: #fff; color: #0b6b50; box-shadow: var(--sh-sm); } .nslms-seg--fail:has(input:checked) { background: #fff; color: #c0392b; box-shadow: var(--sh-sm); } .nslms-seg--pending:has(input:checked) { background: #fff; color: #515154; box-shadow: var(--sh-sm); } .nslms-seg:focus-within { box-shadow: 0 0 0 4px rgba(21,57,111,.22); } /* ---- Error fallback --------------------------------------------------- */ .nslms-error { background: #fef2f2; color: #b42318; padding: 20px; border-radius: var(--r); } /* ---- Responsive: stacked tables on narrow screens -------------------- */ @media (max-width: 640px) { .nslms-banner { padding: 28px 24px; } .nslms-cohort { padding: 22px 18px; } .nslms-stats { grid-template-columns: 1fr; } .nslms-grid-table thead { display: none; } .nslms-grid-table, .nslms-grid-table tbody, .nslms-grid-table tr, .nslms-grid-table td { display: block; width: 100%; } .nslms-grid-table tr { border: 1px solid var(--nslms-hair2); border-radius: var(--r); margin-bottom: 12px; padding: 8px 12px; } .nslms-grid-table td { border: none; padding: 8px 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .nslms-grid-table td::before { content: attr(data-label); font-weight: 600; color: var(--nslms-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; } } /* ========================================================================= Preview / impersonation / integrity / modal ========================================================================= */ /* Honesty pledge checkbox */ .nslms-affirm { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; font-size: .85rem; color: var(--nslms-sub); line-height: 1.4; } .nslms-affirm input { margin-top: 2px; accent-color: var(--nslms-teal); width: 16px; height: 16px; flex: none; } /* Inside the upload form the column gap supplies the spacing. */ .nslms-upload-form .nslms-affirm { margin: 0; } .nslms-affirm--modal { font-size: .9rem; color: var(--nslms-ink); margin: 18px 0; } /* Graded-and-locked note */ .nslms-locked { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--nslms-faint); background: var(--nslms-bg); border: 1px solid var(--nslms-hair2); padding: 10px 14px; border-radius: var(--r-sm); } .nslms-lock-icon { width: 11px; height: 9px; border: 2px solid currentColor; border-radius: 2px; position: relative; flex: none; margin-top: 1px; } .nslms-lock-icon::before { content: ""; position: absolute; left: 50%; top: -6px; width: 7px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; transform: translateX(-50%); } .nslms-foot-note { margin: 0; font-size: .82rem; font-style: italic; } /* Ghost button variant */ .nslms-btn--ghost { background: transparent; color: var(--nslms-ink); box-shadow: inset 0 0 0 1px var(--nslms-hair); } .nslms-btn--ghost:hover { background: rgba(0,0,0,.04); color: var(--nslms-ink); box-shadow: inset 0 0 0 1px var(--nslms-sub); } /* Staff preview bar */ .nslms-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fffaf0; border: 1px solid #f4d58a; border-radius: var(--r); padding: 12px 16px; margin-bottom: 22px; } .nslms-preview-bar__info { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: #7a5a00; } .nslms-preview-bar__tag { background: #b7791f; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); } .nslms-preview-bar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nslms-preview-bar select { padding: 7px 10px; border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); font-family: inherit; background: #fff; } /* Student-picker cards */ .nslms-pick-card { text-decoration: none; color: inherit; } .nslms-pick-card:hover { text-decoration: none; } /* Duplicate flag + audit line (instructor portal) */ .nslms-flag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill); background: #fdeaea; color: #c0392b; font-size: .7rem; font-weight: 700; cursor: help; } .nslms-audit { display: block; margin-top: 4px; font-size: .72rem; color: var(--nslms-faint); } /* Impersonation banner (fixed) */ .nslms-imp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; background: #1d1d1f; color: #fff; padding: 12px 20px; font-size: .9rem; box-shadow: 0 -8px 30px rgba(0,0,0,.25); animation: nslms-slide-up .4s var(--ease); } .nslms-imp-bar__text { display: inline-flex; align-items: center; gap: 9px; } .nslms-imp-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 0 rgba(255,69,58,.6); animation: nslms-pulse 1.8s infinite; } .nslms-imp-bar__btn { background: #fff; color: #1d1d1f; border: none; border-radius: var(--r-pill); padding: 8px 18px; font-family: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: transform .15s var(--ease); } .nslms-imp-bar__btn:hover { transform: translateY(-1px); } @keyframes nslms-slide-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes nslms-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } } /* Modal */ .nslms-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .nslms-modal[hidden] { display: none; } .nslms-modal__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: saturate(120%) blur(3px); animation: nslms-fade .25s var(--ease); } .nslms-modal__panel { position: relative; background: #fff; border-radius: var(--r-lg); max-width: 460px; width: 100%; padding: 28px 28px 24px; box-shadow: var(--sh-lg); animation: nslms-pop .3s var(--spring); } .nslms-modal__title { margin: 0 0 12px; font-size: 1.25rem; font-weight: 680; letter-spacing: -0.02em; color: var(--nslms-ink); } .nslms-modal__text { margin: 0; font-size: .95rem; color: var(--nslms-sub); line-height: 1.5; } .nslms-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } @keyframes nslms-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nslms-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } /* ---- Lesson course material ------------------------------------------ */ .nslms-materials { margin: 14px 0 4px; padding: 12px 14px; background: var(--nslms-bg); border: 1px solid var(--nslms-hair2); border-radius: var(--r-sm); } .nslms-materials__title { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nslms-faint); margin-bottom: 8px; } .nslms-materials ul { margin: 0; padding: 0; list-style: none; } .nslms-materials li { margin: 4px 0; } .nslms-materials li a { font-weight: 600; } .nslms-materials li a::before { content: "\2193 "; color: var(--nslms-faint); } /* ---- Recommended products -------------------------------------------- */ .nslms-product-card { overflow: hidden; } .nslms-product-card__img { height: 150px; background-size: cover; background-position: center; background-color: var(--nslms-bg); } .nslms-price { font-weight: 700; color: var(--nslms-teal-d); white-space: nowrap; background: var(--nslms-teal-50); border: 1px solid var(--nslms-teal-100); padding: 2px 10px; border-radius: var(--r-pill); font-size: .85rem; } .nslms-vendor { color: var(--nslms-faint); font-size: .85rem; margin: 8px 0 0; } /* Stack the completion action and the submission form vertically with room to breathe, rather than cramming them side by side. */ .nslms-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .nslms-affiliate-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #92400e; background: #fef3c7; padding: 3px 9px; border-radius: var(--r-pill); } .nslms-disclosure { margin-top: 14px; font-size: .8rem; font-style: italic; color: var(--nslms-faint); } /* ---- Notifications ---------------------------------------------------- */ .nslms-note-badge { display: inline-block; margin-left: 8px; vertical-align: middle; background: #ff453a; color: #fff; font-size: .7rem; font-weight: 700; min-width: 20px; text-align: center; padding: 2px 7px; border-radius: 999px; } .nslms-note-list { list-style: none; margin: 0; padding: 0; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .nslms-note { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--nslms-hair2); align-items: flex-start; } .nslms-note:last-child { border-bottom: none; } .nslms-note__dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 6px; flex: none; } .nslms-note.is-unread { background: var(--nslms-teal-50); } .nslms-note.is-unread .nslms-note__dot { background: var(--nslms-teal); } .nslms-note__body { font-size: .92rem; } .nslms-note__body a { color: var(--nslms-ink); font-weight: 600; } .nslms-note__body time { display: block; margin-top: 3px; font-size: .75rem; color: var(--nslms-faint); } /* ---- Message thread --------------------------------------------------- */ .nslms-thread { background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; } .nslms-thread__log { padding: 18px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .nslms-msg { max-width: 78%; align-self: flex-start; } .nslms-msg--mine { align-self: flex-end; text-align: right; } .nslms-msg__bubble { display: inline-block; text-align: left; background: #f0f0f3; color: var(--nslms-ink); padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .nslms-msg--mine .nslms-msg__bubble { background: var(--nslms-teal); color: #fff; } .nslms-msg__meta { font-size: .72rem; color: var(--nslms-faint); margin-top: 4px; } .nslms-thread__form { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--nslms-hair2); background: #fbfbfd; } .nslms-thread__form textarea { flex: 1; border: 1px solid var(--nslms-hair); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: .92rem; resize: vertical; min-height: 42px; } .nslms-thread__form textarea:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.16); } .nslms-thread__form .nslms-btn { align-self: flex-end; } /* ---- Video: play trigger + modal ------------------------------------- */ .nslms-video-trigger { display: flex; align-items: center; gap: 12px; width: 100%; border: 1px solid var(--nslms-hair2); border-radius: var(--r); background: linear-gradient(135deg, #0f172a, #1f2937); color: #fff; padding: 14px 16px; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 600; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .nslms-video-trigger:hover { transform: translateY(-1px); box-shadow: var(--sh); } .nslms-video-trigger__play { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--nslms-teal); position: relative; } .nslms-video-trigger__play::after { content: ""; position: absolute; left: 53%; top: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; } .nslms-video-trigger:hover .nslms-video-trigger__play { background: var(--nslms-teal-d); } .nslms-video-link a { font-weight: 600; } .nslms-video-modal { padding: 24px; } .nslms-video-dialog { position: relative; width: 100%; max-width: 900px; animation: nslms-pop .3s var(--spring); } .nslms-video-dialog__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .nslms-video-ext { color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; opacity: .92; } .nslms-video-ext:hover { color: #fff; text-decoration: underline; } .nslms-video-close { background: rgba(255,255,255,.14); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s var(--ease); } .nslms-video-close:hover { background: rgba(255,255,255,.28); } .nslms-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); } .nslms-video-frame iframe, .nslms-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Fallback for browsers without aspect-ratio. */ @supports not (aspect-ratio: 1) { .nslms-video-frame { height: 0; padding-bottom: 56.25%; } } /* ---- Progress bar ----------------------------------------------------- */ .nslms-progress { background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: 18px 22px; margin-bottom: 34px; } .nslms-progress__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .nslms-progress__label { font-weight: 700; color: var(--nslms-ink); letter-spacing: -0.01em; } .nslms-progress__pct { font-weight: 800; color: var(--nslms-teal-d); font-size: 1.15rem; font-variant-numeric: tabular-nums; } .nslms-progress__track { height: 10px; background: #eef0f3; border-radius: 999px; overflow: hidden; } .nslms-progress__fill { height: 100%; background: linear-gradient(90deg, var(--nslms-teal), var(--nslms-teal-d)); border-radius: 999px; transition: width .6s var(--ease); } .nslms-progress__sub { display: block; margin-top: 8px; font-size: .82rem; color: var(--nslms-faint); } /* ---- Due date badge --------------------------------------------------- */ .nslms-due { margin: 0 18px; padding: 6px 12px; border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; } .nslms-due--upcoming { background: #fff7ed; color: #9a3412; } .nslms-due--overdue { background: #fef2f2; color: #b42318; } /* ---- Completion ------------------------------------------------------- */ .nslms-complete-form { margin: 0; } .nslms-complete-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--nslms-teal-d); border: 1px solid var(--nslms-teal); border-radius: var(--r-pill); padding: 8px 16px; font-family: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .2s var(--ease); } .nslms-complete-btn:hover { background: var(--nslms-teal-50); } .nslms-complete-btn.is-done { background: var(--nslms-teal); color: #fff; border-color: var(--nslms-teal); } .nslms-complete-flag { display: inline-flex; align-items: center; gap: 8px; color: #0b6b50; font-weight: 600; font-size: .85rem; margin: 0; } .nslms-check { width: 16px; height: 16px; border-radius: 50%; background: currentColor; position: relative; flex: none; } .nslms-complete-btn .nslms-check { background: var(--nslms-teal); } .nslms-complete-btn.is-done .nslms-check, .nslms-complete-flag .nslms-check { background: currentColor; } .nslms-check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .nslms-card.is-complete { border-color: #a7f3d0; } /* ---- Quiz ------------------------------------------------------------- */ .nslms-quiz { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--nslms-hair2); } .nslms-quiz__score { font-weight: 700; color: var(--nslms-teal-d); display: flex; align-items: center; gap: 10px; } .nslms-quiz__retake { background: none; border: none; color: var(--nslms-teal-d); font-weight: 600; cursor: pointer; text-decoration: underline; font-size: .85rem; } .nslms-quiz-panel { max-width: 560px; max-height: 80vh; overflow-y: auto; } .nslms-quiz-q { border: 1px solid var(--nslms-hair2); border-radius: var(--r); padding: 14px 16px; margin: 0 0 14px; } .nslms-quiz-q legend { font-weight: 700; color: var(--nslms-ink); padding: 0 4px; } .nslms-quiz-opt { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: .95rem; cursor: pointer; } .nslms-quiz-opt input { accent-color: var(--nslms-teal); } /* ---- Announcement form (instructor) ----------------------------------- */ .nslms-announce { border-radius: var(--r-xl); } .nslms-announce .nslms-cohort__head { margin-bottom: 4px; } .nslms-announce-form { display: flex; flex-direction: column; gap: 6px; } /* Field labels: small, uppercase, intentional hierarchy. */ .nslms-announce-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nslms-faint); margin: 12px 0 0; } .nslms-announce-label:first-of-type { margin-top: 0; } .nslms-announce-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--nslms-faint); } /* All inputs share one consistent, generously rounded style. */ .nslms-announce-field { width: 100%; box-sizing: border-box; min-width: 0; margin: 4px 0 0; border: 1px solid var(--nslms-hair); border-radius: var(--r); padding: 12px 14px; font-family: inherit; font-size: 15px; line-height: 1.4; color: var(--nslms-ink); background: #fff; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .nslms-announce-field::placeholder { color: var(--nslms-faint); } .nslms-announce-field:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.14); } .nslms-announce-textarea { resize: vertical; min-height: 120px; } /* Selects: native arrow replaced with a soft chevron so they match the inputs. */ .nslms-announce-select, .nslms-announce-expsel { -webkit-appearance: none; appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; text-overflow: ellipsis; } /* Footer toolbar: options on the left, the post button on the right. */ .nslms-announce-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--nslms-hair2); } .nslms-announce-foot__opts { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; } .nslms-announce-pin { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nslms-sub); cursor: pointer; } .nslms-announce-pin input { width: 16px; height: 16px; accent-color: var(--nslms-teal); cursor: pointer; } .nslms-announce-exp { display: inline-flex; align-items: center; gap: 8px; } .nslms-announce-exp__lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--nslms-faint); } .nslms-announce-expsel { margin: 0; border: 1px solid var(--nslms-hair); border-radius: var(--r-pill); padding: 7px 34px 7px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--nslms-ink); background-color: var(--nslms-bg); background-position: right 12px center; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .nslms-announce-expsel:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.14); } .nslms-announce-expdate { border: 1px solid var(--nslms-hair); border-radius: var(--r-pill); padding: 7px 14px; font-family: inherit; font-size: 13px; color: var(--nslms-ink); background: var(--nslms-bg); } .nslms-announce-post { border-radius: var(--r-pill); padding: 11px 24px; font-size: 14px; white-space: nowrap; } @media (max-width: 560px) { .nslms-announce-foot { align-items: stretch; } .nslms-announce-post { width: 100%; } } /* ---- Banner extras ---------------------------------------------------- */ .nslms-banner__sep { opacity: .5; margin: 0 8px; } .nslms-banner__chip { align-self: flex-start; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 4px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } /* ---- Journey roadmap -------------------------------------------------- */ .nslms-journey { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } .nslms-journey__step { position: relative; text-align: center; padding: 0 8px; display: flex; flex-direction: column; align-items: center; } /* Connector line */ .nslms-journey__step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--nslms-hair2); z-index: 0; } .nslms-journey__step:first-child::before { display: none; } .nslms-journey__step.is-done::before { background: var(--nslms-teal); } .nslms-journey__node { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 3px solid var(--nslms-hair); color: var(--nslms-faint); font-weight: 700; font-size: .9rem; margin-bottom: 8px; } .nslms-journey__step.is-done .nslms-journey__node { background: var(--nslms-teal); border-color: var(--nslms-teal); color: #fff; } .nslms-journey__step.is-active .nslms-journey__node { border-color: var(--nslms-teal); color: var(--nslms-teal-d); box-shadow: 0 0 0 4px rgba(21,57,111,.18); } .nslms-journey__label { font-weight: 700; font-size: .9rem; color: var(--nslms-ink); } .nslms-journey__sub { font-size: .75rem; color: var(--nslms-faint); margin-top: 2px; } .nslms-cert-ready { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, var(--nslms-teal-50), #fff); border: 1px solid var(--nslms-teal-100); border-radius: var(--r); padding: 16px 20px; } .nslms-cert-ready strong { display: block; color: var(--nslms-ink); } .nslms-cert-ready span { font-size: .9rem; color: var(--nslms-sub); } .nslms-cert-remaining { color: var(--nslms-sub); font-size: .9rem; background: var(--nslms-bg); border: 1px solid var(--nslms-hair2); border-radius: var(--r-sm); padding: 12px 16px; margin: 0; } @media (max-width: 600px) { .nslms-journey { grid-template-columns: 1fr 1fr; gap: 18px 0; } .nslms-journey__step:nth-child(odd)::before { display: none; } } /* ---- My Grades -------------------------------------------------------- */ .nslms-mygrades__overall { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, var(--nslms-teal-50), #fff); border: 1px solid var(--nslms-teal-100); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 16px; } .nslms-mygrades__pct { font-size: 1.9rem; font-weight: 800; color: var(--nslms-teal-d); letter-spacing: -0.02em; } .nslms-mygrades__pct--empty { font-size: 1.15rem; font-weight: 700; color: var(--nslms-sub); } .nslms-mygrades__overall.is-empty { background: var(--nslms-bg); } .nslms-mygrades__letter { font-size: 1.1rem; font-weight: 800; color: #fff; background: var(--nslms-teal); width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } .nslms-gb-letter--a { background: #0b6b50; } .nslms-gb-letter--b { background: #1d4a8f; } .nslms-gb-letter--c { background: #b7791f; } .nslms-gb-letter--d { background: #c2680c; } .nslms-gb-letter--f { background: #c0392b; } .nslms-mygrades__caption { color: var(--nslms-faint); font-size: .85rem; margin-left: auto; } /* ---- Help & Feedback -------------------------------------------------- */ .nslms-help-search { display: flex; gap: 10px; margin-bottom: 30px; } .nslms-help-search input[type="search"] { flex: 1; border: 1px solid var(--nslms-hair); border-radius: var(--r-pill); padding: 12px 18px; font-family: inherit; font-size: .98rem; background: var(--nslms-surface); } .nslms-help-search input[type="search"]:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.16); } .nslms-prose { color: var(--nslms-sub); font-size: .95rem; line-height: 1.6; } .nslms-prose a { color: var(--nslms-teal-d); font-weight: 600; } .nslms-help-intro { color: var(--nslms-sub); margin: 0 0 16px; } .nslms-feature-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-sm); } .nslms-feature-form input[type="text"], .nslms-feature-form textarea { border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); padding: 11px 14px; font-family: inherit; font-size: .95rem; resize: vertical; } .nslms-feature-form input:focus, .nslms-feature-form textarea:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.16); } .nslms-feature-form__actions { text-align: right; } .nslms-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .nslms-feature { display: flex; align-items: center; gap: 16px; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sh-sm); } .nslms-vote-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 6px 0; border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); background: var(--nslms-surface); color: var(--nslms-sub); cursor: pointer; font-family: inherit; transition: all .2s var(--ease); } .nslms-vote-btn:hover { border-color: var(--nslms-teal); color: var(--nslms-teal-d); } .nslms-vote-btn.is-voted { background: var(--nslms-teal); border-color: var(--nslms-teal); color: #fff; } .nslms-vote-caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid currentColor; margin-bottom: 3px; } .nslms-vote-count { font-weight: 800; font-size: 1rem; line-height: 1; } .nslms-feature__body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .nslms-feature__title { font-weight: 700; color: var(--nslms-ink); } .nslms-feature__desc { font-size: .85rem; color: var(--nslms-faint); } .nslms-feature__status { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; } .nslms-fr--open { background: #f0f0f3; color: #515154; } .nslms-fr--planned { background: #e8f1ff; color: #1f5fc4; } .nslms-fr--in_progress { background: #fff4e5; color: #ad6800; } .nslms-fr--done { background: #e3f9f1; color: #0b6b50; } .nslms-fr--declined { background: #fdeaea; color: #c0392b; } .nslms-help-link { text-align: center; margin: 30px 0 0; } .nslms-help-link a { color: var(--nslms-teal-d); font-weight: 600; text-decoration: none; } .nslms-help-link a:hover { text-decoration: underline; } @media (max-width: 560px) { .nslms-feature { flex-wrap: wrap; } .nslms-feature__status { order: 3; } } /* ========================================================================= App shell — left section nav + top bar + switchable panels (v1.13) Without JS every panel is visible (a normal stacked page). JS adds `.is-enhanced`, hiding all but the active panel for instant navigation. ========================================================================= */ .nslms-app { max-width: 1180px; } /* ---- Top bar ----------------------------------------------------------- */ .nslms-app__bar { display: flex; align-items: center; gap: 16px; padding: 6px 4px 18px; margin-bottom: 18px; border-bottom: 1px solid var(--nslms-hair2); } .nslms-app__brand { display: flex; flex-direction: column; min-width: 0; } .nslms-app__hello { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--nslms-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nslms-app__sub { font-size: 13px; color: var(--nslms-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nslms-app__chip { display: inline-block; margin-left: 8px; padding: 1px 9px; font-size: 11px; font-weight: 600; border-radius: var(--r-pill); background: #fff4e5; color: #ad6800; vertical-align: middle; } /* Top-bar tools group (tour button + notifications bell). */ .nslms-app__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; } .nslms-app__tools .nslms-app__bell-wrap { margin-left: 0; } /* "Take a tour" button (mirrors the bell styling). */ .nslms-app__tour { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--nslms-hair); background: var(--nslms-surface); color: var(--nslms-ink); border-radius: var(--r-pill); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--spring), box-shadow .2s var(--ease), color .2s var(--ease); } .nslms-app__tour:hover { background: var(--nslms-teal-50); border-color: var(--nslms-teal); color: var(--nslms-teal-d); transform: translateY(-1px); box-shadow: var(--sh-sm); } /* Notifications bell + popover */ .nslms-app__bell-wrap { position: relative; margin-left: auto; flex: none; } .nslms-app__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--nslms-hair); background: var(--nslms-surface); color: var(--nslms-ink); border-radius: var(--r-pill); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--spring), box-shadow .2s var(--ease); } .nslms-app__bell:hover { background: var(--nslms-bg); transform: translateY(-1px); box-shadow: var(--sh-sm); } .nslms-app__bell-wrap.is-open .nslms-app__bell { background: var(--nslms-teal-50); border-color: var(--nslms-teal); color: var(--nslms-teal-d); } .nslms-app__badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #e0245e; border: 2px solid var(--nslms-surface); border-radius: var(--r-pill); } .nslms-notif-pop { margin-top: 12px; } .nslms-app.is-enhanced .nslms-notif-pop { position: absolute; top: 100%; right: 0; z-index: 60; width: min(380px, 92vw); margin-top: 10px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--nslms-surface); border: 1px solid var(--nslms-hair); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 6px 16px 12px; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .18s var(--ease), transform .2s var(--spring); } .nslms-app.is-enhanced .nslms-app__bell-wrap.is-open .nslms-notif-pop { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* The notifications panel renders its own section chrome; tighten it inside the popover. */ .nslms-notif-pop .nslms-notes { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; } /* ---- Body: sidebar + main --------------------------------------------- */ .nslms-app__body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; } .nslms-app__side { position: sticky; top: 24px; } .nslms-nav { display: flex; flex-direction: column; gap: 2px; } .nslms-nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r); color: var(--nslms-sub); font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: -0.01em; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--spring); } .nslms-nav__item:hover { background: var(--nslms-bg); color: var(--nslms-ink); } .nslms-nav__icon { flex: none; opacity: .7; transition: opacity .18s var(--ease); } .nslms-nav__item:hover .nslms-nav__icon { opacity: 1; } .nslms-nav__item.is-active { background: var(--nslms-teal-50); color: var(--nslms-teal-d); font-weight: 600; } .nslms-nav__item.is-active .nslms-nav__icon { opacity: 1; color: var(--nslms-teal-d); } /* Help + Sign out: a divided footer group, each link on its own line. */ .nslms-nav__help { display: flex; align-items: center; margin: 18px 0 0; padding: 14px 14px 0; border-top: 1px solid var(--nslms-hair2); font-size: 13px; font-weight: 600; color: var(--nslms-teal-d); text-decoration: none; } .nslms-nav__help:hover { text-decoration: underline; } /* Sign out: subtle, sits at the bottom of the sidebar on its own line. */ .nslms-nav__signout { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--nslms-sub); text-decoration: none; transition: color .18s var(--ease); } .nslms-nav__signout svg { opacity: .8; } .nslms-nav__signout:hover { color: #c0392b; } /* Reserve a consistent content height so the page footer does not jump as the user switches between sections of different lengths. */ .nslms-app__main { min-width: 0; min-height: 68vh; } .nslms-app__main > .nslms-panel-view + .nslms-panel-view { margin-top: 14px; } /* Progressive enhancement: hide inactive panels only once JS is present. */ .nslms-app.is-enhanced .nslms-panel-view { display: none; } .nslms-app.is-enhanced .nslms-panel-view.is-active { display: block; } .nslms-panel-view > .nslms-section__title:first-child { margin-top: 0; } /* ---- Responsive: nav becomes a horizontal tab strip ------------------- */ @media (max-width: 860px) { .nslms-app__body { display: block; } .nslms-app__side { position: static; margin-bottom: 18px; } .nslms-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nslms-nav::-webkit-scrollbar { display: none; } .nslms-nav__item { flex: 0 0 auto; white-space: nowrap; padding: 9px 14px; border: 1px solid var(--nslms-hair2); } .nslms-nav__item.is-active { border-color: var(--nslms-teal); } .nslms-nav__help { display: none; } } @media (max-width: 560px) { .nslms-app__hello { font-size: 17px; } .nslms-app__bar { gap: 10px; } .nslms-nav__item span { font-size: 14px; } } /* ---- Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nslms-dashboard * { animation: none !important; transition: none !important; } .nslms-reveal { opacity: 1 !important; transform: none !important; } } /* ======================================================================= * Billing & payment status (Phase A) * ===================================================================== */ /* Balance-due bar near the top of the dashboard (no left accent border). */ .nslms-billbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; background: #fff6f4; border: 1px solid #f3c8bf; } .nslms-billbar__main { display: flex; align-items: center; gap: 14px; } .nslms-billbar__amt { font-size: 24px; font-weight: 800; color: #b3122a; white-space: nowrap; } .nslms-billbar__txt { display: flex; flex-direction: column; line-height: 1.35; font-size: 14px; color: #5a4744; } .nslms-billbar__txt strong { color: #8a1422; } .nslms-billbar__btn { white-space: nowrap; } /* Payment status badges (shared look with admin). */ .nslms-pay-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; } .nslms-pay-badge--paid { background: #e7f6ec; color: #1f7a44; } .nslms-pay-badge--partial { background: #fef3da; color: #9a6a09; } .nslms-pay-badge--unpaid { background: #fdeaea; color: #b3122a; } .nslms-pay-badge--none { background: #eef1f5; color: #5a6473; } /* "Final" tag on payment-gated lessons/competencies. */ .nslms-final-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: #15396f; color: #fff; vertical-align: middle; } /* Lock panel inside a locked final card. */ .nslms-card.is-paylocked { opacity: .97; } .nslms-paylock { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 8px; padding: 12px 14px; border-radius: 10px; background: #f5f8fd; border: 1px solid #d8e2f1; } .nslms-paylock__icon { font-size: 18px; line-height: 1.3; } .nslms-paylock strong { display: block; color: #15396f; } .nslms-paylock span { display: block; font-size: 13px; color: #5a6473; } .nslms-paylock__link { display: inline-block; margin-top: 4px; font-weight: 600; color: #15396f; text-decoration: none; } .nslms-paylock__link:hover { text-decoration: underline; } /* Certificate "balance due" variant of the cert-ready band. */ .nslms-cert-ready--due { background: #fff6f4; border-color: #f3c8bf; } /* Billing panel. */ .nslms-bill__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; } .nslms-bill__card { padding: 18px; border-radius: 12px; background: #f6f9fd; border: 1px solid #e3eaf3; text-align: center; } .nslms-bill__card.is-due { background: #fff6f4; border-color: #f3c8bf; } .nslms-bill__card.is-clear { background: #e7f6ec; border-color: #c3e6cf; } .nslms-bill__num { display: block; font-size: 26px; font-weight: 800; color: #15396f; } .nslms-bill__card.is-due .nslms-bill__num { color: #b3122a; } .nslms-bill__label { display: block; font-size: 13px; color: #5a6473; margin-top: 4px; } .nslms-bill__status { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; } .nslms-bill__covered { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef6ef; border: 1px solid #c8e6d2; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; } .nslms-bill__covered p { margin: 0; color: #1f5a36; font-size: 14px; } .nslms-bill__cta { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: #f5f8fd; border: 1px solid #d8e2f1; } .nslms-bill__cta p { margin: 0 0 10px; color: #3a4654; } /* "Pay now" form inside the billing CTA */ .nslms-payform { margin: 0; } .nslms-payform__field { margin: 0 0 12px; } .nslms-payform__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #15396f; } .nslms-payform__input { display: inline-flex; align-items: stretch; max-width: 200px; border: 1px solid #c9d6ea; border-radius: 8px; background: #fff; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; } .nslms-payform__input:focus-within { border-color: #15396f; box-shadow: 0 0 0 3px rgba(21,57,111,.15); } .nslms-payform__cur { display: flex; align-items: center; padding: 0 10px; background: #eaf1fb; color: #15396f; font-weight: 600; font-size: 15px; } .nslms-payform__input input { width: 100%; border: none; outline: none; padding: 10px 12px; font-family: inherit; font-size: 15px; color: #1f2733; background: transparent; } .nslms-payform__hint { margin: 18px 0 0; font-size: 12.5px; color: #6a7686; } .nslms-bill__subtitle { margin: 18px 0 8px; font-size: 15px; color: #15396f; } .nslms-bill__course { margin: 0 0 14px; font-size: 15px; color: #2f3c4d; } .nslms-bill__course-tag { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: #eaf1fb; color: #15396f; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } @media (max-width: 640px) { .nslms-bill__cards { grid-template-columns: 1fr; } } /* ======================================================================= * Cohort welcome board + founder welcome (Phase B) * ===================================================================== */ /* Overview nudge to introduce yourself. */ .nslms-introbar { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(100deg, #eef4ff 0%, #f7faff 100%); border: 1px solid #d8e2f1; text-decoration: none; color: inherit; transition: box-shadow .15s ease, transform .15s ease; } .nslms-introbar:hover { box-shadow: 0 8px 22px rgba(21,57,111,.12); transform: translateY(-1px); } .nslms-introbar__wave { font-size: 22px; } .nslms-introbar__txt { display: flex; flex-direction: column; line-height: 1.4; font-size: 14px; color: #4a5566; } .nslms-introbar__txt strong { color: #15396f; } .nslms-introbar__go { margin-left: auto; font-weight: 700; color: #15396f; white-space: nowrap; } /* Founder welcome card — warm and personal. */ .nslms-welcome { display: flex; gap: 22px; margin: 0 0 24px; padding: 24px 26px; border-radius: 16px; background: linear-gradient(135deg, #fff8f1 0%, #fdfbff 55%, #f3f8ff 100%); border: 1px solid #ecdfce; box-shadow: 0 14px 40px rgba(40,30,15,.07); } .nslms-welcome__aside { flex: 0 0 116px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } .nslms-welcome__photo, .nslms-welcome__initials { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(21,57,111,.18); } .nslms-welcome__initials { display: flex; align-items: center; justify-content: center; background: #15396f; color: #fff; font-size: 28px; font-weight: 700; letter-spacing: .02em; } .nslms-welcome__name { margin-top: 8px; font-weight: 700; color: #1d2733; } .nslms-welcome__role { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #b3122a; font-weight: 700; } .nslms-welcome__body { flex: 1 1 auto; } .nslms-welcome__eyebrow { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9a7b4f; font-weight: 700; margin-bottom: 8px; } .nslms-welcome__msg { font-size: 16px; line-height: 1.7; color: #34404e; } .nslms-welcome__sign { display: block; margin-top: 12px; font-style: italic; color: #6a574a; } /* The introductions feed. */ .nslms-board__title { margin: 22px 0 12px; font-size: 17px; color: #15396f; } .nslms-board__form { margin: 0 0 18px; padding: 14px; border-radius: 12px; background: #f6f9fd; border: 1px solid #e3eaf3; } .nslms-board__form textarea { width: 100%; border: 1px solid #cdd8e6; border-radius: 10px; padding: 11px 13px; font: inherit; resize: vertical; box-sizing: border-box; } .nslms-board__formfoot { margin-top: 10px; text-align: right; } .nslms-board__feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .nslms-board__item { display: flex; gap: 12px; } .nslms-board__avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e3eaf3; color: #15396f; font-weight: 700; font-size: 14px; } .nslms-board__item.is-mine .nslms-board__avatar { background: #15396f; color: #fff; } .nslms-board__bubble { flex: 1 1 auto; position: relative; padding: 12px 15px; border-radius: 12px; background: #fff; border: 1px solid #e6ebf2; } .nslms-board__item.is-mine .nslms-board__bubble { background: #f5f8fd; border-color: #d8e2f1; } .nslms-board__byline { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; } .nslms-board__byline strong { color: #1d2733; } .nslms-board__chip { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #15396f; color: #fff; } .nslms-board__time { font-size: 12px; color: #8893a3; } .nslms-board__text { color: #34404e; line-height: 1.6; } .nslms-board__del { position: absolute; top: 8px; right: 10px; margin: 0; } .nslms-board__delbtn { background: none; border: 0; color: #b3122a; font-size: 12px; cursor: pointer; opacity: .65; } .nslms-board__delbtn:hover { opacity: 1; text-decoration: underline; } @media (max-width: 640px) { .nslms-welcome { flex-direction: column; text-align: center; } .nslms-welcome__aside { flex-direction: row; justify-content: center; flex-basis: auto; } .nslms-welcome__name { margin-top: 0; } } /* Breathing room between the site header and the portal (Maria's report). */ .nslms-dashboard.nslms-app { margin-top: 26px; } .nslms-dashboard.nslms-app .nslms-app__bar { padding-top: 4px; } @media (max-width: 782px) { .nslms-dashboard.nslms-app { margin-top: 16px; } } /* Space between the portal content and the site footer (Maria's report). */ .nslms-dashboard.nslms-app { margin-bottom: 44px; } .nslms-dashboard.nslms-app .nslms-app__main { padding-bottom: 28px; } @media (max-width: 782px) { .nslms-dashboard.nslms-app { margin-bottom: 28px; } } /* Phase 1: module grouping in lesson lists */ .nslms-module-head { font-size: 18px; font-weight: 700; color: #15396f; margin: 26px 0 6px; padding-bottom: 8px; border-bottom: 2px solid #e7eef7; } .nslms-module-head:first-of-type { margin-top: 6px; } .nslms-module-desc { color: #51607a; font-size: 14px; line-height: 1.6; margin: 0 0 12px; } .nslms-mod-hidden { display: inline-block; font-size: 11px; font-weight: 600; color: #8a5a00; background: #fff3d6; border-radius: 20px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; } /* Phase 3: drip release, resume, view counts */ .nslms-card.is-scheduled { opacity: .92; } .nslms-scheduled { display: flex; align-items: center; gap: 12px; padding: 16px; background: #f6f9fd; border: 1px dashed #c7d6ec; border-radius: 12px; color: #41506a; } .nslms-scheduled__icon { font-size: 22px; } .nslms-scheduled strong { display: block; color: #15396f; } .nslms-resume { display: flex !important; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; margin: 4px 0 14px; padding: 14px 18px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(100deg, #15396f, #1d4a8f); box-shadow: 0 10px 24px -12px rgba(20,40,90,.6); } .nslms-resume:hover { filter: brightness(1.06); } .nslms-resume__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 15px; } .nslms-resume__txt { flex: 1; line-height: 1.3; } .nslms-resume__txt strong { display: block; font-size: 15px; } .nslms-resume__txt span { font-size: 13px; opacity: .85; } .nslms-resume__go { font-weight: 600; white-space: nowrap; } .nslms-flash { animation: nslmsFlash 1.6s ease; } @keyframes nslmsFlash { 0%,100% { box-shadow: 0 0 0 0 rgba(29,74,143,0); } 25% { box-shadow: 0 0 0 4px rgba(29,74,143,.35); } } .nslms-panel__meta { display: inline-flex; align-items: center; gap: 12px; } .nslms-views { font-size: 12px; color: #7a869c; font-weight: 600; } /* Phase 4: matching + short-answer quiz delivery */ .nslms-quiz-match__row { display:flex; gap:12px; align-items:center; margin:8px 0; } .nslms-quiz-match__left { flex:1; font-weight:600; } .nslms-quiz-match__row select { flex:1; padding:8px 10px; border:1px solid #d6deea; border-radius:8px; } .nslms-quiz-short { width:100%; padding:10px 12px; border:1px solid #d6deea; border-radius:8px; } /* Phase 5: quiz config + results + review */ .nslms-quiz__result { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:20px; margin-left:8px; } .nslms-quiz__result--pass { background:#e3f5e9; color:#1f8a4c; } .nslms-quiz__result--fail { background:#fde6e6; color:#b3122a; } .nslms-quiz__adj { font-size:11px; color:#7a869c; margin-left:8px; } .nslms-quiz__comment { background:#f6f9fd; border:1px solid #e7eef7; border-radius:10px; padding:8px 12px; margin:6px 0 0; font-size:14px; } .nslms-quiz__closed { color:#8a5a00; font-weight:600; } .nslms-quiz__meta { font-size:12px; color:#7a869c; margin-left:8px; } .nslms-quiz-timer { font-weight:700; color:#b3122a; margin:0 0 10px; } .nslms-review { list-style:none; margin:8px 0; padding:0; } .nslms-review li { padding:8px 10px; border:1px solid #eef1f6; border-radius:8px; margin-bottom:6px; } .nslms-review__q { font-weight:600; color:#23324a; } .nslms-review__a { color:#51607a; } .nslms-review__ok { color:#1f8a4c; font-weight:700; } .nslms-review__no { color:#b3122a; font-weight:700; } .nslms-quizgrade { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:8px; } .nslms-quizgrade label { font-size:12px; color:#46546c; } .nslms-quizgrade input[type=number] { width:90px; } .nslms-quizgrade textarea { width:100%; min-height:48px; } /* Phase 6: feedback field + inline grade-save status */ .nslms-fb { display:block; width:100%; margin-top:6px; font-size:13px; min-height:42px; } .nslms-grade-status { font-size:13px; font-weight:600; margin-left:10px; } .nslms-grade-status.is-saving { color:#7a869c; } .nslms-grade-status.is-saved { color:#1f8a4c; } .nslms-grade-status.is-error { color:#b3122a; } /* ---- Slide viewer (PowerPoint -> PDF inline) -------------------------- */ .nslms-slides-page { max-width: 1100px; margin: 24px auto 40px; padding: 0 16px; } .nslms-slides-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); } .nslms-slides-back { color: var(--nslms-teal-d); font-weight: 600; text-decoration: none; white-space: nowrap; } .nslms-slides-title { flex: 1; margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--nslms-ink); letter-spacing: -0.01em; } .nslms-slides-dl { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--nslms-teal); color: #fff; text-decoration: none; font-weight: 600; padding: 9px 16px; border-radius: var(--r-pill); } .nslms-slides-dl:hover { background: var(--nslms-teal-d); color: #fff; } .nslms-slides-frame { position: relative; width: 100%; height: 78vh; min-height: 480px; background: #f1f3f7; border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); overflow: hidden; } .nslms-slides-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nslms-slides-fallback { margin-top: 12px; color: var(--nslms-sub); font-size: .9rem; } .nslms-slides-fallback a { color: var(--nslms-teal-d); font-weight: 600; } /* Materials: slide-deck row (view + download) */ .nslms-material--slides .nslms-material__view { font-weight: 600; } .nslms-material--slides .nslms-material__dl { margin-left: 10px; font-size: .85rem; color: var(--nslms-teal-d); text-decoration: none; } .nslms-material--slides .nslms-material__icon { margin-right: 2px; } /* Breathing room between LMS content and the theme footer (all portal pages). */ .nslms-dashboard { padding-bottom: 80px; } /* ---- Engagement report (instructor) ---------------------------------- */ .nslms-engage-table { width: 100%; } .nslms-engage-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; background: var(--nslms-bg); color: var(--nslms-sub); } .nslms-engage-pill.is-done { background: #e7f6ec; color: #1f7a44; } /* Completion gate hint + inline error */ .nslms-complete-gate { display: inline-flex; align-items: center; gap: 8px; color: var(--nslms-sub); font-size: .85rem; margin: 0; } .nslms-complete-gate .nslms-lock-icon { flex: none; } .nslms-complete-err { display: block; margin-top: 6px; color: var(--nslms-red, #b3122a); font-size: .82rem; } /* ---- Dedicated quiz page --------------------------------------------- */ .nslms-quizpage { max-width: 860px; margin: 24px auto 40px; padding: 0 16px; } .nslms-quizpage__panel { background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); padding: 24px 26px; } .nslms-quizpage__meta { color: var(--nslms-sub); font-size: .9rem; margin: 0 0 16px; } .nslms-quizpage__actions, .nslms-quizresult__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .nslms-quizresult { text-align: center; padding: 8px 0 4px; } .nslms-quizresult__score { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 30px; border-radius: var(--r-lg); margin-bottom: 8px; } .nslms-quizresult--pass { background: #e7f6ec; } .nslms-quizresult--fail { background: #fdecec; } .nslms-quizresult--plain { background: var(--nslms-bg); } .nslms-quizresult__pct { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--nslms-ink); } .nslms-quizresult__label { font-weight: 700; } .nslms-quizresult--pass .nslms-quizresult__label { color: #1f7a44; } .nslms-quizresult--fail .nslms-quizresult__label { color: #b3122a; } .nslms-quizresult__actions { justify-content: center; } /* Submitted assignment block (student sees their files + can remove) */ .nslms-submitted { margin: 8px 0 12px; padding: 12px 14px; background: #f0f7f1; border: 1px solid #cfe6d4; border-radius: 10px; } .nslms-submitted__head { margin: 0 0 6px; font-weight: 700; color: #0b6b50; display: flex; align-items: center; gap: 8px; } .nslms-submitted__head .nslms-check { background: #0b6b50; } .nslms-submitted__files { margin: 0 0 8px; padding-left: 20px; } .nslms-submitted__files li { margin: 2px 0; } .nslms-remove-form { margin: 0; } .nslms-remove-btn { background: #fff; border: 1px solid var(--nslms-hair); color: #b3122a; border-radius: var(--r-pill); padding: 5px 14px; font-weight: 600; font-size: .82rem; cursor: pointer; } .nslms-remove-btn:hover { background: #fdeaea; border-color: #f0c2c2; } /* ---- Save and Finish Later (quiz suspend/resume) ---- */ .nslms-btn--soft { background: rgba(21,57,111,.08); color: var(--nslms-teal); box-shadow: none; } .nslms-btn--soft:hover { background: rgba(21,57,111,.14); color: var(--nslms-teal-d); box-shadow: none; } .nslms-btn--soft:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(21,57,111,.25); } .nslms-quiz-resumed { display: flex; gap: 10px; align-items: flex-start; background: #eef4fb; color: #1d3a63; border: 1px solid #d4e2f3; border-radius: var(--r-md, 12px); padding: 12px 16px; margin: 0 0 18px; font-size: .92rem; line-height: 1.5; } .nslms-quiz-resumed__icon { font-size: 1.15rem; line-height: 1.3; flex: 0 0 auto; } .nslms-quiz-resumed strong { font-weight: 700; } .nslms-quiz__inprogress { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: var(--r-pill, 999px); background: rgba(21,57,111,.1); color: var(--nslms-teal); font-size: .78rem; font-weight: 600; white-space: nowrap; } /* ---- Collapsible curriculum modules + progress ring (My Lessons) ---- */ .nslms-module { border: 1px solid #e6e8ee; border-radius: 16px; background: #fff; margin: 0 0 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(21,57,111,.05); } .nslms-module__summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; user-select: none; } .nslms-module__summary::-webkit-details-marker { display: none; } .nslms-module__summary::marker { content: ''; } .nslms-module__summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(21,57,111,.35); } .nslms-module__summary:hover { background: rgba(21,57,111,.025); } .nslms-module__ring { --pct: 0; position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--nslms-teal) calc(var(--pct) * 1%), #e7ebf2 0); display: grid; place-items: center; } .nslms-module__ring::before { content: ''; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #fff; } .nslms-module__ring-val { position: relative; font-size: .64rem; font-weight: 700; color: var(--nslms-teal); letter-spacing: -0.02em; } .nslms-module__ring.is-full { background: #2e9e6b; } .nslms-module__ring.is-full::before { display: none; } .nslms-module__ring.is-full .nslms-module__ring-val { color: #fff; font-size: 1.1rem; } .nslms-module__headtext { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nslms-module__title { font-weight: 700; font-size: 1rem; color: var(--nslms-ink, #1d1d1f); letter-spacing: -0.01em; } .nslms-module.is-complete .nslms-module__title { color: #0b6b50; } .nslms-module__count { font-size: .82rem; color: #6e6e73; } .nslms-module__chev { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid #98a2b3; border-bottom: 2px solid #98a2b3; transform: rotate(45deg); transition: transform .25s var(--ease, ease); margin-right: 2px; } .nslms-module[open] .nslms-module__chev { transform: rotate(-135deg); } .nslms-module__summary:hover .nslms-module__chev { border-color: var(--nslms-teal); } .nslms-module__body { padding: 2px 20px 18px; } /* ============================================================ * Help Center: nav, FAQs, videos, contact, support tickets. * ============================================================ */ .nslms-help-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; } .nslms-help-nav a { display: inline-block; padding: 7px 14px; border-radius: var(--r-pill, 999px); background: var(--nslms-teal-50); color: var(--nslms-teal-d); border: 1px solid var(--nslms-teal-100); font-weight: 600; font-size: .86rem; text-decoration: none; transition: background .2s ease, color .2s ease; } .nslms-help-nav a:hover { background: var(--nslms-teal); color: #fff; } /* Instructor-only pill on articles. */ .nslms-pill--staff { background: #fef3e7; color: #9a5b16; border-color: #f6dcc0; padding: 3px 10px; font-size: .72rem; vertical-align: middle; margin-left: 6px; } /* Training video embeds. */ .nslms-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 10px; border-radius: 10px; overflow: hidden; background: #000; } .nslms-video-embed iframe, .nslms-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nslms-video-card .nslms-card__body { padding-top: 6px; } /* Contact information card. */ .nslms-contact-card { background: var(--nslms-surface); border: 1px solid var(--nslms-teal-100); border-radius: var(--r-lg, 18px); padding: 18px 20px; } .nslms-contact-list { list-style: none; margin: 10px 0 0; padding: 0; } .nslms-contact-list li { padding: 6px 0; border-bottom: 1px solid #eef0f4; } .nslms-contact-list li:last-child { border-bottom: 0; } .nslms-contact-list a { color: var(--nslms-teal-d); font-weight: 600; text-decoration: none; } .nslms-contact-list a:hover { text-decoration: underline; } /* Support tickets. */ .nslms-hc-tickets .nslms-section__title { margin-top: 0; } .nslms-tk-form { margin: 6px 0 18px; max-width: 640px; } .nslms-tk-form .nslms-label { display: block; font-weight: 600; margin-bottom: 4px; color: var(--nslms-teal-700); } .nslms-tk-form input[type="text"], .nslms-tk-form textarea, .nslms-tk-form select { width: 100%; padding: 9px 12px; border: 1px solid #d4dae6; border-radius: 10px; font: inherit; background: #fff; } .nslms-tk-form select { width: auto; min-width: 160px; } .nslms-tk-form textarea { resize: vertical; } /* Consistent vertical rhythm between field groups so the Submit button is not cramped against the Priority dropdown. */ .nslms-tk-form p { margin: 0 0 18px; } .nslms-tk-form p:last-child { margin: 6px 0 0; } .nslms-tk-subhead { margin: 18px 0 8px; font-size: 16px; color: var(--nslms-teal-700); } .nslms-tk-list { list-style: none; margin: 0; padding: 0; } .nslms-tk-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 0; border-bottom: 1px solid #eef0f4; } .nslms-tk-item > a { font-weight: 600; color: var(--nslms-teal-d); text-decoration: none; } .nslms-tk-item > a:hover { text-decoration: underline; } .nslms-muted { color: #8a93a6; font-size: .85rem; } /* Status + priority chips. */ .nslms-tk-st, .nslms-tk-pri { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; } .nslms-tk-st--open { background: #e7f0fb; color: #1d4a8f; } .nslms-tk-st--in_progress { background: #fff3da; color: #8a5a00; } .nslms-tk-st--resolved { background: #e4f6ea; color: #1f7a44; } .nslms-tk-st--closed { background: #eceef2; color: #61697a; } .nslms-tk-pri--low { background: #eceef2; color: #61697a; } .nslms-tk-pri--medium { background: #e7f0fb; color: #1d4a8f; } .nslms-tk-pri--high { background: #fdecd9; color: #9a5b16; } .nslms-tk-pri--urgent { background: #fbe3e3; color: #a52121; } /* Ticket thread. */ .nslms-tk-head h4 { margin: 4px 0 6px; } .nslms-tk-thread { max-width: 640px; margin: 10px 0 16px; } .nslms-tk-msg { border: 1px solid #e3e7ee; border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; background: #fff; } .nslms-tk-msg--staff { background: var(--nslms-teal-50); border-color: var(--nslms-teal-100); } .nslms-tk-msg__meta { font-size: .8rem; color: #6b7488; margin-bottom: 4px; } .nslms-tk-msg__body p { margin: 0 0 8px; } .nslms-tk-msg__body p:last-child { margin-bottom: 0; } /* Honeypot: visually hidden anti-spam field. Bots fill it; humans never see it. */ .nslms-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ============================================================ * Graduate hero (alumni Overview). Navy gradient like the main * banner, with a celebratory gold accent. Kept consistent with * the existing dashboard visual system. * ============================================================ */ .nslms-grad-hero { display: flex; align-items: flex-start; gap: 20px; position: relative; overflow: hidden; background: radial-gradient(130% 130% at 0% 0%, #1d4a8f 0%, #15396f 46%, #0f2a52 100%); color: #fff; border-radius: var(--r-xl, 24px); padding: 26px 30px; margin-bottom: 24px; box-shadow: 0 22px 48px -20px rgba(21,57,111,.55); } .nslms-grad-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 130% at 100% 0%, rgba(230,180,80,.22), transparent 60%); pointer-events: none; } .nslms-grad-hero__medal { flex: none; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #f3cf78, #d9a441); color: #5a3d0a; box-shadow: 0 8px 20px -6px rgba(217,164,65,.7); position: relative; z-index: 1; } .nslms-grad-hero__body { position: relative; z-index: 1; } .nslms-grad-hero__eyebrow { margin: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #f3cf78; } .nslms-grad-hero__title { margin: 4px 0 6px; font-size: 1.5rem; font-weight: 800; color: #fff; } .nslms-grad-hero__sub { margin: 0 0 14px; font-size: .98rem; opacity: .92; } .nslms-grad-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .nslms-grad-hero__note { margin: 14px 0 0; font-size: .82rem; opacity: .75; } .nslms-btn--gold { background: linear-gradient(160deg, #f3cf78, #d9a441); color: #4a3206 !important; border: 0; font-weight: 700; } .nslms-btn--gold:hover { filter: brightness(1.06); } .nslms-grad-hero__ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.5); } .nslms-grad-hero__ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; } @media (max-width: 560px) { .nslms-grad-hero { flex-direction: column; gap: 14px; padding: 22px; } } /* ============================================================ * Public certificate verification page. * ============================================================ */ .nslms-verify-form { display: flex; gap: 10px; margin: 0 0 24px; max-width: 560px; } .nslms-verify-form input[type="text"] { flex: 1; border: 1px solid var(--nslms-hair); border-radius: var(--r-pill, 999px); padding: 12px 18px; font: inherit; font-size: 1rem; letter-spacing: .04em; background: var(--nslms-surface); } .nslms-verify-form input:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.16); } .nslms-verify-result { display: flex; gap: 18px; align-items: flex-start; border-radius: var(--r-lg, 18px); padding: 22px 26px; max-width: 640px; border: 1px solid; } .nslms-verify-result--ok { background: #e9f8ef; border-color: #bfe6cd; } .nslms-verify-result--no { background: #fdecec; border-color: #f3c5c5; } .nslms-verify-result__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .nslms-verify-result--ok .nslms-verify-result__icon { background: #1f9d57; } .nslms-verify-result--no .nslms-verify-result__icon { background: #c0392b; } .nslms-verify-result__status { margin: 2px 0 12px; font-size: 1.15rem; font-weight: 800; } .nslms-verify-result--ok .nslms-verify-result__status { color: #14773f; } .nslms-verify-result--no .nslms-verify-result__status { color: #a52121; } .nslms-verify-fields { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .nslms-verify-fields dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nslms-faint); margin-bottom: 2px; } .nslms-verify-fields dd { margin: 0; font-weight: 700; color: var(--nslms-ink); font-size: .98rem; } .nslms-verify-result__note { margin: 14px 0 0; font-size: .88rem; color: var(--nslms-sub); } @media (max-width: 560px) { .nslms-verify-form { flex-direction: column; } .nslms-verify-fields { grid-template-columns: 1fr; } } /* Graduate hero: certification expiry + renew. */ .nslms-grad-hero__expiry { margin: 12px 0 0; font-size: .9rem; opacity: .95; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .nslms-grad-hero__exptag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; } .nslms-grad-hero__exptag.is-soon { background: #f3cf78; color: #4a3206; } .nslms-grad-hero__exptag.is-expired { background: #fbe3e3; color: #a52121; } .nslms-grad-hero__renew { padding: 6px 16px !important; font-size: .82rem !important; } /* Alumni growth card: review request + referral link. */ .nslms-grow-card { display: flex; gap: 24px; flex-wrap: wrap; background: var(--nslms-surface); border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg, 18px); padding: 22px 26px; margin-bottom: 24px; box-shadow: var(--sh-sm); } .nslms-grow-card__col { flex: 1; min-width: 240px; } .nslms-grow-card__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--nslms-ink); } .nslms-grow-card__sub { margin: 0 0 12px; font-size: .9rem; color: var(--nslms-sub); } .nslms-grow-card__share { display: flex; gap: 8px; } .nslms-grow-card__link { flex: 1; min-width: 0; border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); padding: 8px 12px; font: inherit; font-size: .85rem; background: var(--nslms-bg); color: var(--nslms-sub); } @media (max-width: 560px) { .nslms-grow-card { flex-direction: column; gap: 18px; } } /* ======================================================================= Canvas-style lesson rows + dedicated lesson (chapter) page (v1.54.0) ======================================================================= */ .nslms-rows { padding: 2px 6px 8px; } .nslms-rows .nslms-row { display: flex !important; align-items: center; gap: 14px; padding: 13px 12px; border-radius: 12px; text-decoration: none; color: inherit; width: auto; } .nslms-rows .nslms-row + .nslms-row { border-top: 1px solid #e8e8ed; } .nslms-rows .nslms-row:hover { background: #f7faff; } .nslms-rows .nslms-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(21,57,111,.35); } .nslms-row__stat { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .64rem; font-weight: 700; color: #fff; } .nslms-row__stat--done { background: #2e9e6b; } .nslms-row__stat--cur { background: #15396f; } .nslms-row__stat--retry{ background: #fdeaea; color: #b3122a; border: 2px solid #f3c2c2; } .nslms-row__stat--todo { border: 2px solid #cfd6e2; } .nslms-row__stat--lock { color: #98a2b3; } .nslms-row__main { flex: 1 1 auto; min-width: 0; } .nslms-row__title { font-weight: 600; font-size: .97rem; letter-spacing: -.01em; color: #1d1d1f; } .nslms-row__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 3px; font-size: .78rem; color: #6e6e73; } .nslms-row__ico { display: inline-flex; align-items: center; gap: 4px; color: #7a8699; } .nslms-row__right { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; } .nslms-row__chip { font-size: .74rem; font-weight: 650; padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .nslms-row__chip--done { color: #0b6b50; background: transparent; } .nslms-row__chip--resume { background: #15396f; color: #fff; } .nslms-row__chip--start { color: #15396f; background: #fff; border: 1px solid #dbe6f5; } .nslms-row__chip--retry { background: #fdeaea; color: #b3122a; } .nslms-row__chip--locked { color: #98a2b3; background: #f3f4f7; } .nslms-row__chev { width: 8px; height: 8px; border-right: 2px solid #c0c7d2; border-bottom: 2px solid #c0c7d2; transform: rotate(-45deg); flex: none; } @media (max-width: 560px) { .nslms-row__meta .nslms-row__ico:nth-child(n+3) { display: none; } .nslms-row__chip { padding: 4px 9px; font-size: .7rem; } } /* Lesson page layout */ .nslms-lp { display: grid; grid-template-columns: 1fr 286px; gap: 26px; max-width: 1040px; margin: 0 auto; padding: 18px 4px 50px; } .nslms-lp__main { min-width: 0; } .nslms-lp__crumb { font-size: .8rem; color: #6e6e73; margin: 0 0 10px; } .nslms-lp__crumb a { color: #15396f; text-decoration: none; font-weight: 600; } .nslms-lp__title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; } .nslms-lp__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; } .nslms-lp__metachip { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #e8e8ed; color: #6e6e73; } .nslms-lp__intro { font-size: .94rem; color: #3a3a3c; background: #fff; border: 1px solid #e8e8ed; border-radius: 14px; padding: 16px 18px; margin: 0 0 16px; } .nslms-lp__block { background: #fff; border: 1px solid #e8e8ed; border-radius: 16px; overflow: hidden; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .nslms-lp__bh { margin: 0; padding: 13px 18px; border-bottom: 1px solid #e8e8ed; font-weight: 700; font-size: .92rem; } .nslms-lp__bbody { padding: 16px 18px; } .nslms-lp__done { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e8e8ed; border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; } .nslms-lp__done--complete { background: #e3f9f1; border-color: #a7f3d0; color: #0b6b50; } .nslms-lp__done--gate { color: #6e6e73; } .nslms-lp__done-t { flex: 1; } .nslms-lp__done-t strong { display: block; font-size: .95rem; } .nslms-lp__done-t span { font-size: .83rem; color: #6e6e73; } .nslms-lp__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; } .nslms-lp__navbtn { flex: 1; display: flex !important; flex-direction: column; gap: 2px; background: #fff; border: 1px solid #e8e8ed; border-radius: 14px; padding: 13px 16px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .nslms-lp__navbtn:hover { border-color: #dbe6f5; background: #eef3fb; } .nslms-lp__navbtn.is-empty { visibility: hidden; box-shadow: none; border: 0; background: none; } .nslms-lp__navbtn--next { text-align: right; } .nslms-lp__dir { font-size: .7rem; color: #6e6e73; text-transform: uppercase; letter-spacing: .05em; } .nslms-lp__nt { font-weight: 650; font-size: .9rem; } .nslms-lp__rail { background: #fff; border: 1px solid #e8e8ed; border-radius: 16px; padding: 8px; height: fit-content; position: sticky; top: 18px; } .nslms-lp__railback { display: flex !important; align-items: center; gap: 8px; color: #15396f; font-weight: 600; font-size: .8rem; text-decoration: none; padding: 8px 12px; } .nslms-lp__railh { margin: 4px 12px 2px; font-size: .9rem; font-weight: 700; } .nslms-lp__railprog { margin: 4px 12px 10px; font-size: .74rem; color: #6e6e73; } .nslms-lp__pbar { display: block; height: 6px; border-radius: 99px; background: #eef1f6; margin-top: 6px; overflow: hidden; } .nslms-lp__pbar i { display: block; height: 100%; background: #2e9e6b; border-radius: 99px; } .nslms-lp__rl { display: flex !important; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: inherit; font-size: .85rem; } .nslms-lp__rl:hover { background: #f6f9fd; } .nslms-lp__rl.is-active { background: #eef3fb; color: #15396f; font-weight: 650; } .nslms-lp__rl.is-locked { color: #98a2b3; } .nslms-lp__rd { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .6rem; border: 2px solid #cfd6e2; color: #6e6e73; } .nslms-lp__rd.done { background: #2e9e6b; border-color: #2e9e6b; color: #fff; } .nslms-lp__rd.active { border-color: #15396f; background: #15396f; color: #fff; } .nslms-lp__rt { min-width: 0; } @media (max-width: 820px) { .nslms-lp { grid-template-columns: 1fr; gap: 16px; } .nslms-lp__rail { position: static; order: -1; } } /* Instructor cohort filter tabs (switch which cohort a panel shows) */ .nslms-cohort-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; } .nslms-cohort-tab { border: 1px solid #dbe6f5; background: #fff; color: #15396f; border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.2; transition: background .15s ease, color .15s ease, border-color .15s ease; } .nslms-cohort-tab:hover { background: #eef3fb; } .nslms-cohort-tab.is-active { background: #15396f; color: #fff; border-color: #15396f; } .nslms-cohort-tab:focus-visible { outline: 2px solid #15396f; outline-offset: 2px; } /* ========================================================================= Announcements · student tab + nav badge (v1.56) ========================================================================= */ .nslms-nav__item { position: relative; } .nslms-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--nslms-teal); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; } .nslms-nav__item.is-active .nslms-nav__badge { background: var(--nslms-teal-d); } .nslms-anns .nslms-section__title { margin-bottom: 14px; } .nslms-ann-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .nslms-ann { position: relative; border: 1px solid var(--nslms-hair2); border-radius: var(--r-lg); background: var(--nslms-surface); padding: 16px 18px 14px; box-shadow: var(--sh-sm); } .nslms-ann.is-unread { border-color: var(--nslms-teal-100); background: var(--nslms-teal-50); } .nslms-ann.is-pinned { border-left: 3px solid var(--nslms-teal); } .nslms-ann__bar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; } .nslms-ann__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; } .nslms-ann.is-unread .nslms-ann__dot { background: var(--nslms-teal); box-shadow: 0 0 0 4px rgba(21,57,111,.12); } .nslms-ann__pin { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--nslms-teal-d); background: var(--nslms-teal-100); border-radius: var(--r-pill); padding: 2px 9px; } .nslms-ann__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--nslms-ink); } .nslms-ann__body { margin: 0 0 10px; color: var(--nslms-ink); font-size: .95rem; } .nslms-ann__body p { margin: 0 0 8px; } .nslms-ann__body p:last-child { margin-bottom: 0; } .nslms-ann__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nslms-ann__meta { font-size: .8rem; color: var(--nslms-faint); } .nslms-ann__sep { margin: 0 2px; } .nslms-ann__read { border: 1px solid var(--nslms-teal); background: transparent; color: var(--nslms-teal-d); font: inherit; font-size: .82rem; font-weight: 600; border-radius: var(--r-pill); padding: 5px 14px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } .nslms-ann__read:hover { background: var(--nslms-teal); color: #fff; } .nslms-ann__readtag { font-size: .8rem; font-weight: 600; color: var(--nslms-faint); } /* ========================================================================= Account activation · public self-onboarding page (v1.56) ========================================================================= */ .nslms-activate { max-width: 640px; margin: 0 auto; padding: 8px 0 64px; font-family: var(--nslms-font); color: var(--nslms-ink); -webkit-font-smoothing: antialiased; } .nslms-activate * { box-sizing: border-box; } .nslms-activate__banner { border-radius: var(--r); padding: 14px 16px; margin: 0 0 22px; font-size: .95rem; line-height: 1.5; } .nslms-activate__banner.is-ok { background: #e7f6ec; border: 1px solid #c3e6cf; color: #14502b; } .nslms-activate__banner.is-info { background: var(--nslms-teal-50); border: 1px solid var(--nslms-teal-100); color: var(--nslms-teal-700); } .nslms-activate__banner.is-err { background: #fdeaea; border: 1px solid #f3c5c5; color: #8a1f1f; } .nslms-activate__banner a { color: inherit; font-weight: 600; } .nslms-activate__title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; } .nslms-activate__lede { margin: 0 0 22px; color: var(--nslms-sub); } .nslms-activate__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .nslms-activate__form .nslms-field, .nslms-activate__form label.nslms-field { display: block; margin: 0 0 14px; } .nslms-activate__form .nslms-field > span { display: block; margin: 0 0 5px; font-size: .85rem; font-weight: 600; color: var(--nslms-sub); } .nslms-activate__form .nslms-field em { color: #b3261e; font-style: normal; } .nslms-activate__form input[type="text"], .nslms-activate__form input[type="email"], .nslms-activate__form input[type="tel"], .nslms-activate__form input[type="date"], .nslms-activate__form select, .nslms-activate__form textarea { width: 100%; border: 1px solid var(--nslms-hair); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; line-height: 1.4; background: var(--nslms-surface); color: var(--nslms-ink); } /* Normalize the date control so it matches the other inputs (rounded corners + height) rather than the browser's default boxy field. */ .nslms-activate__form input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 44px; } .nslms-activate__form input:focus, .nslms-activate__form select:focus, .nslms-activate__form textarea:focus { outline: none; border-color: var(--nslms-teal); box-shadow: 0 0 0 3px rgba(21,57,111,.15); } .nslms-activate__optnote { margin: 4px 0 14px; font-size: .82rem; color: var(--nslms-faint); } .nslms-activate__actions { margin: 8px 0 0; } .nslms-activate__help { margin: 26px 0 0; border-top: 1px solid var(--nslms-hair2); padding: 18px 0 0; } .nslms-activate__help > summary { cursor: pointer; font-weight: 600; color: var(--nslms-teal-d); } .nslms-activate__help .nslms-activate__form { margin-top: 16px; } .nslms-activate--note { max-width: 640px; margin: 0 auto; } @media (max-width: 560px) { .nslms-activate__grid { grid-template-columns: 1fr; } }