/* ============================================================= Custom LMS — Frontend Stylesheet Vibe: Warm & Friendly | Soft colors, rounded edges ============================================================= */ /* --- VARIABLES --- */ :root { --clms-primary: #15acbd; --clms-primary-dk: #0e8fa0; --clms-secondary: #002a41; --clms-accent-1: #6b378b; --clms-accent-2: #feb028; --clms-accent-3: #d62f63; --clms-bg: #f7f9fb; --clms-surface: #ffffff; --clms-border: #e2e8ed; --clms-text: #1a2e3b; --clms-text-muted: #6b7f8e; --clms-radius-sm: 8px; --clms-radius-md: 14px; --clms-radius-lg: 20px; --clms-shadow: 0 4px 18px rgba(0,42,65,.08); --clms-shadow-hover:0 8px 28px rgba(0,42,65,.14); --clms-transition: 0.22s ease; --clms-font: 'Nunito', 'Segoe UI', sans-serif; } /* --- GOOGLE FONT (add to your theme's or functions.php) --- */ /* ============================================================= GLOBAL WRAP ============================================================= */ .clms-catalog, .clms-course-wrap, .clms-lesson-wrap, .clms-quiz-wrap, .clms-scorm-wrap, .clms-dashboard { font-family: var(--clms-font); color: var(--clms-text); background: var(--clms-bg); padding: 32px 24px; max-width: 1100px; margin: 0 auto; } /* ============================================================= CATALOG CONTROLS (layout toggle) ============================================================= */ .clms-catalog-controls { display: flex; gap: 10px; margin-bottom: 24px; align-items: center; } .clms-catalog-controls .button { background: var(--clms-surface); border: 2px solid var(--clms-border); color: var(--clms-secondary); border-radius: var(--clms-radius-sm); padding: 8px 18px; font-family: var(--clms-font); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: all var(--clms-transition); } .clms-catalog-controls .button:hover { border-color: var(--clms-primary); color: var(--clms-primary); background: #edf9fb; } /* ============================================================= COURSE CATALOG — GRID LAYOUT ============================================================= */ .clms-catalog.clms-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } .clms-catalog.clms-layout-grid .clms-course-card { background: var(--clms-surface); border-radius: var(--clms-radius-lg); border: 1px solid var(--clms-border); box-shadow: var(--clms-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--clms-transition), box-shadow var(--clms-transition); } .clms-catalog.clms-layout-grid .clms-course-card:hover { transform: translateY(-4px); box-shadow: var(--clms-shadow-hover); } .clms-catalog.clms-layout-grid .clms-card-img { width: 100%; height: 190px; object-fit: cover; display: block; } /* ============================================================= COURSE CATALOG — LIST LAYOUT ============================================================= */ .clms-catalog.clms-layout-list { display: flex; flex-direction: column; gap: 18px; } .clms-catalog.clms-layout-list .clms-course-card { display: flex; flex-direction: row; background: var(--clms-surface); border-radius: var(--clms-radius-md); border: 1px solid var(--clms-border); box-shadow: var(--clms-shadow); overflow: hidden; transition: transform var(--clms-transition), box-shadow var(--clms-transition); } .clms-catalog.clms-layout-list .clms-course-card:hover { transform: translateX(4px); box-shadow: var(--clms-shadow-hover); } .clms-catalog.clms-layout-list .clms-card-img { width: 200px; min-width: 200px; height: 150px; object-fit: cover; display: block; } /* ============================================================= CARD BODY (shared) ============================================================= */ .clms-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .clms-card-body h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--clms-secondary); line-height: 1.3; } .clms-card-body h3 a { color: inherit; text-decoration: none; transition: color var(--clms-transition); } .clms-card-body h3 a:hover { color: var(--clms-primary); } .clms-card-body p { margin: 0; font-size: 0.9rem; color: var(--clms-text-muted); line-height: 1.55; flex: 1; } .clms-card-body .button, .clms-card-body .button-primary { align-self: flex-start; margin-top: 8px; background: var(--clms-primary); color: #fff; border: none; border-radius: var(--clms-radius-sm); padding: 10px 22px; font-family: var(--clms-font); font-weight: 700; font-size: 0.9rem; text-decoration: none; cursor: pointer; transition: background var(--clms-transition), transform var(--clms-transition); display: inline-block; } .clms-card-body .button:hover, .clms-card-body .button-primary:hover { background: var(--clms-primary-dk); transform: scale(1.03); } /* ============================================================= COURSE SINGLE PAGE ============================================================= */ .clms-course-wrap h2 { font-size: 1.8rem; font-weight: 800; color: var(--clms-secondary); margin-bottom: 20px; } /* Progress bar */ .clms-progress-bar-wrap { background: #ddeef2; border-radius: 50px; height: 14px; margin-bottom: 28px; overflow: hidden; } .clms-progress-bar { background: linear-gradient(90deg, var(--clms-primary), var(--clms-accent-1)); height: 100%; border-radius: 50px; transition: width 0.5s ease; min-width: 4px; } /* Curriculum list */ .clms-curriculum-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .clms-curriculum-list li { background: var(--clms-surface); border: 1.5px solid var(--clms-border); border-radius: var(--clms-radius-md); padding: 14px 20px; display: flex; align-items: center; gap: 12px; font-size: 0.97rem; box-shadow: 0 2px 8px rgba(0,42,65,.04); transition: border-color var(--clms-transition), background var(--clms-transition); } .clms-curriculum-list li:not(.locked):hover { border-color: var(--clms-primary); background: #edf9fb; } .clms-curriculum-list li.locked { opacity: 0.5; cursor: not-allowed; background: #f0f3f5; } .clms-curriculum-list li a { text-decoration: none; font-weight: 700; color: var(--clms-secondary); transition: color var(--clms-transition); } .clms-curriculum-list li:not(.locked) a:hover { color: var(--clms-primary); } /* ============================================================= LESSON PAGE ============================================================= */ .clms-lesson-wrap { max-width: 820px; } .clms-lesson-wrap h2 { font-size: 1.7rem; font-weight: 800; color: var(--clms-secondary); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 3px solid var(--clms-primary); } .clms-lesson-wrap .entry-content, .clms-lesson-wrap p { font-size: 1.02rem; line-height: 1.75; color: var(--clms-text); } /* Complete button */ .clms-lesson-wrap form { margin-top: 32px; } .clms-lesson-wrap form .button, .clms-lesson-wrap form .button-primary { background: linear-gradient(135deg, var(--clms-primary), var(--clms-accent-1)); color: #fff; border: none; border-radius: var(--clms-radius-sm); padding: 13px 30px; font-family: var(--clms-font); font-weight: 800; font-size: 1rem; cursor: pointer; transition: opacity var(--clms-transition), transform var(--clms-transition); letter-spacing: 0.02em; } .clms-lesson-wrap form .button:hover { opacity: 0.9; transform: scale(1.02); } /* Completed message */ .clms-lesson-wrap p[style*="color:green"] { background: #eafaf3; border: 1.5px solid #a8e6c9; color: #1a7a4a !important; border-radius: var(--clms-radius-sm); padding: 14px 20px; font-weight: 700; margin-top: 24px; } .clms-lesson-wrap p[style*="color:green"] a { color: var(--clms-primary); font-weight: 800; } /* ============================================================= QUIZ PAGE ============================================================= */ .clms-quiz-wrap { max-width: 820px; } .clms-quiz-wrap h2 { font-size: 1.7rem; font-weight: 800; color: var(--clms-secondary); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 3px solid var(--clms-accent-2); } .clms-quiz-question { background: var(--clms-surface); border: 1.5px solid var(--clms-border); border-radius: var(--clms-radius-md); padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0,42,65,.05); transition: border-color var(--clms-transition); } .clms-quiz-question:focus-within { border-color: var(--clms-primary); } .clms-quiz-question p strong { font-size: 1.05rem; color: var(--clms-secondary); display: block; margin-bottom: 14px; } /* Radio / checkbox options */ .clms-quiz-question label { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--clms-radius-sm); cursor: pointer; font-size: 0.97rem; transition: background var(--clms-transition); } .clms-quiz-question label:hover { background: #edf9fb; } .clms-quiz-question input[type="radio"], .clms-quiz-question input[type="checkbox"] { accent-color: var(--clms-primary); width: 18px; height: 18px; } /* Text inputs in quiz */ .clms-quiz-question input[type="text"], .clms-quiz-question textarea { width: 100%; border: 1.5px solid var(--clms-border); border-radius: var(--clms-radius-sm); padding: 11px 14px; font-family: var(--clms-font); font-size: 0.97rem; color: var(--clms-text); background: var(--clms-bg); transition: border-color var(--clms-transition), box-shadow var(--clms-transition); box-sizing: border-box; resize: vertical; } .clms-quiz-question input[type="text"]:focus, .clms-quiz-question textarea:focus { outline: none; border-color: var(--clms-primary); box-shadow: 0 0 0 3px rgba(21,172,189,.15); } /* Submit quiz button */ .clms-quiz-wrap form > .button, .clms-quiz-wrap form > .button-primary { display: inline-block; margin-top: 10px; background: linear-gradient(135deg, var(--clms-accent-3), var(--clms-accent-1)); color: #fff; border: none; border-radius: var(--clms-radius-sm); padding: 14px 36px; font-family: var(--clms-font); font-weight: 800; font-size: 1.05rem; cursor: pointer; transition: opacity var(--clms-transition), transform var(--clms-transition); letter-spacing: 0.02em; } .clms-quiz-wrap form > .button:hover { opacity: 0.9; transform: scale(1.02); } /* ============================================================= SCORM WRAPPER ============================================================= */ .clms-scorm-wrap { max-width: 960px; } .clms-scorm-wrap h2 { font-size: 1.6rem; font-weight: 800; color: var(--clms-secondary); margin-bottom: 18px; } #clms-scorm-frame { width: 100%; height: 620px; border: 2px solid var(--clms-border); border-radius: var(--clms-radius-md); box-shadow: var(--clms-shadow); } /* ============================================================= STUDENT DASHBOARD ============================================================= */ .clms-dashboard h2 { font-size: 1.7rem; font-weight: 800; color: var(--clms-secondary); margin-bottom: 24px; } .clms-dashboard > div { background: var(--clms-surface); border: 1.5px solid var(--clms-border); border-radius: var(--clms-radius-md); padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,42,65,.05); transition: box-shadow var(--clms-transition), transform var(--clms-transition); } .clms-dashboard > div:hover { box-shadow: var(--clms-shadow-hover); transform: translateY(-2px); } .clms-dashboard strong a { color: var(--clms-secondary); font-size: 1.05rem; font-weight: 800; text-decoration: none; transition: color var(--clms-transition); } .clms-dashboard strong a:hover { color: var(--clms-primary); } .clms-dashboard small { color: var(--clms-text-muted); font-size: 0.88rem; margin-top: 6px; display: block; } /* Dashboard progress bar */ .clms-dashboard .clms-progress-bar-wrap { margin-top: 10px; margin-bottom: 6px; } /* ============================================================= BADGES — used for item type labels ============================================================= */ .clms-badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .clms-badge-lesson { background: #ddf0f3; color: var(--clms-primary-dk); } .clms-badge-quiz { background: #fff3de; color: #a06b00; } .clms-badge-scorm { background: #ede0f5; color: var(--clms-accent-1); } /* ============================================================= ALERTS & NOTICES ============================================================= */ .clms-notice { padding: 14px 20px; border-radius: var(--clms-radius-sm); font-weight: 600; margin: 16px 0; font-size: 0.97rem; } .clms-notice-success { background: #eafaf3; border-left: 4px solid #2ecc71; color: #1a7a4a; } .clms-notice-error { background: #fdedf2; border-left: 4px solid var(--clms-accent-3); color: #8b0030; } .clms-notice-info { background: #edf9fb; border-left: 4px solid var(--clms-primary); color: var(--clms-primary-dk); } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width: 768px) { .clms-catalog.clms-layout-grid { grid-template-columns: 1fr; } .clms-catalog.clms-layout-list .clms-course-card { flex-direction: column; } .clms-catalog.clms-layout-list .clms-card-img { width: 100%; height: 180px; min-width: unset; } .clms-course-wrap, .clms-lesson-wrap, .clms-quiz-wrap, .clms-scorm-wrap, .clms-dashboard { padding: 20px 14px; } #clms-scorm-frame { height: 420px; } .clms-course-wrap h2, .clms-lesson-wrap h2, .clms-quiz-wrap h2 { font-size: 1.35rem; } } @media (max-width: 480px) { .clms-card-body .button { width: 100%; text-align: center; } .clms-quiz-wrap form > .button { width: 100%; text-align: center; } }