/* ============================================================================= MaargX UPSC LMS — shared design system Used by: dashboard.php, signin.php, signup.php, reset-password.php Palette: deep navy primary (sidebar/header/brand), maroon accent (CTAs, highlights) — matches the institute's public site (maargxupsc.com) for a consistent, premium brand across the marketing site and the LMS. Tahoma throughout, with generous whitespace, card-based panels, soft shadows and rounded corners. The --mx-amber-* variable names are kept as-is (renaming them would mean touching every rule below and every template) but they now hold the maroon scale, not amber. ========================================================================= */ .maargx-app { --mx-navy-950: #0a1120; --mx-navy-900: #101c30; --mx-navy-800: #1a2c48; --mx-navy-700: #24405f; --mx-navy-600: #315477; --mx-navy-100: #e8ecf3; --mx-amber-600: #4a0f18; --mx-amber-500: #6e1b26; --mx-amber-400: #8a2530; --mx-amber-100: #f7e8ea; --mx-ink: #000000; --mx-ink-soft: #000000; --mx-ink-faint: #000000; --mx-line: #e3e6ec; --mx-line-soft: #eef0f4; --mx-bg: #f5f6f8; --mx-surface: #ffffff; --mx-success: #1a8f5e; --mx-success-bg: #e5f7ee; --mx-warning: #b5790a; --mx-warning-bg: #fdf1d9; --mx-danger: #c23838; --mx-danger-bg: #fbe9e9; --mx-info: #2c5ed9; --mx-info-bg: #eaf0fd; --mx-radius-sm: 8px; --mx-radius-md: 12px; --mx-radius-lg: 18px; --mx-shadow-sm: 0 1px 2px rgba(10, 17, 32, 0.08), 0 1px 1px rgba(10, 17, 32, 0.05); --mx-shadow-md: 0 8px 24px rgba(10, 17, 32, 0.10), 0 2px 6px rgba(10, 17, 32, 0.06); --mx-shadow-lg: 0 20px 48px rgba(10, 17, 32, 0.20); --mx-font-display: Tahoma, Verdana, Geneva, "Segoe UI", sans-serif; --mx-font-body: Tahoma, Verdana, Geneva, "Segoe UI", sans-serif; font-family: var(--mx-font-body); color: var(--mx-ink); -webkit-font-smoothing: antialiased; background: var(--mx-bg); } /* The active theme's own stylesheet can still load in wp_head() even though its header.php/footer.php are bypassed (see class-maargx-template-loader.php) — this keeps the theme's body margin/font from flashing through before .maargx-app's own rules apply, on the plugin's full-bleed pages specifically. */ body.maargx-fullpage { margin: 0; padding: 0; background: #f5f6f8; overflow-x: hidden; font-size: 15px; } /* Belt-and-suspenders base font-size, scoped to the app root itself (not just body.maargx-fullpage above) — an element inside .maargx-app that has no explicit font-size of its own (e.g. .maargx-link, previously) otherwise inherits whatever oversized base the ACTIVE WORDPRESS THEME sets on . Some themes (e.g. Twenty Twenty-Five) set a body font-size upwards of 20px for their own fluid typography — with no reset here, that leaked straight through into "Forgot password?" rendering nearly twice the size of the "Remember me" text right next to it. Every element with its own explicit size is unaffected either way; this only matters for the ones that forgot to set one. */ .maargx-app { font-size: 15px; } .maargx-app, .maargx-app *, .maargx-app *::before, .maargx-app *::after { box-sizing: border-box; } /* Elements styled with an explicit display (buttons/links via .maargx-btn, flex rows, etc.) silently override the browser's own default [hidden]{display:none} rule — author CSS always beats the UA stylesheet at equal specificity, hidden attribute or not. Without this, toggling .hidden on a .maargx-btn (e.g. the gate modal's conditional Enroll/Sign-up buttons) would leave it visibly on screen. */ .maargx-app [hidden] { display: none !important; } .maargx-app h1, .maargx-app h2, .maargx-app h3, .maargx-app p, .maargx-app ul { margin: 0; } .maargx-app button { font-family: inherit; } /* Plain content links (a course card title, a row wrapped in , etc.) inherit their surrounding text color instead of default link-blue — but NOT a link styled as a button: .maargx-app a (specificity 0,1,1) was beating .maargx-btn-primary's own color:#fff (specificity 0,1,0), so every anchor-tag button — Buy Now, Enroll Now, Continue in Dashboard, the DPP download chip — silently rendered with black/dark text on its maroon or amber background instead of white. Excluding button-styled anchors here is the actual fix; each button class still sets its own correct text color explicitly. */ .maargx-app a:not(.maargx-btn):not(.maargx-cp-lecture-badge-btn) { color: inherit; } .maargx-app h1, .maargx-app h2, .maargx-app h3, .maargx-brand-name, .maargx-mobilebar-title, .maargx-page-title, .maargx-panel-title, .maargx-btn, .maargx-nav-item { font-family: var(--mx-font-display); } /* This is a fixed light-themed design (navy + maroon on white/light surfaces) — dozens of headings/titles throughout the app are colored with a literal var(--mx-navy-900) rather than the themeable var(--mx-ink), so they never "flip" for a dark surface. A previous prefers-color-scheme media query flipped --mx-surface/--mx-bg to dark while leaving those navy-900 headings exactly as dark as before, making them unreadable (dark navy text on a dark navy card) for any visitor whose OS/browser is set to dark mode — this line locks the app to light mode instead so text stays legible everywhere, regardless of a visitor's OS setting. */ .maargx-app { color-scheme: light; } /* ----------------------------------------------------------------------- Buttons, links, form fields — shared across dashboard + auth pages ----------------------------------------------------------------------- */ .maargx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--mx-radius-sm); border: 1px solid transparent; font-size: 14.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: transform 0.05s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .maargx-btn:active { transform: translateY(1px); } .maargx-btn-block { width: 100%; } .maargx-btn-primary { background: linear-gradient(180deg, var(--mx-amber-400), var(--mx-amber-500)); color: #ffffff; box-shadow: 0 6px 16px rgba(110, 27, 38, 0.35); } .maargx-btn-primary:hover { background: linear-gradient(180deg, #8a2530, var(--mx-amber-600)); box-shadow: 0 8px 20px rgba(110, 27, 38, 0.45); transform: translateY(-1px); } .maargx-btn:focus-visible { outline: 2px solid var(--mx-amber-500); outline-offset: 2px; } .maargx-btn-ghost { background: var(--mx-surface); color: var(--mx-navy-800); border-color: var(--mx-line); } .maargx-btn-ghost:hover { border-color: var(--mx-navy-600); background: var(--mx-navy-100); } .maargx-btn-sm { padding: 7px 14px; font-size: 13px; } .maargx-link { color: var(--mx-amber-600); font-weight: 600; text-decoration: none; } .maargx-link:hover { text-decoration: underline; } .maargx-form { display: flex; flex-direction: column; gap: 16px; } .maargx-form-row { display: flex; gap: 14px; } .maargx-form-row .maargx-field { flex: 1; } .maargx-field { display: flex; flex-direction: column; gap: 6px; } .maargx-field-grow { flex: 1; } .maargx-field-label { font-size: 13px; font-weight: 600; color: var(--mx-ink-soft); } .maargx-app input[type="text"], .maargx-app input[type="email"], .maargx-app input[type="password"], .maargx-app input[type="tel"], .maargx-app input[type="number"], .maargx-app input[type="date"], .maargx-app select, .maargx-app textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius-sm); background: var(--mx-surface); color: var(--mx-ink); font-size: 14.5px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .maargx-app input:focus, .maargx-app select:focus, .maargx-app textarea:focus { outline: none; border-color: var(--mx-amber-500); box-shadow: 0 0 0 3px rgba(110, 27, 38, 0.18); } .maargx-app input:disabled { background: var(--mx-navy-100); color: var(--mx-ink-faint); cursor: not-allowed; } /* A "fixed part + typed part" field — @gmail.com always appended after whatever the student types, +91 always in front of the phone digits — styled as ONE bordered control (badge fused to the input, no visible seam except the divider) rather than a plain text box the student has to remember to type the domain/code into correctly themselves. */ .maargx-compound-field { display: flex; align-items: stretch; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius-sm); background: var(--mx-surface); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .maargx-compound-field:focus-within { border-color: var(--mx-amber-500); box-shadow: 0 0 0 3px rgba(110, 27, 38, 0.18); } .maargx-compound-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: var(--mx-navy-100); color: var(--mx-navy-800); font-weight: 700; font-size: 14px; white-space: nowrap; } .maargx-compound-badge-prefix { border-right: 1.5px solid var(--mx-line); } .maargx-compound-badge-suffix { border-left: 1.5px solid var(--mx-line); } .maargx-compound-field input { flex: 1; min-width: 0; border: none !important; border-radius: 0 !important; box-shadow: none !important; } .maargx-compound-field input:focus { box-shadow: none !important; } .maargx-field-aside { display: flex; justify-content: flex-end; margin-top: -8px; } .maargx-field-aside-split { justify-content: space-between; align-items: center; } .maargx-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mx-ink-soft); cursor: pointer; } .maargx-checkbox input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--mx-amber-500); cursor: pointer; } .maargx-otp-row { display: flex; gap: 10px; align-items: flex-end; } .maargx-form-msg { padding: 11px 14px; border-radius: var(--mx-radius-sm); font-size: 13.5px; font-weight: 500; background: var(--mx-danger-bg); color: var(--mx-danger); border: 1px solid rgba(194, 56, 56, 0.25); } .maargx-form-msg.maargx-msg-success { background: var(--mx-success-bg); color: var(--mx-success); border-color: rgba(26, 143, 94, 0.25); } .maargx-muted { color: var(--mx-ink-faint); font-size: 14px; } /* ----------------------------------------------------------------------- Auth pages (signin / signup / reset-password) — centered card on a full-bleed brand background ----------------------------------------------------------------------- */ .maargx-authpage { min-height: 100vh; position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 15% -10%, rgba(110, 27, 38, 0.30), transparent 60%), radial-gradient(900px 500px at 100% 100%, rgba(26, 44, 72, 0.65), transparent 55%), radial-gradient(700px 500px at 90% 8%, rgba(110, 27, 38, 0.16), transparent 55%), linear-gradient(160deg, var(--mx-navy-950), var(--mx-amber-600) 55%, var(--mx-navy-800)); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } /* Faint dotted "path" texture across the brand background — echoes the logomark's route motif without competing with the auth card. */ .maargx-authpage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.5; pointer-events: none; } .maargx-auth-wrap { width: 100%; display: flex; justify-content: center; position: relative; z-index: 1; } .maargx-auth-card { width: 100%; max-width: 420px; background: var(--mx-surface); border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-lg); padding: 40px 36px 32px; border: 1px solid rgba(255, 255, 255, 0.08); } .maargx-auth-card-wide { max-width: 500px; } .maargx-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .maargx-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: #000000; font-weight: 800; font-size: 17px; flex: 0 0 auto; filter: drop-shadow(0 3px 8px rgba(110, 27, 38, 0.35)); } .maargx-brand-mark svg { width: 100%; height: 100%; display: block; } .maargx-brand-mark-sm { width: 26px; height: 26px; } /* The real logo image, always shown small and to the LEFT of the "MaargX UPSC" wordmark — never replacing it. object-fit:contain plus an explicit box keeps the source file's own proportions no matter how big the original PNG is. .maargx-brand-lockup is the row wrapper that holds the image + the (unchanged) two-tier text lockup together as one flex item, needed wherever the text used to sit directly in a justify-content:space-between row (the topbar) — the sidebar's own .maargx-brand container already lays out as a row, so it needs no extra wrapper. */ .maargx-brand-lockup { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .maargx-brand-logo-img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; display: block; } .maargx-brand .maargx-brand-logo-img { width: 32px; height: 32px; } .maargx-auth-brand .maargx-brand-logo-img { width: 40px; height: 40px; } /* Two-tier brand lockup — "MaargX UPSC" (bold, primary) over "Learning Portal" (smaller, accent-coloured) instead of a single "MaargX LMS" line. The accent line's color is set once here rather than per-context, since the maroon accent reads fine on both the white sidebar/card surfaces and the dark navy sidebar/topbar backgrounds this appears on. */ .maargx-brand-name { display: flex; flex-direction: column; line-height: 1.2; } .maargx-brand-primary { font-weight: 800; font-size: 17px; letter-spacing: 0.01em; color: var(--mx-navy-900); } .maargx-brand-secondary { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mx-amber-500); } .maargx-sidebar .maargx-brand-primary { color: #fff; } /* The brand lockup elsewhere (topbar, sidebar) stays compact; here on the auth page it's the first thing a visitor sees, so it gets real room: a visible gap between the two lines instead of relying on cramped line-height, and a bigger, more confident size for both lines. */ .maargx-auth-brand .maargx-brand-name { gap: 5px; } .maargx-auth-brand .maargx-brand-primary { font-size: 22px; } .maargx-auth-brand .maargx-brand-secondary { font-size: 12.5px; letter-spacing: 0.09em; } .maargx-auth-title { font-size: 24px; line-height: 1.25; font-weight: 800; margin-bottom: 6px; color: var(--mx-navy-900); } .maargx-auth-sub { color: var(--mx-ink-soft); font-size: 14.5px; line-height: 1.5; margin-bottom: 24px; } .maargx-auth-foot { margin-top: 22px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--mx-ink-soft); } @media (max-width: 480px) { .maargx-auth-card { padding: 28px 18px 24px; } .maargx-form-row { flex-direction: column; gap: 16px; } .maargx-otp-row { flex-wrap: wrap; } .maargx-otp-row .maargx-btn { flex: 1 0 auto; } } /* ----------------------------------------------------------------------- Split auth layout (signin/signup) — a marketing/brand panel on the left, the form itself on the right with room to breathe, instead of a single card floating centered on a dark background. The old .maargx-authpage (full-bleed dark gradient + centered card) stays as-is for reset-password, which doesn't need the marketing real estate. ----------------------------------------------------------------------- */ .maargx-authpage-split { min-height: 100vh; display: flex; align-items: stretch; padding: 0; background: var(--mx-bg); } .maargx-authpage-split::before { display: none; } /* Left panel: a rich brand-gradient backdrop (the same dark navy/maroon treatment the single-card auth pages use, see .maargx-authpage above) behind a bordered "showcase" frame holding an admin-managed image carousel (Settings -> Sign In/Up Banners — the SAME banners on both Sign In and Sign Up). Landscape frame, sized as a fraction of the panel's own width (min(...)) rather than a fixed px cap, so it keeps filling the panel proportionally on very wide screens instead of maxing out small and leaving a dead margin around it. */ .maargx-auth-banner { flex: 1 1 48%; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden; background: radial-gradient(900px 520px at 8% -8%, rgba(110, 27, 38, 0.38), transparent 60%), radial-gradient(820px 620px at 102% 108%, rgba(26, 44, 72, 0.75), transparent 55%), linear-gradient(165deg, var(--mx-navy-950), var(--mx-amber-600) 62%, var(--mx-navy-800)); } /* Same faint dotted "path" texture as .maargx-authpage, so the split layout and the single-card auth pages read as one visual family. */ .maargx-auth-banner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.5; pointer-events: none; } .maargx-auth-showcase { width: min(88%, 760px); aspect-ratio: 4 / 3; max-height: calc(100vh - 96px); border: 6px solid var(--mx-amber-400); border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: 0 30px 70px rgba(8, 14, 28, 0.5); overflow: hidden; position: relative; } .maargx-auth-showcase-slides { position: absolute; inset: 0; } .maargx-auth-showcase-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; } .maargx-auth-showcase-slide.is-active { opacity: 1; } .maargx-auth-showcase-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .maargx-auth-showcase-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; } .maargx-auth-showcase-dots button { width: 9px; height: 9px; border-radius: 999px; padding: 0; border: none; background: rgba(16, 28, 48, 0.25); cursor: pointer; transition: background-color 0.15s ease, width 0.15s ease; } .maargx-auth-showcase-dots button.is-active { background: var(--mx-amber-500); width: 22px; } .maargx-auth-showcase-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; background: linear-gradient(160deg, var(--mx-navy-100), var(--mx-surface)); } .maargx-auth-showcase-logo-img { width: 56px; height: 56px; margin-bottom: 10px; } .maargx-auth-showcase-placeholder .maargx-brand-name { align-items: center; margin-bottom: 14px; } .maargx-auth-showcase-placeholder .maargx-brand-primary { font-size: 24px; } .maargx-auth-showcase-placeholder p { color: var(--mx-ink-soft); font-size: 14px; line-height: 1.5; max-width: 320px; } .maargx-auth-showcase-placeholder a { color: var(--mx-amber-600); font-weight: 700; text-decoration: none; } .maargx-auth-showcase-placeholder a:hover { text-decoration: underline; } .maargx-authpage-split .maargx-auth-wrap { flex: 1 1 52%; display: flex; align-items: center; justify-content: center; padding: 48px; } /* Give the form real presence — a proper elevated card, not text floating on the bare page background — so the right side reads as deliberately composed instead of empty space next to the banner. */ .maargx-authpage-split .maargx-auth-card { background: var(--mx-surface); box-shadow: 0 20px 50px rgba(16, 28, 48, 0.08), var(--mx-shadow-md); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-lg); padding: 46px 46px 38px; max-width: 460px; } .maargx-authpage-split .maargx-auth-card-wide { max-width: 500px; } /* A little more breathing room on this wider, less cramped layout. */ .maargx-authpage-split .maargx-auth-brand { margin-bottom: 28px; } .maargx-authpage-split .maargx-auth-title { font-size: 28px; margin-bottom: 8px; } .maargx-authpage-split .maargx-auth-sub { font-size: 15px; margin-bottom: 32px; } .maargx-authpage-split .maargx-form { gap: 20px; } .maargx-authpage-split .maargx-form-row { gap: 18px; } .maargx-authpage-split input[type="text"], .maargx-authpage-split input[type="email"], .maargx-authpage-split input[type="password"], .maargx-authpage-split input[type="tel"] { padding: 13px 16px; font-size: 15px; } /* Step indicator — Details / Verify / Done — mirrors the Sign Up form's actual two-step flow (fill details -> verify OTP) instead of one long page with no sense of progress. */ .maargx-auth-steps { display: flex; align-items: center; margin-bottom: 28px; } .maargx-auth-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; } .maargx-auth-step-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--mx-line-soft); color: var(--mx-ink-faint); border: 2px solid var(--mx-line); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .maargx-auth-step-label { font-size: 11px; font-weight: 700; color: var(--mx-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .maargx-auth-step.is-active .maargx-auth-step-num { background: var(--mx-amber-500); border-color: var(--mx-amber-500); color: #fff; } .maargx-auth-step.is-active .maargx-auth-step-label { color: var(--mx-navy-900); } .maargx-auth-step.is-done .maargx-auth-step-num { background: var(--mx-success); border-color: var(--mx-success); color: #fff; } .maargx-auth-step.is-done .maargx-auth-step-label { color: var(--mx-ink-soft); } .maargx-auth-step-line { flex: 1 1 auto; height: 2px; background: var(--mx-line); margin: 0 8px 18px; } /* A field with a leading icon (phone) or a trailing action (password show/hide) — same bordered input underneath, just room made for the icon/button so it never overlaps the typed text. */ .maargx-input-wrap { position: relative; } .maargx-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; } .maargx-input-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; padding: 6px 8px; color: var(--mx-ink-soft); } .maargx-input-wrap input[type="password"], .maargx-input-wrap input[type="text"] { padding-right: 42px; } .maargx-link-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; } .maargx-auth-step2-actions { display: flex; justify-content: space-between; margin-top: 14px; } @media (max-width: 900px) { .maargx-authpage-split { flex-direction: column; } .maargx-auth-banner { padding: 28px 20px; flex: 0 0 auto; } .maargx-auth-showcase { width: 100%; aspect-ratio: 16 / 10; max-height: 320px; border-width: 4px; } .maargx-authpage-split .maargx-auth-wrap { padding: 28px 18px 40px; } .maargx-authpage-split .maargx-auth-card { padding: 30px 22px 26px; border-radius: var(--mx-radius-md); } } @media (max-width: 480px) { .maargx-auth-showcase { aspect-ratio: 4 / 3; max-height: 260px; } } /* ----------------------------------------------------------------------- Dashboard shell — sidebar + header + content ----------------------------------------------------------------------- */ .maargx-shell { --mx-sidebar-w: 264px; --mx-header-h: 72px; min-height: 100vh; background: var(--mx-bg); display: block; position: relative; } .maargx-mobilebar { display: none; align-items: center; gap: 14px; height: 58px; padding: 0 16px; background: var(--mx-navy-900); color: #fff; position: sticky; top: 0; z-index: 30; } .maargx-mobilebar-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .maargx-hamburger { background: transparent; border: none; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; } .maargx-hamburger span { width: 20px; height: 2px; background: #fff; border-radius: 2px; display: block; } .maargx-scrim { display: none; position: fixed; inset: 0; background: rgba(9, 13, 28, 0.55); backdrop-filter: blur(1px); z-index: 35; opacity: 0; transition: opacity 0.2s ease; } .maargx-shell.maargx-nav-open .maargx-scrim { opacity: 1; } .maargx-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--mx-sidebar-w); background: linear-gradient(185deg, var(--mx-navy-950), var(--mx-navy-800)); color: #ffffff; display: flex; flex-direction: column; z-index: 20; box-shadow: var(--mx-shadow-md); } .maargx-brand { display: flex; align-items: center; gap: 10px; padding: 22px 22px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .maargx-nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; } .maargx-nav-loading { padding: 12px; color: #ffffff; font-size: 13.5px; } .maargx-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--mx-radius-sm); color: #ffffff; font-size: 14.5px; font-weight: 500; cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease; } .maargx-nav-item .maargx-nav-icon { font-size: 17px; width: 20px; text-align: center; flex: 0 0 auto; } .maargx-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; padding-left: 17px; } .maargx-nav-item.is-active { background: linear-gradient(90deg, rgba(110, 27, 38, 0.22), rgba(110, 27, 38, 0.08)); color: #fff; box-shadow: inset 3px 0 0 var(--mx-amber-400); } .maargx-sidebar-footer { padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .maargx-logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: var(--mx-radius-sm); border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; } .maargx-logout-btn:hover { background: rgba(255, 255, 255, 0.1); } .maargx-main-col { margin-left: var(--mx-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .maargx-header { height: var(--mx-header-h); background: var(--mx-surface); border-bottom: 1px solid var(--mx-line); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 15; } .maargx-page-title { font-size: 19px; font-weight: 800; color: var(--mx-navy-900); } .maargx-user-chip { display: flex; align-items: center; gap: 12px; } .maargx-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(155deg, var(--mx-navy-700), var(--mx-navy-900)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; flex: 0 0 auto; box-shadow: 0 0 0 2px var(--mx-amber-400); } .maargx-user-meta { display: flex; flex-direction: column; line-height: 1.3; } .maargx-user-name { font-weight: 700; font-size: 14px; color: var(--mx-ink); } .maargx-role-badge { display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mx-amber-600); background: var(--mx-amber-100); padding: 2px 8px; border-radius: 999px; width: fit-content; } .maargx-content { padding: 26px 28px 60px; flex: 1; } .maargx-panel[hidden] { display: none !important; } /* Stat tiles */ .maargx-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 24px; } .maargx-stat-card { display: flex; align-items: flex-start; gap: 14px; background: var(--mx-surface); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); padding: 20px 22px; border: 1px solid var(--mx-line-soft); border-top: 3px solid var(--mx-amber-400); transition: box-shadow 0.2s ease, transform 0.2s ease; } .maargx-stat-card:hover { box-shadow: var(--mx-shadow-md); transform: translateY(-2px); } .maargx-stat-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: linear-gradient(155deg, var(--mx-amber-100), rgba(110, 27, 38, 0.18)); } .maargx-stat-main { min-width: 0; } .maargx-stat-card .maargx-stat-label { font-size: 12.5px; font-weight: 700; color: var(--mx-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .maargx-stat-card .maargx-stat-value { font-size: 28px; font-weight: 800; color: var(--mx-navy-900); line-height: 1.1; } .maargx-stat-card .maargx-stat-sub { font-size: 12.5px; color: var(--mx-ink-faint); margin-top: 4px; } /* Role-home summary tiles (Counselor/Evaluator/Mentor landing panels, and evaluation-portal pending/evaluated counts) — a smaller, auto-fitting sibling of .maargx-stats-row above, same visual language. */ .maargx-summary-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; } .maargx-summary-tile { display: flex; align-items: center; gap: 12px; background: var(--mx-surface); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); border: 1px solid var(--mx-line-soft); padding: 14px 18px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .maargx-summary-tile:hover { box-shadow: var(--mx-shadow-md); transform: translateY(-2px); } .maargx-summary-tile-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--mx-line-soft); } .maargx-summary-tile-label { font-size: 12px; font-weight: 700; color: var(--mx-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .maargx-summary-tile-value { font-size: 22px; font-weight: 800; color: var(--mx-navy-900); } /* Section banner — icon + title + short description, used to open a role-home landing panel or an evaluation sub-portal. */ .maargx-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, var(--mx-navy-900), var(--mx-navy-800)); border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-md); padding: 20px 24px; margin-bottom: 20px; color: #fff; } .maargx-banner-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(155deg, var(--mx-amber-400), var(--mx-amber-600)); box-shadow: 0 6px 16px rgba(110, 27, 38, 0.35); } .maargx-banner-title { font-family: var(--mx-font-display); font-size: 19px; font-weight: 800; } .maargx-banner-desc { font-size: 13.5px; color: #ffffff; margin-top: 3px; } .maargx-skel { position: relative; overflow: hidden; min-height: 88px; background: linear-gradient(90deg, var(--mx-line-soft) 25%, var(--mx-line) 37%, var(--mx-line-soft) 63%); background-size: 400% 100%; animation: maargx-shimmer 1.4s ease infinite; } @keyframes maargx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Generic card, used by both the overview panel and lazily-rendered portal panels */ .maargx-card { background: var(--mx-surface); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); border: 1px solid var(--mx-line-soft); margin-bottom: 20px; transition: box-shadow 0.2s ease; } .maargx-card:hover { box-shadow: var(--mx-shadow-md); } .maargx-card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--mx-line-soft); } .maargx-card-head h2 { font-size: 16px; font-weight: 700; color: var(--mx-navy-900); } .maargx-card-body { padding: 20px 22px; } .maargx-card-error { border-left: 4px solid var(--mx-danger); } .maargx-panel-title { font-size: 21px; font-weight: 800; color: var(--mx-navy-900); margin-bottom: 4px; } .maargx-panel-sub { color: var(--mx-ink-soft); font-size: 14px; margin-bottom: 18px; } /* Enrollment / course grid used in overview + courses panel — auto-fit so it reflows to however many ~260px cards fit: ~4 on a wide desktop, 2 on tablet, 1 on a phone, with no fixed column-count breakpoints needed. */ .maargx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; } .maargx-course-card { border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); overflow: hidden; background: var(--mx-surface); box-shadow: var(--mx-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .maargx-course-card:hover { box-shadow: var(--mx-shadow-md); transform: translateY(-3px); border-color: rgba(110, 27, 38, 0.35); } .maargx-course-thumb { height: 110px; background: radial-gradient(120px 80px at 85% -10%, rgba(110, 27, 38, 0.35), transparent 70%), linear-gradient(135deg, var(--mx-navy-700), var(--mx-navy-900)); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; } .maargx-course-body { padding: 14px 16px; } .maargx-course-title { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--mx-navy-900); } .maargx-course-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mx-line-soft); } .maargx-course-cta { font-size: 12.5px; font-weight: 700; color: var(--mx-amber-600); white-space: nowrap; } .maargx-progress-track { height: 7px; border-radius: 999px; background: var(--mx-line-soft); overflow: hidden; margin-bottom: 6px; } .maargx-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mx-amber-500), var(--mx-amber-400)); } .maargx-progress-label { font-size: 12px; color: var(--mx-ink-faint); } /* Simple list rows (announcements, live classes, mentor sessions, etc.) */ .maargx-list { display: flex; flex-direction: column; gap: 12px; } .maargx-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-sm); background: var(--mx-surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .maargx-row:hover { border-color: var(--mx-line); box-shadow: var(--mx-shadow-sm); } .maargx-row-main { flex: 1; min-width: 0; } .maargx-row-title { font-weight: 700; font-size: 14.5px; color: var(--mx-navy-900); margin-bottom: 3px; } .maargx-row-desc { font-size: 13.5px; color: var(--mx-ink-soft); } .maargx-row-meta { font-size: 12.5px; color: var(--mx-ink-faint); margin-top: 6px; } .maargx-row-actions { flex: 0 0 auto; display: flex; gap: 8px; } /* Tag / status pills */ .maargx-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .maargx-pill-success { background: var(--mx-success-bg); color: var(--mx-success); } .maargx-pill-warning { background: var(--mx-warning-bg); color: var(--mx-warning); } .maargx-pill-danger { background: var(--mx-danger-bg); color: var(--mx-danger); } .maargx-pill-info { background: var(--mx-info-bg); color: var(--mx-info); } .maargx-pill-neutral { background: var(--mx-line-soft); color: var(--mx-ink-soft); } .maargx-empty { text-align: center; padding: 40px 20px; color: var(--mx-ink-faint); } .maargx-empty-icon { font-size: 34px; margin-bottom: 10px; display: block; } /* Quiz cards — subject-colour left accent + status pill, used both by the flat "Quiz" nav panel and the in-lecture quiz list. */ .maargx-quiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; } .maargx-quiz-card { background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-left: 4px solid var(--mx-amber-400); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .maargx-quiz-card:hover { box-shadow: var(--mx-shadow-md); transform: translateY(-2px); } .maargx-quiz-card.maargx-accent-amber { border-left-color: var(--mx-amber-400); } .maargx-quiz-card.maargx-accent-info { border-left-color: var(--mx-info); } .maargx-quiz-card.maargx-accent-navy { border-left-color: var(--mx-navy-600); } .maargx-quiz-card.maargx-accent-plum { border-left-color: #7a4fb0; } .maargx-quiz-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .maargx-quiz-card-title { font-weight: 700; font-size: 14.5px; color: var(--mx-navy-900); } .maargx-quiz-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } /* Quiz-taking progress bar + answer options */ .maargx-quiz-progress { margin-bottom: 4px; } .maargx-quiz-progress-track { height: 8px; border-radius: 999px; background: var(--mx-line-soft); overflow: hidden; } .maargx-quiz-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mx-amber-500), var(--mx-amber-400)); transition: width 0.2s ease; } .maargx-quiz-progress-fill.is-low { background: linear-gradient(90deg, #d97a4a, var(--mx-danger)); } .maargx-quiz-progress-label { font-size: 12px; color: var(--mx-ink-faint); margin-top: 6px; } .maargx-quiz-result-bar { max-width: 260px; margin: 10px auto 6px; } .maargx-quiz-question { padding: 16px 0; border-bottom: 1px solid var(--mx-line-soft); } .maargx-quiz-question:first-child { padding-top: 0; } .maargx-quiz-question-text { font-weight: 700; font-size: 14.5px; color: var(--mx-navy-900); margin-bottom: 10px; } .maargx-quiz-options { display: flex; flex-direction: column; gap: 8px; } .maargx-quiz-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius-sm); font-size: 14px; font-weight: 400; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .maargx-quiz-option:hover { border-color: var(--mx-amber-500); background: var(--mx-amber-100); } .maargx-quiz-option.is-selected { border-color: var(--mx-amber-500); background: var(--mx-amber-100); font-weight: 700; } .maargx-quiz-option input[type="radio"] { flex: 0 0 auto; } /* Evaluation submissions — pending/evaluated rows get a subtle accent bar */ .maargx-eval-row { border-left: 3px solid var(--mx-line); padding: 4px 0 4px 12px; } .maargx-eval-row.is-pending { border-left-color: var(--mx-warning); } .maargx-eval-row.is-evaluated { border-left-color: var(--mx-success); } /* Evaluator-side scoring/upload panel, toggled open under a submission row */ .maargx-eval-detail { margin: 12px 0 6px 0; padding-top: 14px; border-top: 1px dashed var(--mx-line); } .maargx-eval-uploads { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; } .maargx-eval-upload { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 6px; } .maargx-eval-upload-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .maargx-eval-upload input[type="file"] { flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--mx-ink-soft); } .maargx-eval-row .maargx-row-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .maargx-table-wrap { overflow-x: auto; } .maargx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .maargx-table th, .maargx-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--mx-line-soft); white-space: nowrap; } .maargx-table th { color: var(--mx-ink-faint); font-weight: 700; text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.03em; } .maargx-table tr:last-child td { border-bottom: none; } /* ----------------------------------------------------------------------- Course player (courses panel) — grid of course cards + a two-column Classplus-style detail view (subject accordion / video / quiz / material) ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- Support & Ops panels — My Mentor, Doubt Desk, Live Classes, Payments, CRM Leads, Let's Talk, Announcements. Builds entirely on the card/row/ pill/quiz-card primitives above rather than a parallel style set. ----------------------------------------------------------------------- */ /* Extra quiz-card accent for "active"/"upcoming" style status (Doubt Desk, Live Classes) — sits alongside the existing amber/info/navy/plum set. */ .maargx-quiz-card.maargx-accent-success { border-left-color: var(--mx-success); } .maargx-section-heading { font-size: 15px; font-weight: 800; color: var(--mx-navy-900); margin: 22px 0 10px; } .maargx-section-heading:first-child { margin-top: 0; } /* My Mentor — profile header + activity timeline */ .maargx-profile-head { flex-wrap: wrap; gap: 14px; } .maargx-profile-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .maargx-profile-avatar { width: 52px; height: 52px; font-size: 19px; box-shadow: none; flex: 0 0 auto; } .maargx-profile-card .maargx-card-head h2 { font-size: 16px; } .maargx-timeline { display: flex; flex-direction: column; } .maargx-timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 22px; } .maargx-timeline-item:last-child { padding-bottom: 0; } .maargx-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: -4px; width: 2px; background: var(--mx-line); } .maargx-timeline-dot { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--mx-amber-100); color: var(--mx-amber-600); display: flex; align-items: center; justify-content: center; font-size: 14px; position: relative; z-index: 1; } .maargx-timeline-content { flex: 1; min-width: 0; padding-top: 4px; } .maargx-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .maargx-timeline-title { font-weight: 700; font-size: 14px; color: var(--mx-navy-900); } /* Payments — per-invoice amount summary + installment rows */ .maargx-payment-summary { display: flex; flex-wrap: wrap; gap: 28px; } .maargx-payment-figure { display: flex; flex-direction: column; gap: 4px; } .maargx-payment-amount { font-size: 20px; font-weight: 800; color: var(--mx-navy-900); } /* Announcements — title + type badge on one line */ .maargx-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; } .maargx-cp-card { cursor: pointer; } .maargx-cp-thumbwrap { position: relative; } .maargx-course-thumb-img { width: 100%; height: 132px; object-fit: cover; display: block; background: var(--mx-navy-800); } .maargx-cp-badge { position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 6px rgba(9, 13, 28, 0.25); } .maargx-cp-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--mx-navy-800); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0 0 16px; } .maargx-cp-back:hover { color: var(--mx-amber-600); } /* Course header — a title/rating block on the left and a bold, visually distinct "buy box" on the right (Udemy/Amazon-style), instead of price and validity being one more small grey line lost in the middle. Uses the row's full width rather than leaving it mostly empty. */ .maargx-cp-header { display: flex; align-items: center; gap: 20px; background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); padding: 16px 20px; margin-bottom: 16px; } /* Course banners are always landscape — never a tall/portrait crop */ .maargx-cp-header-thumb { width: 168px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--mx-radius-sm); flex: 0 0 auto; box-shadow: var(--mx-shadow-sm); } .maargx-cp-header-main { flex: 1; min-width: 0; } .maargx-cp-header-title { font-size: 19px; font-weight: 800; color: var(--mx-navy-900); text-wrap: balance; } /* The "buy box" — bold on pricing and validity, clearly its own visual block rather than blending into the header background. Pricing, discount and validity all share ONE flowing line (maargx-buybox-line) instead of three stacked rows, so the box stays compact no matter how much information it's carrying. */ .maargx-buybox { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 220px; background: var(--mx-amber-100); border: 1px solid rgba(181, 121, 10, 0.3); border-radius: var(--mx-radius-md); padding: 10px 16px; } .maargx-buybox.is-enrolled { background: var(--mx-success-bg); border-color: rgba(26, 143, 94, 0.3); } .maargx-buybox-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; } .maargx-buybox-discount { flex: 0 0 auto; background: var(--mx-danger); color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .maargx-price-current { font-weight: 800; color: var(--mx-navy-900); font-size: 22px; line-height: 1; } .maargx-price-compare { color: var(--mx-ink); text-decoration: line-through; font-size: 13px; } .maargx-buybox-dot { color: var(--mx-ink); font-size: 13px; } .maargx-buybox-validity { font-size: 12.5px; font-weight: 700; color: var(--mx-navy-800); white-space: nowrap; } .maargx-buybox-status { font-size: 14px; font-weight: 800; color: var(--mx-success); } /* "Enroll Now" / "Buy Now" CTA lives inside the buy box, full-width */ .maargx-cp-buy-btn { display: block; width: 100%; padding: 9px 20px; text-decoration: none; text-align: center; } /* Udemy-style course player: the video/tabs column is wide and comes first, the "Course content" curriculum is a narrower column that sticks in place as you scroll the lecture content — same convention as Udemy's own course player. */ .maargx-cp-columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } .maargx-cp-sidebar { background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); overflow: hidden; } .maargx-cp-sidebar-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--mx-line-soft); background: var(--mx-surface); flex: 0 0 auto; } .maargx-cp-sidebar-title { font-size: 15px; font-weight: 800; color: var(--mx-navy-900); margin-bottom: 2px; } .maargx-cp-subject + .maargx-cp-subject { border-top: 1px solid var(--mx-line-soft); } /* SUBJECT — the top tier: solid navy-tinted bar with a book icon, deliberately heavier than a chapter card below it so the two levels never read as siblings. No "Section N:" numbering — a subject is named, not numbered. */ .maargx-cp-subject-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--mx-navy-900); border: none; text-align: left; cursor: pointer; font-size: 14.5px; font-weight: 800; color: #ffffff; line-height: 1.35; } .maargx-cp-subject-icon { flex: 0 0 auto; font-size: 16px; } .maargx-cp-subject-title { flex: 1; } .maargx-cp-subject-head .maargx-row-meta { color: rgba(255,255,255,0.65); font-size: 11.5px; white-space: nowrap; } .maargx-cp-subject-chevron { color: rgba(255,255,255,0.65); transition: transform 0.15s ease; flex: 0 0 auto; } .maargx-cp-subject.is-open .maargx-cp-subject-chevron { transform: rotate(90deg); } .maargx-cp-subject-head:hover { background: var(--mx-navy-800); } .maargx-cp-subject-body { display: none; padding: 10px 8px; background: var(--mx-bg); } .maargx-cp-subject.is-open .maargx-cp-subject-body { display: block; } /* CHAPTER — a distinct, indented card nested under its subject: folder icon, left accent bar, tinted card background, rounded corners — never confused with the subject bar above it. The small icon row on the right is a quiet "what's inside" glance (video/quiz/DPP/material), not a clickable label — the chapter's own tab strip is what actually switches between them, so a quiz never again looks like it IS the chapter. */ .maargx-cp-chapter-head { cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: var(--mx-radius-sm); margin: 0 0 8px; padding: 10px 10px 10px 12px; background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-left: 3px solid var(--mx-amber-400); } .maargx-cp-chapter-head:hover { background: var(--mx-line-soft); } .maargx-cp-chapter-head.is-active { background: var(--mx-amber-100); border-left-color: var(--mx-navy-800); } .maargx-cp-chapter-icon { flex: 0 0 auto; font-size: 15px; } .maargx-cp-chapter-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .maargx-cp-chapter-title { font-size: 13px; font-weight: 700; color: var(--mx-navy-900); line-height: 1.3; } .maargx-cp-chapter-meta { font-size: 11px; color: var(--mx-ink-faint); } .maargx-cp-chapter-types { display: flex; gap: 3px; flex: 0 0 auto; } .maargx-cp-chapter-type-icon { font-size: 12px; opacity: 0.9; filter: none; } .maargx-cp-chapter-type-icon.is-empty { opacity: 0.25; filter: grayscale(1); } .maargx-cp-lecture-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; padding: 10px 8px; border-radius: var(--mx-radius-sm); cursor: pointer; font-size: 13.5px; color: var(--mx-ink); } .maargx-cp-lecture-row:hover { background: var(--mx-line-soft); } .maargx-cp-lecture-row.is-active { background: var(--mx-amber-100); color: var(--mx-navy-900); font-weight: 700; } /* Udemy-style circular play marker instead of a bare glyph */ .maargx-cp-lecture-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mx-line); background: var(--mx-surface); display: flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 1px; } .maargx-cp-lecture-row.is-active .maargx-cp-lecture-icon { border-color: var(--mx-navy-800); background: var(--mx-navy-800); color: #ffffff; } .maargx-cp-lecture-row.is-locked .maargx-cp-lecture-icon { border-style: dashed; } /* Title + badges share a column so a long title wraps onto its own next line instead of truncating with an ellipsis or squeezing the badges off the row. */ .maargx-cp-lecture-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; } .maargx-cp-lecture-title { flex: 1 1 auto; min-width: 100px; white-space: normal; line-height: 1.3; word-break: break-word; } .maargx-cp-lecture-row.is-locked { color: var(--mx-ink-faint); } .maargx-cp-lecture-row.is-locked:hover { background: var(--mx-line-soft); } /* Progress ticks — a watched video / completed quiz, identical treatment wherever it shows up (public Course Detail page, Dashboard, and the quiz-engine's own card) so a student's progress reads the same way no matter which screen they're looking at. */ .maargx-cp-lecture-row.is-watched .maargx-cp-lecture-icon { border-color: var(--mx-success); background: var(--mx-success); color: #ffffff; font-size: 12px; font-weight: 800; } .mx-progress-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--mx-success); background: var(--mx-success-bg); border-radius: 999px; padding: 2px 8px; width: fit-content; } .maargx-quiz-card.is-completed { border-left-color: var(--mx-success); } .maargx-quiz-card.is-completed .maargx-quiz-card-top { align-items: center; } /* ------------------------------------------------------------------- LET'S TALK — recipient pill-selector + two-way conversation thread. ------------------------------------------------------------------- */ /* The submit form's own card-body: every direct child (heading, pill row, each field, the attachment row, the footer) gets consistent breathing room from this ONE flex gap, instead of each element needing its own hand-tuned margin — that mismatch of ad-hoc margins is what made the form look cramped in one spot and loose in another. */ .maargx-lt-form { display: flex; flex-direction: column; gap: 18px; } .maargx-lt-form .maargx-field { gap: 8px; } .maargx-lt-form textarea { min-height: 90px; resize: vertical; } .maargx-lt-attach-row { display: flex; gap: 18px; flex-wrap: wrap; } .maargx-lt-attach-row .maargx-field { flex: 1 1 220px; min-width: 0; } .maargx-lt-attach-row input[type="file"] { width: 100%; padding: 9px 10px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-sm); background: var(--mx-surface); font-size: 13px; box-sizing: border-box; } .maargx-lt-form-footer { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .maargx-lt-pills { display: flex; flex-wrap: wrap; gap: 8px; } .maargx-lt-pill { font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; background: var(--mx-surface); border: 1px solid var(--mx-line); color: var(--mx-ink); display: inline-flex; align-items: center; gap: 6px; } .maargx-lt-pill.is-active { background: var(--mx-navy-900); border-color: var(--mx-navy-900); color: #ffffff; } .maargx-lt-chevron { color: var(--mx-ink-faint); transition: transform 0.15s ease; flex: 0 0 auto; } .maargx-lt-thread { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mx-line-soft); } .maargx-lt-message { padding: 8px 12px; margin-bottom: 8px; border-radius: var(--mx-radius-sm); border-left: 3px solid var(--mx-line); background: var(--mx-bg); } .maargx-lt-message.is-staff { border-left-color: var(--mx-navy-700); background: var(--mx-navy-50, #eef1f6); } .maargx-lt-message.is-student { border-left-color: var(--mx-amber-400); } .maargx-lt-message-text { font-size: 13.5px; color: var(--mx-ink); line-height: 1.45; margin-top: 2px; white-space: pre-wrap; } .maargx-cp-subject-actions { display: flex; gap: 8px; padding: 10px 8px 4px; border-top: 1px solid var(--mx-line-soft); margin-top: 6px; flex-wrap: wrap; } .maargx-cp-main { min-width: 0; } .maargx-cp-video-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: var(--mx-navy-950); border-radius: var(--mx-radius-md); overflow: hidden; box-shadow: var(--mx-shadow-sm); } .maargx-cp-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .maargx-cp-video-wrap.maargx-cp-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; color: #ffffff; } .maargx-cp-lock-icon { font-size: 34px; } .maargx-cp-lock-title { font-size: 16px; font-weight: 700; color: #fff; } .maargx-cp-video-wrap.maargx-cp-locked .maargx-muted { color: #ffffff; max-width: 340px; } .maargx-cp-lecture-heading { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); box-shadow: var(--mx-shadow-sm); } .maargx-cp-placeholder { background: var(--mx-surface); border: 1px dashed var(--mx-line); border-radius: var(--mx-radius-md); padding: 30px 20px; } .maargx-cp-row-locked { opacity: 0.6; } .maargx-cp-score { font-size: 28px; font-weight: 800; color: var(--mx-navy-900); margin: 4px 0 16px; } /* Ratings & Reviews — a horizontal, amber-tinted carousel rather than a stacked list: it reads as visually distinct from the white "Course content" curriculum card next to it, and always takes the same modest strip of vertical space no matter how many reviews a course has. */ .maargx-reviews-section { margin-top: 0; } /* Creative section break before Ratings & Reviews — a centered label with a gradient rule fading out either side, so the section reads as a deliberate new moment on the page rather than another stacked card. */ .maargx-section-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; } .maargx-section-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--mx-amber-500) 50%, transparent); opacity: 0.55; } .maargx-section-divider-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mx-amber-600); white-space: nowrap; } @media (max-width: 900px) { .maargx-cp-columns { grid-template-columns: 1fr; gap: 16px; } .maargx-cp-header { flex-direction: column; align-items: stretch; } .maargx-cp-header-thumb { width: 100%; aspect-ratio: 16 / 9; } .maargx-buybox { min-width: 0; width: 100%; } /* Subject/lecture list becomes a compact accordion strip below the player instead of a sticky side column chasing the scroll. */ .maargx-cp-sidebar { position: static; max-height: none; } } /* ----------------------------------------------------------------------- Responsive: collapse sidebar to an off-canvas drawer with a hamburger ----------------------------------------------------------------------- */ @media (max-width: 900px) { .maargx-mobilebar { display: flex; } .maargx-scrim { display: block; pointer-events: none; } .maargx-shell.maargx-nav-open .maargx-scrim { pointer-events: auto; } .maargx-sidebar { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1); z-index: 40; box-shadow: var(--mx-shadow-lg); } .maargx-shell.maargx-nav-open .maargx-sidebar { transform: translateX(0); } .maargx-main-col { margin-left: 0; } .maargx-header { padding: 0 16px; } .maargx-content { padding: 18px 16px 50px; } .maargx-stats-row { grid-template-columns: 1fr 1fr; } .maargx-user-name, .maargx-role-badge { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 520px) { .maargx-stats-row { grid-template-columns: 1fr; } .maargx-row { flex-direction: column; } .maargx-row-actions { width: 100%; } } /* ----------------------------------------------------------------------- Per-lecture badges (sidebar row hints) and the in-lecture tab strip (Video / Quiz / Study Material) — only rendered when a lecture actually has more than one kind of content. ----------------------------------------------------------------------- */ .maargx-cp-lecture-badges { display: inline-flex; gap: 4px; flex: 0 0 auto; } .maargx-cp-lecture-badge { font-size: 12px; } /* Per-lecture Quiz/DPP badges — small pill-buttons next to a lecture's title in the sidebar, distinct from the row's own click target (which opens the lecture video), so a topic-wise quiz or DPP can be launched right from the lecture list without first opening the lecture. */ .maargx-cp-lecture-badge-btn { flex: 0 0 auto; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--mx-amber-600); background: var(--mx-amber-100); border: 1px solid rgba(110, 27, 38, 0.25); border-radius: 999px; padding: 3px 10px; cursor: pointer; text-decoration: none; white-space: nowrap; } .maargx-cp-lecture-badge-btn:hover { background: var(--mx-amber-500); color: #ffffff; } .maargx-cp-lecture-badge-btn.is-locked { color: var(--mx-ink); background: var(--mx-line-soft); border-color: var(--mx-line); cursor: default; } .maargx-cp-lecture-badge-btn.is-locked:hover { background: var(--mx-line-soft); color: var(--mx-ink); } /* A boxed segmented control, not a thin underlined line — the whole point is that a visitor immediately reads this as a clickable, three-way switch (Video / Quiz / DPP) for the lecture above it, not stray text. */ .maargx-cp-lecture-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0 16px; background: var(--mx-line-soft); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); padding: 5px; } .maargx-cp-lecture-tab { font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--mx-ink-soft); background: none; border: none; border-radius: var(--mx-radius-sm); padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } .maargx-cp-lecture-tab-icon { font-size: 14px; } .maargx-cp-lecture-tab:hover { color: var(--mx-navy-800); background: rgba(255, 255, 255, 0.6); } .maargx-cp-lecture-tab.is-active { color: var(--mx-navy-900); background: var(--mx-surface); box-shadow: 0 1px 3px rgba(10, 17, 32, 0.12); } .maargx-cp-lecture-tab-content { min-height: 40px; } /* Shown right after opening a chapter, before any of its four tabs has been clicked — a deliberate "nothing loaded yet" state so a chapter never dumps a video (or a quiz, or a file list) on screen before the student asked for it. */ .maargx-cp-tab-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 36px 20px; text-align: center; background: var(--mx-bg); border: 1px dashed var(--mx-line); border-radius: var(--mx-radius-md); color: var(--mx-ink-faint); } .maargx-cp-tab-placeholder .maargx-cp-lock-icon { font-size: 26px; color: var(--mx-ink-faint); } .maargx-cp-tab-placeholder .maargx-cp-lock-title { font-size: 13.5px; font-weight: 700; color: var(--mx-ink); } /* ----------------------------------------------------------------------- SSC-pattern quiz screen — a full-screen takeover of the course-detail area (no sidebar, no course header) so the test itself is the only thing on screen. Question palette on the right (desktop) / below (mobile), colour convention matches the real SSC/TCS-iON exam CBT: white/outline = Not Visited red = Not Answered (visited) green = Answered purple = Marked for Review purple + tick = Answered & Marked ----------------------------------------------------------------------- */ .maargx-ssc { position: fixed; inset: 0; z-index: 500; background: var(--mx-bg); display: flex; flex-direction: column; } .maargx-ssc-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; background: var(--mx-navy-950); color: #ffffff; padding: 14px 20px; box-shadow: var(--mx-shadow-sm); } .maargx-ssc-exit { flex: 0 0 auto; font-family: inherit; font-size: 13px; font-weight: 700; background: rgba(255,255,255,0.1); color: #ffffff; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--mx-radius-sm); padding: 7px 14px; cursor: pointer; } .maargx-ssc-exit:hover { background: rgba(255,255,255,0.2); } .maargx-ssc-title { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maargx-ssc-timer { flex: 0 0 auto; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.12); border-radius: var(--mx-radius-sm); padding: 6px 14px; color: #ffffff; letter-spacing: 0.3px; } .maargx-ssc-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 300px; gap: 0; } .maargx-ssc-main { min-width: 0; overflow-y: auto; padding: 32px 40px 90px; display: flex; flex-direction: column; } .maargx-ssc-qhead { font-size: 13px; font-weight: 700; color: var(--mx-navy-700); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 14px; } .maargx-ssc-qtext { font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--mx-ink); max-width: 760px; margin-bottom: 28px; text-wrap: balance; } .maargx-ssc-options { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 32px; } .maargx-ssc-option { display: flex; align-items: flex-start; gap: 12px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius-md); background: var(--mx-surface); padding: 14px 18px; font-size: 15.5px; color: var(--mx-ink); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .maargx-ssc-option:hover { border-color: var(--mx-navy-600); } .maargx-ssc-option.is-selected { border-color: var(--mx-navy-800); background: var(--mx-navy-100); font-weight: 700; } .maargx-ssc-option input[type="radio"] { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--mx-navy-800); } .maargx-ssc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; } .maargx-ssc-actions .maargx-btn { margin: 0; width: auto; } .maargx-ssc-palette { flex: 0 0 auto; overflow-y: auto; background: var(--mx-surface); border-left: 1px solid var(--mx-line); padding: 20px; display: flex; flex-direction: column; } .maargx-ssc-legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; font-size: 12px; color: var(--mx-ink); } .maargx-ssc-legend-item { display: flex; align-items: center; gap: 8px; } .maargx-ssc-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; border: 1.5px solid var(--mx-line); } .maargx-ssc-swatch.is-not-visited { background: #d8dce3; border-color: #b9c0cc; } .maargx-ssc-swatch.is-not-answered { background: var(--mx-danger); border-color: var(--mx-danger); } .maargx-ssc-swatch.is-answered { background: var(--mx-success); border-color: var(--mx-success); } .maargx-ssc-swatch.is-marked, .maargx-ssc-swatch.is-answered-marked { background: #7a4fb0; border-color: #7a4fb0; } .maargx-ssc-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; } .maargx-ssc-qnum { font-family: inherit; font-size: 13px; font-weight: 800; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; border: 1.5px solid #b9c0cc; background: #d8dce3; color: var(--mx-ink); cursor: pointer; position: relative; } .maargx-ssc-qnum.is-not-answered { background: var(--mx-danger); border-color: var(--mx-danger); color: #ffffff; } .maargx-ssc-qnum.is-answered { background: var(--mx-success); border-color: var(--mx-success); color: #ffffff; } .maargx-ssc-qnum.is-marked { background: #7a4fb0; border-color: #7a4fb0; color: #ffffff; } .maargx-ssc-qnum.is-answered-marked { background: #7a4fb0; border-color: #7a4fb0; color: #ffffff; box-shadow: inset 0 0 0 2px var(--mx-success); } .maargx-ssc-qnum.is-current { outline: 3px solid var(--mx-amber-400); outline-offset: 1px; } .maargx-ssc-submit { margin-top: auto; } @media (max-width: 900px) { .maargx-ssc-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; overflow-y: auto; } .maargx-ssc-main { padding: 20px 16px 24px; overflow-y: visible; } .maargx-ssc-qtext { font-size: 18px; } .maargx-ssc-palette { border-left: none; border-top: 1px solid var(--mx-line); max-height: 46vh; } .maargx-ssc-palette-grid { grid-template-columns: repeat(7, 1fr); } .maargx-ssc-topbar { padding: 12px 14px; } .maargx-ssc-actions { position: sticky; bottom: 0; background: var(--mx-bg); margin: 0 -16px; padding: 12px 16px; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); } } /* ----------------------------------------------------------------------- Checkout order summary + trust/hint copy ----------------------------------------------------------------------- */ .maargx-checkout-summary { background: var(--mx-bg); border: 1px solid var(--mx-line); border-radius: var(--mx-radius-md); padding: 14px 16px; margin: 16px 0 20px; } .maargx-checkout-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--mx-ink); padding: 6px 0; } .maargx-checkout-summary-row + .maargx-checkout-summary-row { border-top: 1px dashed var(--mx-line); } .maargx-checkout-summary-note { font-size: 12px; color: var(--mx-ink); display: block; margin-top: 2px; } .maargx-checkout-summary-total { font-weight: 800; font-size: 15px; } .maargx-checkout-summary-total span:last-child { color: var(--mx-navy-900); } /* ----------------------------------------------------------------------- Checkout — a real page (topbar + content, same shell as catalog/course detail), not the centered-card-on-dark-background auth style. That auth layout reads as a modal/dialog box; buying a course is a page in its own right, with a normal header and a two-column form + order-summary layout. ----------------------------------------------------------------------- */ .mx-checkout-title { font-size: 24px; font-weight: 800; color: var(--mx-navy-900); margin-bottom: 20px; } .mx-checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; } .mx-checkout-summary-card { position: sticky; top: 84px; } .mx-checkout-summary-item { font-weight: 700; color: var(--mx-navy-900); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--mx-line-soft); } .mx-checkout-notfound { max-width: 480px; margin: 40px auto; text-align: center; } .mx-checkout-notfound .maargx-btn { margin-top: 12px; } @media (max-width: 860px) { .mx-checkout-grid { grid-template-columns: 1fr; } .mx-checkout-summary-card { position: static; } } .maargx-field-hint { font-size: 11.5px; color: var(--mx-ink); margin-top: 4px; display: block; min-height: 14px; } .maargx-field-hint.mx-hint-success { color: var(--mx-success); font-weight: 600; } .maargx-field-hint.mx-hint-error { color: var(--mx-amber-500); font-weight: 600; } .maargx-field-optional { font-size: 11.5px; font-weight: 400; color: var(--mx-ink-faint); text-transform: none; letter-spacing: 0; } .maargx-checkout-secure { font-size: 12px; text-align: center; color: var(--mx-ink); margin: 10px 0 0; } .maargx-preview-hint { font-size: 12px; } /* Coupon input + Apply button sit on one line, the input taking the remaining space so the pair reads as a single control. */ .mx-coupon-row { display: flex; gap: 8px; } .mx-coupon-row input { flex: 1; min-width: 0; } .mx-coupon-row .maargx-btn { flex: 0 0 auto; white-space: nowrap; } .mx-coupon-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--mx-navy-800); background: var(--mx-amber-100); border-radius: 999px; padding: 2px 9px; margin-left: 6px; } /* ===================================================================== Public Course Catalog & Course Detail pages — no-login-required browsing (courses.php + course-detail.php templates, catalog.js + course-detail.js). Shares tokens/components with the rest of the app so these feel like the same product, not a bolted-on marketing site. ===================================================================== */ .mx-catalog-hero { background: linear-gradient(135deg, var(--mx-navy-950), var(--mx-navy-800)); color: #ffffff; padding: 48px 24px 40px; text-align: center; } /* Explicit !important on both, not just inherited from .mx-catalog-hero's own color:#ffffff — on the live site the active theme's own h1/p color rules were winning over inheritance (confirmed: text was rendering black-on-navy, invisible), same class of theme-leak bug hit earlier for font-size on the auth pages. Hard-guaranteed white regardless of theme specificity now. */ .mx-catalog-hero h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; color: #ffffff !important; } .mx-catalog-hero p { color: #ffffff !important; font-size: 15px; max-width: 560px; margin: 0 auto 20px; } .mx-catalog-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .mx-catalog-hero-actions a { display: inline-block; padding: 10px 22px; border-radius: var(--mx-radius-md); font-weight: 700; font-size: 14px; text-decoration: none; } .mx-catalog-hero-actions .mx-cta-primary { background: var(--mx-amber-400); color: #ffffff; } .mx-catalog-hero-actions .mx-cta-secondary { background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.3); } .mx-catalog-body { max-width: 1180px; margin: 0 auto; padding: 36px 20px 70px; } .mx-catalog-body h2 { font-size: 19px; font-weight: 800; color: var(--mx-navy-900); margin-bottom: 4px; } .mx-catalog-sub { color: var(--mx-ink); font-size: 13.5px; margin-bottom: 22px; } .mx-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .mx-catalog-card { display: block; text-decoration: none; color: inherit; background: var(--mx-surface); border: 1px solid var(--mx-line-soft); border-radius: var(--mx-radius-md); overflow: hidden; box-shadow: var(--mx-shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .mx-catalog-card:hover { box-shadow: var(--mx-shadow-md); transform: translateY(-3px); border-color: rgba(110, 27, 38, 0.35); } .mx-catalog-thumb, .mx-catalog-thumb-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: radial-gradient(160px 100px at 85% -10%, rgba(110, 27, 38, 0.35), transparent 70%), linear-gradient(135deg, var(--mx-navy-700), var(--mx-navy-900)); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); font-weight: 800; font-size: 26px; letter-spacing: 0.02em; } .mx-catalog-body-inner { padding: 14px 16px 16px; } .mx-catalog-title { font-size: 15.5px; font-weight: 800; color: var(--mx-navy-900); margin-bottom: 6px; text-wrap: balance; } .mx-catalog-meta { font-size: 12.5px; color: var(--mx-ink); margin-bottom: 8px; } .mx-catalog-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .mx-catalog-cta { font-size: 13px; font-weight: 700; color: var(--mx-amber-600); margin-top: 6px; display: inline-block; } /* Category tabs — rendered from admin-managed data (class-portal-courses.php GET /courses/categories), never hardcoded. Flat underline-tab style — matches maargxupsc.com's own course-filter tabs (plain text, maroon underline + maroon text on the active tab, no pill background) so the LMS catalog reads as the same product as the public marketing site. */ .mx-catalog-tabs { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 28px; border-bottom: 1.5px solid var(--mx-line); } .mx-catalog-tab { font-family: inherit; font-size: 15px; font-weight: 700; color: var(--mx-navy-900); background: none; border: none; border-bottom: 3px solid transparent; padding: 0 0 14px; margin-bottom: -1.5px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .mx-catalog-tab:hover { color: var(--mx-amber-500); } .mx-catalog-tab.is-active { color: var(--mx-amber-500); border-bottom-color: var(--mx-amber-500); } /* "X% OFF" badge — only added to the thumbnail when a course has a compare_at_price higher than its price; the plain thumbnail markup for every other course is untouched. Uses the same --mx-danger token already defined for destructive/attention states elsewhere in this stylesheet. */ .mx-catalog-thumb-wrap { position: relative; } .mx-catalog-off-badge { position: absolute; top: 10px; right: 10px; background: var(--mx-danger); color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; padding: 4px 9px; border-radius: var(--mx-radius-sm); box-shadow: var(--mx-shadow-sm); } @media (max-width: 520px) { .mx-catalog-tabs { gap: 6px; } .mx-catalog-tab { font-size: 12.5px; padding: 7px 13px; } } /* Course Detail top bar */ .mx-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--mx-surface); border-bottom: 1px solid var(--mx-line-soft); } .mx-topbar-back { font-size: 13.5px; font-weight: 700; color: var(--mx-ink); text-decoration: none; white-space: nowrap; } .mx-topbar-actions { display: flex; align-items: center; gap: 10px; } .mx-detail-body { max-width: 1180px; margin: 0 auto; padding: 22px 20px 70px; } .mx-preview-hero { cursor: pointer; } .mx-preview-hero .maargx-cp-lock-icon { font-size: 40px; } /* Brief state while the one-free-play demo gate check (POST /courses/demo-view-check) is in flight, so a slow connection doesn't look like a dead click. */ .maargx-cp-checking { opacity: 0.6; pointer-events: none; transition: opacity 0.15s ease; } .mx-stat-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 4px; font-size: 13px; color: var(--mx-ink); } .mx-stat-row strong { color: var(--mx-navy-900); font-weight: 800; } .mx-lecture-preview-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mx-amber-600); } /* Login/enroll-gate modal (anonymous visitor tries to open a demo lecture, or anyone clicks a locked one) — a little more alive than a plain grey box: the card scales/fades in, and the icon sits in a soft gradient badge instead of floating bare. */ .mx-modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(10, 17, 32, 0.68); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: mx-modal-scrim-in 0.18s ease; } .mx-modal-scrim[hidden] { display: none; } @keyframes mx-modal-scrim-in { from { opacity: 0; } to { opacity: 1; } } .mx-modal-card { position: relative; background: var(--mx-surface); border-radius: 22px; box-shadow: 0 24px 60px rgba(10, 17, 32, 0.35), 0 4px 14px rgba(10, 17, 32, 0.12); max-width: 380px; width: 100%; padding: 34px 28px 28px; text-align: center; overflow: hidden; animation: mx-modal-card-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2); } .mx-modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--mx-amber-400), var(--mx-amber-600), var(--mx-navy-900)); } @keyframes mx-modal-card-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .mx-modal-icon { position: relative; width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 50%; background: linear-gradient(155deg, var(--mx-amber-400), var(--mx-amber-600)); box-shadow: 0 8px 20px rgba(110, 27, 38, 0.4), 0 0 0 6px var(--mx-amber-100); } .mx-modal-title { font-size: 18.5px; font-weight: 800; color: var(--mx-navy-900) !important; margin-bottom: 8px; letter-spacing: -0.01em; } .mx-modal-sub { font-size: 13.5px; color: #000000 !important; font-weight: 500; margin-bottom: 22px; line-height: 1.55; } .mx-modal-actions { display: flex; flex-direction: column; gap: 10px; } .mx-modal-actions .maargx-btn { transition: transform 0.12s ease, box-shadow 0.12s ease; } .mx-modal-actions .maargx-btn:hover { transform: translateY(-1px); } .mx-modal-actions .maargx-btn-primary { box-shadow: 0 6px 16px rgba(110, 27, 38, 0.28); } .mx-modal-cancel { background: none; border: none; color: #000000 !important; font-weight: 500; font-size: 13px; margin-top: 14px; cursor: pointer; } .mx-modal-cancel:hover { text-decoration: underline; } .mx-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px); background: var(--mx-navy-900); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: var(--mx-shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 90; white-space: nowrap; } .mx-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 520px) { .mx-catalog-hero { padding: 36px 18px 32px; } .mx-catalog-hero h1 { font-size: 22px; } .mx-topbar { padding: 10px 14px; gap: 8px; } .mx-topbar .maargx-brand-name { font-size: 14px; } } @media (max-width: 900px) { .mx-detail-body { padding: 16px 14px 60px; } } /* ----------------------------------------------------------------------- SAARTHIPEDIA — AI Study Assistant chat panel ----------------------------------------------------------------------- */ .maargx-sp-card .maargx-card-body { display: flex; flex-direction: column; gap: 12px; } .maargx-sp-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mx-line); } .maargx-sp-picker label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--mx-ink-soft); min-width: 180px; } .maargx-sp-picker select { min-width: 180px; } .maargx-sp-chat { display: flex; flex-direction: column; gap: 10px; min-height: 220px; max-height: 480px; overflow-y: auto; padding: 4px 2px; } .maargx-sp-bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .maargx-sp-bubble-user { align-self: flex-end; background: var(--mx-amber-500); color: #ffffff; border-bottom-right-radius: 4px; } .maargx-sp-bubble-ai { align-self: flex-start; background: var(--mx-navy-100); color: var(--mx-ink); border-bottom-left-radius: 4px; display: flex; flex-direction: column; gap: 6px; } .maargx-sp-copy { align-self: flex-end; padding: 4px 10px; } .maargx-sp-composer { display: flex; gap: 10px; align-items: flex-end; } .maargx-sp-input { flex: 1; resize: vertical; min-height: 44px; } @media (max-width: 640px) { .maargx-sp-picker label, .maargx-sp-picker select { min-width: 0; width: 100%; } .maargx-sp-bubble { max-width: 100%; } } /* ---------- Study Material Store (templates/store.php, store-item.php, assets/js/store.js, store-item.js) — reuses every existing catalog/ detail/checkout class above (.mx-catalog-*, .maargx-buybox-line, .maargx-auth-card, .maargx-form*, .maargx-btn*) so the store looks like a natural extension of the course catalog/checkout, not a bolted-on second design. Only the couple of classes below are new. ---------- */ .mx-cp-header-title { font-size: 22px; font-weight: 800; color: var(--mx-navy-900); margin: 0 0 8px; text-wrap: balance; } @media (max-width: 640px) { .mx-store-buy-layout { flex-direction: column; } } /* ---------- Printable Receipt (templates/receipt.php) — reuses the shared .mx-topbar/.mx-detail-body app shell above; only the receipt sheet itself and its print rule are new. Existing --mx-* design tokens throughout, no new colors introduced. ---------- */ .maargx-receipt-sheet { background: var(--mx-surface); border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); box-shadow: var(--mx-shadow-md); max-width: 640px; margin: 0 auto; padding: 32px 36px; } .maargx-receipt-head { text-align: center; border-bottom: 2px solid var(--mx-navy-700); padding-bottom: 16px; margin-bottom: 20px; } .maargx-receipt-institute-row { display: inline-flex; align-items: center; gap: 10px; } .maargx-receipt-logo-img { width: 34px; height: 34px; } .maargx-receipt-institute { font-family: var(--mx-font-display); font-size: 20px; font-weight: 800; color: var(--mx-navy-900); } .maargx-receipt-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mx-ink-faint); margin-top: 4px; } .maargx-receipt-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } .maargx-receipt-meta > div { flex: 1 1 140px; } .maargx-receipt-block { margin-bottom: 20px; } .maargx-receipt-buyer { font-size: 15px; font-weight: 700; color: var(--mx-ink); margin-top: 2px; } .maargx-receipt-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; } .maargx-receipt-table th, .maargx-receipt-table td { text-align: left; padding: 10px 4px; border-bottom: 1px solid var(--mx-line-soft); } .maargx-receipt-table th:last-child, .maargx-receipt-table td:last-child { text-align: right; } .maargx-receipt-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mx-ink-faint); border-bottom: 1.5px solid var(--mx-line); } .maargx-receipt-total-row td { font-weight: 800; font-size: 16px; color: var(--mx-navy-900); border-bottom: none; border-top: 2px solid var(--mx-navy-700); padding-top: 14px; } .maargx-receipt-footer-meta { font-size: 13px; color: var(--mx-ink-soft); margin-bottom: 12px; } .maargx-receipt-thanks { font-size: 12.5px; color: var(--mx-ink-faint); text-align: center; margin-top: 24px; } @media print { /* Hide site/plugin chrome — only the receipt sheet itself prints. */ .maargx-receipt-noprint, .mx-topbar { display: none !important; } body, .maargx-app, .maargx-receipt-page { background: #ffffff !important; } .mx-detail-body { padding: 0 !important; max-width: none !important; } .maargx-receipt-sheet { box-shadow: none !important; border: none !important; max-width: 100% !important; padding: 0 !important; } }