/* Employee Training Portal — shared design system */ :root{ --brand: #4f46e5; --brand-dark: #4338ca; --brand-light: #eef2ff; --ink: #1e1b2e; --muted: #6b7280; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --border: #e5e7eb; --bg: #f7f7fb; } *{box-sizing:border-box;} body{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); } .font-display{ font-family: 'Poppins', 'Inter', sans-serif; } /* ---------- Brand ---------- */ .brand-gradient{ background: linear-gradient(135deg,#4f46e5 0%, #7c3aed 50%, #db2777 100%); } .text-brand{ color: var(--brand); } .bg-brand{ background: var(--brand); } .btn-primary{ background: var(--brand); color:#fff; transition: all .15s ease; } .btn-primary:hover{ background: var(--brand-dark); transform: translateY(-1px); } .btn-primary:disabled{ background:#c7c9d1; color:#8b8d97; cursor:not-allowed; transform:none; } .btn-primary:disabled:hover{ background:#c7c9d1; transform:none; } .btn-outline{ border:1.5px solid var(--brand); color: var(--brand); background:#fff; } .btn-outline:hover{ background: var(--brand-light); } /* ---------- Cards ---------- */ .card{ background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .card-hover{ transition: all .2s ease; } .card-hover:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(79,70,229,.12); border-color:#c7d2fe; } /* ---------- Section drag-and-drop reorder (module builder) ---------- */ .section-card{ transition: box-shadow .15s ease, border-color .15s ease, opacity .15s ease; } .section-card.dragging{ opacity: .4; } .section-card .drag-handle{ cursor: grab; } .section-card .drag-handle:active{ cursor: grabbing; } .section-card.drag-over-top{ box-shadow: inset 0 3px 0 0 var(--brand); } .section-card.drag-over-bottom{ box-shadow: inset 0 -3px 0 0 var(--brand); } /* ---------- Progress bar ---------- */ .progress-track{ background:#eef0f4; border-radius:999px; overflow:hidden; height:8px; } .progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg,#4f46e5,#7c3aed); transition: width .4s ease; } .progress-fill.complete{ background: linear-gradient(90deg,#16a34a,#22c55e); } /* ---------- Sidebar ---------- */ .sidebar-link{ display:flex; align-items:center; gap:.65rem; padding:.6rem .9rem; border-radius:10px; color:#4b5563; font-weight:500; font-size:.92rem; } .sidebar-link:hover{ background:#f3f4f6; color:#111827; } .sidebar-link.active{ background: var(--brand-light); color: var(--brand); } .sidebar-link.active i{ color: var(--brand); } /* ---------- Collapsible "hover to expand" sidebar drawer (desktop) ---------- Collapsed by default (icon-only rail); hovering anywhere over it smoothly expands it to show full labels, then it auto-collapses again on mouseleave. It's `position:fixed` and overlays the page (z-index above content) while expanded, so the main content never has to reflow/shift on hover. */ .sidebar-drawer{ width: 5rem; /* collapsed: icon rail only */ overflow-x: hidden; transition: width .18s ease, box-shadow .18s ease; z-index: 40; } .sidebar-drawer:hover{ width: 16rem; /* expanded: icons + labels */ box-shadow: 6px 0 28px rgba(16,24,40,.12); } /* Any inline label next to an icon (nav links, brand name, logout, profile name block) */ .sidebar-drawer .sidebar-label{ opacity: 0; max-width: 0; white-space: nowrap; overflow: hidden; transition: opacity .12s ease, max-width .18s ease; } .sidebar-drawer:hover .sidebar-label{ opacity: 1; max-width: 220px; } /* Standalone block text under the logo (tenant name) — collapses its own height too */ .sidebar-drawer .sidebar-fade{ opacity: 1; max-height: 2.5rem; overflow: hidden; transition: opacity .12s ease, max-height .18s ease, margin .18s ease; } .sidebar-drawer:not(:hover) .sidebar-fade{ opacity: 0; max-height: 0; margin-top: 0 !important; margin-bottom: 0 !important; } /* Icon+label rows (nav links, logout button, profile row) center their icon when collapsed instead of sitting flush left with a big empty gap. */ .sidebar-drawer:not(:hover) .sidebar-icon-row{ justify-content: center; gap: 0; padding-left: 0; padding-right: 0; } /* ---------- Badges ---------- */ .badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:999px; } .badge-green{ background:#dcfce7; color:#15803d; } .badge-yellow{ background:#fef3c7; color:#b45309; } .badge-gray{ background:#f3f4f6; color:#4b5563; } .badge-indigo{ background:#e0e7ff; color:#4338ca; } .badge-red{ background:#fee2e2; color:#b91c1c; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:8px; } ::-webkit-scrollbar-track{ background:transparent; } /* ---------- Utility ---------- */ .line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .fade-in{ animation: fadeIn .3s ease; } @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} } /* Quiz option */ .quiz-option{ border:1.5px solid var(--border); border-radius:12px; padding:.85rem 1rem; cursor:pointer; transition: all .15s ease; } .quiz-option:hover{ border-color:#a5b4fc; background:#f8f9ff; } .quiz-option.selected{ border-color: var(--brand); background: var(--brand-light); } .quiz-option.correct{ border-color: var(--success); background:#f0fdf4; } .quiz-option.incorrect{ border-color: var(--danger); background:#fef2f2; } /* ---------- Slide viewer (flipbook-style presentation) ---------- */ .slide-viewer{ background:#0f172a; border-radius:16px; overflow:hidden; } .slide-stage{ position:relative; aspect-ratio:16/9; background:#0f172a; overflow:hidden; } .slide-stage-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .slide-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:0; transform:scale(1.02); transition: opacity .45s ease, transform .45s ease; cursor: zoom-in; user-select:none; -webkit-user-drag:none; } .slide-stage img.slide-active{ opacity:1; transform:scale(1); } .slide-stage-nav{ position:absolute; top:0; bottom:0; width:15%; display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .15s ease; cursor:pointer; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); color:#fff; font-size:1.25rem; border:0; } .slide-stage-nav.next{ right:0; left:auto; background: linear-gradient(270deg, rgba(0,0,0,.35), transparent); } .slide-stage:hover .slide-stage-nav{ opacity:1; } .slide-stage-nav:disabled{ opacity:0 !important; cursor:default; } .slide-topbar{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:.6rem .9rem; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent); z-index:2; } .slide-topbar .slide-badge{ color:#fff; font-size:.75rem; font-weight:600; background:rgba(255,255,255,.12); border-radius:999px; padding:.2rem .7rem; } .slide-topbar-actions{ display:flex; gap:.4rem; } .slide-icon-btn{ width:2rem; height:2rem; border-radius:8px; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; transition: background .15s ease; font-size:.85rem; } .slide-icon-btn:hover{ background:rgba(255,255,255,.25); } .slide-icon-btn.active{ background:var(--brand); } .slide-progress-dots{ position:absolute; bottom:.6rem; left:0; right:0; display:flex; justify-content:center; gap:.3rem; z-index:2; } .slide-progress-dots .dot{ width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.35); cursor:pointer; transition: all .2s ease; } .slide-progress-dots .dot.active{ background:#fff; width:16px; } /* Thumbnail filmstrip */ .slide-thumbrail{ display:flex; gap:.5rem; overflow-x:auto; padding:.75rem; background:#0b1120; } .slide-thumbrail::-webkit-scrollbar{ height:6px; } .slide-thumb{ flex:0 0 auto; width:88px; height:50px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; opacity:.55; transition: all .15s ease; position:relative; background:#1e293b; } .slide-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .slide-thumb:hover{ opacity:.85; } .slide-thumb.active{ opacity:1; border-color: var(--brand); } .slide-thumb .thumb-num{ position:absolute; bottom:2px; right:3px; font-size:.6rem; color:#fff; background:rgba(0,0,0,.5); border-radius:4px; padding:0 3px; } /* Fullscreen mode */ .slide-viewer.slide-fullscreen{ position:fixed; inset:0; z-index:200; border-radius:0; display:flex; flex-direction:column; } .slide-viewer.slide-fullscreen .slide-stage{ flex:1; aspect-ratio:auto; } .slide-viewer.slide-fullscreen .slide-thumbrail{ flex:0 0 auto; } /* Zoom lightbox */ .slide-zoom-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:300; display:flex; align-items:center; justify-content:center; cursor:zoom-out; } .slide-zoom-overlay img{ max-width:92vw; max-height:92vh; object-fit:contain; } /* PDF rendering loading state inside the slide stage */ .slide-pdf-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } /* Slide source mode toggle (PDF/PPT vs legacy image URLs) in the module builder */ .slide-mode-btn{ padding:.4rem .9rem; border-radius:8px; border:1.5px solid var(--border); color:#6b7280; background:#fff; cursor:pointer; font-weight:600; } .slide-mode-btn.active{ border-color:var(--brand); background:var(--brand-light); color:var(--brand); } /* Video player wrapper */ .video-frame{ aspect-ratio:16/9; background:#000; border-radius:16px; overflow:hidden; } .video-frame video{ width:100%; height:100%; } /* modal */ .modal-backdrop{ background:rgba(15,23,42,.5); backdrop-filter: blur(2px); } /* Article/blog section modal — expanded + true full-page states. Applied/removed via JS in admin/module-builder.html (toggleTypeFields / toggleArticleFullscreen). Using dedicated classes here (rather than only Tailwind utility toggles) avoids conflicts with the base .rounded-2xl/ .w-full/.max-w-lg classes already on the modal card markup. */ #sectionModal.modal-no-pad{ padding:0; } #sectionModalCard.modal-article-expanded{ width:100%; max-width:64rem; height:92vh; max-height:92vh; } #sectionModalCard.modal-article-fullpage{ width:100vw !important; height:100vh !important; max-width:100vw !important; max-height:100vh !important; border-radius:0 !important; } /* WYSIWYG (Quill) */ .ql-editor-display{ padding:0 !important; font-size: inherit; } .ql-editor-display.ql-editor{ min-height:0; } .ql-container{ border-bottom-left-radius:10px; border-bottom-right-radius:10px; font-family: 'Inter', sans-serif; font-size:.95rem; } .ql-toolbar{ border-top-left-radius:10px; border-top-right-radius:10px; background:#f9fafb; } /* Rendered rich-text output (from Quill-authored HTML) */ .rich-content h1{ font-size:1.5rem; font-weight:700; margin:.75rem 0; } .rich-content h2{ font-size:1.25rem; font-weight:700; margin:.6rem 0; } .rich-content h3{ font-size:1.1rem; font-weight:700; margin:.5rem 0; } .rich-content p{ margin:.5rem 0; line-height:1.65; } .rich-content ul{ list-style:disc; padding-left:1.5rem; margin:.5rem 0; } .rich-content ol{ list-style:decimal; padding-left:1.5rem; margin:.5rem 0; } .rich-content li{ margin:.25rem 0; } /* ---------- Document (PDF) inline viewer ---------- */ /* Browsers render PDFs natively inside an