/* ============================================================ TRELLO / TEVELLO COURSES PROFESSIONAL MY COURSES LAYOUT ============================================================ */ /* ============================================================ 1. FONT ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700;800&display=swap'); /* ============================================================ 2. VARIABLES ============================================================ */ .tevello-scope { --course-primary: #111828; --course-text: #111828; --course-muted: #718096; --course-bg: #f7f9fc; --course-white: #ffffff; --course-border: #e2e8f0; --course-shadow: 0 4px 18px rgba(17, 24, 40, 0.05); font-family: 'Lato', sans-serif !important; } /* ============================================================ 3. GLOBAL FONT ============================================================ */ .tevello-scope, .tevello-scope * { font-family: 'Lato', sans-serif !important; } /* ============================================================ 4. PAGE BACKGROUND ============================================================ */ .tevello-scope main { background: #f7f9fc !important; } /* ============================================================ 5. MAIN CONTENT WRAPPER ============================================================ */ .tevello-scope .tw-drawer-content { width: 100% !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding: 38px 40px 70px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; box-sizing: border-box !important; } /* ============================================================ 6. MY COURSES TITLE ============================================================ */ /* IMPORTANT: The heading is placed BEFORE the search area. */ .tevello-scope .tw-drawer-content > h1, .tevello-scope .tw-drawer-content > h2, .tevello-scope .tw-drawer-content h1.tw-text-4xl { order: 1 !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; color: #111828 !important; font-family: 'Lato', sans-serif !important; font-size: 26px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -0.2px !important; text-align: center !important; } /* Small line below title */ .tevello-scope .tw-drawer-content > h1::after, .tevello-scope .tw-drawer-content > h2::after { content: ""; display: block; width: 34px; height: 3px; margin: 8px auto 0; background: #111828; border-radius: 20px; } /* ============================================================ 7. SEARCH + CATEGORY ============================================================ */ .tevello-scope .search-courses-communities { order: 2 !important; width: 100% !important; max-width: 760px !important; margin: 0 auto 32px !important; padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(210px, 0.8fr) !important; gap: 10px !important; box-sizing: border-box !important; } /* ============================================================ 8. SEARCH INPUT ============================================================ */ .tevello-scope .search-courses-communities input, .tevello-scope .search-courses-communities input[type="search"], .tevello-scope .search-courses-communities input[type="text"] { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 16px !important; margin: 0 !important; border: 1px solid #dce3eb !important; border-radius: 9px !important; background: #ffffff !important; color: #111828 !important; font-family: 'Lato', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; outline: none !important; box-shadow: 0 2px 8px rgba(17, 24, 40, 0.025) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; } /* Search placeholder */ .tevello-scope .search-courses-communities input::placeholder { color: #94a3b8 !important; opacity: 1 !important; } /* Search focus */ .tevello-scope .search-courses-communities input:focus { border-color: #111828 !important; box-shadow: 0 0 0 3px rgba(17, 24, 40, 0.06) !important; } /* ============================================================ 9. CATEGORY SELECT ============================================================ */ .tevello-scope .search-courses-communities select, .tevello-scope .search-courses-communities button { width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 0 14px !important; margin: 0 !important; border: 1px solid #dce3eb !important; border-radius: 9px !important; background: #ffffff !important; color: #344054 !important; font-family: 'Lato', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; box-shadow: 0 2px 8px rgba(17, 24, 40, 0.025) !important; box-sizing: border-box !important; } /* ============================================================ 10. COURSE GRID ============================================================ */ .tevello-scope .courses { order: 3 !important; width: 100% !important; max-width: 1160px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; align-items: stretch !important; justify-content: stretch !important; box-sizing: border-box !important; } /* Remove original Tailwind spacing */ .tevello-scope .courses.tw-gap-16 { gap: 22px !important; } .tevello-scope .courses.tw-justify-center { justify-content: stretch !important; } /* ============================================================ 11. COURSE CARD ============================================================ */ .tevello-scope .courses > a.tw-card, .tevello-scope .courses > a { width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; box-shadow: 0 4px 18px rgba(17, 24, 40, 0.05) !important; text-decoration: none !important; box-sizing: border-box !important; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important; } /* Card hover */ .tevello-scope .courses > a.tw-card:hover, .tevello-scope .courses > a:hover { transform: translateY(-3px) !important; border-color: #d2d9e3 !important; box-shadow: 0 12px 28px rgba(17, 24, 40, 0.09) !important; } /* ============================================================ 12. COURSE IMAGE ============================================================ */ .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { position: relative !important; width: 100% !important; height: 180px !important; min-height: 180px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #eef2f6 !important; flex-shrink: 0 !important; box-sizing: border-box !important; } /* Image */ .tevello-scope .courses > a.tw-card figure img, .tevello-scope .courses > a figure img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center !important; border: 0 !important; margin: 0 !important; padding: 0 !important; transition: transform 0.35s ease !important; } /* Image hover */ .tevello-scope .courses > a.tw-card:hover figure img, .tevello-scope .courses > a:hover figure img { transform: scale(1.035) !important; } /* ============================================================ 13. COURSE BADGE ============================================================ */ .tevello-scope .courses > a.tw-card figure::after, .tevello-scope .courses > a figure::after { content: "COURSE"; position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: center; min-height: 21px; padding: 0 8px; border-radius: 5px; background: #111828; color: #ffffff; font-family: 'Lato', sans-serif !important; font-size: 8px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.5px; z-index: 5; } /* ============================================================ 14. CARD BODY ============================================================ */ .tevello-scope .courses > a.tw-card .tw-card-body, .tevello-scope .courses > a .tw-card-body { width: 100% !important; height: auto !important; min-height: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 15px 16px 14px !important; margin: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } /* ============================================================ 15. COURSE TITLE ============================================================ */ .tevello-scope .courses .tw-card-body h2, .tevello-scope .courses .tw-card-body h3, .tevello-scope .courses .tw-card-body h4 { margin: 0 !important; padding: 0 !important; color: #111828 !important; font-family: 'Lato', sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: -0.1px !important; } /* ============================================================ 16. REMOVE LARGE EMPTY SPACES ============================================================ */ .tevello-scope .courses .tw-card-body { gap: 0 !important; } /* Remove fixed heights from nested elements */ .tevello-scope .courses .tw-card-body > div { min-height: 0 !important; height: auto !important; margin-top: 0 !important; } /* Remove common Tailwind fixed-height classes */ .tevello-scope .courses .tw-h-full, .tevello-scope .courses .tw-min-h-full { height: auto !important; min-height: 0 !important; } /* ============================================================ 17. REMOVE ORIGINAL PROGRESS BAR ============================================================ */ .tevello-scope .courses .tw-progress { display: none !important; } .tevello-scope .courses [role="progressbar"] { display: none !important; } /* Hide horizontal progress tracks */ .tevello-scope .courses .tw-bg-neutral-200, .tevello-scope .courses .tw-bg-gray-200 { display: none !important; } /* ============================================================ 18. CARD STATUS FOOTER ============================================================ */ .tevello-scope .courses .tw-card-body > div:last-child { width: 100% !important; margin-top: 14px !important; padding-top: 11px !important; border-top: 1px solid #edf0f4 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; box-sizing: border-box !important; } /* ============================================================ 19. STATUS - COMING SOON ============================================================ */ .tevello-scope .courses .tw-card-body .tw-text-2xl, .tevello-scope .courses .tw-card-body .tw-text-3xl { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; color: #718096 !important; font-family: 'Lato', sans-serif !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 600 !important; } /* ============================================================ 20. PERCENTAGE ============================================================ */ .tevello-scope .courses .tw-card-body .tw-text-xl, .tevello-scope .courses .tw-card-body .tw-text-2xl { line-height: 1.1 !important; } /* Percentage container */ .tevello-scope .courses .tw-card-body > div:last-child > div { display: flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: flex-end !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } /* ============================================================ 21. COMPLETE TEXT ============================================================ */ .tevello-scope .courses .tw-card-body .tw-text-xs, .tevello-scope .courses .tw-card-body .tw-text-sm { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; color: #8491a3 !important; font-family: 'Lato', sans-serif !important; font-size: 9px !important; line-height: 1.1 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.25px !important; white-space: nowrap !important; } /* ============================================================ 22. FORCE FLEX ROW WHERE TRELLO USES FLEX-COL ============================================================ */ .tevello-scope .courses .tw-card-body .tw-flex-col { flex-direction: row !important; } /* ============================================================ 23. REMOVE UNNECESSARY WIDTH RESTRICTIONS ============================================================ */ .tevello-scope .courses .tw-w-96, .tevello-scope .courses .tw-w-full, .tevello-scope .courses .tw-max-w-md, .tevello-scope .courses .tw-max-w-lg { width: 100% !important; max-width: none !important; } /* ============================================================ 24. DESKTOP LARGE ============================================================ */ @media (min-width: 1281px) { .tevello-scope .courses { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; } } /* ============================================================ 25. TABLET 2 COLUMNS ============================================================ */ @media (max-width: 1100px) { .tevello-scope .tw-drawer-content { padding-left: 28px !important; padding-right: 28px !important; } .tevello-scope .courses { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { height: 205px !important; min-height: 205px !important; } } /* ============================================================ 26. MOBILE 1 COLUMN ============================================================ */ @media (max-width: 767px) { .tevello-scope .tw-drawer-content { width: 100% !important; padding: 25px 16px 45px !important; } /* Title */ .tevello-scope .tw-drawer-content > h1, .tevello-scope .tw-drawer-content > h2, .tevello-scope .tw-drawer-content h1.tw-text-4xl { font-size: 23px !important; margin-bottom: 18px !important; } /* Search */ .tevello-scope .search-courses-communities { width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; gap: 9px !important; margin-bottom: 25px !important; } .tevello-scope .search-courses-communities input, .tevello-scope .search-courses-communities select, .tevello-scope .search-courses-communities button { height: 44px !important; min-height: 44px !important; } /* One course per row */ .tevello-scope .courses { grid-template-columns: 1fr !important; gap: 18px !important; } /* Mobile card image */ .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { height: 210px !important; min-height: 210px !important; } /* Mobile title */ .tevello-scope .courses .tw-card-body h2, .tevello-scope .courses .tw-card-body h3, .tevello-scope .courses .tw-card-body h4 { font-size: 16px !important; } } /* ============================================================ 27. SMALL MOBILE ============================================================ */ @media (max-width: 480px) { .tevello-scope .tw-drawer-content { padding-left: 12px !important; padding-right: 12px !important; } .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { height: 195px !important; min-height: 195px !important; } .tevello-scope .courses .tw-card-body, .tevello-scope .courses > a .tw-card-body { padding: 14px !important; } } /* ============================================================ 28. EXTRA SAFETY - PREVENT HORIZONTAL OVERFLOW ============================================================ */ .tevello-scope { max-width: 100% !important; overflow-x: hidden !important; } .tevello-scope .tw-drawer-content, .tevello-scope .courses, .tevello-scope .search-courses-communities { box-sizing: border-box !important; } // SINGLE COURSE PAGE /* ========================================================= JAGADEESH MAGIC SHOP TREVELL0 - SINGLE COURSE PAGE REDESIGN Main Color: #111828 Font: Lato ========================================================= */ /* --------------------------------------------------------- 1. FONT --------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700;800&display=swap'); /* --------------------------------------------------------- 2. SINGLE COURSE PAGE SCOPE Only activates when Trevello course page is present --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) { --course-primary: #111828; --course-text: #111828; --course-muted: #6b7280; --course-border: #e5e7eb; --course-bg: #f6f8fb; --course-card: #ffffff; --course-radius: 16px; font-family: "Lato", Arial, sans-serif !important; color: var(--course-text) !important; } /* --------------------------------------------------------- 3. REMOVE EXCESSIVE PAGE WIDTH / SPACING --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) main.tw-au-to-block { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 4. MAIN COURSE LAYOUT Sidebar + Main Content --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] { display: grid !important; grid-template-columns: 300px minmax(0, 1fr) !important; gap: 28px !important; width: 100% !important; max-width: 1240px !important; min-height: auto !important; margin: 30px auto !important; padding: 0 !important; background: transparent !important; } /* --------------------------------------------------------- 5. LEFT SIDEBAR --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar { position: sticky !important; top: 24px !important; align-self: start !important; width: 100% !important; min-width: 0 !important; height: auto !important; max-height: calc(100vh - 48px) !important; overflow-y: auto !important; background: #ffffff !important; border: 1px solid var(--course-border) !important; border-radius: var(--course-radius) !important; box-shadow: 0 8px 25px rgba(17, 24, 40, 0.05) !important; padding: 24px !important; box-sizing: border-box !important; } /* Hide scrollbar but retain scrolling */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar::-webkit-scrollbar { width: 5px; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar::-webkit-scrollbar-thumb { background: #d5d9e0; border-radius: 10px; } /* --------------------------------------------------------- 6. BACK TO MY COURSES --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .back-to-courses-wrapper { margin-bottom: 26px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .back-to-courses-wrapper a { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--course-primary) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: 0.2s ease !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .back-to-courses-wrapper a:hover { opacity: 0.65 !important; } /* --------------------------------------------------------- 7. SIDEBAR COURSE TITLE --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header { font-family: "Lato", Arial, sans-serif !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header > div { color: var(--course-primary) !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* --------------------------------------------------------- 8. SIDEBAR PROGRESS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header progress { display: block !important; width: 100% !important; height: 6px !important; margin: 16px 0 8px !important; border: 0 !important; border-radius: 50px !important; overflow: hidden !important; appearance: none !important; background: #e9edf2 !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header progress::-webkit-progress-bar { background: #e9edf2 !important; border-radius: 50px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header progress::-webkit-progress-value { background: var(--course-primary) !important; border-radius: 50px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header progress::-moz-progress-bar { background: var(--course-primary) !important; border-radius: 50px !important; } /* --------------------------------------------------------- 9. PROGRESS TEXT --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header .tw-text-primary { color: var(--course-primary) !important; font-size: 13px !important; font-weight: 700 !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header .tw-text-sm { font-size: 12px !important; color: var(--course-muted) !important; } /* --------------------------------------------------------- 10. SIDEBAR DIVIDERS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header { border-bottom: 1px solid var(--course-border) !important; padding-bottom: 22px !important; margin-bottom: 22px !important; } /* --------------------------------------------------------- 11. COURSE CONTENT HEADING --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-text-center { color: var(--course-primary) !important; font-size: 15px !important; font-weight: 500 !important; } /* --------------------------------------------------------- 12. COURSE LESSON ITEM --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li { margin-bottom: 6px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li a { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 48px !important; padding: 12px 14px !important; border-radius: 10px !important; color: #000 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease !important; } /* ========================================================= ACTIVE LESSON - FORCE WHITE TEXT Trevello may apply black text through nested Tailwind classes, inline styles, aria states, or active parent. ========================================================= */ /* Active list item + active link */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active > a, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a.active, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a[aria-current="page"], body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a[aria-current="true"] { background: #111828 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 600 !important; } /* FORCE every text element inside the active item to white */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active *, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a.active *, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a[aria-current="page"] *, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a[aria-current="true"] * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Tailwind text-color classes that may be overriding the active text */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-black, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-gray-900, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-gray-800, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-neutral-900, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-primary, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active .tw-text-secondary { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Active icons */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active svg, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active svg *, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a.active svg, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li > a.active svg * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* Active item hover must remain white */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active > a:hover, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active > a:hover * { background: #111828 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Hover */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li a:hover { background: #f1f3f6 !important; color: var(--course-primary) !important; } /* Active hover */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li.active a:hover { background: var(--course-primary) !important; color: #ffffff !important; } /* --------------------------------------------------------- 13. MAIN COURSE CONTENT AREA --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] > div:not(.sidebar) { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } /* --------------------------------------------------------- 14. COURSE PAGE TITLE --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h1 { margin: 0 0 22px !important; padding: 0 !important; color: var(--course-primary) !important; font-family: "Lato", Arial, sans-serif !important; font-size: 30px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -0.3px !important; } /* --------------------------------------------------------- 15. VIDEO PLAYER --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] video, body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] iframe { width: 100% !important; max-width: 100% !important; display: block !important; } /* Video wrapper */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] figure { width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 16px !important; overflow: hidden !important; background: #000000 !important; box-shadow: 0 12px 30px rgba(17, 24, 40, 0.10) !important; } /* --------------------------------------------------------- 16. CONTENT CARDS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-card { background: #ffffff !important; border: 1px solid var(--course-border) !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(17, 24, 40, 0.05) !important; overflow: hidden !important; } /* --------------------------------------------------------- 17. LESSON INFORMATION AREA --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-card-body { padding: 22px !important; } /* --------------------------------------------------------- 18. COMPLETE & CONTINUE BUTTON --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] button { font-family: "Lato", Arial, sans-serif !important; } /* Main completion button */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] button.tw-btn-primary { min-height: 48px !important; padding: 0 28px !important; border: 0 !important; border-radius: 10px !important; background: var(--course-primary) !important; color: #ffffff !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.1px !important; box-shadow: 0 8px 18px rgba(17, 24, 40, 0.15) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] button.tw-btn-primary:hover { background: #1a2438 !important; transform: translateY(-1px) !important; box-shadow: 0 12px 24px rgba(17, 24, 40, 0.20) !important; } /* --------------------------------------------------------- 19. GENERAL BUTTONS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] button:not(.tw-btn-primary) { font-size: 13px !important; font-weight: 600 !important; } /* --------------------------------------------------------- 20. REMOVE UNNECESSARY EXCESSIVE SPACING --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-p-6 { padding: 24px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-p-8 { padding: 24px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-mt-8 { margin-top: 24px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-mb-8 { margin-bottom: 24px !important; } /* --------------------------------------------------------- 21. TEXT STYLING --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] p { font-family: "Lato", Arial, sans-serif !important; color: #4b5563 !important; font-size: 14px !important; line-height: 1.65 !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h2 { font-family: "Lato", Arial, sans-serif !important; color: var(--course-primary) !important; font-size: 20px !important; font-weight: 700 !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h3 { font-family: "Lato", Arial, sans-serif !important; color: var(--course-primary) !important; font-size: 17px !important; font-weight: 700 !important; } /* --------------------------------------------------------- 22. LINKS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] a { font-family: "Lato", Arial, sans-serif !important; } /* --------------------------------------------------------- 23. ICONS --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] svg { flex-shrink: 0 !important; } /* --------------------------------------------------------- 24. MOBILE DRAWER BUTTON --------------------------------------------------------- */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-drawer-toggle { background: var(--course-primary) !important; color: #ffffff !important; border-radius: 10px !important; } /* ========================================================= TABLET 768px - 1024px ========================================================= */ @media (max-width: 1024px) { body:has(.tw-drawer-mobile[class*="course-"]) main.tw-au-to-block { padding-left: 18px !important; padding-right: 18px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] { grid-template-columns: 250px minmax(0, 1fr) !important; gap: 20px !important; max-width: 100% !important; margin: 20px auto !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar { padding: 20px !important; border-radius: 14px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h1 { font-size: 26px !important; margin-bottom: 18px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body:has(.tw-drawer-mobile[class*="course-"]) { background: #f6f8fb !important; } body:has(.tw-drawer-mobile[class*="course-"]) main.tw-au-to-block { padding-left: 14px !important; padding-right: 14px !important; } /* Main layout */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; margin: 14px auto !important; padding: 0 !important; } /* Sidebar becomes normal mobile card */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar { position: relative !important; top: auto !important; width: 100% !important; max-height: none !important; overflow: visible !important; padding: 18px !important; border-radius: 14px !important; order: 1 !important; } /* Content */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] > div:not(.sidebar) { width: 100% !important; order: 2 !important; } /* Course title */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h1 { font-size: 23px !important; line-height: 1.3 !important; margin-bottom: 16px !important; } /* Video */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] figure { border-radius: 12px !important; } /* Cards */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-card { border-radius: 13px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .tw-card-body { padding: 18px !important; } /* Complete button */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] button.tw-btn-primary { width: 100% !important; min-height: 48px !important; padding: 0 20px !important; } /* Sidebar lesson items */ body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar .tw-menu li a { min-height: 44px !important; padding: 10px 12px !important; font-size: 13px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { body:has(.tw-drawer-mobile[class*="course-"]) main.tw-au-to-block { padding-left: 10px !important; padding-right: 10px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] { margin-top: 10px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar { padding: 15px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] h1 { font-size: 21px !important; } body:has(.tw-drawer-mobile[class*="course-"]) .tw-drawer-mobile[class*="course-"] .sidebar-header > div { font-size: 16px !important; } } /* ACTIVE TEVELLO LESSON - WHITE TEXT */ a.tw-active { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } a.tw-active .tw-grow { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } a.tw-active span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= FIX TEVELLO SEARCH + CATEGORY FILTER ========================================================= */ .tevello-scope .courses > a.tw-card.tw-hidden, .tevello-scope .courses > a.tw-hidden, .tevello-scope .courses > a[hidden], .tevello-scope .courses > a[style*="display: none"] { display: none !important; } /* FIX COURSE CARD IMAGE BLUR */ .tevello-scope .courses > a.tw-card figure img, .tevello-scope .courses > a figure img { filter: none !important; opacity: 1 !important; visibility: visible !important; mix-blend-mode: normal !important; } /* ========================================================= COURSE CARD - REMOVE FADED LOCKED IMAGE OVERLAY ========================================================= */ /* Make course image completely clear */ .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { opacity: 1 !important; filter: none !important; } /* Make image sharp */ .tevello-scope .courses > a.tw-card figure img, .tevello-scope .courses > a figure img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Remove the faded white/gray layer */ .tevello-scope .courses > a.tw-card figure::before, .tevello-scope .courses > a figure::before { background: transparent !important; opacity: 0 !important; filter: none !important; } /* Keep the COURSE badge */ .tevello-scope .courses > a.tw-card figure::after, .tevello-scope .courses > a figure::after { opacity: 1 !important; filter: none !important; } /* ========================================================= FINAL COURSE CARD DESIGN CLEAR IMAGE + CENTER LOCK ICON ========================================================= */ /* Course image */ .tevello-scope .courses > a.tw-card figure, .tevello-scope .courses > a figure { position: relative !important; overflow: hidden !important; opacity: 1 !important; filter: none !important; } /* Clear image */ .tevello-scope .courses > a.tw-card figure img, .tevello-scope .courses > a figure img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; opacity: 1 !important; filter: none !important; visibility: visible !important; mix-blend-mode: normal !important; } /* ========================================================= COURSE CARD LOCK IMPORTANT: Do NOT force a lock icon on every course. Tevello controls locked/unlocked course access. This custom CSS intentionally does not create a lock overlay. ========================================================= */ .tevello-scope .courses > a.tw-card figure::before, .tevello-scope .courses > a figure::before { content: none !important; display: none !important; } .tevello-scope .courses .tw-card-body b.tw-block.tw-text-end.tw-text-lg.tw-leading-4 { font-size: 14px !important; line-height: 20px !important; font-weight: 800 !important; } /* ========================================================= FINAL MOBILE CENTER ALIGNMENT ========================================================= */ @media (max-width: 767px) { .tevello-scope .tw-drawer-content { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 12px !important; padding-right: 12px !important; align-items: center !important; box-sizing: border-box !important; } /* Center course cards/content */ .tevello-scope .courses { width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; align-items: stretch !important; } .tevello-scope .courses > a, .tevello-scope .courses > a.tw-card { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Center course title */ .tevello-scope .tw-drawer-content > h1, .tevello-scope .tw-drawer-content > h2, .tevello-scope .tw-drawer-content h1.tw-text-4xl { width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Center search/filter */ .tevello-scope .search-courses-communities { width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .tevello-scope .tw-drawer-content { padding-left: 10px !important; padding-right: 10px !important; } .tevello-scope .courses { width: 100% !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; } .tevello-scope .courses > a, .tevello-scope .courses > a.tw-card { width: 100% !important; margin-left: auto !important; margin-right: auto !important; } }