/* * Zidni Theme (Front + Panel) * - Brand-inspired palette (indigo → cyan gradient) * - Designed for Arabic/RTL friendly UI */ .theme-zidni { /* Brand */ --zidni-from: #5b61ff; --zidni-to: #35e7ff; --zidni-ink: #0b1638; --zidni-brand: #5b61ff; --zidni-brand-600: #4b52ff; --zidni-brand-700: #3f46ff; /* Neutrals (tinted for EdTech) */ --zidni-white: #ffffff; --zidni-gray-50: #f6faff; --zidni-gray-100: #eef5ff; --zidni-gray-200: #e6ecf5; --zidni-gray-300: #d6deea; --zidni-gray-400: #a9b6cc; --zidni-gray-500: #6b7a95; --zidni-gray-600: #495a78; --zidni-gray-700: #33415f; --zidni-gray-800: #1f2b46; --zidni-gray-900: #0f172a; /* Semantic */ --zidni-success: #16a34a; --zidni-success-bg: rgba(22, 163, 74, 0.10); --zidni-warning: #f59e0b; --zidni-warning-bg: rgba(245, 158, 11, 0.12); --zidni-error: #ef4444; --zidni-error-bg: rgba(239, 68, 68, 0.10); --zidni-info: #0ea5e9; --zidni-info-bg: rgba(14, 165, 233, 0.12); /* Surfaces */ --zidni-bg: #f6faff; --zidni-surface: #ffffff; --zidni-border: #e6ecf5; --zidni-surface-2: rgba(255, 255, 255, 0.92); /* Shadows */ --zidni-shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.06); --zidni-shadow-md: 0 14px 40px rgba(15, 23, 42, 0.10); --zidni-shadow-lg: 0 22px 70px rgba(15, 23, 42, 0.16); /* Radii */ --zidni-radius-sm: 12px; --zidni-radius-md: 18px; --zidni-radius-lg: 24px; --zidni-radius-pill: 999px; /* Spacing scale (4px base) */ --zidni-space-0: 0px; --zidni-space-1: 4px; --zidni-space-2: 8px; --zidni-space-3: 12px; --zidni-space-4: 16px; --zidni-space-5: 20px; --zidni-space-6: 24px; --zidni-space-8: 32px; --zidni-space-10: 40px; --zidni-space-12: 48px; --zidni-space-16: 64px; /* Map to existing theme variables */ --body_bg: var(--zidni-bg); --primary: var(--zidni-from); --primary-hover: #4b52ff; --primary-border: rgba(91, 97, 255, 0.25); --primary-border-hover: rgba(91, 97, 255, 0.35); --primary-btn-color: #ffffff; --primary-btn-color-hover: #ffffff; --primary-btn-shadow: 0 12px 26px rgba(91, 97, 255, 0.25); --primary-btn-shadow-hover: 0 16px 32px rgba(91, 97, 255, 0.32); --secondary: var(--zidni-ink); --secondary-hover: #07102a; --secondary-border: rgba(11, 22, 56, 0.22); --secondary-border-hover: rgba(11, 22, 56, 0.35); --secondary-btn-color: #ffffff; --secondary-btn-color-hover: #ffffff; --secondary-btn-shadow: 0 12px 26px rgba(11, 22, 56, 0.18); --secondary-btn-shadow-hover: 0 16px 32px rgba(11, 22, 56, 0.24); --panel-bg: var(--zidni-bg); } .theme-zidni body, body.theme-zidni { background-color: var(--body_bg, #ffffff) !important; } /* Dark mode (opt-in): set data-theme="dark" on (preferred) or */ html[data-theme="dark"] body.theme-zidni, body.theme-zidni[data-theme="dark"] { color-scheme: dark; --zidni-bg: #070b1a; --zidni-surface: rgba(255, 255, 255, 0.06); --zidni-surface-2: rgba(255, 255, 255, 0.08); --zidni-border: rgba(255, 255, 255, 0.10); --zidni-ink: #e8efff; --secondary: var(--zidni-ink); --zidni-gray-50: #0b1224; --zidni-gray-100: #0f1730; --zidni-gray-200: #132044; --zidni-gray-300: rgba(232, 239, 255, 0.18); --zidni-gray-500: rgba(232, 239, 255, 0.62); --body_bg: var(--zidni-bg); } html[data-theme="dark"] body.theme-zidni .navbar, body.theme-zidni[data-theme="dark"] .navbar { background: rgba(7, 11, 26, 0.72); border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="dark"] body.theme-zidni .panel-sidebar, html[data-theme="dark"] body.theme-zidni .webinar-card, html[data-theme="dark"] body.theme-zidni .bundle-card, html[data-theme="dark"] body.theme-zidni .product-card, body.theme-zidni[data-theme="dark"] .panel-sidebar, body.theme-zidni[data-theme="dark"] .webinar-card, body.theme-zidni[data-theme="dark"] .bundle-card, body.theme-zidni[data-theme="dark"] .product-card { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } .theme-zidni a { text-underline-offset: 3px; } .theme-zidni .rounded-sm { border-radius: 12px !important; } .theme-zidni .rounded-lg { border-radius: 18px !important; } .theme-zidni .panel-shadow, .theme-zidni .shadow-sm, .theme-zidni .shadow-xs { box-shadow: var(--zidni-shadow-sm) !important; } .theme-zidni .panel-section-card { border: 1px solid var(--zidni-border); } /* ------------------------------------------------------- * Navbar + Logo (Responsive / Any aspect ratio) * ----------------------------------------------------- */ .theme-zidni .navbar { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(230, 236, 245, 0.9); } .theme-zidni .navbar.sticky { border-bottom: 1px solid rgba(230, 236, 245, 0.9) !important; } .theme-zidni .navbar:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--zidni-from), var(--zidni-to)); opacity: 0.75; pointer-events: none; } .theme-zidni .navbar-brand { width: auto !important; max-width: min(240px, 44vw); height: auto !important; display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; } .theme-zidni .navbar-brand .navbar-logo { width: 100%; max-width: 41px; height: clamp(28px, 3.2vw, 44px); object-fit: contain; object-position: center; display: block; } @media (max-width: 576px) { .theme-zidni .navbar-brand { max-width: 60vw; } } /* ------------------------------------------------------- * Buttons (Brand Gradient) * ----------------------------------------------------- */ .theme-zidni .btn-primary { border: 0 !important; background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)); box-shadow: var(--primary-btn-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .theme-zidni .btn-primary:hover, .theme-zidni .btn-primary:active, .theme-zidni .btn-primary:focus, .theme-zidni .btn-primary:not(:disabled):not(.disabled):active { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)); box-shadow: var(--primary-btn-shadow-hover); filter: saturate(1.05); transform: translateY(-1px); } .theme-zidni .btn-border-white, .theme-zidni .btn-outline-primary { border-radius: 999px !important; } /* ------------------------------------------------------- * Section Titles * ----------------------------------------------------- */ .theme-zidni .section-title { font-size: 18px; letter-spacing: -0.2px; } .theme-zidni .section-title.after-line:after { height: 3px !important; border-radius: 99px; background: linear-gradient(90deg, rgba(91, 97, 255, 0.25), rgba(53, 231, 255, 0.55)) !important; } /* ------------------------------------------------------- * Home (Hero + Cards) * ----------------------------------------------------- */ .theme-zidni .slider-container { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; overflow: hidden; position: relative; } .theme-zidni .slider-container .mask { background: radial-gradient(1200px 600px at 20% 10%, rgba(53, 231, 255, 0.35), transparent 60%), radial-gradient(900px 500px at 80% 20%, rgba(91, 97, 255, 0.35), transparent 60%), linear-gradient(180deg, rgba(11, 22, 56, 0.55), rgba(11, 22, 56, 0.35)); opacity: 1 !important; } .theme-zidni .slider-container h1 { text-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); letter-spacing: -0.4px; } .theme-zidni .slider-search { border-radius: 16px; border: 1px solid rgba(230, 236, 245, 0.9); box-shadow: var(--zidni-shadow-sm); } .theme-zidni .slider-search .form-control { font-size: 15px; } .theme-zidni .webinar-card, .theme-zidni .bundle-card, .theme-zidni .product-card { border-radius: 18px !important; border: 1px solid var(--zidni-border) !important; background: rgba(255, 255, 255, 0.92); box-shadow: var(--zidni-shadow-sm) !important; } .theme-zidni .webinar-card:hover { box-shadow: var(--zidni-shadow-md) !important; transform: translateY(-2px); } /* Home stats */ .theme-zidni .zidni-home .stats-container { margin-top: -20px; } .theme-zidni .zidni-home .stats-item { border: 1px solid var(--zidni-border); box-shadow: var(--zidni-shadow-sm) !important; } .theme-zidni .zidni-home .stats-item:hover { transform: translateY(-2px); box-shadow: var(--zidni-shadow-md) !important; } .theme-zidni .zidni-home .stats-item .stat-icon-box.teacher, .theme-zidni .zidni-home .stats-item .stat-icon-box.video, .theme-zidni .zidni-home .stats-item .stat-icon-box.student, .theme-zidni .zidni-home .stats-item .stat-icon-box.course { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)) !important; } /* ------------------------------------------------------- * Course Details * ----------------------------------------------------- */ .theme-zidni .course-cover-container { border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; overflow: hidden; } .theme-zidni .course-cover-container .cover-content:after { background: radial-gradient(1200px 600px at 18% 10%, rgba(53, 231, 255, 0.35), transparent 60%), radial-gradient(900px 500px at 80% 18%, rgba(91, 97, 255, 0.35), transparent 60%), linear-gradient(180deg, rgba(11, 22, 56, 0.70), rgba(11, 22, 56, 0.40)) !important; opacity: 1 !important; } .theme-zidni .course-content-body { background: transparent; border: 0; box-shadow: none; } .theme-zidni .course-body-on-cover { color: var(--secondary) !important; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--zidni-border); border-radius: 18px; box-shadow: var(--zidni-shadow-md); padding: 22px 22px 18px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .theme-zidni .course-body-on-cover .text-white, .theme-zidni .course-body-on-cover a.text-white { color: var(--secondary) !important; } @media (max-width: 768px) { .theme-zidni .course-body-on-cover { padding: 18px 16px 14px; } } .theme-zidni .course-content-section .nav-tabs { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid var(--zidni-border); box-shadow: var(--zidni-shadow-sm); } .theme-zidni .course-content-section .nav-tabs .nav-item a { color: var(--secondary) !important; border-radius: 999px; padding: 10px 14px; } .theme-zidni .course-content-section .nav-tabs .nav-item a.active { background: linear-gradient(135deg, rgba(91, 97, 255, 0.12), rgba(53, 231, 255, 0.14)) !important; color: var(--secondary) !important; } .theme-zidni .course-content-sidebar > .rounded-lg { border: 1px solid var(--zidni-border); background: rgba(255, 255, 255, 0.92); box-shadow: var(--zidni-shadow-sm); overflow: hidden; } .theme-zidni .course-content-sidebar .rounded-lg.shadow-sm { border: 1px solid var(--zidni-border); background: rgba(255, 255, 255, 0.92); box-shadow: var(--zidni-shadow-sm); } @media (min-width: 992px) { .theme-zidni .course-content-sidebar { position: sticky; top: 92px; align-self: start; height: max-content; } } .theme-zidni .course-content-sidebar .course-img img { border-radius: 18px 18px 0 0 !important; } .theme-zidni .special-offer-card .offer-percent-box { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)) !important; box-shadow: 0 18px 38px rgba(91, 97, 255, 0.22) !important; } /* Course details deep polish (scoped) */ .theme-zidni .zidni-course-details .course-title { color: var(--zidni-ink); letter-spacing: -0.35px; } .theme-zidni .zidni-course-details .tab-content { margin-top: 14px; } .theme-zidni .zidni-course-details .tab-content > .tab-pane { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--zidni-border); border-radius: 18px; box-shadow: var(--zidni-shadow-sm); padding: 18px; } @media (min-width: 992px) { .theme-zidni .zidni-course-details .tab-content > .tab-pane { padding: 22px; } } .theme-zidni .zidni-course-details .course-description { color: rgba(11, 22, 56, 0.78); line-height: 1.95; font-size: 15px; } .theme-zidni .zidni-course-details .accordion-content-wrapper .accordion-row { border-radius: 18px !important; border: 1px solid var(--zidni-border) !important; box-shadow: var(--zidni-shadow-sm) !important; } .theme-zidni .zidni-course-details .accordion-content-wrapper .accordion-row:hover { box-shadow: var(--zidni-shadow-md) !important; } .theme-zidni .zidni-course-details .course-reviews-box { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--zidni-border); border-radius: 18px; box-shadow: var(--zidni-shadow-sm); padding: 18px; } .theme-zidni .zidni-course-details .course-reviews-box .progress, .theme-zidni .zidni-course-details .course-progress { background: rgba(11, 22, 56, 0.10); } .theme-zidni .zidni-course-details .course-reviews-box .progress-bar, .theme-zidni .zidni-course-details .course-progress .progress-bar { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)) !important; } .theme-zidni .zidni-course-details .course-content-sidebar a.rounded-lg.border { border: 1px solid var(--zidni-border) !important; background: rgba(255, 255, 255, 0.92); box-shadow: var(--zidni-shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; } .theme-zidni .zidni-course-details .course-content-sidebar a.rounded-lg.border:hover { transform: translateY(-1px); box-shadow: var(--zidni-shadow-md); } .theme-zidni .zidni-course-details .course-content-sidebar .rounded-lg.shadow-sm.mt-35, .theme-zidni .zidni-course-details .course-content-sidebar .rounded-lg.shadow-sm { border: 1px solid var(--zidni-border); background: rgba(255, 255, 255, 0.92); } .theme-zidni .zidni-course-details .course-content-sidebar .rounded-lg.shadow-sm.mt-35 .mt-30 > .mt-20 { margin-top: 0 !important; padding: 12px 0; border-bottom: 1px dashed rgba(11, 22, 56, 0.12); } .theme-zidni .zidni-course-details .course-content-sidebar .rounded-lg.shadow-sm.mt-35 .mt-30 > .mt-20:first-child { padding-top: 0; } .theme-zidni .zidni-course-details .course-content-sidebar .rounded-lg.shadow-sm.mt-35 .mt-30 > .mt-20:last-child { border-bottom: 0; padding-bottom: 0; } /* ------------------------------------------------------- * Panel Dashboard polish * ----------------------------------------------------- */ .theme-zidni .dashboard-banner-container { border: 1px solid var(--zidni-border); background: radial-gradient(900px 300px at 20% 0%, rgba(53, 231, 255, 0.18), transparent 60%), radial-gradient(900px 300px at 80% 0%, rgba(91, 97, 255, 0.16), transparent 60%), rgba(255, 255, 255, 0.92); overflow: hidden; } .theme-zidni .zidni-panel-dashboard .dashboard-banner-container { border-radius: 18px !important; } .theme-zidni .zidni-panel-dashboard .not-verified-alert { border: 1px solid rgba(91, 97, 255, 0.18); background: linear-gradient(135deg, rgba(91, 97, 255, 0.10), rgba(53, 231, 255, 0.10)); border-radius: 18px !important; } .theme-zidni .zidni-panel-dashboard .account-balance, .theme-zidni .zidni-panel-dashboard .noticeboard, .theme-zidni .zidni-panel-dashboard .monthly-sales-card { border: 1px solid var(--zidni-border); background: rgba(255, 255, 255, 0.92) !important; border-radius: 18px !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .theme-zidni .zidni-panel-dashboard .account-balance:hover, .theme-zidni .zidni-panel-dashboard .noticeboard:hover, .theme-zidni .zidni-panel-dashboard .monthly-sales-card:hover { transform: translateY(-1px); box-shadow: var(--zidni-shadow-md) !important; } .theme-zidni .dashboard-stats { border: 1px solid var(--zidni-border); border-radius: 18px !important; background: rgba(255, 255, 255, 0.92); transition: transform 0.18s ease, box-shadow 0.18s ease; } .theme-zidni .dashboard-stats:hover { transform: translateY(-1px); box-shadow: var(--zidni-shadow-md) !important; } .theme-zidni .dashboard-stats .stat-icon.comments, .theme-zidni .dashboard-stats .stat-icon.requests, .theme-zidni .dashboard-stats .stat-icon.monthly-sales, .theme-zidni .dashboard-stats .stat-icon.support-messages, .theme-zidni .dashboard-stats .stat-icon-pending-assignments, .theme-zidni .dashboard-stats .stat-icon-pending-quizzes { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)) !important; box-shadow: 0 10px 28px rgba(91, 97, 255, 0.22) !important; } /* Panel Sidebar polish */ .theme-zidni .panel-sidebar { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid rgba(230, 236, 245, 0.9); } body.rtl.theme-zidni .panel-sidebar { border-right: 0; border-left: 1px solid rgba(230, 236, 245, 0.9); } .theme-zidni .panel-sidebar .sidenav-item > a { border-radius: 14px; transition: background 0.18s ease, transform 0.18s ease; } .theme-zidni .panel-sidebar .sidenav-item.sidenav-item-active > a { background: linear-gradient(135deg, rgba(91, 97, 255, 0.14), rgba(53, 231, 255, 0.14)); } /* ------------------------------------------------------- * Utilities + Inputs * ----------------------------------------------------- */ .theme-zidni .zidni-gradient-text { background-image: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .theme-zidni .zidni-glass { background: rgba(255, 255, 255, 0.84); border: 1px solid rgba(230, 236, 245, 0.92); box-shadow: var(--zidni-shadow-sm); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .theme-zidni .form-control:focus, .theme-zidni .custom-select:focus { border-color: rgba(91, 97, 255, 0.35) !important; box-shadow: 0 0 0 0.22rem rgba(91, 97, 255, 0.14) !important; } /* ------------------------------------------------------- * Home Sections (Spacing + Swiper) * ----------------------------------------------------- */ .theme-zidni .section-hint { color: rgba(11, 22, 56, 0.66) !important; font-size: 14px; line-height: 1.7; } .theme-zidni .home-sections { padding-top: 18px; padding-bottom: 18px; } @media (min-width: 992px) { .theme-zidni .home-sections { padding-top: 26px; padding-bottom: 26px; } } .theme-zidni .swiper-pagination-bullet { background: rgba(11, 22, 56, 0.24); opacity: 1; } .theme-zidni .swiper-pagination-bullet-active { background: linear-gradient(135deg, var(--zidni-from), var(--zidni-to)); } .theme-zidni .zidni-home .stats-item .stat-number { font-size: 28px; letter-spacing: -0.3px; color: var(--zidni-ink); } .theme-zidni .zidni-home .stats-item .stat-title { font-size: 15px; font-weight: 700; color: var(--zidni-ink); } .theme-zidni .zidni-home .stats-item .stat-desc { font-size: 13px; color: rgba(11, 22, 56, 0.62); }