/* ========================================================================== Draco LMS — Design System v2.1 (Corporate · Symmetric · Responsive) Independent of Draco Learning (shares NO css/js). ========================================================================== */ /* Adjustable text size — applied in the mobile-app reading view only via (set in layout.php when $_SESSION['m_app']). Scales the rem-based layout so lesson content grows while still reflowing. Capped 125%. */ html[data-textsize="sm"] { font-size:93.75%; } html[data-textsize="lg"] { font-size:112.5%; } html[data-textsize="xl"] { font-size:125%; } :root { /* Primary — restrained "trust blue" palette (Tailwind blue 50→900) for a Workday/ServiceNow/Compliatric look. Replaces the older violet-leaning blue. #1d4ed8 is the canonical primary; #1e40af the trust-blue accent. */ --p-50:#eff6ff; --p-100:#dbeafe; --p-200:#bfdbfe; --p-300:#93c5fd; --p-400:#60a5fa; --p-500:#3b82f6; --p-600:#2563eb; --p-700:#1d4ed8; --p-800:#1e40af; --p-900:#1e3a8a; /* Reserved violet — used very sparingly for category accents only. */ --v-500:#8b5cf6; --v-600:#7c3aed; --v-700:#6d28d9; /* Neutrals: keep Tailwind slate (we tested warm/cool both — slate balances legibility on screens better than warmer grays in our type pairing). */ --n-0:#ffffff; --n-50:#f8fafc; --n-100:#f1f5f9; --n-150:#eaeff5; --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8; --n-500:#64748b; --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a; /* Document tan — warm parchment for export views & audit packets. */ --doc-bg:#fafaf6; --doc-line:#e7e3d6; --nav:#0c1730; --nav-2:#13213f; --nav-line:rgba(255,255,255,.08); --nav-tx:#aab8d4; --nav-mut:#6679a0; --ok:#15803d; --ok-bg:#e9f9ef; --ok-bd:#bbe9c9; --wn:#b45309; --wn-bg:#fef5e7; --wn-bd:#f5d9a8; --bd:#be123c; --bd-bg:#fdeaef; --bd-bd:#f6c2cf; --nf:#1d4ed8; --nf-bg:#e9f0fe; --nf-bd:#c2d6fb; --bg:var(--n-100); --surf:var(--n-0); --surf-2:var(--n-50); --bd-c:var(--n-200); --bd-c2:var(--n-300); --tx:var(--n-900); --tx-mut:var(--n-500); --tx-fa:var(--n-400); --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --sh-xs:0 1px 2px rgba(15,23,42,.05); --sh-sm:0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04); --sh-md:0 6px 16px -4px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06); --sh-lg:0 20px 40px -12px rgba(15,23,42,.18); --ring:0 0 0 3px rgba(29,78,216,.30); --sidebar-w:264px; --topbar-h:72px; --content-max:1520px; --gut:clamp(16px, 1.2rem + 1.6vw, 44px); /* Typography — Inter (Google Fonts; loaded by lms_head). System fonts are the fallback chain when the network blocks Google. Display variant uses the same family with tighter tracking for headlines. */ --ff:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-display:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ff-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --t:150ms cubic-bezier(.4,0,.2,1); } body { font-family:var(--ff); font-feature-settings:'cv11','ss01','ss03'; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1, h2, h3, h4, h5, h6, .lms-display { font-family:var(--ff-display); letter-spacing:-.018em; font-feature-settings:'cv11','ss01','ss03'; } code, kbd, samp, pre { font-family:var(--ff-mono); } *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } /* Accessibility: honor the OS "reduce motion" preference — near-instant transitions/animations and no smooth-scroll for users who opt out. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } html,body { height:100%; } body { margin:0; font-family:var(--ff); color:var(--tx); background:var(--bg); font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } h1,h2,h3,h4 { margin:0; line-height:1.22; font-weight:800; letter-spacing:-.02em; color:var(--tx); } h1 { font-size:clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem); } h2 { font-size:clamp(1.12rem, 1rem + .5vw, 1.4rem); } h3 { font-size:1.02rem; font-weight:700; } p { margin:0; } a { color:var(--p-600); text-decoration:none; } a:hover { color:var(--p-700); text-decoration:underline; } img,svg { display:block; max-width:100%; } button { font:inherit; cursor:pointer; } :focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); } ::selection { background:var(--p-200); } input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus { -webkit-text-fill-color:var(--tx); -webkit-box-shadow:0 0 0 1000px var(--surf) inset; box-shadow:0 0 0 1000px var(--surf) inset; caret-color:var(--tx); } .lms-skip { position:absolute; left:-999px; top:0; z-index:200; background:var(--p-700); color:#fff; padding:var(--s3) var(--s5); border-radius:0 0 var(--r-sm) 0; font-weight:600; } .lms-skip:focus { left:0; } .lms-logo { height:30px; width:30px; object-fit:contain; flex:none; } .lms-logo--lg { height:54px; width:54px; } .lms-wordmark { font-weight:800; font-size:1.06rem; letter-spacing:-.02em; color:#fff; white-space:nowrap; } .lms-wordmark span { color:var(--p-300); font-weight:600; } .lms-wordmark--ink { color:var(--tx); font-size:1.85rem; letter-spacing:-.025em; } .lms-wordmark--ink span { color:var(--p-600); } /* ===== APP SHELL ======================================================= */ .lms-app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; } .lms-sidebar { background:var(--nav); color:var(--nav-tx); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; border-right:1px solid var(--nav-line); } .lms-brand { display:flex; align-items:center; gap:var(--s3); height:var(--topbar-h); padding:0 var(--s5); flex:none; border-bottom:1px solid var(--nav-line); } .lms-nav { padding:var(--s3) var(--s3); overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:2px; } .lms-nav-group { margin:var(--s4) var(--s3) var(--s1); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--nav-mut); } .lms-nav-group:first-child { margin-top:var(--s1); } .lms-nav-item { display:flex; align-items:center; gap:var(--s3); padding:7px var(--s3); border-radius:var(--r-sm); color:var(--nav-tx); font-weight:500; font-size:.9rem; transition:background var(--t),color var(--t); } .lms-nav-item:hover { background:var(--nav-2); color:#fff; text-decoration:none; } .lms-nav-item[aria-current="page"] { background:var(--p-600); color:#fff; font-weight:600; box-shadow:var(--sh-sm); } .lms-nav-item svg { width:18px; height:18px; flex:none; opacity:.75; } .lms-nav-item[aria-current="page"] svg { opacity:1; } .lms-side-report { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px var(--s5) 12px; font-size:.74rem; font-weight:500; color:var(--nav-mut); text-decoration:none; letter-spacing:.02em; transition:color .15s ease; } .lms-side-report svg { width:14px; height:14px; } .lms-side-report:hover { color:#fff; } .lms-side-foot { padding:var(--s4) var(--s5); border-top:1px solid var(--nav-line); font-size:.72rem; color:var(--nav-mut); display:flex; align-items:center; justify-content:center; gap:var(--s2); } .lms-side-foot::before { content:""; width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.18); flex:none; } .lms-main { display:flex; flex-direction:column; min-width:0; min-height:100vh; } .lms-topbar { height:var(--topbar-h); background:var(--surf); border-bottom:1px solid var(--bd-c); display:flex; align-items:center; gap:var(--s4); padding:0 var(--gut); position:sticky; top:0; z-index:30; } /* Native iOS app: the WKWebView renders edge-to-edge (viewport-fit=cover), so the sticky top bar would sit UNDER the translucent status bar (clock/battery overlap the burger + controls). Pad the bar down by the safe-area inset and grow it to match, so its content clears the status bar while the bar's background still fills the inset. No effect on desktop web (inset = 0). */ body.lms-native .lms-topbar { padding-top:env(safe-area-inset-top); height:calc(var(--topbar-h) + env(safe-area-inset-top)); } /* The slide-in nav drawer + sticky bulk-action bar must clear the inset too. */ body.lms-native .lms-sidebar { padding-top:calc(env(safe-area-inset-top) + var(--s4)); } body.lms-native .lms-bulk { top:calc(var(--topbar-h) + env(safe-area-inset-top)); } .lms-burger { display:none; background:var(--surf-2); border:1px solid var(--bd-c); border-radius:var(--r-sm); width:38px; height:38px; place-items:center; color:var(--tx); flex:none; } .lms-search { flex:1; max-width:640px; position:relative; } .lms-search input { width:100%; height:40px; padding:0 var(--s4) 0 38px; border:1px solid var(--bd-c2); border-radius:var(--r-pill); background:var(--surf-2); font-size:.88rem; color:var(--tx); transition:border-color var(--t),background var(--t); } .lms-search input:focus-visible { border-color:var(--p-400); background:var(--surf); } .lms-search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--tx-fa); } .lms-sp { flex:1; } .lms-acct { position:relative; } .lms-account { display:flex; align-items:center; gap:var(--s3); background:none; border:1px solid transparent; border-radius:var(--r); padding:6px 8px 6px 12px; cursor:pointer; color:var(--tx); transition:background var(--t),border-color var(--t); } .lms-account:hover { background:var(--surf-2); } .lms-acct.is-open .lms-account { background:var(--surf-2); border-color:var(--bd-c); } .lms-acct-chev { display:grid; place-items:center; color:var(--tx-fa); transition:transform var(--t); } .lms-acct-chev svg { width:16px; height:16px; } .lms-acct.is-open .lms-acct-chev { transform:rotate(180deg); } .lms-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:258px; background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); box-shadow:var(--sh-lg); padding:var(--s2); z-index:90; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--t),transform var(--t),visibility var(--t); } .lms-acct.is-open .lms-menu { opacity:1; visibility:visible; transform:translateY(0); } .lms-menu-head { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s3) var(--s4); border-bottom:1px solid var(--bd-c); margin-bottom:var(--s2); } .lms-menu-id { line-height:1.35; min-width:0; } .lms-menu-id b { font-size:.88rem; display:block; } .lms-menu-id small { display:block; color:var(--tx-mut); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:188px; } .lms-menu-item { display:flex; align-items:center; gap:var(--s3); padding:10px var(--s3); border-radius:var(--r-sm); color:var(--tx); font-size:.9rem; font-weight:600; transition:background var(--t),color var(--t); } .lms-menu-item:hover { background:var(--surf-2); color:var(--p-700); text-decoration:none; } .lms-menu-item svg { width:18px; height:18px; flex:none; } .lms-menu-item--danger { color:var(--bd); } .lms-menu-item--danger:hover { background:var(--bd-bg); color:var(--bd); } .lms-account-meta { line-height:1.25; text-align:right; } .lms-account-meta b { font-size:.86rem; font-weight:700; } .lms-account-meta small { color:var(--tx-mut); font-size:.74rem; display:block; } .lms-avatar { width:38px; height:38px; border-radius:50%; flex:none; color:#fff; background:linear-gradient(150deg,var(--p-500),var(--p-700)); display:grid; place-items:center; font-weight:700; font-size:.82rem; } .lms-content { flex:1; width:100%; max-width:var(--content-max); margin-inline:auto; padding:var(--s8) var(--gut) var(--s10); } /* ----- Page header — uniform corporate treatment ------------------------ * The legacy `.lms-page-head` class is restyled to match `.lms-pageheader` * so every page gets the same look without rewriting markup. Eyebrow lines, * the blue accent bar, and the card background are all driven from CSS. */ .lms-page-head { position:relative; display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:center; padding:16px 22px 16px 26px; margin-bottom:var(--s4); border-radius:14px; background:linear-gradient(135deg, var(--surf), var(--surf-2)); border:1px solid var(--bd-c); border-bottom:1px solid var(--bd-c); box-shadow: 0 1px 2px rgba(15,23,42,.04); } .lms-page-head::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg, var(--p-500), var(--p-800)); } .lms-page-head .ttl { min-width:0; } .lms-page-head .ttl h1 { margin:0; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color:var(--tx); line-height:1.15; } .lms-page-head .sub { margin:6px 0 0; color:var(--tx-mut); font-size:.92rem; line-height:1.5; } .lms-head-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } @media (max-width:640px) { .lms-page-head { grid-template-columns:1fr; padding:14px 18px 14px 22px; } .lms-head-actions { justify-content:flex-start; } } .lms-grid { display:grid; gap:var(--s4); } .lms-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .lms-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .lms-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .lms-grid--2,.lms-grid--3,.lms-grid--4 { align-items:stretch; } /* main content + fixed-width sidebar (e.g. admin course editor); stacks on narrow screens */ .lms-grid--side { grid-template-columns:minmax(0,1fr) minmax(0,360px); align-items:start; } @media (max-width:900px) { .lms-grid--side { grid-template-columns:1fr; } } .lms-stack { display:flex; flex-direction:column; gap:var(--s5); } .lms-card { background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); box-shadow:var(--sh-sm); display:flex; flex-direction:column; overflow:hidden; } .lms-card-pad { padding:var(--s6); } .lms-card-head { padding:var(--s4) var(--s6); border-bottom:1px solid var(--bd-c); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex:none; background:linear-gradient(180deg,var(--surf),var(--surf-2)); } .lms-card-head h3 { font-size:1.02rem; letter-spacing:-.01em; } .lms-card-head .lms-muted { font-size:.84rem; font-weight:600; color:var(--p-700); } .lms-card-body { padding:var(--s6); flex:1; } /* Resources section header — distinguished, uniform, corporate */ .lms-reshead { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; padding:var(--s5) var(--s6); border-bottom:1px solid var(--bd-c); background:linear-gradient(180deg,var(--surf),var(--surf-2)); } .lms-reshead-ic { flex:none; width:46px; height:46px; border-radius:var(--r-sm); background:var(--p-50); color:var(--p-600); border:1px solid var(--p-100); display:grid; place-items:center; } .lms-reshead-ic svg { width:24px; height:24px; } .lms-reshead-tx { flex:1; min-width:0; } .lms-reshead-tx h3 { margin:0; font-size:1.08rem; letter-spacing:-.01em; color:var(--tx); } .lms-reshead-tx p { margin:3px 0 0; font-size:.82rem; color:var(--tx-mut); } .lms-reshead-badge { flex:none; background:var(--p-600); color:#fff; font-weight:700; font-size:.76rem; padding:4px 11px; border-radius:var(--r-pill); } /* ===== Public marketing landing (index.php) ============================ * A distinct public surface — restrained brand gradients are permitted here * (hero glow, feature icon chips, closing CTA band), see DESIGN_STANDARDS §7. */ /* Full-bleed dark hero band — flows out of the dark header into one strong * brand zone, then the stat tiles float onto the light page below it. */ .lms-landing-hero { position:relative; text-align:center; width:100vw; margin-left:calc(50% - 50vw); margin-top:-36px; padding:88px 20px 132px; overflow:hidden; color:#fff; background: radial-gradient(120% 95% at 50% -20%, #1e2f63 0%, #131f43 42%, #0b1226 100%); } /* glow + fine grid layered over the gradient for depth */ .lms-landing-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(40% 60% at 16% 8%, rgba(99,102,241,.45), transparent 60%), radial-gradient(42% 64% at 88% 4%, rgba(37,99,235,.42), transparent 60%), radial-gradient(46% 70% at 70% 116%, rgba(193,162,74,.22), transparent 62%); } .lms-landing-hero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 78%); mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 78%); } .lms-landing-hero > * { position:relative; z-index:1; } .lms-landing-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#dbe4ff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(4px); padding:6px 14px; border-radius:var(--r-pill); margin:0 0 22px; } .lms-landing-eyebrow svg { width:14px; height:14px; flex:none; } .lms-landing-h1 { font-size:clamp(2.1rem,4.6vw,3.25rem); line-height:1.08; letter-spacing:-.022em; color:#fff; margin:0 auto 18px; max-width:18ch; font-weight:800; text-shadow:0 1px 30px rgba(0,0,0,.28); } .lms-landing-sub { font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.6; color:rgba(231,238,255,.82); margin:0 auto 30px; max-width:60ch; } .lms-landing-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .lms-landing-cta .lms-btn { padding:14px 28px; font-size:1rem; } .lms-landing-hero .lms-btn--secondary { background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.30); } .lms-landing-hero .lms-btn--secondary:hover { background:rgba(255,255,255,.18); } .lms-landing-trust { display:flex; gap:14px 26px; justify-content:center; flex-wrap:wrap; margin-top:24px; color:rgba(231,238,255,.78); font-size:.85rem; font-weight:600; } .lms-landing-trust span { display:inline-flex; align-items:center; gap:7px; } .lms-landing-trust span::before { content:""; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.22); } .lms-landing-stats { position:relative; z-index:2; width:min(1120px,92%); max-width:none; margin:-72px auto 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .lms-landing-stat { text-align:center; padding:18px 10px; background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t); } .lms-landing-stat:hover { transform:translateY(-2px); box-shadow:var(--sh-md); } .lms-landing-stat b { display:block; font-size:1.45rem; font-weight:800; color:var(--p-700); letter-spacing:-.01em; } .lms-landing-stat span { font-size:.8rem; color:var(--tx-mut); font-weight:600; } .lms-landing-features { width:min(1200px,92%); max-width:none; margin:46px auto 8px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; } .lms-landing-feat { background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); transition:transform var(--t), box-shadow var(--t), border-color var(--t); } .lms-landing-feat:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--p-200); } .lms-landing-feat-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#fff; margin-bottom:14px; background:linear-gradient(135deg,var(--p-600),var(--p-800)); } .lms-landing-feat-ic svg { width:23px; height:23px; } .lms-landing-feat h2 { font-size:1.07rem; margin:0 0 7px; color:var(--tx); letter-spacing:-.01em; } .lms-landing-feat p { margin:0; color:var(--tx-mut); font-size:.94rem; line-height:1.55; } .lms-landing-band { width:min(1200px,92%); max-width:none; margin:50px auto; padding:46px 28px; border-radius:var(--r-xl); text-align:center; color:#fff; position:relative; overflow:hidden; background:linear-gradient(135deg,#15264f,#0c1730); } .lms-landing-band::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(48% 120% at 82% 0, rgba(193,162,74,.20), transparent 60%); } .lms-landing-band > * { position:relative; z-index:1; } .lms-landing-band h2 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin:0 0 10px; color:#fff; letter-spacing:-.01em; } .lms-landing-band p { margin:0 0 22px; color:rgba(255,255,255,.82); font-size:1.02rem; } @media (max-width:760px) { .lms-landing-stats { grid-template-columns:repeat(2,1fr); margin-top:-56px; } .lms-landing-hero { margin-top:-24px; padding:60px 18px 104px; } } /* ===== Pricing page (pricing.php) ===================================== */ .lms-pricing-grid { width:min(1180px,92%); margin:40px auto 0; display:grid; grid-template-columns:0.92fr 1.08fr; gap:22px; align-items:start; } .lms-price-card { background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:32px; text-align:center; height:100%; } .lms-price-tag { display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; } .lms-price-amt { font-size:clamp(2.4rem,6vw,3rem); font-weight:800; color:var(--p-700); letter-spacing:-.02em; } .lms-price-per { color:var(--tx-mut); font-weight:600; } .lms-price-eff { color:var(--tx-mut); font-size:.9rem; margin:6px 0 20px; } .lms-price-list { text-align:left; max-width:580px; margin:0 auto; padding:0; list-style:none; display:grid; gap:11px; } .lms-price-list li { position:relative; padding-left:30px; color:var(--tx); line-height:1.5; font-size:.95rem; } .lms-price-list li::before { content:""; position:absolute; left:2px; top:3px; width:18px; height:18px; border-radius:50%; background:rgba(21,128,61,.12); box-shadow:inset 0 0 0 1px rgba(21,128,61,.30); } .lms-price-list li::after { content:"✓"; position:absolute; left:6px; top:1px; color:var(--ok); font-size:.74rem; font-weight:800; } .lms-calc { padding:30px; height:100%; background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r-xl); box-shadow:var(--sh-md); scroll-margin-top:84px; } .lms-calc-title { font-size:1.4rem; margin:0 0 6px; text-align:center; color:var(--tx); } .lms-calc-sub { color:var(--tx-mut); text-align:center; margin:0 auto 22px; max-width:62ch; font-size:.95rem; line-height:1.55; } .lms-calc-input { max-width:440px; margin:0 auto 26px; text-align:center; } .lms-calc-input label { display:block; font-weight:600; margin-bottom:10px; color:var(--tx); } .lms-calc-input input[type=number] { width:170px; font-size:1.7rem; font-weight:800; text-align:center; padding:10px 12px; border:1px solid var(--bd-c); border-radius:var(--r); background:var(--surf-2); color:var(--tx); } .lms-calc-input input[type=number]:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 3px rgba(37,99,235,.18); } .lms-calc-input input[type=range] { display:block; width:100%; margin-top:18px; accent-color:var(--p-600); } .lms-calc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:12px; } .lms-calc-out { background:var(--surf-2); border:1px solid var(--bd-c); border-radius:var(--r); padding:16px 10px; text-align:center; } .lms-calc-out--hi { background:linear-gradient(135deg,var(--p-600),var(--p-800)); border-color:transparent; } .lms-calc-k { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--tx-mut); font-weight:700; margin-bottom:7px; } .lms-calc-out--hi .lms-calc-k { color:rgba(255,255,255,.82); } .lms-calc-v { display:block; font-size:1.5rem; font-weight:800; color:var(--tx); letter-spacing:-.01em; } .lms-calc-out--hi .lms-calc-v { color:#fff; } .lms-calc-save { margin-top:20px; border-top:1px solid var(--bd-c); padding-top:16px; display:grid; gap:9px; } .lms-calc-save-row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.95rem; color:var(--tx-mut); } .lms-calc-save-row b { font-size:1.05rem; color:var(--tx); white-space:nowrap; } .lms-calc-save-row--win { color:var(--tx); font-weight:600; } .lms-calc-save-row--win b { color:var(--ok); font-size:1.3rem; } .lms-calc-fine { margin:16px 0 0; font-size:.78rem; color:var(--tx-mut); line-height:1.5; } .lms-cmp-wrap { width:min(1180px,92%); margin:54px auto 0; padding:0; } .lms-cmp-title { text-align:center; font-size:1.5rem; margin:0 0 22px; color:var(--tx); } .lms-cmp-scroll { overflow-x:auto; border:1px solid var(--bd-c); border-radius:var(--r-lg); box-shadow:var(--sh-md); background:var(--surf); } .lms-cmp { width:100%; min-width:680px; border-collapse:collapse; background:var(--surf); table-layout:fixed; } .lms-cmp thead th:first-child { width:28%; } .lms-cmp thead th:not(:first-child) { width:24%; } .lms-cmp th, .lms-cmp td { padding:16px 18px; text-align:center; border-bottom:1px solid var(--bd-c); font-size:.93rem; vertical-align:middle; } .lms-cmp thead th { background:var(--surf-2); font-weight:700; color:var(--tx); padding-top:18px; padding-bottom:18px; } .lms-cmp tbody th { font-weight:600; color:var(--tx); width:30%; text-align:left; } .lms-cmp td { color:var(--tx-mut); } .lms-cmp tbody tr:hover td:not(.lms-cmp-hi), .lms-cmp tbody tr:hover th { background:rgba(37,99,235,.035); } /* Highlighted Draco column runs the full height of the table */ .lms-cmp .lms-cmp-hi { background:rgba(37,99,235,.06); border-left:1px solid var(--p-200); border-right:1px solid var(--p-200); } .lms-cmp td.lms-cmp-hi { color:var(--tx); font-weight:600; } .lms-cmp thead th.lms-cmp-hi { background:linear-gradient(135deg,var(--p-600),var(--p-800)); color:#fff; border-left-color:var(--p-700); border-right-color:var(--p-700); border-radius:var(--r) var(--r) 0 0; } .lms-cmp tbody tr:last-child th, .lms-cmp tbody tr:last-child td { border-bottom:0; } /* Vendor logos / names in the comparison header */ .lms-cmp-vendor { display:flex; align-items:center; justify-content:center; gap:10px; line-height:1.2; font-size:1.18rem; font-weight:800; letter-spacing:-.01em; } .lms-cmp-vendor img { width:52px; height:52px; flex:none; } .lms-cmp-logo { display:inline-block; height:38px; width:auto; max-width:180px; object-fit:contain; vertical-align:middle; } html[data-theme="dark"] .lms-cmp-logo { filter:brightness(0) invert(1); } .lms-cmp-note { width:min(1180px,92%); margin:14px auto 0; padding:0; font-size:.78rem; color:var(--tx-mut); line-height:1.5; text-align:center; } .lms-cmp-intro { width:min(1040px,92%); margin:-8px auto 22px; text-align:center; color:var(--tx-mut); font-size:1.05rem; line-height:1.6; } /* "Best value" badge on the Draco column header */ .lms-cmp-badge { display:inline-block; margin-bottom:8px; padding:3px 11px; background:rgba(255,255,255,.20); color:#fff; border-radius:var(--r-pill); font-size:.62rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .lms-cmp-win { color:var(--ok); } /* Yes / no / partial markers */ .lms-cmp .ck { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-weight:800; font-size:.84rem; line-height:1; vertical-align:middle; } .lms-cmp .ck--y { background:rgba(21,128,61,.14); color:var(--ok); } .lms-cmp .ck--n { background:rgba(220,38,38,.11); color:#dc2626; } .lms-cmp .ck--p { background:rgba(193,162,74,.18); color:#9a7b1f; } .lms-cmp .ck--y::before { content:"\2713"; } /* ✓ */ .lms-cmp .ck--n::before { content:"\2715"; } /* ✕ */ .lms-cmp .ck--p::before { content:"\007E"; } /* ~ */ .lms-cmp td.lms-cmp-hi .ck--y { background:rgba(21,128,61,.18); } .lms-cmp-sub { display:block; margin-top:5px; font-size:.74rem; color:var(--tx-mut); font-weight:500; } /* Two ways to get started — symmetric 2-up */ .lms-setup { width:min(1180px,92%); margin:54px auto 0; } .lms-setup-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; align-items:stretch; } .lms-setup-card { position:relative; background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r-xl); box-shadow:var(--sh-md); padding:28px; } .lms-setup-card--hi { border-color:var(--p-300); box-shadow:0 0 0 1px var(--p-300), var(--sh-md); } .lms-setup-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; color:#fff; margin-bottom:14px; background:linear-gradient(135deg,var(--p-600),var(--p-800)); } .lms-setup-ic svg { width:24px; height:24px; } .lms-setup-card h3 { margin:0 0 8px; font-size:1.15rem; color:var(--tx); letter-spacing:-.01em; } .lms-setup-card p { margin:0; color:var(--tx-mut); line-height:1.6; font-size:.95rem; } .lms-setup-flag { position:absolute; top:18px; right:18px; background:var(--ok); color:#fff; font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); } @media (max-width:820px) { .lms-pricing-grid { grid-template-columns:1fr; } .lms-setup-grid { grid-template-columns:1fr; } } @media (max-width:760px) { .lms-calc { padding:22px 18px; } } .lms-stat { background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); box-shadow:var(--sh-sm); padding:var(--s6); display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); position:relative; overflow:hidden; } .lms-stat::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--p-500); opacity:0; transition:opacity var(--t); } .lms-stat:hover::before { opacity:1; } .lms-stat-ic { width:46px; height:46px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center; background:var(--p-50); color:var(--p-600); } .lms-stat-ic svg { width:22px; height:22px; } .lms-stat .val { font-size:1.95rem; font-weight:800; letter-spacing:-.03em; line-height:1; } .lms-stat .lbl { color:var(--tx-mut); font-size:.84rem; font-weight:500; } /* Compact KPI tiles for admin dashboards (denser; the default tiles waste space). */ .lms-grid.is-compact { gap:var(--s3); } .lms-grid.is-compact .lms-stat { padding:14px 13px; gap:7px; } .lms-grid.is-compact .lms-stat-ic { width:34px; height:34px; } .lms-grid.is-compact .lms-stat-ic svg { width:17px; height:17px; } .lms-grid.is-compact .lms-stat .val { font-size:1.5rem; } .lms-grid.is-compact .lms-stat .lbl { font-size:.76rem; } /* Chart card used on the admin dashboards. */ .lms-chartcard { margin-bottom:var(--s5); } .lms-chartcard .lms-card-pad { padding:var(--s5) var(--s6); } .lms-chartwrap { position:relative; height:240px; } .lms-chartwrap--sm { height:200px; } .lms-stat--ok .lms-stat-ic{ background:var(--ok-bg); color:var(--ok); } .lms-stat--ok::before{ background:var(--ok); } .lms-stat--wn .lms-stat-ic{ background:var(--wn-bg); color:var(--wn); } .lms-stat--wn::before{ background:var(--wn); } .lms-stat--bd .lms-stat-ic{ background:var(--bd-bg); color:var(--bd); } .lms-stat--bd::before{ background:var(--bd); } .lms-ring { --val:0; --sz:168px; --rc:var(--p-600); width:var(--sz); height:var(--sz); border-radius:50%; flex:none; background:conic-gradient(var(--rc) calc(var(--val)*1%), var(--n-200) 0); display:grid; place-items:center; margin-inline:auto; } .lms-ring::before { content:""; grid-area:1/1; width:calc(var(--sz) - 26px); height:calc(var(--sz) - 26px); border-radius:50%; background:var(--surf); box-shadow:inset 0 1px 3px rgba(15,23,42,.06); } .lms-ring-in { grid-area:1/1; z-index:1; text-align:center; } .lms-ring-in b { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; display:block; line-height:1.05; } .lms-ring-in small { color:var(--tx-mut); font-size:.76rem; } .lms-ring--ok{ --rc:var(--ok); } .lms-ring--wn{ --rc:var(--wn); } .lms-ring--bd{ --rc:var(--bd); } .lms-bar { height:8px; border-radius:var(--r-pill); background:var(--n-200); overflow:hidden; } .lms-bar > i { display:block; height:100%; border-radius:inherit; background:var(--p-600); } .lms-bar--ok > i{ background:var(--ok); } .lms-bar--wn > i{ background:var(--wn); } .lms-bar--bd > i{ background:var(--bd); } .lms-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill); font-size:.74rem; font-weight:700; background:var(--surf-2); color:var(--tx-mut); border:1px solid var(--bd-c); white-space:nowrap; } .lms-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; } .lms-pill--ok { color:var(--ok); background:var(--ok-bg); border-color:var(--ok-bd); } .lms-pill--wn { color:var(--wn); background:var(--wn-bg); border-color:var(--wn-bd); } .lms-pill--bd { color:var(--bd); background:var(--bd-bg); border-color:var(--bd-bd); } .lms-pill--nf { color:var(--nf); background:var(--nf-bg); border-color:var(--nf-bd); } .lms-pill--ce { color:var(--p-700); background:var(--p-50); border-color:var(--p-200); } .lms-pill--ce::before { display:none; } /* Coming-soon roadmap (placeholder courses in development) */ .lms-pill--soon { color:#4f46e5; background:rgba(79,70,229,.10); border-color:rgba(79,70,229,.22); } .lms-pill--soon::before { display:none; } /* ===== UNIVERSAL BUTTON DESIGN STANDARD (v0.43.0) ============ * Owner directive — applies to every button on every Draco LMS page: * 1. Gradient bg + white text/icon (no white / near-white backgrounds) * 2. Subtle border + subtle drop-shadow * 3. Same height, same font face/size/weight across the whole platform * 4. Hover changes bg color; text / icon stay the same * 5. NO underlines on links, buttons, or URLs * 6. Icon-only buttons get a `title` attribute (tooltip) * 7. No two adjoining buttons share a colour family — variants below * 8. No yellow / orange / gold / brown / pink / white backgrounds * 9. No position / size / shape change on hover or active * 10. Buttons should not touch other elements — use container gaps */ .lms-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; height:40px; border-radius:8px; font-family:inherit; font-size:.88rem; font-weight:600; letter-spacing:.01em; text-transform:capitalize; border:1px solid rgba(15,23,42,.16); box-shadow:0 1px 2px rgba(15,23,42,.10), 0 2px 5px rgba(15,23,42,.06); color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer; user-select:none; transition:background-image .15s ease, background-color .15s ease, box-shadow .15s ease, filter .15s ease; } .lms-btn, .lms-btn:hover, .lms-btn:focus, .lms-btn:active { color:#fff; text-decoration:none; } .lms-btn:hover { box-shadow:0 2px 4px rgba(15,23,42,.14), 0 4px 10px rgba(15,23,42,.08); } .lms-btn:active { box-shadow:0 1px 2px rgba(15,23,42,.14); } .lms-btn:focus-visible { outline:2px solid var(--p-400); outline-offset:2px; } .lms-btn svg { width:16px; height:16px; } /* Variants — every variant has a gradient + white content. Adjacent variants are visually distinct hues so requirement 7 holds for any pair: */ .lms-btn--primary { background:linear-gradient(135deg, #4f7be8, #1f3aa5); } .lms-btn--primary:hover { background:linear-gradient(135deg, #3e6ce0, #15308e); } .lms-btn--secondary { background:linear-gradient(135deg, #4d586d, #28303f); } .lms-btn--secondary:hover { background:linear-gradient(135deg, #404a5d, #1c2330); } .lms-btn--done { background:linear-gradient(135deg, #6d7a91, #404b5e); } .lms-btn--done:hover { background:linear-gradient(135deg, #5d6a82, #353f51); } .lms-btn--ghost { background:linear-gradient(135deg, #4d8b9a, #1b4e5c); } .lms-btn--ghost:hover { background:linear-gradient(135deg, #3f7686, #114250); } .lms-btn--danger { background:linear-gradient(135deg, #e54a64, #a31d3a); } .lms-btn--danger:hover { background:linear-gradient(135deg, #d83a55, #8c1731); } .lms-btn--success { background:linear-gradient(135deg, #2bb568, #146c3e); } .lms-btn--success:hover { background:linear-gradient(135deg, #22a458, #0e5630); } /* No variant chosen → fall back to primary so a bare `.lms-btn` is never white/near-white (rule 9). */ .lms-btn:not(.lms-btn--primary):not(.lms-btn--secondary):not(.lms-btn--done):not(.lms-btn--ghost):not(.lms-btn--danger):not(.lms-btn--success){ background:linear-gradient(135deg, #4f7be8, #1f3aa5); } /* --block keeps width:100% (width, not height) */ .lms-btn--block { width:100%; } /* --sm / --lg modifiers are kept for backward compatibility but are now no-ops on size: per the standard, every button is the same height. */ .lms-btn--sm, .lms-btn--lg { height:40px; font-size:.88rem; padding:0 18px; } /* Locked / disabled-looking but clickable */ .lms-btn.is-locked { filter:grayscale(.5) brightness(.92); } .lms-btn.is-locked:hover { filter:grayscale(.4) brightness(.95); } /* Filter bar (compact, left-aligned — NOT a card) */ .lms-filter { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s6); } .lms-chip { padding:8px 16px; border-radius:var(--r-pill); font-size:.83rem; font-weight:600; border:1px solid var(--bd-c2); background:var(--surf); color:var(--tx-mut); transition:all var(--t); } .lms-chip:hover { border-color:var(--p-300); color:var(--p-700); background:var(--p-50); } .lms-chip.is-active { background:var(--p-600); border-color:var(--p-600); color:#fff; } /* Universal table frame: subtle border + slightly rounded TOP corners. overflow-x:auto establishes a clip context so the rounded corners clip the header banner; a bottom pager (lms_pager) sits below with square corners. */ .lms-tw { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surf); border:1px solid var(--bd-c2); border-radius:var(--r-sm) var(--r-sm) 0 0; box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 32px -18px rgba(15,23,42,.28); } [data-theme="dark"] .lms-tw { box-shadow:0 1px 2px rgba(0,0,0,.30), 0 14px 32px -18px rgba(0,0,0,.55); } .lms-table { width:100%; border-collapse:collapse; font-size:.875rem; min-width:520px; background:var(--surf); } .lms-table th:first-child { border-top-left-radius:var(--r-sm); } .lms-table th:last-child { border-top-right-radius:var(--r-sm); } .lms-table th { text-align:left; padding:14px var(--s5); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.10em; background:linear-gradient(180deg,#3b424f,#23283313); background:linear-gradient(180deg,#404754,#262b36); border-bottom:1px solid rgba(0,0,0,.25); white-space:nowrap; position:relative; } .lms-table th + th { box-shadow:inset 1px 0 0 rgba(255,255,255,.06); } [data-theme="dark"] .lms-table th { background:linear-gradient(180deg,#2a3041,#181c27); color:#fff; } .lms-table td { padding:var(--s4) var(--s5); border-bottom:1px solid var(--bd-c); vertical-align:middle; } .lms-table tbody tr { transition:background var(--t); } .lms-table tbody tr:nth-child(2n) { background:#eaeef4; } /* grey zebra — clearly reads against the white odd rows */ [data-theme="dark"] .lms-table tbody tr:nth-child(2n) { background:rgba(255,255,255,.03); } .lms-table tbody tr:hover { background:var(--nf-bg); } /* Sortable column headers (anchor inside ). The link inherits the parent th's white text on the charcoal banner; chevron uses the same color. Active column gets a stronger arrow + faint background tint. */ .lms-sort-th { display:inline-flex; align-items:center; gap:6px; color:inherit !important; text-decoration:none !important; padding:2px 4px; margin:-2px -4px; border-radius:6px; transition:background var(--t); } .lms-sort-th:hover { background:rgba(255,255,255,.08); color:#fff !important; } .lms-sort-th.is-active { color:#fff !important; } .lms-sort-th.is-active:hover { background:rgba(255,255,255,.12); } .lms-sort-ic { width:13px; height:13px; flex:none; } .lms-sort-ic--idle { opacity:.45; } .lms-sort-th:hover .lms-sort-ic--idle { opacity:.85; } .lms-sort-ic--up, .lms-sort-ic--down { opacity:1; } .lms-table tbody tr:last-child td { border-bottom:0; } .lms-table .right { text-align:right; } /* Compact variant — tighter rows for short lists (e.g. lesson resources) */ .lms-table--compact th { padding-top:9px; padding-bottom:9px; } .lms-table--compact td { padding-top:7px; padding-bottom:7px; } .lms-u { display:flex; align-items:center; gap:var(--s3); } a.lms-u { cursor:pointer; transition:opacity var(--t); } a.lms-u:hover { opacity:.85; } a.lms-u:hover b { color:var(--p-700); } .lms-u .lms-avatar { width:32px; height:32px; font-size:.72rem; } .lms-u small { color:var(--tx-mut); display:block; font-size:.78rem; } /* Course card — refined header (textured, labelled) */ .lms-course { position:relative; transition:box-shadow var(--t),border-color var(--t); } .lms-course:hover { box-shadow:var(--sh-md); border-color:var(--p-200); } .lms-course-head { height:56px; position:relative; padding:var(--s4); background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:15px 15px,100% 100%; } .lms-course-tag { position:absolute; left:var(--s4); top:50%; transform:translateY(-50%); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.9); } .lms-course-ce { position:absolute; top:50%; transform:translateY(-50%); right:var(--s4); background:#fff; color:var(--p-700); font-weight:800; font-size:.72rem; padding:5px 10px; border-radius:var(--r-pill); box-shadow:var(--sh-xs); } .lms-course-body { padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1; } /* Draco logo to the LEFT of the title */ .lms-course-titlerow { display:flex; align-items:center; gap:12px; } .lms-course-logo { width:36px; height:36px; flex:none; object-fit:contain; } .lms-course-body h3 { font-size:.96rem; margin:0; } .lms-course-cat { color:var(--tx-mut); font-size:.8rem; } .lms-course-foot { margin-top:auto; padding-top:var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); } .lms-muted { color:var(--tx-mut); font-size:.86rem; } .lms-section-title { position:relative; font-size:.95rem; font-weight:800; letter-spacing:-.01em; text-transform:none; color:var(--tx); margin:var(--s6) 0 var(--s3); padding-left:14px; display:flex; align-items:center; gap:var(--s3); } .lms-section-title::before { content:""; position:absolute; left:0; top:50%; width:4px; height:18px; transform:translateY(-50%); background:linear-gradient(180deg,var(--p-500),var(--p-800)); border-radius:2px; } .lms-section-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--bd-c),transparent); margin-left:8px; } /* ===== AUTH — premium split-screen ===================================== */ .lms-auth { min-height:100vh; } .lms-authx { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; } .lms-auth-aside { position:relative; overflow:hidden; color:#fff; background: radial-gradient(680px 420px at 78% 8%, rgba(94,132,238,.42), transparent 60%), radial-gradient(560px 420px at 12% 96%, rgba(36,61,161,.55), transparent 60%), var(--nav); display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(32px,4.4vw,72px); } .lms-auth-aside::before,.lms-auth-aside::after { content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none; } .lms-auth-aside::before { left:-200px; top:-170px; width:640px; height:640px; background:radial-gradient(circle, rgba(94,132,238,.42), transparent 62%); filter:blur(8px); animation:lms-drift 24s ease-in-out infinite alternate; } .lms-auth-aside::after { right:-180px; bottom:-180px; width:500px; height:500px; border:1px solid rgba(255,255,255,.10); box-shadow:0 0 0 64px rgba(255,255,255,.035), inset 0 0 100px rgba(94,132,238,.22); animation:lms-pulse 16s ease-in-out infinite; } @keyframes lms-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(150px,95px,0) scale(1.16); } } @keyframes lms-pulse { 0%,100% { transform:scale(1); opacity:.6; } 50% { transform:scale(1.07); opacity:1; } } .lms-auth-aside-top { display:flex; align-items:center; gap:var(--s4); position:relative; z-index:1; } .lms-auth-aside-top .lms-logo { height:54px; width:54px; } .lms-auth-aside-top .lms-wordmark { font-size:1.85rem; letter-spacing:-.025em; } .lms-auth-aside-mid { position:relative; z-index:1; max-width:460px; margin:var(--s8) 0; } .lms-auth-h { font-size:clamp(1.7rem,1.3rem+1.6vw,2.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:#fff; } .lms-auth-sub { margin-top:var(--s4); color:rgba(255,255,255,.74); font-size:1.02rem; line-height:1.6; } .lms-auth-list { list-style:none; margin:var(--s8) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s4); } .lms-auth-list li { display:flex; align-items:flex-start; gap:var(--s3); color:rgba(255,255,255,.92); font-size:.96rem; font-weight:500; } .lms-auth-list li::before { content:""; width:22px; height:22px; flex:none; border-radius:50%; background:rgba(94,132,238,.30); border:1px solid rgba(144,174,246,.5); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdd0fb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:13px; margin-top:1px; } .lms-auth-aside-mid { margin-block:auto; } .lms-auth-right { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; /* iOS: 100vh spans behind the browser UI, pushing the centered card below the visual middle; dvh fixes it. */ background:var(--surf); } .lms-auth-main { flex:1; display:grid; place-items:center; padding:clamp(28px,5vw,56px); } .lms-auth-card { width:100%; max-width:420px; } .lms-auth-brand { display:none; } /* desktop: brand lives in the side panel */ .lms-field { margin-bottom:var(--s5); } .lms-field label { display:block; font-weight:600; font-size:.84rem; margin-bottom:var(--s2); } .lms-field input,.lms-field select,.lms-field textarea { width:100%; height:46px; padding:0 var(--s4); border:1px solid var(--bd-c2); border-radius:var(--r-sm); font-family:inherit; font-size:.95rem; background:var(--surf); color:var(--tx); transition:border-color var(--t),box-shadow var(--t); } .lms-field textarea { height:auto; min-height:120px; padding:var(--s3) var(--s4); line-height:1.55; resize:vertical; } .lms-field input:focus-visible,.lms-field select:focus-visible,.lms-field textarea:focus-visible { border-color:var(--p-400); box-shadow:var(--ring); outline:none; } .lms-field .hint { font-size:.8rem; color:var(--tx-mut); margin-top:var(--s2); } /* Contact Us — two-panel layout (info aside + form) */ .lms-contact-grid { display:grid; grid-template-columns:minmax(280px,0.62fr) 1.38fr; gap:var(--s5); align-items:start; width:100%; } .lms-contact-aside { background:linear-gradient(160deg,#15264f,#0c1730); color:#fff; border-radius:var(--r-xl); padding:28px; box-shadow:var(--sh-md); } .lms-contact-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.12); margin-bottom:16px; } .lms-contact-ic svg { width:24px; height:24px; color:#fff; } .lms-contact-aside h2 { margin:0 0 8px; font-size:1.25rem; color:#fff; letter-spacing:-.01em; } .lms-contact-aside p { margin:0 0 18px; color:rgba(255,255,255,.8); line-height:1.6; font-size:.95rem; } .lms-contact-list { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px; } .lms-contact-list li { position:relative; padding-left:26px; color:rgba(255,255,255,.92); font-size:.92rem; line-height:1.4; } .lms-contact-list li::before { content:"\2713"; position:absolute; left:0; color:#4ade80; font-weight:800; } .lms-contact-mail { font-size:.88rem; color:rgba(255,255,255,.72); border-top:1px solid rgba(255,255,255,.15); padding-top:14px; } .lms-contact-mail a { color:#bdd0fb; text-decoration:none; } @media (max-width:820px) { .lms-contact-grid { grid-template-columns:1fr; } } .lms-ticket-new svg { width:18px; height:18px; flex:none; color:var(--p-600); } .lms-ticket-new::-webkit-details-marker { display:none; } /* Underline filter tab bar (used for ticket status filters, etc.) */ .lms-filterbar { display:flex; gap:4px; flex-wrap:wrap; align-items:flex-end; border-bottom:1px solid var(--bd-c); margin-bottom:var(--s5); } .lms-filter { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; font-size:.88rem; font-weight:600; color:var(--tx-mut); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--t), border-color var(--t); } .lms-filter:hover { color:var(--tx); } .lms-filter.is-on { color:var(--p-700); border-bottom-color:var(--p-600); } .lms-filter-n { font-size:.72rem; font-weight:700; color:var(--tx-mut); background:var(--surf-2); border:1px solid var(--bd-c); border-radius:var(--r-pill); padding:1px 7px; line-height:1.5; } .lms-filter.is-on .lms-filter-n { color:var(--p-700); background:var(--p-50); border-color:var(--p-100); } .lms-auth-foot { text-align:center; margin-top:var(--s5); font-size:.84rem; color:var(--tx-mut); line-height:1.7; } .lms-auth-footer { text-align:center; padding:var(--s5) var(--s5) var(--s6); font-size:.78rem; color:var(--tx-mut); } .lms-footer-ver { font-variant-numeric:tabular-nums; color:var(--p-600); font-weight:700; } /* ===== FOOTER (app shell) ============================================= */ .lms-footer { border-top:1px solid var(--bd-c); background:var(--surf); flex:none; } .lms-footer-in { max-width:var(--content-max); margin-inline:auto; padding:var(--s5) var(--gut); display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:.8rem; color:var(--tx-mut); } .lms-footer-in b { color:var(--tx-mut); font-weight:700; } /* ===== RESPONSIVE ====================================================== */ .lms-scrim { display:none; } @media (max-width:1080px) { .lms-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .lms-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:1024px) { :root { --content-max:100%; } .lms-app { grid-template-columns:1fr; } .lms-sidebar { position:fixed; inset:0 auto 0 0; width:min(84vw,300px); transform:translateX(-100%); visibility:hidden; transition:transform var(--t),visibility var(--t); z-index:80; } .lms-sidebar.is-open { transform:none; visibility:visible; box-shadow:var(--sh-lg); } .lms-burger { display:grid; } .lms-scrim { display:block; position:fixed; inset:0; background:rgba(7,12,26,.55); opacity:0; pointer-events:none; transition:opacity var(--t); z-index:70; } .lms-scrim.is-open { opacity:1; pointer-events:auto; } } @media (max-width:900px) { .lms-authx { grid-template-columns:1fr; } .lms-auth-aside { display:none; } .lms-auth-brand { display:flex; align-items:center; justify-content:center; gap:var(--s3); margin-bottom:var(--s6); } } @media (max-width:760px) { .lms-grid--2,.lms-grid--3,.lms-grid--4 { grid-template-columns:1fr; } .lms-page-head { flex-direction:column; align-items:flex-start; } .lms-head-actions { width:100%; } .lms-footer-in { flex-direction:column; gap:var(--s2); text-align:center; } } @media (max-width:560px) { .lms-content { padding-top:var(--s6); } .lms-search { display:none; } .lms-account-meta { display:none; } .lms-section-title { margin-top:var(--s8); } } .lms-bk-bar { height:10px; border-radius:999px; background:var(--surf-2); overflow:hidden; border:1px solid var(--bd-c); } .lms-bk-bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--p-500),var(--p-700)); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1); } .lms-bk-meta { display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); font-size:.84rem; font-weight:600; } .lms-bk-meta .lms-muted { font-weight:500; } .lms-video-bar { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3); flex-wrap:wrap; } .lms-video-remain { font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; } .lms-lesson-body { font-size:15px; line-height:1.72; } .lms-lesson-body h2,.lms-lesson-body h3 { margin:var(--s6) 0 var(--s3); } .lms-lesson-body p { margin:0 0 var(--s4); } .lms-lesson-body ul,.lms-lesson-body ol { margin:0 0 var(--s4) var(--s5); } .lms-lesson-body li { margin:var(--s1) 0; } .lms-lesson-body img { max-width:100%; border-radius:var(--r); margin:var(--s4) 0; } /* Knowledge-check answer options. Even though the markup carries `.lms-btn .lms-btn--secondary`, they aren't CTA buttons — they're survey-style choices, so we override the dark gradient/white-text styling to a quiet neutral look that keeps the question and answer text *black* and reserves color for state changes only. */ .lms-check-opt { width:100%; background:var(--surf) !important; background-image:none !important; color:var(--tx) !important; border:1px solid var(--bd-c2) !important; box-shadow:none !important; font-weight:500; text-align:left; justify-content:flex-start; padding:0 18px; transition:background var(--t),border-color var(--t),opacity var(--t); } .lms-check-opt:hover { background:var(--surf-2) !important; border-color:var(--p-300) !important; } .lms-check-opt:focus-visible { outline:2px solid var(--p-400); outline-offset:2px; } [data-theme="dark"] .lms-check-opt { background:var(--surf-2) !important; color:var(--tx) !important; border-color:var(--bd-c2) !important; } [data-theme="dark"] .lms-check-opt:hover { background:var(--surf) !important; } /* Selected (correct) answer — subtle green tint, dark text */ .lms-check-opt.is-picked { background:var(--ok-bg) !important; border-color:var(--ok-bd) !important; color:var(--ok) !important; font-weight:600; cursor:default; pointer-events:none; } .lms-check-opt.is-picked::before { content:"✓"; font-weight:800; margin-right:8px; } /* dim the unchosen options once answered, so the pick reads as a state */ .lms-check.is-answered .lms-check-opt:not(.is-picked) { opacity:.5; pointer-events:none; background:transparent; } /* Locked primary action — stays clickable (shows a hint) unlike [disabled] */ .lms-btn.is-locked { opacity:.55; } .lms-btn.is-locked:hover { opacity:.7; } /* iOS-style toggle switch (admin forms). Use inside a .lms-toggle-row for "label on the left, switch on the right" — much nicer than a bare checkbox. */ .lms-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px; border:1px solid var(--bd-c); border-radius:10px; background:var(--surf); margin-top:var(--s3); } .lms-toggle-row + .lms-toggle-row { margin-top:var(--s2); } .lms-toggle-row > .lt-lbl { min-width:0; flex:1; } .lms-toggle-row > .lt-lbl b { display:block; font-weight:600; font-size:.92rem; line-height:1.3; } .lms-toggle-row > .lt-lbl small { display:block; color:var(--tx-mut); font-size:.78rem; line-height:1.4; margin-top:2px; } .lms-toggle { position:relative; flex:none; width:46px; height:28px; cursor:pointer; } .lms-toggle input { position:absolute; opacity:0; width:0; height:0; } .lms-toggle-track { position:absolute; inset:0; border-radius:28px; background:var(--bd-c); transition:background .2s ease; } .lms-toggle-track::before { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.3); transition:transform .2s ease; } .lms-toggle input:checked + .lms-toggle-track { background:#22c55e; } .lms-toggle input:checked + .lms-toggle-track::before { transform:translateX(18px); } .lms-toggle input:focus-visible + .lms-toggle-track { box-shadow:0 0 0 3px rgba(37,99,235,.3); } .lms-toggle input:disabled + .lms-toggle-track { opacity:.5; cursor:not-allowed; } /* Full-width opt-in row: a native checkbox + title/description block. This is a DIFFERENT component from the small .lms-toggle iOS switch above — it carries its own inline flex layout (account, facility notifications & assignments). Kept separately named so the switch CSS never collapses these rows to 46px. */ .lms-optrow { transition:border-color .12s ease, background .12s ease; } .lms-optrow:hover { border-color:var(--p-300) !important; } .lms-optrow input[type="checkbox"] { width:18px; height:18px; flex:none; accent-color:var(--p-600); cursor:pointer; } /* Admin-mode reminder banner (facility admin → switch to Learner Mode). */ .lms-modebar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:var(--s5); border-radius:12px; border:1px solid rgba(37,99,235,.30); background:linear-gradient(180deg, rgba(37,99,235,.07), rgba(37,99,235,.03)); } .lms-modebar-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:rgba(37,99,235,.14); color:var(--p-700); } .lms-modebar-ic svg { width:20px; height:20px; } .lms-modebar-tx { flex:1; min-width:240px; display:flex; flex-direction:column; gap:3px; } .lms-modebar-tx b { font-size:.95rem; color:var(--tx); } .lms-modebar-tx span { font-size:.85rem; color:var(--tx-mut); line-height:1.5; } .lms-modebar-btn { flex:none; white-space:nowrap; } /* First-timer guidance callout. */ .lms-guide { display:flex; gap:12px; padding:13px 16px; margin-bottom:var(--s5); border:1px solid var(--bd-c); border-left:3px solid var(--p-500); background:var(--surf-2); border-radius:10px; } .lms-guide-ic { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:rgba(37,99,235,.10); color:var(--p-700); } .lms-guide-ic svg { width:17px; height:17px; } .lms-guide-tx { min-width:0; font-size:.88rem; line-height:1.55; color:var(--tx); } .lms-guide-tx > b { display:block; margin-bottom:2px; font-size:.92rem; } .lms-guide-tx > div { color:var(--tx-mut); } .lms-guide-tx ul { margin:6px 0 0; padding-left:18px; } .lms-guide-tx li { margin:2px 0; } .lms-guide-tx a { color:var(--p-700); font-weight:600; } /* Admin user-detail header card (avatar + name + status/role pills) */ .lms-userhdr { display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:var(--s5); border:1px solid var(--bd-c); border-radius:14px; background:linear-gradient(135deg, rgba(37,99,235,.06), rgba(37,99,235,0) 60%), var(--surf); } .lms-userhdr-av { flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1.2rem; color:#fff; background:linear-gradient(135deg,#0b1226,#1d2a52); } .lms-userhdr-id { min-width:0; } .lms-userhdr-id h2 { margin:0 0 6px; font-size:1.4rem; letter-spacing:-.01em; } .lms-userhdr-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .lms-userhdr-email { display:inline-flex; align-items:center; gap:5px; color:var(--tx-mut); font-size:.86rem; } .lms-userhdr-email svg { width:15px; height:15px; } /* Subsection header inside a card form (eyebrow style) */ .lms-subhead { display:flex; align-items:center; gap:10px; margin:var(--s6) 0 var(--s3); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mut); } .lms-subhead::after { content:""; flex:1; height:1px; background:var(--bd-c); } .lms-subhead:first-of-type { margin-top:var(--s3); } .lms-lock-hint { color:var(--wn); font-size:.85rem; font-weight:600; margin:0 0 var(--s3); text-align:right; } .lms-lock-hint[hidden] { display:none; } .lms-toasts { position:fixed; top:80px; right:24px; z-index:300; display:flex; flex-direction:column; gap:12px; max-width:min(92vw,420px); } /* Premium professional toast — solid surface, refined accent bar */ .lms-toast { display:flex; align-items:flex-start; gap:12px; background:#fff; color:var(--tx); border:1px solid var(--bd-c); border-left:5px solid var(--p-500); border-radius:12px; padding:14px 16px 14px 18px; font-size:.92rem; font-weight:500; line-height:1.5; box-shadow:0 22px 50px -16px rgba(15,23,42,.28), 0 6px 16px -6px rgba(15,23,42,.12); animation:lmsToastIn .32s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; } .lms-toast::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--p-400),var(--p-700)); opacity:.85; transform-origin:left; animation:lmsToastBar 5.2s linear forwards; } [data-theme="dark"] .lms-toast{ background:#1a2236; color:#eef2ff; border-color:#27324a; } .lms-toast.is-out { animation:lmsToastOut .25s ease forwards; } .lms-toast--ok { border-left-color:var(--ok); } .lms-toast--ok::after { background:linear-gradient(90deg,#34d17f,#15803d); } .lms-toast--wn { border-left-color:var(--wn); } .lms-toast--wn::after { background:linear-gradient(90deg,#f5b342,#b45309); } .lms-toast--bd { border-left-color:var(--bd); } .lms-toast--bd::after { background:linear-gradient(90deg,#fb7185,#be123c); } .lms-toast--nf { border-left-color:var(--nf); } .lms-toast-ic { flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--p-50); color:var(--p-700); } .lms-toast--ok .lms-toast-ic { background:var(--ok-bg); color:var(--ok); } .lms-toast--wn .lms-toast-ic { background:var(--wn-bg); color:var(--wn); } .lms-toast--bd .lms-toast-ic { background:var(--bd-bg); color:var(--bd); } .lms-toast--nf .lms-toast-ic { background:var(--nf-bg); color:var(--nf); } .lms-toast-ic svg { width:18px; height:18px; } .lms-toast-msg { flex:1; line-height:1.45; padding-top:6px; } .lms-toast-x { flex:none; background:none; border:0; color:var(--tx-fa); font-size:1.25rem; line-height:1; padding:2px 4px; cursor:pointer; border-radius:6px; transition:background var(--t),color var(--t); } .lms-toast-x:hover { color:var(--tx); background:var(--surf-2); } @keyframes lmsToastIn { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} } @keyframes lmsToastOut { to{opacity:0;transform:translateY(-16px)} } @keyframes lmsToastBar { from{transform:scaleX(1)} to{transform:scaleX(0)} } /* ===== SAVED VIEWS BAR ================================================= */ .lms-views-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 var(--s4); } .lms-views-save { display:inline-flex; } .lms-views-bar .lms-btn { height:36px; padding:0 14px; font-size:.82rem; } .lms-views-bar .lms-btn svg { width:14px; height:14px; } /* ===== AUDIT PACKET PRESET CARDS ======================================= */ .lms-preset { background:var(--surf); border:1px solid var(--bd-c); border-radius:14px; box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow var(--t), border-color var(--t); } .lms-preset:hover { box-shadow:var(--sh-md); border-color:var(--p-200); } .lms-preset-head { display:flex; gap:14px; align-items:center; padding:18px 20px; color:#fff; background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:14px 14px, 100% 100%; } .lms-preset-head--ok { background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,#0e5630,#15803d); background-size:14px 14px, 100% 100%; } .lms-preset-head--nf { background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:14px 14px, 100% 100%; } .lms-preset-head--wn { background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,#8a6010,#b45309); background-size:14px 14px, 100% 100%; } .lms-preset-head--ce { background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,#3f2a8f,#7c5cd1); background-size:14px 14px, 100% 100%; } .lms-preset-ic { width:46px; height:46px; flex:none; border-radius:10px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24); display:grid; place-items:center; } .lms-preset-ic svg { width:22px; height:22px; } .lms-preset-head h3 { color:#fff; font-size:1.02rem; margin:0; letter-spacing:-.01em; } .lms-preset-range { color:rgba(255,255,255,.82); font-size:.78rem; margin-top:3px; font-variant-numeric:tabular-nums; } .lms-preset-body { padding:16px 20px; flex:1; } .lms-preset-foot { padding:12px 20px 16px; border-top:1px solid var(--bd-c); background:var(--surf-2); display:flex; justify-content:flex-end; } /* ===== COMPLIANCE HEAT-MAP ============================================= * Sticky-name first column, vertically-stacked program headers, color- * coded status cells (green=done, amber=open, red=overdue, grey=none), * per-row compliance % at the right edge. */ .lms-heatmap-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .lms-heatmap { width:100%; border-collapse:separate; border-spacing:0; font-size:.84rem; min-width:520px; } .lms-heatmap th, .lms-heatmap td { vertical-align:middle; } .lms-heatmap thead th { background:linear-gradient(180deg,#404754,#262b36); color:#fff; padding:10px 8px; position:sticky; top:0; border-bottom:1px solid rgba(0,0,0,.25); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; } .lms-heatmap thead th + th { box-shadow:inset 1px 0 0 rgba(255,255,255,.06); } .lms-heatmap-name { text-align:left; min-width:200px; background:var(--surf); border-bottom:1px solid var(--bd-c); position:sticky; left:0; z-index:2; padding:10px 14px; } .lms-heatmap-name a { color:inherit; text-decoration:none; display:flex; flex-direction:column; line-height:1.25; } .lms-heatmap-name a:hover b { color:var(--p-700); } .lms-heatmap-name a small { color:var(--tx-mut); font-size:.74rem; } .lms-heatmap thead .lms-heatmap-name { background:#262b36; color:#fff; z-index:3; left:0; } .lms-heatmap-prog { min-width:70px; max-width:90px; text-align:center; line-height:1.2; } .lms-heatmap-prog div { font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; white-space:normal; } .lms-heatmap-prog small { display:block; font-size:.6rem; color:rgba(255,255,255,.6); font-family:ui-monospace,monospace; letter-spacing:0; margin-top:2px; } .lms-heatmap-cell { width:54px; height:42px; text-align:center; border-bottom:1px solid var(--bd-c); position:relative; } .lms-heatmap-cell > span { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:8px; font-weight:800; font-size:.95rem; line-height:1; transition:transform var(--t),box-shadow var(--t); } .lms-heatmap-cell:hover > span { transform:scale(1.08); box-shadow:0 2px 8px rgba(15,23,42,.18); } .lms-heatmap-cell.is-done > span { background:var(--ok); color:#fff; } .lms-heatmap-cell.is-open > span { background:var(--wn); color:#fff; } .lms-heatmap-cell.is-over > span { background:var(--bd); color:#fff; } .lms-heatmap-cell.is-waived > span { background:var(--surf-2); color:var(--tx-mut); border:1px dashed var(--bd-c2); } .lms-heatmap-cell.is-none > span { background:var(--surf-2); color:var(--tx-fa); } .lms-heatmap tbody tr:hover .lms-heatmap-cell { background:rgba(94,132,238,.04); } .lms-heatmap tbody tr:nth-child(2n) .lms-heatmap-cell { background:#f9fafb; } .lms-heatmap tbody tr:nth-child(2n) .lms-heatmap-name { background:#f9fafb; } .lms-heatmap-score { width:84px; text-align:center; border-bottom:1px solid var(--bd-c); } .lms-heatmap-pct { font-variant-numeric:tabular-nums; font-weight:700; } .lms-heatmap-pct--ok { color:var(--ok); } .lms-heatmap-pct--wn { color:var(--wn); } .lms-heatmap-pct--bd { color:var(--bd); } .lms-heatmap-pct--nf { color:var(--tx-mut); } [data-theme="dark"] .lms-heatmap tbody tr:nth-child(2n) .lms-heatmap-cell, [data-theme="dark"] .lms-heatmap tbody tr:nth-child(2n) .lms-heatmap-name { background:rgba(255,255,255,.02); } /* ===== UNIVERSAL EMPTY STATE (in-table) ================================ */ .lms-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s10) var(--s6); } .lms-empty-ic { width:54px; height:54px; border-radius:14px; background:var(--surf-2); border:1px solid var(--bd-c); color:var(--p-600); display:grid; place-items:center; } .lms-empty-ic svg { width:26px; height:26px; } .lms-empty-t { font-size:1.02rem; font-weight:700; letter-spacing:-.01em; color:var(--tx); } .lms-empty-s { color:var(--tx-mut); font-size:.9rem; max-width:440px; line-height:1.55; } .lms-empty-tr td { border-bottom:0 !important; background:transparent !important; } /* ===== STAT TILE — optional trend delta ================================ */ .lms-stat-trend { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); background:var(--surf-2); color:var(--tx-mut); font-variant-numeric:tabular-nums; letter-spacing:0; } .lms-stat-trend--up { background:var(--ok-bg); color:var(--ok); } .lms-stat-trend--down { background:var(--bd-bg); color:var(--bd); } .lms-stat-trend--flat { background:var(--surf-2); color:var(--tx-mut); } .lms-stat-trend svg { width:11px; height:11px; } /* ===== DARK-MODE PASS — components added this cycle ==================== */ [data-theme="dark"] .lms-modal-head { /* keep the gradient blue head on dark — already vivid; lift the inner shadow */ box-shadow:inset 0 -1px 0 rgba(0,0,0,.45); } [data-theme="dark"] .lms-wiz-pickbox { background:var(--surf-2); border-color:var(--bd-c2); } [data-theme="dark"] .lms-typeahead-in input { background:var(--surf-2); } [data-theme="dark"] .lms-typeahead-drop { background:var(--surf-2); } [data-theme="dark"] .lms-typeahead-item:hover { background:var(--surf); } [data-theme="dark"] .lms-rowmenu-list { background:var(--surf-2); } [data-theme="dark"] .lms-rowmenu-item:hover { background:var(--surf); } [data-theme="dark"] .lms-empty-ic { background:var(--surf-2); border-color:var(--bd-c2); color:var(--p-300); } [data-theme="dark"] .lms-actbar-chip { background:var(--surf-2); border-color:var(--bd-c2); color:var(--tx); } [data-theme="dark"] .lms-actbar-chip:hover { background:var(--surf); } [data-theme="dark"] .lms-toast { background:#1a2236; color:#eef2ff; border-color:#27324a; } [data-theme="dark"] .lms-toast-ic { background:rgba(255,255,255,.06); color:#cdd6f4; } /* ===== BULK SELECTION — generalized for any table ====================== */ .lms-bulk { position:sticky; top:var(--topbar-h); z-index:6; display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin:0 0 var(--s4); padding:10px var(--s4); background:linear-gradient(180deg,var(--surf),var(--surf-2)); border:1px solid var(--p-200); border-radius:var(--r); box-shadow:var(--sh-sm); } .lms-bulk[hidden] { display:none !important; } .lms-bulk-n { font-weight:700; color:var(--tx); } .lms-bulk-n strong { color:var(--p-700); } .lms-bulk .sp { flex:1; } .lms-bulk-actions { display:flex; gap:var(--s2); flex-wrap:wrap; } .lms-bulk-checkcol { width:42px; text-align:center; padding-right:0 !important; } .lms-table tr:has(input[data-bulk]:checked) { background:rgba(94,132,238,.06) !important; } /* Owner directive: hide the Google reCAPTCHA v3 badge AND keep the attribution disclaimer present-but-invisible (so legal review can find it in the DOM). The script & verification still run. */ .grecaptcha-badge { visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } .lms-rc-disclaimer { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .lms-sr-only { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---- Universal table pager (every list table uses lms_pager()) ---- * Per design standards (v0.48.12), every list table on Draco Learning LMS * defaults to 25 rows/page and exposes a rows-per-page selector at the * bottom right of the pager footer. */ .lms-pagerwrap { margin-top: var(--s3); padding: 14px 16px; border-top: 1px solid var(--bd-c); background: var(--surf-2); border-radius: 0 0 var(--r) var(--r); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; } @media (max-width: 760px) { .lms-pagerwrap { grid-template-columns: 1fr; gap: 12px; text-align: center; } } .lms-pager-meta { font-size: .82rem; color: var(--tx-mut); text-align: left; margin: 0; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .lms-pager-meta { text-align: center; } } .lms-pager-pp { display: flex; align-items: center; gap: 8px; justify-content: flex-end; font-size: .82rem; color: var(--tx-mut); } @media (max-width: 760px) { .lms-pager-pp { justify-content: center; } } .lms-pager-pp label { font-weight: 600; } .lms-pager-pp select { height: 34px; padding: 0 10px; border: 1px solid var(--bd-c); border-radius: 8px; background: var(--surf); color: var(--tx); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; } .lms-pager-pp select:focus { outline: none; border-color: var(--p-500); box-shadow: var(--ring); } /* ---- Catalog: filters, view toggle ---- */ /* Course ratings (display + star input) */ .lms-stars { white-space:nowrap; } .lms-stars-s { color:#f59e0b; letter-spacing:1px; } .lms-stars-n { color:var(--tx-mut); font-weight:600; font-size:.86em; margin-left:3px; } .lms-rate { display:inline-flex; flex-direction:row-reverse; justify-content:center; } .lms-rate input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .lms-rate label { font-size:2rem; line-height:1; color:var(--bd-c); cursor:pointer; padding:0 3px; transition:color .12s ease; } .lms-rate input:checked ~ label, .lms-rate label:hover, .lms-rate label:hover ~ label { color:#f59e0b; } .lms-rate input:focus-visible + label { outline:2px solid var(--p-500); outline-offset:2px; border-radius:4px; } /* Pricing FAQ (native
accordion) */ .lms-faq { width:min(900px,92%); margin:60px auto 0; } .lms-faq-list { margin-top:22px; display:flex; flex-direction:column; gap:12px; } .lms-faq-item { background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden; } .lms-faq-item summary { list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; font-size:1.02rem; color:var(--tx); display:flex; align-items:center; justify-content:space-between; gap:14px; } .lms-faq-item summary::-webkit-details-marker { display:none; } .lms-faq-item summary::after { content:"+"; font-size:1.4rem; font-weight:400; color:var(--p-600); line-height:1; flex:none; transition:transform .2s ease; } .lms-faq-item[open] summary::after { transform:rotate(45deg); } .lms-faq-a { padding:0 22px 20px; color:var(--tx-mut); line-height:1.65; font-size:.96rem; } /* Account page two-column layout — stacks on narrow screens (the old inline grid-template kept two columns even on phones, squishing the form). */ .lms-acct-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:var(--s4); align-items:start; } @media (max-width:760px){ .lms-acct-grid { grid-template-columns:1fr; } } .lms-catbar { margin-bottom:var(--s4); } /* Scope-of-practice opt-in banner (catalog) */ .lms-scope-banner { display:flex; align-items:center; gap:10px; text-decoration:none; margin-bottom:var(--s4); font-size:.88rem; font-weight:600; line-height:1.45; background:rgba(180,83,9,.08); color:var(--wn); border-left:3px solid var(--wn); } .lms-scope-banner:hover { background:rgba(180,83,9,.13); } .lms-scope-banner--on { background:rgba(21,128,61,.08); color:var(--ok); border-left-color:var(--ok); } .lms-scope-banner--on:hover { background:rgba(21,128,61,.13); } .lms-scope-banner svg { width:20px; height:20px; flex:none; } .lms-catbar-row { display:flex; gap:var(--s3); align-items:flex-end; flex-wrap:wrap; } .lms-catf { display:flex; flex-direction:column; gap:5px; min-width:150px; } .lms-catf--grow { flex:1 1 220px; } .lms-catf--btns { flex-direction:row; align-items:center; gap:var(--s2); } .lms-catf label { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-mut); } .lms-catf input, .lms-catf select { height:38px; } .lms-catmeta { margin:0 0 var(--s3); font-size:.8rem; } .lms-viewtog { display:flex; border:1px solid var(--bd-c); border-radius:var(--r-sm); overflow:hidden; flex:none; } .lms-viewtog-b { display:flex; align-items:center; gap:6px; padding:0 13px; height:38px; background:var(--surf-2); color:var(--tx-mut); font-size:.8rem; font-weight:600; text-decoration:none; } .lms-viewtog-b svg { width:15px; height:15px; } .lms-viewtog-b + .lms-viewtog-b { border-left:1px solid var(--bd-c); } .lms-viewtog-b.is-on { background:var(--p-600); color:#fff; } .lms-viewtog-b:not(.is-on):hover { color:var(--tx); } .lms-pager { display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; margin:0; } .lms-pager-b, .lms-pager-n { display:inline-flex; align-items:center; min-width:38px; height:38px; padding:0 12px; justify-content:center; border:1px solid var(--bd-c); border-radius:var(--r-sm); background:var(--surf); color:var(--tx); text-decoration:none; font-size:.84rem; font-weight:600; } .lms-pager-b:hover, .lms-pager-n:hover { background:var(--surf-2); } .lms-pager-n.is-on { background:var(--p-600); color:#fff; border-color:var(--p-600); } .lms-pager-b.is-off { opacity:.45; pointer-events:none; } .lms-pager-x { padding:0 4px; color:var(--tx-fa); } @media (max-width:560px){ .lms-catf, .lms-catf--grow { min-width:100%; flex-basis:100%; } } /* ---- Filter section — premium, professional (v0.43.0) ---- The filter bar is rendered inside `.lms-card.lms-card-pad.lms-catbar`. The rules below set the elegant frame, refined inputs, and elegant search-icon. */ .lms-catbar { background:var(--surf); border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03); padding:22px 24px; margin-bottom:var(--s5); } .lms-catbar-row { gap:18px; align-items:flex-end; } .lms-catf { gap:8px; min-width:170px; } .lms-catf--grow { flex:3.5 1 420px; min-width:340px; } .lms-catf--btns { gap:10px; align-items:flex-end; margin-left:auto; padding-bottom:0; } .lms-catf label { font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--tx-mut); } .lms-catf input, .lms-catf select { height:40px; padding:0 14px; border:1px solid var(--bd-c); border-radius:10px; background:var(--surf); color:var(--tx); font-size:.94rem; font-weight:500; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; appearance:auto; } .lms-catf select { cursor:pointer; } .lms-catf input::placeholder { color:var(--tx-fa); font-weight:400; } .lms-catf input:hover, .lms-catf select:hover { border-color:var(--bd-c2); } .lms-catf input:focus, .lms-catf select:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 4px rgba(94,132,238,.14); } /* Filter-row controls share the universal 40 px button height. The view-toggle is given the same rounded border as the filter inputs so it sits flush with them. */ .lms-catf .lms-viewtog, .lms-catf .lms-viewtog-b { height:40px; } .lms-catf .lms-viewtog { border-radius:10px; } .lms-catf--btns .lms-btn { border-radius:10px; padding:0 20px; } /* Refined search icon inside the search input */ .lms-catf-with-icon { position:relative; } .lms-catf-with-icon .lms-catf-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--tx-fa); pointer-events:none; display:grid; place-items:center; } .lms-catf-with-icon .lms-catf-ic svg { width:18px; height:18px; stroke-width:2; } .lms-catf-with-icon input { padding-left:44px; } /* When the filter bar lives in dark theme, the surf background is dark; the inputs need a slightly tinted background so they don't disappear. */ [data-theme="dark"] .lms-catf input, [data-theme="dark"] .lms-catf select { background:var(--surf-2); } /* ===== UNIVERSAL SEARCH + FILTER BAR (v0.46.20) ========================= * Row 1: a wide search field with the Search button directly to its right. * Row 2: subtle filter pills below, with a Clear filters link at far right. * Enter inside the search field submits the form — standard browser * behavior, no JS needed. Used by EVERY list page so the search experience * is identical across the platform. */ .lms-search-row { display:flex; gap:var(--s3); align-items:stretch; flex-wrap:nowrap; } .lms-search-row .lms-search-box { position:relative; flex:1; min-width:0; } .lms-search-row .lms-search-box svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--tx-fa); pointer-events:none; } .lms-search-row .lms-search-box input { width:100%; height:40px; padding:0 14px 0 42px; border:1px solid var(--bd-c); border-radius:10px; background:var(--surf); color:var(--tx); font-size:.95rem; font-weight:500; transition:border-color .15s ease, box-shadow .15s ease; } .lms-search-row .lms-search-box input::placeholder { color:var(--tx-fa); font-weight:400; } .lms-search-row .lms-search-box input:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 4px rgba(94,132,238,.14); } .lms-search-row .lms-btn { height:40px; padding:0 18px; flex:none; border-radius:10px; } .lms-search-row .lms-search-box svg:first-child { width:16px; height:16px; left:14px; } .lms-filter-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; padding-top:14px; border-top:1px dashed var(--bd-c2); } .lms-filter-row .lms-filter-lbl { font-size:.7rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--tx-mut); margin-right:var(--s2); } .lms-filter-row select, .lms-filter-row input[type="date"] { height:34px; padding:0 32px 0 12px; border:1px solid var(--bd-c); border-radius:8px; background:var(--surf-2); color:var(--tx); font-size:.84rem; font-weight:500; appearance:auto; transition:border-color .15s ease, background var(--t); } .lms-filter-row input[type="date"] { padding:0 10px; } .lms-filter-row select:hover, .lms-filter-row input[type="date"]:hover { border-color:var(--bd-c2); background:var(--surf); } .lms-filter-row select:focus, .lms-filter-row input[type="date"]:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 3px rgba(94,132,238,.12); background:var(--surf); } .lms-filter-row .lms-filter-clear { margin-left:auto; color:var(--tx-mut); font-size:.82rem; font-weight:600; padding:6px 12px; border-radius:7px; text-decoration:none !important; transition:background var(--t), color var(--t); } .lms-filter-row .lms-filter-clear:hover { color:var(--p-700); background:var(--surf-2); } .lms-filter-row .lms-filter-clear svg { width:13px; height:13px; vertical-align:-2px; margin-right:4px; } [data-theme="dark"] .lms-filter-row select, [data-theme="dark"] .lms-filter-row input[type="date"] { background:var(--surf); } [data-theme="dark"] .lms-filter-row select:hover, [data-theme="dark"] .lms-filter-row input[type="date"]:hover { background:var(--surf-2); } @media (max-width:640px) { .lms-search-row { flex-wrap:wrap; } .lms-search-row .lms-btn { width:100%; } .lms-filter-row select, .lms-filter-row input[type="date"] { flex:1 1 calc(50% - 4px); min-width:0; } .lms-filter-row .lms-filter-clear { flex:1 1 100%; text-align:center; margin-top:6px; } } /* ---- Certificate cards (v0.42.0 — own component, fixes icon-touches-name complaint by giving the icon its own gutter and the tag its own row) ---- */ .lms-cert-grid { gap:var(--s4); } .lms-cert-card { position:relative; background:var(--surf); border:1px solid var(--bd-c); border-radius:var(--r); overflow:hidden; transition:box-shadow var(--t), border-color var(--t), transform var(--t); display:flex; flex-direction:column; } .lms-cert-card:hover { box-shadow:var(--sh-md); border-color:var(--p-200); } .lms-cert-card-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; } .lms-cert-head { display:flex; align-items:center; gap:var(--s4); padding:var(--s5) var(--s5); background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:15px 15px,100% 100%; color:#fff; } .lms-cert-iconbox { width:54px; height:54px; flex:0 0 54px; border-radius:var(--r); background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#fff; } .lms-cert-iconbox svg { width:26px; height:26px; } .lms-cert-tags { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; } .lms-cert-tag { font-size:.66rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.88); } .lms-cert-ce { align-self:flex-start; background:#fff; color:var(--p-700); font-weight:800; font-size:.72rem; padding:4px 10px; border-radius:var(--r-pill); box-shadow:var(--sh-xs); } .lms-cert-body { padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .lms-cert-title { font-size:.98rem; line-height:1.35; margin:0; } .lms-cert-meta { color:var(--tx-mut); font-size:.84rem; } .lms-cert-foot { margin-top:auto; padding-top:var(--s4); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); } .lms-cert-code { font-size:.76rem; font-variant-numeric:tabular-nums; color:var(--tx-mut); } /* Card / row multi-select checkbox */ .lms-cert-check { position:relative; display:inline-flex; cursor:pointer; user-select:none; } .lms-cert-check input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; } .lms-cert-checkbox { display:block; width:22px; height:22px; border-radius:6px; background:#fff; border:1.5px solid var(--bd-c); box-shadow:var(--sh-xs); position:relative; transition:background var(--t), border-color var(--t), box-shadow var(--t); } .lms-cert-check input:checked + .lms-cert-checkbox { background:var(--p-600); border-color:var(--p-600); } .lms-cert-check input:checked + .lms-cert-checkbox::after { content:""; position:absolute; left:7px; top:2px; width:7px; height:13px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); } .lms-cert-check input:focus-visible + .lms-cert-checkbox { box-shadow:0 0 0 3px rgba(94,132,238,.30); } /* Card-overlay variant: floating top-right on the dark gradient */ .lms-cert-card .lms-cert-check { position:absolute; top:var(--s3); right:var(--s3); z-index:2; } .lms-cert-card .lms-cert-checkbox { background:rgba(255,255,255,.96); border-color:#fff; } .lms-cert-card .lms-cert-check input:checked + .lms-cert-checkbox { background:#fff; } .lms-cert-card .lms-cert-check input:checked + .lms-cert-checkbox::after { border-color:var(--p-700); } .lms-cert-card.is-sel { outline:2px solid var(--p-500); outline-offset:0; } /* Floating action hamburger on cert cards — sits above the card-link layer */ .lms-cert-actions { position:absolute; right:var(--s3); bottom:var(--s3); z-index:3; } /* View toggle bar that sits between the filter card and the list */ .lms-viewtoolbar { display:flex; justify-content:flex-end; margin:0 0 var(--s4) 0; } /* Table integration: checkbox column */ .lms-cb-col { width:46px; text-align:center; padding-right:0 !important; } .lms-table .lms-cert-check { vertical-align:middle; } .lms-table tr:has(input[data-cb]:checked) { background:rgba(94,132,238,.06) !important; } /* Floating bulk-action bar (visible when ≥1 cert selected) */ .lms-bulkbar { display:flex; align-items:center; gap:var(--s3); background:linear-gradient(180deg,var(--surf),var(--surf-2)); border:1px solid var(--p-200); border-radius:var(--r); padding:10px var(--s4); margin-bottom:var(--s4); box-shadow:var(--sh-sm); flex-wrap:wrap; position:sticky; top:0; z-index:5; } /* The class above sets display:flex which (per specificity) defeats the browser-default [hidden]{display:none}. Re-assert it here so the JS `bar.hidden = sel === 0` toggle actually hides the bar. F15. */ .lms-bulkbar[hidden]{display:none!important} .lms-bulkbar-n { font-weight:700; color:var(--tx); } .lms-bulkbar-n strong { color:var(--p-700); } .lms-bulkbar .spacer { flex:1; } /* (legacy `.lms-btn--ghost` transparent override removed v0.43.0 — the * universal button standard at the top of the file defines the ghost * variant as a teal gradient with white text, per the design system.) */ /* ---- Dark theme (semantic token overrides; nav already dark) ---- */ [data-theme="dark"]{ --bg:#0b1220; --surf:#121b2e; --surf-2:#0f1828; --bd-c:#27324a; --bd-c2:#37456180; --tx:#e7edf9; --tx-mut:#a4b3cf; --tx-fa:#778aab; --ok:#34d17f; --ok-bg:#10261a; --ok-bd:#1f5236; --wn:#f0a93a; --wn-bg:#2a1e0b; --wn-bd:#5a3f12; --bd:#fb7393; --bd-bg:#2c1019; --bd-bd:#5c2335; --nf:#7aa0ff; --nf-bg:#0f1d3a; --nf-bd:#26407e; --sh-sm:0 1px 3px rgba(0,0,0,.5); --sh-md:0 6px 18px -4px rgba(0,0,0,.55); --sh-lg:0 22px 44px -12px rgba(0,0,0,.65); --ring:0 0 0 3px rgba(122,160,255,.40); } /* Light is the only default. Dark applies ONLY when the user explicitly selects it (html[data-theme="dark"] from the lms_theme cookie) — OS prefers-color-scheme is intentionally NOT auto-applied. */ .lms-lang{ display:flex; border:1px solid var(--bd-c); border-radius:var(--r-sm); overflow:hidden; flex:none; } .lms-lang-b{ background:var(--surf-2); border:0; color:var(--tx-mut); font-size:.74rem; font-weight:700; letter-spacing:.04em; padding:0 9px; height:38px; cursor:pointer; } .lms-lang-b + .lms-lang-b{ border-left:1px solid var(--bd-c); } .lms-lang-b.is-on{ background:var(--p-600); color:#fff; } .lms-lang-b:not(.is-on):hover{ color:var(--tx); } .lms-theme-tog{ display:grid; place-items:center; width:38px; height:38px; background:var(--surf-2); border:1px solid var(--bd-c); border-radius:var(--r-sm); color:var(--tx-mut); flex:none; } .lms-theme-tog:hover{ color:var(--tx); border-color:var(--bd-c2); } .lms-theme-tog svg{ width:18px; height:18px; display:block; } .lms-theme-sun{ display:none; } .lms-theme-moon{ display:inline-flex; } [data-theme="dark"] .lms-theme-sun{ display:inline-flex; } [data-theme="dark"] .lms-theme-moon{ display:none; } @media (min-width:1600px) { :root { --content-max:1720px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } } /* ===== GLOBAL: no underlines on links / buttons / URLs (v0.43.0) ===== Owner directive — links, buttons and URLs are NEVER underlined in Draco LMS. Visual distinction is conveyed by color and weight, not by underline. Single source of truth for the policy. */ a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; } /* Empty-state buttons inside a `.lms-card` (which is `display:flex; flex-direction:column`) used to stretch to full card width because the flex default `align-items:stretch` overrode the button's inline-flex nature. Constrain them so an `.lms-btn` placed directly in a card no longer balloons. `--block` still opts in to full width explicitly. */ .lms-card > .lms-btn:not(.lms-btn--block) { align-self:center; } /* ===== ROW ACTION DROPDOWN (hamburger) =================================== Universal pattern: instead of a strip of buttons in each table row, every list table uses a single hamburger button that opens a small menu. */ .lms-rowmenu { position:relative; display:inline-block; } .lms-rowmenu-btn { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; border:1px solid rgba(15,23,42,.16); background:linear-gradient(135deg,#4d586d,#28303f); color:#fff; box-shadow:0 1px 2px rgba(15,23,42,.10), 0 2px 5px rgba(15,23,42,.06); cursor:pointer; transition:background-image .15s ease,box-shadow .15s ease; } .lms-rowmenu-btn:hover { background:linear-gradient(135deg,#404a5d,#1c2330); } .lms-rowmenu-btn svg { width:16px; height:16px; } .lms-rowmenu-list { position:fixed; z-index:500; min-width:200px; background:var(--surf); border:1px solid var(--bd-c); border-radius:10px; box-shadow:var(--sh-lg); padding:6px; display:none; } .lms-rowmenu.is-open .lms-rowmenu-list { display:block; } .lms-rowmenu-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:0; background:transparent; border-radius:7px; font:inherit; font-size:.88rem; font-weight:600; color:var(--tx); text-align:left; text-decoration:none; cursor:pointer; transition:background var(--t),color var(--t); } .lms-rowmenu-item:hover { background:var(--surf-2); color:var(--p-700); } .lms-rowmenu-item--danger { color:var(--bd); } .lms-rowmenu-item--danger:hover { background:var(--bd-bg); color:var(--bd); } .lms-rowmenu-item svg { width:15px; height:15px; opacity:.85; } .lms-rowmenu-sep { height:1px; background:var(--bd-c); margin:4px 2px; } /* ===== MODAL ============================================================ */ .lms-modal { position:fixed; inset:0; z-index:200; background:rgba(7,12,26,.55); display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .lms-modal.is-open { display:flex; } .lms-modal-card { width:100%; max-width:560px; background:var(--surf); border:1px solid var(--bd-c); border-radius:14px; box-shadow:var(--sh-lg); overflow:hidden; animation:lmsModalIn .22s cubic-bezier(.4,0,.2,1); } @keyframes lmsModalIn { from{opacity:0;transform:translateY(-8px) scale(.985)} to{opacity:1;transform:none} } .lms-modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s5) var(--s6); border-bottom:1px solid rgba(0,0,0,.25); color:#fff; background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:14px 14px, 100% 100%; box-shadow:inset 0 -1px 0 rgba(0,0,0,.18); } .lms-modal-head h3 { font-size:1.08rem; color:#fff; letter-spacing:-.01em; text-shadow:0 1px 1px rgba(0,0,0,.15); } .lms-modal-x { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer; font-size:1.3rem; line-height:1; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; transition:background var(--t),border-color var(--t); } .lms-modal-x:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.32); } .lms-modal-body { padding:var(--s6); } .lms-modal-foot { padding:var(--s4) var(--s6); border-top:1px solid var(--bd-c); background:var(--surf-2); display:flex; gap:var(--s3); justify-content:flex-end; flex-wrap:wrap; } body.lms-no-scroll { overflow:hidden; } /* ===== ACTIVITY LOG — quick-filter chips + table helpers ================ */ .lms-actbar { display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4); padding-top:var(--s4); border-top:1px dashed var(--bd-c2); align-items:center; } .lms-actbar-lbl { font-size:.7rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--tx-mut); margin-right:var(--s2); } .lms-actbar-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--bd-c2); background:var(--surf); border-radius:var(--r-pill); font-size:.78rem; font-weight:600; color:var(--tx); text-decoration:none; transition:background var(--t),border-color var(--t),box-shadow var(--t); } .lms-actbar-chip:hover { border-color:var(--p-300); background:var(--p-50); } .lms-actbar-chip.is-on { background:var(--p-600); border-color:var(--p-600); color:#fff; box-shadow:var(--sh-sm); } .lms-actbar-chip.is-on .lms-actbar-n { background:rgba(255,255,255,.22); color:#fff; } .lms-actbar-dot { width:8px; height:8px; border-radius:50%; flex:none; } .lms-actbar-dot--ok { background:var(--ok); } .lms-actbar-dot--wn { background:var(--wn); } .lms-actbar-dot--bd { background:var(--bd); } .lms-actbar-dot--nf { background:var(--nf); } .lms-actbar-dot--ce { background:var(--p-500); } .lms-actbar-txt { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.74rem; font-weight:600; letter-spacing:.01em; } .lms-actbar-n { display:inline-grid; place-items:center; min-width:22px; height:18px; padding:0 6px; border-radius:var(--r-pill); background:var(--surf-2); font-size:.7rem; font-variant-numeric:tabular-nums; color:var(--tx-mut); } .lms-act-url { display:inline-block; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; color:var(--tx-mut); font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.78rem; } .lms-act-when { line-height:1.2; } .lms-act-when b { display:block; font-size:.86rem; } .lms-act-when small { font-variant-numeric:tabular-nums; font-size:.74rem; } /* ===== WIZARD (facility/assignments.php and future flows) =============== */ .lms-wiz { margin-bottom:var(--s5); overflow:visible; } .lms-wiz-head { position:relative; display:flex; align-items:center; gap:var(--s4); padding:var(--s5) var(--s6); border-bottom:1px solid var(--bd-c); background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(135deg, #1a2647, #2a3a6e); background-size:14px 14px, 100% 100%; color:#fff; } .lms-wiz-head::after { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, #a78bfa, #6366f1); } .lms-wiz-num { flex:none; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.36); color:#fff; font-weight:800; font-size:1.15rem; display:grid; place-items:center; box-shadow:0 4px 12px rgba(99,102,241,.30); } .lms-wiz-head h3 { color:#fff; font-size:1.20rem; letter-spacing:-.015em; margin:0; font-weight:700; } .lms-wiz-sub { color:rgba(255,255,255,.74); font-size:.88rem; font-weight:400; margin-top:2px; display:block; } [data-theme="dark"] .lms-wiz-head { background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(135deg, #1a2647, #2a3a6e); background-size:14px 14px, 100% 100%; color:#fff; } .lms-wiz-body { padding:var(--s5) var(--s6) var(--s6); display:flex; flex-direction:column; gap:var(--s5); } .lms-wiz-label { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mut); display:block; margin-bottom:var(--s2); } .lms-wiz-quick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .lms-wiz-quick-lbl { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-mut); margin-right:var(--s2); } .lms-wiz-quick .lms-chip { cursor:pointer; } .lms-wiz-quick .lms-chip small { font-weight:500; opacity:.7; margin-left:4px; } .lms-wiz-pickbox { background:var(--surf-2); border:1px dashed var(--bd-c2); border-radius:10px; padding:var(--s4); min-height:64px; } .lms-wiz-pickbox-lbl { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-mut); margin-bottom:var(--s3); } .lms-wiz-pickbox-lbl .lms-muted { text-transform:none; letter-spacing:0; font-weight:500; margin-left:6px; } .lms-wiz-chips { display:flex; flex-wrap:wrap; gap:8px; } .lms-wiz-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 12px; border-radius:999px; font-size:.82rem; font-weight:600; color:#fff; background:linear-gradient(135deg,#4f7be8,#1f3aa5); border:1px solid rgba(15,23,42,.16); box-shadow:0 1px 2px rgba(15,23,42,.10); } .lms-wiz-chip--group { background:linear-gradient(135deg,#4d8b9a,#1b4e5c); } .lms-wiz-chip--plan { background:linear-gradient(135deg,#7c5cd1,#3f2a8f); } .lms-wiz-chip--course { background:linear-gradient(135deg,#4f7be8,#1f3aa5); } .lms-wiz-chip--user { background:linear-gradient(135deg,#4d586d,#28303f); } .lms-wiz-chip-x { background:rgba(255,255,255,.18); border:0; color:#fff; width:18px; height:18px; border-radius:50%; font-size:.9rem; line-height:1; cursor:pointer; padding:0; display:grid; place-items:center; } .lms-wiz-chip-x:hover { background:rgba(255,255,255,.32); } .lms-typeahead { position:relative; } .lms-typeahead-in { position:relative; } .lms-typeahead-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--tx-fa); pointer-events:none; display:grid; place-items:center; } .lms-typeahead-ic svg { width:18px; height:18px; } .lms-typeahead-in input { width:100%; height:44px; padding:0 14px 0 44px; border:1px solid var(--bd-c); border-radius:10px; background:var(--surf); color:var(--tx); font-size:.94rem; transition:border-color var(--t),box-shadow var(--t); } .lms-typeahead-in input:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 4px rgba(94,132,238,.14); } .lms-typeahead-drop { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; background:var(--surf); border:1px solid var(--bd-c); border-radius:10px; box-shadow:var(--sh-lg); padding:6px; max-height:320px; overflow-y:auto; } .lms-typeahead-drop[hidden] { display:none; } .lms-typeahead-item { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; background:transparent; border:0; padding:9px 12px; border-radius:7px; font:inherit; color:var(--tx); cursor:pointer; } .lms-typeahead-item b { font-size:.9rem; font-weight:600; } .lms-typeahead-item small { font-size:.78rem; color:var(--tx-mut); } .lms-typeahead-item:hover { background:var(--surf-2); } .lms-typeahead-empty { padding:12px; color:var(--tx-mut); font-size:.86rem; text-align:center; } .lms-wiz-preview { display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s5); border-radius:12px; color:#fff; background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:14px 14px, 100% 100%; box-shadow:var(--sh-sm); } .lms-wiz-preview-ic { width:48px; height:48px; border-radius:10px; flex:none; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#fff; } .lms-wiz-preview-ic svg { width:24px; height:24px; } .lms-wiz-preview-body { flex:1; min-width:0; } .lms-wiz-preview-h { font-size:1.05rem; font-weight:700; line-height:1.4; letter-spacing:-.01em; color:#fff; } .lms-wiz-preview-h b { color:#fff; } .lms-wiz-preview-meta { color:rgba(255,255,255,.82); font-size:.86rem; margin-top:6px; line-height:1.55; } .lms-wiz-foot { display:flex; justify-content:flex-end; } .lms-wiz-foot .lms-btn[disabled] { opacity:.55; pointer-events:none; filter:grayscale(.3); } /* ===== REPORT CARDS (facility/reports.php, admin/reports.php) =========== */ .lms-rep { display:flex; flex-direction:column; transition:box-shadow var(--t),border-color var(--t); } .lms-rep:hover { box-shadow:var(--sh-md); border-color:var(--p-200); } .lms-rep-head { display:flex; align-items:center; gap:var(--s4); padding:var(--s5) var(--s6); color:#fff; background: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(135deg,var(--p-800),var(--p-500)); background-size:14px 14px, 100% 100%; } .lms-rep-head h3 { color:#fff; font-size:1.04rem; letter-spacing:-.01em; } .lms-rep-ic { width:48px; height:48px; flex:none; border-radius:10px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; color:#fff; } .lms-rep-ic svg { width:24px; height:24px; } .lms-rep-tag { display:inline-block; margin-top:4px; font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.82); } .lms-rep .lms-card-body { padding:var(--s5) var(--s6) var(--s4); } .lms-rep-meta { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:.86rem; color:var(--tx-mut); } .lms-rep-meta li { display:flex; align-items:center; gap:8px; } .lms-rep-meta li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--p-400); flex:none; } .lms-rep-meta b { color:var(--tx); } .lms-rep-foot { padding:var(--s4) var(--s6) var(--s5); margin-top:auto; border-top:1px solid var(--bd-c); background:var(--surf-2); display:flex; justify-content:flex-end; gap:var(--s3); } /* ===== In-app inbox (P14-5) ============================================ */ .lms-inbox-wrap { position:relative; display:inline-flex; } .lms-inbox-bell { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r); background:var(--surf); border:1px solid var(--bd-c); color:var(--tx); cursor:pointer; transition:background var(--t),border-color var(--t),color var(--t); } .lms-inbox-bell:hover { background:var(--surf-2); border-color:var(--p-300); color:var(--p-700); } .lms-inbox-bell svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .lms-inbox-bell.has-unread { color:var(--p-700); border-color:var(--p-300); } .lms-inbox-dot { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#dc2626; color:#fff; font-size:.66rem; font-weight:700; display:grid; place-items:center; box-shadow:0 0 0 2px var(--surf); } .lms-inbox-wrap .lms-inbox-menu { min-width:340px; max-width:380px; padding:var(--s2); } .lms-inbox-wrap.is-open .lms-inbox-menu { opacity:1; visibility:visible; transform:translateY(0); } .lms-inbox-list { max-height:360px; overflow-y:auto; margin:var(--s2) 0; display:flex; flex-direction:column; gap:2px; } .lms-inbox-empty { padding:var(--s4) var(--s3); text-align:center; color:var(--tx-mut); font-size:.86rem; } .lms-inbox-item { display:flex; gap:var(--s3); align-items:flex-start; padding:10px var(--s3); border-radius:var(--r-sm); color:var(--tx); font-size:.86rem; transition:background var(--t); } .lms-inbox-item:hover { background:var(--surf-2); } .lms-inbox-item.is-unread { background:rgba(99,102,241,.06); } .lms-inbox-item.is-unread:hover { background:rgba(99,102,241,.10); } .lms-inbox-ic { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--surf-2); color:var(--p-700); flex:0 0 28px; } .lms-inbox-ic svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .lms-inbox-txt { min-width:0; flex:1; line-height:1.35; } .lms-inbox-txt b { display:block; font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lms-inbox-txt small { display:block; color:var(--tx-mut); font-size:.72rem; margin-top:2px; } /* ===== Inbox page (P14-5) ============================================= */ .lms-segwrap { display:inline-flex; gap:0; padding:4px; background:var(--surf-2); border:1px solid var(--bd-c); border-radius:var(--r); } .lms-seg { padding:8px 14px; font-weight:600; font-size:.84rem; color:var(--tx-mut); border-radius:calc(var(--r) - 4px); transition:background var(--t),color var(--t); } .lms-seg:hover { color:var(--tx); } .lms-seg.is-on { background:var(--surf); color:var(--p-700); box-shadow:var(--sh-sm); } .lms-inbox-pg { display:flex; flex-direction:column; gap:var(--s2); } .lms-inbox-row { display:flex; gap:var(--s3); padding:var(--s4); border:1px solid var(--bd-c); border-radius:var(--r); background:var(--surf); transition:border-color var(--t),background var(--t); } .lms-inbox-row.is-unread { border-color:var(--p-300); background:rgba(99,102,241,.04); border-left-width:4px; padding-left:calc(var(--s4) - 3px); } .lms-inbox-row .lms-inbox-ic { flex:0 0 32px; width:32px; height:32px; } .lms-inbox-row .lms-inbox-ic svg { width:16px; height:16px; } .lms-inbox-row-body { flex:1; min-width:0; } .lms-inbox-row-head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:6px; } .lms-inbox-row-head h4 { margin:0; font-size:.96rem; font-weight:600; } .lms-inbox-row-head h4 a { color:inherit; } .lms-inbox-row-head h4 a:hover { color:var(--p-700); } .lms-inbox-row-head time { color:var(--tx-mut); font-size:.78rem; } .lms-inbox-row-body-html { color:var(--tx-mut); font-size:.88rem; line-height:1.5; margin:6px 0; } .lms-inbox-row-foot { display:flex; gap:var(--s2); margin-top:var(--s2); } /* ===== Inline-edit cells (P12-11) ===================================== */ .lms-iedit { display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:var(--r-sm); padding:2px 6px; margin:-2px -6px; transition:background var(--t), box-shadow var(--t); position:relative; } .lms-iedit:hover, .lms-iedit:focus-visible { background:var(--surf-2); outline:none; } .lms-iedit:focus-visible { box-shadow:0 0 0 2px var(--p-300); } .lms-iedit .lms-iedit-pen { opacity:0; color:var(--tx-mut); font-size:.78rem; transition:opacity var(--t); } .lms-iedit:hover .lms-iedit-pen, .lms-iedit:focus-visible .lms-iedit-pen { opacity:1; } .lms-iedit.is-editing { background:var(--surf); box-shadow:0 0 0 2px var(--p-500); } .lms-iedit.is-saving { opacity:.55; pointer-events:none; } .lms-iedit.just-saved { background:rgba(34,197,94,.15); } .lms-iedit-input { font:inherit; padding:4px 6px; border:1px solid var(--bd-c); border-radius:var(--r-sm); background:var(--surf); color:var(--tx); min-width:120px; max-width:220px; } .lms-iedit-input:focus { outline:none; border-color:var(--p-500); box-shadow:0 0 0 2px var(--p-300); } /* ===== AUDIT PACKETS — compact (facility/reports.php) =================== * Replaces the larger .lms-preset cards. 4 packets fit in a tidy 2x2 * grid (1-up on narrow viewports). Each is a single row: tinted icon * tile + title/range + a primary "Generate" button with the existing * dropdown menu. The full preset description from $p['desc'] is on the * button as a title="" tooltip so the visual doesn't get crowded. */ .lms-packets { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--s3); margin-bottom:var(--s6); } @media (max-width: 760px) { .lms-packets { grid-template-columns:1fr; } } .lms-packet { display:flex; align-items:center; gap:var(--s3); padding:12px 14px; background:var(--surf); border:1px solid var(--bd-c); border-radius:12px; box-shadow:var(--sh-sm); transition:box-shadow var(--t),border-color var(--t),transform var(--t); } .lms-packet:hover { box-shadow:var(--sh-md); border-color:var(--p-200); transform:translateY(-1px); } .lms-packet-ic { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(99,102,241,.10); color:var(--p-700); border:1px solid rgba(99,102,241,.18); } .lms-packet-ic svg { width:18px; height:18px; } .lms-packet--ok .lms-packet-ic { background:rgba(34,197,94,.10); color:#15803d; border-color:rgba(34,197,94,.20); } .lms-packet--nf .lms-packet-ic { background:rgba(99,102,241,.10); color:var(--p-700); border-color:rgba(99,102,241,.18); } .lms-packet--wn .lms-packet-ic { background:rgba(245,158,11,.10); color:#b45309; border-color:rgba(245,158,11,.22); } .lms-packet--ce .lms-packet-ic { background:rgba(124,92,209,.10); color:#6d28d9; border-color:rgba(124,92,209,.22); } .lms-packet-body { flex:1; min-width:0; } .lms-packet-title { font-size:.94rem; font-weight:700; color:var(--tx); letter-spacing:-.01em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lms-packet-range { font-size:.78rem; color:var(--tx-mut); font-variant-numeric:tabular-nums; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lms-packet-cta { flex:none; } .lms-packet-cta .lms-btn svg { width:14px; height:14px; } /* ===== STANDARDIZED PAGE HEADER (.lms-pageheader) ======================= * Drop-in replacement for the legacy .lms-page-head pattern. Use this on * every page going forward — it provides a uniform visual treatment of * the page title block: brand accent bar, eyebrow line, title, sub-copy, * and a right-aligned slot for controls/actions/KPI pills. * *
*
*
Admin · Billing
*

Billing & Subscriptions

*

50-seat packs · $99/pack/month

*
*
...
*
*/ .lms-pageheader { position:relative; display:grid; grid-template-columns:1fr auto; gap:var(--s4); align-items:center; padding:16px 22px 16px 26px; margin-bottom:var(--s4); border-radius:14px; background:linear-gradient(135deg, var(--surf), var(--surf-2)); border:1px solid var(--bd-c); box-shadow: 0 1px 2px rgba(15,23,42,.04); } .lms-pageheader::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg, var(--p-500), var(--p-800)); } .lms-pageheader-text { min-width:0; } .lms-pageheader-eyebrow { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--tx-mut); margin-bottom:4px; } .lms-pageheader-title { margin:0; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color:var(--tx); line-height:1.15; } .lms-pageheader-sub { margin:6px 0 0; color:var(--tx-mut); font-size:.92rem; line-height:1.5; } .lms-pageheader-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .lms-pageheader--hero { /* Stronger variant for landing-style pages (idle-users hero style). */ color:#fff; padding:28px 28px; background: radial-gradient(circle at 0% 0%, rgba(245,158,11,.18), transparent 55%), radial-gradient(circle at 100% 100%, rgba(99,102,241,.20), transparent 55%), linear-gradient(135deg, #0c1730 0%, #1e2e58 100%); border-color:transparent; box-shadow:0 1px 2px rgba(15,23,42,.10), 0 6px 20px rgba(15,23,42,.10); } .lms-pageheader--hero::before { background:linear-gradient(180deg, #a78bfa, #6366f1); } .lms-pageheader--hero .lms-pageheader-eyebrow { color:rgba(255,255,255,.66); } .lms-pageheader--hero .lms-pageheader-title { color:#fff; font-size:1.7rem; } .lms-pageheader--hero .lms-pageheader-sub { color:rgba(255,255,255,.82); } @media (max-width:640px) { .lms-pageheader { grid-template-columns:1fr; } .lms-pageheader-actions { justify-content:flex-start; } } /* ===== BRANDED DIALOG (lmsDialog.alert / .confirm) ====================== * Drop-in replacement for window.alert()/window.confirm(). Shown via a * Draco-branded modal with the logo. Programmatic API in draco-lms.js. * Also auto-intercepts: * -