@import url('fonts.css'); /* ============================================================ DefCMS Academy Portal – Stylesheet Primary language: Arabic (RTL) ============================================================ */ /* ── CSS Variables ─────────────────────────────────────────── */ /* Aligned with DefenTek dark / gold brand identity used across the public site and admin panel. Light-mode preferences and high-contrast variants are still supported via body classes. */ :root { /* Education-focused palette — violet primary with cyan support, on a deep indigo-tinted dark background (Udemy/Coursera feel). */ --primary: #7C5CFC; /* violet */ --primary-dark: #5B3DF0; --primary-light: #9D85FF; --secondary: #22D3EE; /* cyan accent */ --accent: #34D399; /* success/positive */ --danger: #ff4d5e; --text: #EDEDF5; --text-muted: #A3A8BD; --text-faint: #63677d; --bg: #0B0D16; --card-bg: #131624; --card-elevated: #1B1F33; --border: rgba(160,170,255,0.10); --border-strong: rgba(160,170,255,0.20); --radius: 12px; --radius-sm: 6px; --radius-lg: 16px; --shadow: 0 6px 18px -6px rgba(0,0,0,.50), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 18px 38px -14px rgba(0,0,0,.65); --nav-h: 68px; --font-base: 17px; --transition: 0.22s cubic-bezier(.2,.7,.2,1); } /* Light theme — toggled from the nav (assets/js/academy-theme.js) or by adding `class="academy-light"` to . Full light skin. */ /* `html body.academy-light` (higher specificity) so the light theme also wins over the a11y `body.contrast-dark` class when both are present. */ html body.academy-light { --text: #1e293b; --text-muted: #55607a; --text-faint: #94a3b8; --bg: #f4f6fb; --card-bg: #ffffff; --card-elevated: #ffffff; --border: #e6e9f2; --border-strong: #cbd5e1; --shadow: 0 6px 18px -8px rgba(20,30,60,.12), 0 2px 4px rgba(20,30,60,.06); --shadow-lg: 0 18px 38px -16px rgba(20,30,60,.18); background: #f4f6fb; } /* Re-skin the few hardcoded-dark bands for light mode */ html body.academy-light .course-hero { background: linear-gradient(120deg,#eef2ff 0%,#ede9fe 55%,#f5f3ff 100%); } html body.academy-light .course-hero, html body.academy-light .course-hero * { color:#1e293b; } html body.academy-light .course-hero .btn-primary { color:#fff; } /* ── Resets & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-base); scroll-behavior: smooth; } body { font-family: 'Segoe UI', 'IBM Plex Arabic', Tahoma, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.7; direction: ltr; } body.rtl { direction: rtl; text-align: right; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; } /* ── Accessibility: Font Size ──────────────────────────────── */ body.font-large { font-size: 18px; } body.font-xlarge { font-size: 21px; } /* ── Accessibility: Contrast ───────────────────────────────── */ body.contrast-high { --bg: #ffffff; --card-bg: #ffffff; --text: #000000; --text-muted:#333333; --border: #000000; --primary: #0038a8; --secondary:#006b3c; } body.contrast-dark { --bg: #121212; --card-bg: #1e1e1e; --card-elevated: #262626; --text: #e8e8e8; --text-muted: #b0b0b0; --text-faint: #888888; --border: #3a3a3a; --border-strong: #4a4a4a; } /* ── Reduced Motion ────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } /* ── A11y Bar ──────────────────────────────────────────────── */ .a11y-bar { position: fixed; bottom: 16px; inset-inline-end: 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; z-index: 9999; box-shadow: var(--shadow-lg); flex-wrap: wrap; max-width: calc(100vw - 32px); } .a11y-bar span.a11y-label { font-size: 0.8rem; color: var(--text-muted); margin-inline-end: 4px; } .a11y-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 0.82rem; color: var(--text); transition: background var(--transition); } .a11y-btn:hover, .a11y-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Navbar ────────────────────────────────────────────────── */ .academy-nav { position: sticky; top: 0; z-index: 900; height: var(--nav-h); background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; padding: 0 20px; gap: 14px; } .academy-nav .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: var(--primary); white-space: nowrap; text-decoration: none; flex-shrink: 0; } .academy-nav .nav-logo img { height: 36px; width: auto; } .nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-links::-webkit-scrollbar { display: none; } .rtl .nav-links { flex-direction: row; } .nav-links a { padding: 6px 9px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; color: var(--text); font-size: 0.86rem; transition: background var(--transition), color var(--transition); } .nav-links a:hover, .nav-links a.active { background: #eff6ff; color: var(--primary); } .nav-user { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; flex-shrink: 0; flex-wrap: nowrap; } .nav-user .user-name { font-weight: 600; font-size: 0.86rem; color: var(--text); white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; } .nav-user .btn-nav-dash { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 6px 11px; font-size: 0.84rem; white-space: nowrap; line-height: 1.2; text-decoration: none; display: inline-block; flex-shrink: 0; transition: background var(--transition); } .nav-user .btn-nav-dash:hover { background: var(--primary-dark); } .nav-user .btn-nav-logout { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; font-size: 0.83rem; white-space: nowrap; color: var(--text-muted); transition: all var(--transition); text-decoration: none; display: inline-block; flex-shrink: 0; } .nav-user .btn-nav-logout:hover { border-color: var(--danger); color: var(--danger); } /* injected theme toggle + notification bell — never shrink, always visible */ .acad-theme-toggle, .acad-bell { flex-shrink: 0; } /* ── Alternate header markup (.academy-header) used by several pages — style it identically to .academy-nav so navigation is consistent. ── */ .academy-header { position: sticky; top: 0; z-index: 900; background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .academy-header-inner { height: var(--nav-h); display: flex; align-items: center; gap: 20px; padding: 0 32px; max-width: 1440px; margin: 0 auto; } .academy-header .academy-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; color: var(--primary); white-space: nowrap; text-decoration: none; } .academy-header .nav-links { flex: 1; flex-wrap: wrap; } .academy-header .nav-user { margin-inline-start: auto; } .academy-header .nav-user .btn-profile { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: .9rem; font-weight: 600; } .academy-header .nav-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .academy-header .nav-avatar-ph { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; } .academy-header .btn-logout { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: .85rem; color: var(--text-muted); text-decoration: none; transition: all var(--transition); white-space: nowrap; } .academy-header .btn-logout:hover { border-color: var(--danger); color: var(--danger); } /* ── Mobile hamburger ───────────────────────────────────────── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-inline-start: auto; flex-shrink: 0; } .nav-hamburger span { display: block; width: 100%; height: 2px; background: var(--text); border-radius: 2px; transition: all .2s ease; } .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav dropdown */ .nav-mobile-panel { display: none; position: absolute; top: var(--nav-h); inset-inline-start: 0; inset-inline-end: 0; background: var(--card-bg); border-bottom: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.1); padding: 12px 20px 20px; z-index: 899; flex-direction: column; gap: 4px; } .nav-mobile-panel a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.95rem; transition: background var(--transition); } .nav-mobile-panel a:hover, .nav-mobile-panel a.active { background: #eff6ff; color: var(--primary); } .nav-mobile-panel .mobile-user-sep { border: none; border-top: 1px solid var(--border); margin: 10px 0; } .nav-mobile-panel.open { display: flex; } /* ── Hero ──────────────────────────────────────────────────── */ .academy-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; padding: 72px 32px 56px; text-align: center; } .academy-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 14px; } .academy-hero p { font-size: 1.1rem; opacity: .85; max-width: 560px; margin: 0 auto 28px; } .hero-search { display: flex; gap: 0; max-width: 520px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .hero-search input { flex: 1; border: none; padding: 14px 20px; font-size: 1rem; font-family: inherit; outline: none; } .hero-search button { background: var(--accent); border: none; color: #fff; padding: 14px 22px; font-size: 1rem; font-weight: 600; white-space: nowrap; transition: background var(--transition); } .hero-search button:hover { background: #d97706; } /* ── Catalog ───────────────────────────────────────────────── */ .catalog-section { padding: 40px 32px 80px; } .catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; align-items: center; } .filter-pill { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); font-size: 0.85rem; color: var(--text); cursor: pointer; transition: all var(--transition); } .filter-pill:hover, .filter-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; } .filter-select { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); font-size: 0.88rem; color: var(--text); font-family: inherit; cursor: pointer; } .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ── Course Card ───────────────────────────────────────────── */ .course-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } .course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.13); } .course-thumb { width: 100%; height: 180px; object-fit: cover; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.5rem; } .course-thumb img { width: 100%; height: 100%; object-fit: cover; } .course-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .course-card-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .course-card-title { font-size: 1rem; font-weight: 700; line-height: 1.4; } .course-card-instructor { font-size: 0.82rem; color: var(--text-muted); } .course-card-stats { display: flex; gap: 12px; font-size: 0.82rem; color: var(--text-muted); margin-top: auto; } .course-card-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .course-price { font-size: 1.05rem; font-weight: 700; color: var(--text); } .course-price.free { color: var(--secondary); } /* Stars */ .stars { color: var(--accent); font-size: 0.85rem; letter-spacing: 1px; } /* ── Badges ────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-free { background: #d1fae5; color: #065f46; } .badge-paid { background: #fef3c7; color: #92400e; } .badge-level { background: #ede9fe; color: #4c1d95; } .badge-new { background: #fee2e2; color: #991b1b; } .badge-featured{ background: #fef9c3; color: #713f12; } .badge-cert { background: #dbeafe; color: #1e40af; } .badge-live { background: #fee2e2; color: #991b1b; } /* ── Progress Bar ──────────────────────────────────────────── */ .progress-bar-wrap { width: 100%; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 999px; transition: width 0.4s ease; } /* ── Course Detail ─────────────────────────────────────────── */ .course-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 36px; max-width: 1240px; margin: 0 auto; padding: 0 24px 56px; align-items: start; } .rtl .course-detail-layout { direction: rtl; } .course-detail-main { min-width: 0; } .course-detail-sidebar { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-strong); overflow: hidden; /* Float the enrol card up into the hero band (Coursera-style) */ margin-top: -130px; position: relative; z-index: 5; } @media (max-width: 980px){ .course-detail-sidebar { margin-top: 0; position: static; } } .sidebar-thumb { width: 100%; height: 200px; object-fit: cover; } /* ── Course detail hero band (Coursera-style) ──────────────── */ .course-hero{ background:linear-gradient(120deg,#15172b 0%,#1c2040 55%,#241a47 100%); border-bottom:1px solid var(--border); padding:56px 0 64px; } .course-hero-inner{max-width:1240px;margin:0 auto;padding:0 28px;} .course-hero-text{max-width:780px;} .course-hero-eyebrow{ display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--primary-light); background:rgba(124,92,252,.16);border:1px solid rgba(124,92,252,.32); padding:5px 14px;border-radius:999px;margin-bottom:20px; } .course-hero-title{font-size:2.25rem;line-height:1.3;font-weight:800;color:#fff;margin:0 0 18px;letter-spacing:-.01em;} .course-hero-sub{font-size:1.08rem;line-height:1.75;color:#c8cbe0;margin:0 0 22px;} .course-hero-instr{font-size:.95rem;color:#c8cbe0;margin:0 0 24px;} .course-hero-instr strong{color:#fff;} .course-hero-instr .chi-title{color:#9aa0bd;} .course-hero-meta{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;font-size:.92rem;color:#c8cbe0;} .course-hero-meta strong{color:#fff;font-weight:700;} .course-hero-meta .chm-rating,.course-hero-meta .chm-rating strong{color:#fbbf24;} .course-hero-meta .chm-muted{color:#9aa0bd;font-weight:400;} .course-hero-meta .chm-cert{ color:var(--accent);border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.12);padding:4px 14px;border-radius:999px;font-weight:600;font-size:.82rem; } @media (max-width: 980px){ .course-hero{padding:34px 0 40px;} .course-hero-title{font-size:1.7rem;line-height:1.35;} .course-hero-inner{padding:0 20px;} } /* ── Course detail content blocks (Coursera-style cards) ───── */ .course-block{ background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 30px; margin-bottom:20px; } .course-block-title{ font-size:1.3rem;font-weight:800;color:var(--text);margin:0 0 18px; padding-bottom:14px;border-bottom:1px solid var(--border); display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1.35; } .course-block-sub{font-size:.88rem;font-weight:500;color:var(--text-muted);} .course-block-body{color:var(--text-muted);line-height:1.9;font-size:1rem;} @media (max-width: 680px){ .course-block{padding:22px 20px;} } .learn-grid{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:16px 32px; } .learn-grid li{ display:flex;gap:12px;align-items:flex-start; font-size:.95rem;line-height:1.65;color:var(--text); } .learn-grid li::before{ content:'✓';color:var(--accent);font-weight:800;flex-shrink:0; font-size:1.05rem;line-height:1.4; } @media (max-width:680px){ .learn-grid{grid-template-columns:1fr;} } /* curriculum + instructor sit flush inside their block */ .course-block .instructor-card{margin-bottom:0;background:transparent;border:none;padding:0;} .course-block .curriculum-section:last-child{margin-bottom:0;} .sidebar-body { padding: 24px 22px; } .sidebar-price { font-size: 1.75rem; font-weight: 800; color: var(--text); margin-bottom: 16px; } .sidebar-price.free { color: var(--secondary); font-size: 1.5rem; } .course-detail-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 12px; } .course-detail-desc { color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; } .course-meta-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .meta-tag { display: flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; font-size: 0.85rem; } .meta-tag .icon { font-size: 1rem; } /* What you'll learn */ .learn-list { display: flex; flex-direction: column; gap: 8px; } .learn-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); } .learn-list li:last-child { border-bottom: none; } .learn-list li::before { content: '✓'; color: var(--secondary); font-weight: 700; flex-shrink: 0; } /* Instructor card */ .instructor-card { display: flex; gap: 18px; align-items: flex-start; background: var(--card-elevated); border-radius: var(--radius); padding: 22px; border: 1px solid var(--border); margin-bottom: 24px; } .instructor-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; font-weight: 800; flex-shrink: 0; border: 2px solid var(--border-strong); } .instructor-info { min-width: 0; } .instructor-info h4 { font-size: 1.08rem; font-weight: 800; margin: 0 0 2px; } .instructor-role { font-size: .9rem; color: var(--primary-light); margin: 0 0 8px; font-weight: 600; } .instructor-bio { font-size: .9rem; color: var(--text-muted); line-height: 1.7; margin: 0; } .instructor-info p { font-size: 0.85rem; color: var(--text-muted); } /* Curriculum */ .curriculum-section { margin-bottom: 12px; } .curriculum-section-title { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; } .curriculum-section-title:hover { background: #eff6ff; } .curriculum-lessons { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } .lesson-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; transition: background var(--transition); } .lesson-item:last-child { border-bottom: none; } .lesson-item:hover { background: var(--bg); } .lesson-item a { color: var(--text); flex: 1; text-decoration: none; } .lesson-item a:hover { color: var(--primary); } .lesson-icon { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; } .lesson-duration { font-size: 0.8rem; color: var(--text-muted); margin-inline-start: auto; flex-shrink: 0; } .lesson-status { flex-shrink: 0; } .lesson-status.completed { color: var(--secondary); } .lesson-status.locked { color: var(--text-muted); } .lesson-current { background: #eff6ff !important; } .lesson-current a { color: var(--primary); font-weight: 600; } /* Coupon field */ .coupon-row { display: flex; gap: 8px; } .coupon-row input { flex: 1; } .coupon-success { color: var(--secondary); font-size: 0.88rem; } .coupon-error { color: var(--danger); font-size: 0.88rem; } /* ── Course Player ─────────────────────────────────────────── */ .player-layout { display: grid; grid-template-columns: 1fr 300px; min-height: calc(100vh - var(--nav-h)); align-items: start; } .rtl .player-layout { direction: rtl; } .player-main { padding: 24px 28px; min-width: 0; } .player-sidebar { border-inline-start: 1px solid var(--border); background: var(--card-bg); position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; display: flex; flex-direction: column; } .player-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; background: var(--bg); } .player-sidebar-progress { padding: 12px 16px; border-bottom: 1px solid var(--border); } .player-sidebar-list { flex: 1; overflow-y: auto; } .player-section-title { padding: 10px 16px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); background: var(--bg); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .player-lesson-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 0.88rem; transition: background var(--transition); } .player-lesson-item:hover { background: var(--bg); } .player-lesson-item.current { background: #eff6ff; border-inline-start: 3px solid var(--primary); } .player-lesson-item.done { color: var(--text-muted); } .player-lesson-item .lesson-check { flex-shrink: 0; margin-top: 2px; } .player-lesson-text { flex: 1; line-height: 1.4; } .player-lesson-type { font-size: 0.75rem; color: var(--text-muted); display: block; } /* Video wrapper */ .video-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; } .video-wrapper iframe, .video-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* Lesson content */ .lesson-content { line-height: 1.9; font-size: 1rem; } .lesson-content h2, .lesson-content h3 { margin: 1.2em 0 0.5em; color: var(--primary); } .lesson-content p { margin-bottom: 1em; } .lesson-content ul { list-style: disc; padding-inline-start: 1.5em; margin-bottom: 1em; } /* Transcript */ .transcript-toggle { margin-top: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .transcript-toggle summary { padding: 12px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .transcript-toggle summary::-webkit-details-marker { display: none; } .transcript-body { padding: 16px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.8; } /* Player nav */ .player-nav { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } /* File download */ .file-download-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; } .file-download-card .file-icon { font-size: 3rem; margin-bottom: 12px; } .file-download-card .file-name { font-weight: 700; margin-bottom: 16px; } /* Completion modal */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; } .modal-overlay.active { display: flex; } .modal-box { background: var(--card-bg); border-radius: var(--radius); padding: 40px 32px; max-width: 440px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .modal-box h3 { font-size: 1.5rem; margin-bottom: 12px; } .modal-box p { color: var(--text-muted); margin-bottom: 24px; } .modal-icon { font-size: 3.5rem; margin-bottom: 16px; } /* ── Exam ──────────────────────────────────────────────────── */ .exam-container { max-width: 800px; margin: 0 auto; padding: 32px 20px 80px; } .exam-header { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; margin-bottom: 24px; } .exam-timer { position: fixed; top: calc(var(--nav-h) + 12px); inset-inline-end: 24px; z-index: 800; background: var(--primary); color: #fff; border-radius: var(--radius); padding: 10px 20px; font-size: 1.1rem; font-weight: 700; box-shadow: var(--shadow); } .exam-timer.warning { background: var(--accent); } .exam-timer.danger { background: var(--danger); animation: pulse 1s infinite; } @keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.6 } } .question-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; margin-bottom: 16px; } .question-number { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .question-text { font-size: 1rem; font-weight: 600; margin-bottom: 16px; line-height: 1.5; } .question-options { display: flex; flex-direction: column; gap: 10px; } .option-label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all var(--transition); } .option-label:hover { border-color: var(--primary); background: #eff6ff; } .option-label input[type=radio]:checked + span, .option-label input[type=checkbox]:checked + span { font-weight: 600; } .option-label:has(input:checked) { border-color: var(--primary); background: #eff6ff; } .option-label.correct { border-color: var(--secondary); background: #d1fae5; } .option-label.wrong { border-color: var(--danger); background: #fee2e2; } .question-explanation { margin-top: 14px; padding: 12px; background: #fefce8; border-radius: 8px; border-inline-start: 3px solid var(--accent); font-size: 0.88rem; color: var(--text-muted); } .exam-results { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 40px; text-align: center; margin-bottom: 24px; } .score-circle { width: 120px; height: 120px; border-radius: 50%; border: 6px solid var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; margin: 0 auto 20px; } .score-circle.fail { border-color: var(--danger); color: var(--danger); } .score-circle.pass { border-color: var(--secondary); color: var(--secondary); } /* ── Certificate ───────────────────────────────────────────── */ .cert-card { max-width: 780px; margin: 40px auto; background: var(--card-bg); border: 2px solid var(--primary); border-radius: var(--radius); padding: 60px 48px; text-align: center; box-shadow: var(--shadow); position: relative; } .cert-card::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--border); border-radius: 8px; pointer-events: none; } .cert-logo { width: 80px; margin: 0 auto 20px; } .cert-org { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .cert-tagline { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 32px; } .cert-title-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; } .cert-trainee { font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 24px; } .cert-course-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 6px; } .cert-course { font-size: 1.3rem; font-weight: 700; margin-bottom: 32px; } .cert-meta { display: flex; justify-content: center; gap: 40px; margin-bottom: 32px; flex-wrap: wrap; } .cert-meta-item label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 2px; } .cert-meta-item span { font-weight: 700; font-size: 0.95rem; } .cert-number { font-size: 0.8rem; color: var(--text-muted); font-family: monospace; margin-bottom: 16px; } .cert-verify-url { font-size: 0.78rem; color: var(--text-muted); word-break: break-all; } .cert-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; } @media print { .academy-nav, .a11y-bar, .cert-actions, .cert-verify-section { display: none !important; } .cert-card { border: 2px solid #000; box-shadow: none; margin: 0; } body { background: #fff; } } /* ── Dashboard ─────────────────────────────────────────────── */ .dashboard-section { padding: 36px 32px 80px; } .dashboard-header { margin-bottom: 32px; } .dashboard-header h1 { font-size: 1.6rem; font-weight: 800; } .dashboard-header p { color: var(--text-muted); } .dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; } .stat-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; text-align: center; box-shadow: var(--shadow); } .stat-card .stat-icon { font-size: 2rem; margin-bottom: 8px; } .stat-card .stat-num { font-size: 2rem; font-weight: 800; color: var(--primary); } .stat-card .stat-lbl { font-size: 0.85rem; color: var(--text-muted); } .dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; } .dashboard-panel { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); } .dashboard-panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 1rem; background: var(--bg); display: flex; align-items: center; justify-content: space-between; } .dashboard-panel-body { padding: 20px; } /* Enrolled course card */ .enrolled-course-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); } .enrolled-course-card:last-child { border-bottom: none; } .enrolled-thumb { width: 80px; height: 56px; border-radius: 8px; object-fit: cover; background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); flex-shrink: 0; } .enrolled-info { flex: 1; min-width: 0; } .enrolled-info h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enrolled-info .status-badge { margin-bottom: 6px; } .enrolled-actions { margin-top: 8px; display: flex; gap: 8px; } /* Certificates list */ .cert-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .cert-list-item:last-child { border-bottom: none; } .cert-badge-icon { font-size: 1.8rem; } .cert-list-info { flex: 1; min-width: 0; } .cert-list-info strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cert-list-info span { font-size: 0.78rem; color: var(--text-muted); } /* Sessions list */ .session-item { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .session-item:last-child { border-bottom: none; } .session-item strong { display: block; font-weight: 600; margin-bottom: 4px; } .session-meta { color: var(--text-muted); font-size: 0.82rem; } /* A11y settings panel */ .a11y-panel { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; box-shadow: var(--shadow); margin-top: 28px; } .a11y-panel h3 { font-size: 1rem; font-weight: 700; margin-bottom: 20px; } .a11y-toggle-group { display: flex; flex-direction: column; gap: 14px; } .a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .a11y-toggle-row:last-child { border-bottom: none; } .a11y-toggle-label { font-size: 0.9rem; } .a11y-toggle-label small { display: block; color: var(--text-muted); font-size: 0.78rem; } /* Toggle switch */ .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 12px; transition: background 0.2s; } .toggle-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; } .toggle-switch input:checked + .toggle-slider { background: var(--secondary); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); } /* ── Library ───────────────────────────────────────────────── */ .library-section { padding: 36px 32px 80px; } .library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .library-item { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); } .library-item:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.1); } .library-item-icon { font-size: 2.2rem; flex-shrink: 0; } .library-item-info { flex: 1; min-width: 0; } .library-item-info h4 { font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; } .library-item-info p { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; } /* ── Forms ─────────────────────────────────────────────────── */ .form-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); padding: 32px; box-shadow: var(--shadow); } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; color: var(--text); } .form-control { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; font-family: inherit; color: var(--text); background: var(--card-bg); transition: border-color var(--transition); outline: none; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); } .form-control.error { border-color: var(--danger); } .field-error { color: var(--danger); font-size: 0.8rem; margin-top: 4px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: 8px; border: none; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-dark); color: #fff; } .btn-secondary { background: var(--secondary); color: #fff; } .btn-secondary:hover { background: #059669; color: #fff; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: #d97706; color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #dc2626; color: #fff; } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: #fff; } .btn-outline-muted { background: transparent; color: var(--text-muted); border: 1.5px solid var(--border); } .btn-outline-muted:hover { border-color: var(--text-muted); color: var(--text); } .btn-sm { padding: 6px 14px; font-size: 0.85rem; } .btn-lg { padding: 14px 28px; font-size: 1.05rem; } .btn-block { width: 100%; } /* Tabs (login page) */ .tabs-header { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 28px; } .tab-btn { flex: 1; padding: 12px; font-size: 0.95rem; font-weight: 600; background: none; border: none; color: var(--text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; transition: all var(--transition); } .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* Flash messages */ .flash-msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; display: flex; align-items: flex-start; gap: 10px; } .flash-msg.success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .flash-msg.error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } .flash-msg.info { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } .flash-msg.warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } /* Empty state */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 3.5rem; margin-bottom: 14px; } .empty-state h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; } /* Pagination */ .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 40px; } .page-btn { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition); text-decoration: none; color: var(--text); } .page-btn:hover, .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Section heading */ .section-heading { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: 10px; } /* Container */ .container { max-width: 1860px; margin: 0 auto; } /* Live session card */ .live-session-card { display: flex; gap: 16px; align-items: center; padding: 16px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 12px; } .live-session-date { text-align: center; min-width: 60px; } .live-session-date .day { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--primary); } .live-session-date .month { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; } .live-session-info { flex: 1; } .live-session-info strong { display: block; font-weight: 700; margin-bottom: 2px; } .live-session-info span { font-size: 0.82rem; color: var(--text-muted); } /* Verify badge */ .verify-success { background: #d1fae5; border: 1px solid #6ee7b7; border-radius: var(--radius); padding: 24px; text-align: center; margin-bottom: 20px; } .verify-fail { background: #fee2e2; border: 1px solid #fca5a5; border-radius: var(--radius); padding: 24px; text-align: center; } .verify-icon { font-size: 3rem; margin-bottom: 10px; } /* ── RTL overrides ─────────────────────────────────────────── */ /* nav-links must flow in natural RTL order (first link nearest the logo); row-reverse packed them to the far side and isolated the logo. */ .rtl .nav-links { flex-direction: row; } .rtl .hero-search { flex-direction: row-reverse; } .rtl .course-detail-layout { grid-template-areas: "main sidebar"; } .rtl .player-layout { grid-template-columns: 300px 1fr; } .rtl .player-sidebar { border-inline-start: none; border-inline-end: 1px solid var(--border); } .rtl .question-explanation { border-inline-start: none; border-inline-end: 3px solid var(--accent); } /* ── Mobile sidebar toggle (learn page) ─────────────────────── */ .player-sidebar-toggle { display: none; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--card-bg); border: none; border-bottom: 1px solid var(--border); font-size: .9rem; font-weight: 600; color: var(--text); cursor: pointer; order: -1; /* appears above main in flex/grid column layout */ } .player-sidebar-toggle:hover { background: var(--bg); } .sidebar-toggle-pct { margin-inline-start: auto; font-size: .8rem; color: var(--accent); font-weight: 700; } .player-sidebar-close { display: none; position: absolute; top: 12px; inset-inline-end: 12px; background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px; } .player-sidebar-close:hover { background: var(--bg); color: var(--text); } /* ── Responsive 768px ──────────────────────────────────────── */ @media (max-width: 768px) { .academy-nav { padding: 0 16px; gap: 12px; position: relative; } .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-user .user-name { display: none; } .academy-hero { padding: 48px 20px 40px; } .catalog-section, .dashboard-section, .library-section { padding-inline: 16px; } .catalog-grid { grid-template-columns: 1fr 1fr; } .course-detail-layout { grid-template-columns: 1fr; padding: 20px 16px; } .course-detail-sidebar { position: static; } .player-layout { grid-template-columns: 1fr; } /* player-sidebar mobile behaviour: handled by .sidebar-open block below */ .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .library-grid { grid-template-columns: 1fr 1fr; } } /* ── Responsive 480px ──────────────────────────────────────── */ @media (max-width: 480px) { .catalog-grid { grid-template-columns: 1fr; } .library-grid { grid-template-columns: 1fr; } .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .player-layout { grid-template-columns: 1fr; } .hero-search { flex-direction: column; border-radius: var(--radius); } .hero-search input, .hero-search button { border-radius: 0; } .cert-card { padding: 32px 20px; } .cert-meta { gap: 20px; } } @media (max-width: 768px) { .course-detail-layout { grid-template-columns: 1fr; padding: 20px 16px; } .course-detail-sidebar { position: static; } .player-layout { grid-template-columns: 1fr; display: flex; flex-direction: column; } .player-sidebar-toggle { display: flex; } .player-sidebar-close { display: block; } .player-sidebar { position: fixed; inset-block: 0; inset-inline-end: -100%; width: min(320px, 85vw); height: 100%; max-height: none; z-index: 900; transition: inset-inline-end .25s ease; box-shadow: -4px 0 20px rgba(0,0,0,.25); } .rtl .player-sidebar { inset-inline-end: auto; inset-inline-start: -100%; box-shadow: 4px 0 20px rgba(0,0,0,.25); transition: inset-inline-start .25s ease; } .player-sidebar.sidebar-open { inset-inline-end: 0; } .rtl .player-sidebar.sidebar-open { inset-inline-start: 0; } .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .library-grid { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════ MODERN ACADEMY OVERHAUL (appended — overrides earlier rules by order) DefenTek Company — modern LMS catalog look. Colours use the existing CSS variables so dark / light / contrast themes keep working. ═══════════════════════════════════════════════════════════════════ */ .academy-hero{position:relative; overflow:hidden; padding:72px 24px 84px; text-align:center; background:radial-gradient(1100px 460px at 15% -10%, rgba(124,92,252,.22), transparent 60%), radial-gradient(900px 420px at 100% 0%, rgba(0,180,216,.18), transparent 55%), linear-gradient(180deg, var(--card-bg), var(--bg)); border-bottom:1px solid var(--border);} .academy-hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent);} .academy-hero-inner{position:relative; z-index:1; max-width:860px; margin:0 auto;} .hero-eyebrow{display:inline-block; margin-bottom:16px; padding:6px 16px; border-radius:999px; font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--primary); background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3);} .academy-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.1; margin:0 0 14px; font-weight:800; background:linear-gradient(120deg,var(--text),var(--primary)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;} .academy-hero p{font-size:clamp(1rem,1.6vw,1.18rem); color:var(--text-muted); max-width:640px; margin:0 auto 30px;} .hero-search{display:flex; align-items:center; gap:8px; max-width:620px; margin:0 auto 34px; background:var(--card-bg); border:1px solid var(--border-strong); border-radius:999px; padding:7px 7px 7px 18px; box-shadow:var(--shadow-lg);} .hero-search-icon{font-size:1.1rem; opacity:.6; flex:0 0 auto;} .hero-search input{flex:1; border:none; background:transparent; color:var(--text); font-size:1rem; padding:10px 6px; outline:none; min-width:0;} .hero-search button{flex:0 0 auto; border:none; cursor:pointer; border-radius:999px; padding:12px 26px; font-weight:700; font-size:.95rem; color:#ffffff; background:linear-gradient(120deg,var(--primary-light),var(--primary-dark)); transition:transform .22s, box-shadow .22s;} .hero-search button:hover{transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(124,92,252,.6);} .hero-stats{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px;} .hero-stat{display:flex; flex-direction:column; align-items:center; gap:2px;} .hero-stat strong{font-size:1.6rem; font-weight:800; color:var(--text); line-height:1;} .hero-stat span{font-size:.82rem; color:var(--text-muted);} .section-heading{font-size:1.5rem; font-weight:800; margin:0 0 22px; color:var(--text); display:flex; align-items:center; gap:12px;} .section-heading::after{content:""; flex:1; height:1px; background:var(--border);} .cat-browse{padding:46px 0 8px;} .cat-browse .container{max-width:1860px; margin:0 auto; padding:0 24px;} .cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px;} .cat-card{display:flex; flex-direction:column; gap:8px; padding:22px 18px; border-radius:var(--radius-lg); background:linear-gradient(180deg, color-mix(in srgb, var(--cat-color) 14%, var(--card-bg)), var(--card-bg)); border:1px solid var(--border); color:var(--text); transition:transform .22s, box-shadow .22s, border-color .22s;} .cat-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--cat-color); color:var(--text);} .cat-card-icon{width:48px; height:48px; display:grid; place-items:center; border-radius:14px; font-size:1.5rem; background:color-mix(in srgb, var(--cat-color) 22%, transparent); color:var(--cat-color);} .cat-card-name{font-weight:700; font-size:1rem; line-height:1.3;} .cat-card-count{font-size:.82rem; color:var(--text-muted);} .catalog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:26px;} .course-card{display:flex; flex-direction:column; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .22s, box-shadow .22s, border-color .22s;} .course-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border-strong);} .course-thumb{position:relative; aspect-ratio:16/10; display:grid; place-items:center; font-size:3rem; color:#fff; overflow:hidden; background:linear-gradient(135deg,#6366f1,#22d3ee);} .course-thumb img{width:100%; height:100%; object-fit:cover;} .course-card:nth-child(6n+1) .course-thumb{background:linear-gradient(135deg,#6366f1,#22d3ee);} .course-card:nth-child(6n+2) .course-thumb{background:linear-gradient(135deg,#ef4444,#f59e0b);} .course-card:nth-child(6n+3) .course-thumb{background:linear-gradient(135deg,#ec4899,#8b5cf6);} .course-card:nth-child(6n+4) .course-thumb{background:linear-gradient(135deg,#10b981,#0ea5e9);} .course-card:nth-child(6n+5) .course-thumb{background:linear-gradient(135deg,#f97316,#eab308);} .course-card:nth-child(6n) .course-thumb{background:linear-gradient(135deg,#0ea5e9,#6366f1);} .course-card-body{padding:18px 18px 8px; flex:1; display:flex; flex-direction:column; gap:8px;} .course-card-meta{display:flex; flex-wrap:wrap; gap:6px;} .course-card-meta .badge{font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px;} .badge-free{background:rgba(16,185,129,.16); color:#10b981;} .badge-paid{background:rgba(124,92,252,.16); color:var(--primary);} .badge-level{background:var(--card-elevated); color:var(--text-muted); border:1px solid var(--border);} .course-card-title{font-size:1.08rem; font-weight:750; line-height:1.35; margin:2px 0 0; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .course-card-instructor{font-size:.84rem; color:var(--text-muted); margin:0;} .course-card .stars{color:var(--primary); font-size:.92rem; letter-spacing:1px;} .course-card-stats{display:flex; gap:14px; flex-wrap:wrap; font-size:.8rem; color:var(--text-muted); margin-top:auto; padding-top:6px;} .course-card-footer{display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--border); background:color-mix(in srgb, var(--card-elevated) 60%, var(--card-bg));} .course-price{font-size:1.15rem; font-weight:800; color:var(--text); margin-inline-end:auto;} .course-price.free{color:#10b981;} .course-card-footer .btn-primary{background:linear-gradient(120deg,var(--primary-light),var(--primary-dark)); color:#ffffff; border:none; font-weight:700; border-radius:10px; padding:9px 18px;} .course-card-footer .btn-primary:hover{transform:translateY(-1px);} .btn-wish-icon{background:var(--card-elevated); border:1px solid var(--border); border-radius:10px; width:40px; height:40px; cursor:pointer; font-size:1rem;} .catalog-filters{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:22px;} .filter-pill{padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:600; background:var(--card-bg); border:1px solid var(--border); color:var(--text-muted); transition:all .22s;} .filter-pill:hover{border-color:var(--border-strong); color:var(--text);} .filter-pill.active{background:var(--primary); border-color:var(--primary); color:#ffffff;} .filter-select{padding:9px 14px; border-radius:10px; background:var(--card-bg); color:var(--text); border:1px solid var(--border); font-size:.85rem; cursor:pointer;} @media (max-width:600px){ .academy-hero{padding:54px 18px 64px;} .hero-stats{gap:12px 26px;} .hero-stat strong{font-size:1.3rem;} .catalog-grid{grid-template-columns:1fr;} } /* Dropdown readability — native