/* ============================================================================ AL-QUBTAN — THEME POLISH LAYER ---------------------------------------------------------------------------- Purpose : A single, token-driven visual-polish layer for the public site. Improves colour cohesion, spacing rhythm, elevation, and motion on the EXISTING markup. No HTML/backend changes required. How to work with this file -------------------------- • Every colour, radius, shadow, and timing lives in the :root tokens below. Tune the brand by editing ONE value — do not hard-code hex elsewhere. • Sections are numbered. Each component block targets the real class names already in the Blade templates (tp-* theme classes + cq8s-* custom ones). • Loaded LAST in , so it cleanly overrides legacy styles. `!important` is used only where the legacy layout-fixes.css already forces a value. • Honours RTL (the site is Arabic-first) and prefers-reduced-motion. ========================================================================== */ /* ============================================================================ 1. DESIGN TOKENS ========================================================================== */ :root { /* ---- Brand palette (navy = trust, gold = premium) ---- */ --c-navy-900: #0c2150; --c-navy-800: #15336e; --c-navy-700: #1b3f86; --c-navy: #204a93; /* primary brand */ --c-navy-600: #2c5aad; --c-navy-400: #6688c4; --c-navy-100: #e7edf7; --c-gold-700: #a87d10; --c-gold-600: #c99a1c; --c-gold: #d4af37; /* accent */ --c-gold-300: #e6cd78; --c-gold-100: #faf3dc; /* ---- Neutrals ---- */ --c-ink: #15203a; /* primary text */ --c-body: #41506b; /* body text */ --c-muted: #7a879f; /* secondary text */ --c-line: #e7ebf2; /* borders / dividers */ --c-surface: #ffffff; /* cards */ --c-bg: #f6f8fc; /* page background tint */ /* ---- Semantic aliases (use these in components) ---- */ --brand: var(--c-navy); --brand-dark: var(--c-navy-800); --accent: var(--c-gold); --accent-dark:var(--c-gold-600); /* ---- Gradients ---- */ --grad-brand: linear-gradient(135deg, var(--c-navy-700) 0%, var(--c-navy) 55%, var(--c-navy-600) 100%); --grad-gold: linear-gradient(135deg, var(--c-gold-600) 0%, var(--c-gold) 50%, var(--c-gold-300) 100%); --grad-ink: linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 100%); /* ---- Radius scale ---- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ---- Elevation (soft, layered — replaces flat heavy shadows) ---- */ --sh-xs: 0 1px 2px rgba(21, 32, 58, .06); --sh-sm: 0 4px 14px rgba(21, 32, 58, .07); --sh-md: 0 10px 30px rgba(21, 32, 58, .10); --sh-lg: 0 22px 48px rgba(21, 32, 58, .16); --sh-gold: 0 12px 28px rgba(201, 154, 28, .32); --sh-brand: 0 14px 30px rgba(32, 74, 147, .28); /* ---- Motion ---- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .35s; } /* ============================================================================ 2. GLOBAL FOUNDATIONS — typography rhythm, selection, scrollbar, focus ========================================================================== */ body { color: var(--c-body); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--c-gold); color: var(--c-navy-900); } /* Refined scrollbar (WebKit) */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--c-navy-100); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--c-navy-600), var(--c-navy)); border-radius: var(--r-pill); border: 2px solid var(--c-navy-100); } ::-webkit-scrollbar-thumb:hover { background: var(--c-navy-700); } /* Accessible keyboard focus ring (doesn't affect mouse users) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tp-btn:focus-visible { outline: 3px solid var(--c-gold-300); outline-offset: 2px; border-radius: var(--r-sm); } img { max-width: 100%; } /* ============================================================================ 3. SECTION RHYTHM & HEADINGS ========================================================================== */ .tp-section-3-subtitle { display: inline-flex; align-items: center; gap: 8px; color: var(--c-navy) !important; font-weight: 700 !important; letter-spacing: .2px; } /* Gold tick before eyebrow subtitles */ .tp-section .tp-section-3-subtitle::before { content: ""; width: 26px; height: 3px; border-radius: var(--r-pill); background: var(--grad-gold); } .tp-section-3-title { color: var(--c-ink) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.2px; } /* ============================================================================ 4. SECTION DIVIDERS (cq8s-section-divider / divider-icon) ========================================================================== */ .cq8s-section-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px auto; opacity: .9; } .cq8s-section-divider::before, .cq8s-section-divider::after { content: ""; height: 2px; width: min(120px, 22vw); background: linear-gradient(to right, transparent, var(--c-line)); } .cq8s-section-divider::after { transform: scaleX(-1); } .cq8s-divider-icon { color: var(--c-navy-400); transition: transform var(--dur) var(--ease); } .cq8s-divider-icon.gold { color: var(--c-gold); } /* ============================================================================ 5. BUTTONS — primary brand + gold accent, with sheen on hover ========================================================================== */ .tp-btn, .tp-btn-2, .slider-cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--r-pill) !important; font-weight: 700 !important; letter-spacing: .2px; overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease) !important; } .tp-btn, .tp-btn-2 { background: var(--grad-brand) !important; color: #fff !important; box-shadow: var(--sh-brand); } .slider-cta-btn { background: var(--grad-gold) !important; color: var(--c-navy-900) !important; box-shadow: var(--sh-gold); padding: 14px 34px; } /* moving sheen */ .tp-btn::after, .tp-btn-2::after, .slider-cta-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); } .tp-btn:hover, .tp-btn-2:hover, .slider-cta-btn:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); color: #fff !important; } .slider-cta-btn:hover { color: var(--c-navy-900) !important; } .tp-btn:hover::after, .tp-btn-2:hover::after, .slider-cta-btn:hover::after { transform: translateX(120%); } /* Outline / border variant */ .tp-btn-border { background: transparent !important; color: var(--c-navy) !important; box-shadow: inset 0 0 0 2px var(--c-navy) !important; } .tp-btn-border:hover { background: var(--c-navy) !important; color: #fff !important; box-shadow: var(--sh-brand) !important; } /* ============================================================================ 6. CARD SYSTEM — unified elevation, radius, hover lift + image zoom Applies to: category, team, course, podcast, blog cards ========================================================================== */ .cq8s-category-card, .tp-course-item, .cq8s-podcast-card, .cq8s-blog-card, .cq8s-team-card { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease) !important; will-change: transform; } .cq8s-category-card:hover, .tp-course-item:hover, .cq8s-podcast-card:hover, .cq8s-blog-card:hover, .cq8s-team-card:hover { transform: translateY(-8px) !important; box-shadow: var(--sh-lg) !important; border-color: var(--c-navy-100) !important; } /* Smooth image zoom inside any card thumb */ .tp-course-thumb, .podcast-card-image, .blog-card-image, .category-card-icon, .card-image-wrap { overflow: hidden; } .tp-course-thumb img, .podcast-card-image img, .blog-card-image img, .card-image-wrap img { transition: transform .6s var(--ease-out) !important; } .tp-course-item:hover .tp-course-thumb img, .cq8s-podcast-card:hover .podcast-card-image img, .cq8s-blog-card:hover .blog-card-image img, .cq8s-team-card-3d:hover .card-image-wrap img { transform: scale(1.07) !important; } /* ---- Category card accents ---- */ .cq8s-category-card .category-card-icon { color: var(--c-navy); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .cq8s-category-card:hover .category-card-icon { color: var(--c-gold-600); transform: scale(1.08); } .cq8s-category-card .category-card-count { background: var(--c-navy-100); color: var(--c-navy) !important; border-radius: var(--r-pill); padding: 2px 12px; font-weight: 700; font-size: 13px; } .cq8s-category-card .category-card-title { color: var(--c-ink); font-weight: 700; } /* ---- Course card ---- */ .tp-course-tag-badge { background: var(--grad-gold) !important; color: var(--c-navy-900) !important; border-radius: var(--r-pill) !important; font-weight: 700 !important; box-shadow: var(--sh-xs); } .tp-course-title a { color: var(--c-ink); transition: color var(--dur) var(--ease); } .tp-course-item:hover .tp-course-title a { color: var(--c-navy); } .tp-course-pricing, .tp-course-pricing span { color: var(--c-gold-700) !important; font-weight: 800 !important; } .tp-course-rating-icon { color: var(--c-gold); } /* ---- Podcast card play button ---- */ .podcast-card-content .podcast-card-title a, .podcast-card-title a { color: var(--c-ink); transition: color var(--dur) var(--ease); } .cq8s-podcast-card:hover .podcast-card-title a { color: var(--c-navy); } .podcast-card-image .play-btn, .play-btn { background: var(--grad-gold) !important; color: var(--c-navy-900) !important; box-shadow: var(--sh-gold); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important; } .cq8s-podcast-card:hover .play-btn { transform: scale(1.12); } /* ---- Blog card ---- */ .blog-card-title a { color: var(--c-ink); transition: color var(--dur) var(--ease); } .cq8s-blog-card:hover .blog-card-title a { color: var(--c-navy); } .blog-card-meta { color: var(--c-muted); } .blog-card-meta i { color: var(--c-gold-600); } /* ============================================================================ 7. TEAM 3D SLIDER SECTION ========================================================================== */ .cq8s-team-3d-section { background: radial-gradient(1200px 400px at 50% -10%, rgba(32,74,147,.08), transparent 70%), var(--c-bg); padding-block: 70px; } .cq8s-team-title { color: var(--c-ink); font-weight: 800; } .cq8s-team-title span { color: var(--c-navy); } .cq8s-team-title span::after, .cq8s-team-header .cq8s-team-title span { position: relative; } .cq8s-team-subtitle { color: var(--c-muted); } .cq8s-team-card-3d .card-inner { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .cq8s-team-card-3d:hover .card-inner { box-shadow: var(--sh-lg); } .cq8s-team-card-3d .card-overlay { background: linear-gradient(to top, rgba(12,33,80,.85) 0%, rgba(12,33,80,0) 60%); } .cq8s-team-card-3d .card-name { color: #fff; font-weight: 700; } .cq8s-team-card-3d .card-role { color: var(--c-gold-300); } .cq8s-team-card-3d .card-glow-effect { background: radial-gradient(circle at 50% 0%, rgba(212,175,55,.35), transparent 70%); } /* Slider nav buttons */ .nav-btn, .prev-btn, .next-btn { background: #fff !important; color: var(--c-navy) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-pill) !important; box-shadow: var(--sh-sm) !important; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease) !important; } .nav-btn:hover, .prev-btn:hover, .next-btn:hover { background: var(--c-navy) !important; color: #fff !important; transform: translateY(-2px) scale(1.05); } /* ============================================================================ 8. CATEGORY / COURSE CTA BANNER ========================================================================== */ .tp-category-banner, .tp-category-banner-bg { background: var(--grad-brand) !important; border-radius: var(--r-xl) !important; box-shadow: var(--sh-brand) !important; overflow: hidden; position: relative; } .tp-category-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 200px at 85% 20%, rgba(212,175,55,.22), transparent 70%); pointer-events: none; } .tp-category-banner-title { color: #fff !important; font-weight: 800 !important; } .tp-category-banner .tp-btn-2 { background: var(--grad-gold) !important; color: var(--c-navy-900) !important; } /* ============================================================================ 9. COMPACT NAV MENU (cq8s-compact-menu) ========================================================================== */ /* Clean LIGHT bar with dark navy text. (The base theme forces a light #f8f9fa background with !important; matching it here guarantees the links stay visible — white-on-light was the "hidden menu" bug.) */ .cq8s-compact-menu { background: #ffffff !important; box-shadow: var(--sh-xs) !important; border-top: 1px solid var(--c-line) !important; border-bottom: 2px solid var(--c-navy-100) !important; } .cq8s-menu-list > li > a { color: var(--c-ink) !important; /* dark — readable on the light bar */ font-weight: 600 !important; border-radius: var(--r-sm); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } /* Default icon tint navy; the gold "ركن الذهب" link keeps its inline gold. */ .cq8s-menu-list > li > a i { color: var(--c-navy); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .cq8s-menu-list > li > a:hover { color: var(--c-navy) !important; background: var(--c-navy-100) !important; } .cq8s-menu-list > li > a:hover i { color: var(--c-gold-600); transform: translateY(-1px); } .cq8s-menu-list > li.active > a { color: var(--c-navy) !important; } .cq8s-submenu { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; padding: 6px; } .cq8s-submenu li a { color: var(--c-body) !important; border-radius: var(--r-sm); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .cq8s-submenu li a:hover { background: var(--c-navy-100); color: var(--c-navy) !important; } /* ============================================================================ 10. HEADER ========================================================================== */ .tp-header-2 { transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); } #header-sticky.sticky, .header-sticky.sticky { box-shadow: var(--sh-md) !important; backdrop-filter: saturate(1.1); } /* ============================================================================ 11. FOOTER ========================================================================== */ .footer-callto-action-area.bg-black-1, .footer { background: var(--grad-ink) !important; } .footer-singl-wized a { transition: color var(--dur) var(--ease); } .footer-singl-wized a:hover { color: var(--c-gold-300) !important; } .footer-singl-wized .input-area input, .footer-singl-wized input[type="email"] { border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.18); } /* ============================================================================ 12. BACK-TO-TOP ========================================================================== */ .back-to-top-btn { background: var(--grad-brand) !important; color: #fff !important; border-radius: var(--r-pill) !important; box-shadow: var(--sh-brand) !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important; } .back-to-top-btn:hover { transform: translateY(-4px); box-shadow: var(--sh-lg) !important; } /* ============================================================================ 13. SCROLL-REVEAL (driven by theme-polish.js — progressive enhancement) Elements get .cq-reveal; .is-visible toggles them in. If JS is off, the no-js / fallback keeps everything visible. ========================================================================== */ .cq-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .cq-reveal.is-visible { opacity: 1; transform: none; } /* ============================================================================ 16. CTA BANNER — eyebrow text contrast on the navy background ========================================================================== */ .tp-category-banner-text > span { display: inline-block; color: var(--c-gold-300) !important; font-weight: 700 !important; font-size: 14px; letter-spacing: .4px; margin-bottom: 4px; opacity: 1 !important; } .tp-category-banner-shape img { filter: brightness(0) invert(1); opacity: .9; } .tp-category-banner .tp-btn-2 { border-radius: var(--r-pill) !important; box-shadow: var(--sh-gold); } /* ============================================================================ 17. OFFCANVAS / MOBILE SLIDE-IN MENU Note: only colour/spacing/hover are touched — never position/transform, so the existing slide animation keeps working. ========================================================================== */ .offcanvas__area.offcanvas__2, .offcanvas__2 .offcanvas__wrapper { background: var(--c-surface) !important; } .offcanvas__content { padding-top: 6px; } /* SCROLL FIX: the base theme sets `top:60px` + `height:100vh`, pushing the panel's bottom 60px (the social icons) below the screen where it can't be scrolled to. Anchor to the viewport bottom so overflow reaches the end. */ .offcanvas__area.offcanvas__2 { bottom: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .offcanvas__2 .offcanvas__wrapper { height: auto !important; min-height: 100% !important; padding-bottom: 40px !important; /* breathing room below the social row */ } .offcanvas-social { margin-bottom: 10px; } /* Top row: logo · language · close */ .offcanvas__top { border-bottom: 1px solid var(--c-line); padding-bottom: 18px; } .offcanvas__close-btn { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; background: var(--c-navy-100) !important; color: var(--c-navy) !important; border: 0 !important; border-radius: var(--r-pill) !important; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .offcanvas__close-btn:hover { background: var(--c-navy) !important; color: #fff !important; transform: rotate(90deg); } /* Language toggle pill */ .lang-toggle-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--c-navy-100); color: var(--c-navy) !important; border-radius: var(--r-pill); padding: 7px 14px; font-weight: 700; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .lang-toggle-btn:hover { background: var(--grad-brand); color: #fff !important; } .lang-toggle-btn .lang-text { font-size: 13px; } /* Auth buttons (guest) */ .offcanvas-auth-btns { display: flex; gap: 10px; } .offcanvas-btn { flex: 1 1 0; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px !important; border-radius: var(--r-pill) !important; font-weight: 700 !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .offcanvas-btn-primary { background: var(--grad-brand) !important; color: #fff !important; box-shadow: var(--sh-brand); } .offcanvas-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); color: #fff !important; } .offcanvas-btn-outline { background: transparent !important; color: var(--c-navy) !important; box-shadow: inset 0 0 0 2px var(--c-navy) !important; } .offcanvas-btn-outline:hover { background: var(--c-navy) !important; color: #fff !important; } /* Logged-in user card */ .offcanvas-user-profile .user-profile-box { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--c-navy-100); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .offcanvas-user-profile:hover .user-profile-box { box-shadow: var(--sh-sm); transform: translateY(-2px); } .offcanvas-user-profile .user-profile-box img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--sh-xs); } .offcanvas-user-profile .user-info h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); } .offcanvas-user-profile .user-info span { font-size: 12px; color: var(--c-muted); } /* Menu list */ .offcanvas-menu-list { list-style: none; margin: 0; padding: 0; } .offcanvas-menu-list > li { border-bottom: 1px solid var(--c-line); } .offcanvas-menu-list > li:last-child { border-bottom: 0; } .offcanvas-menu-list > li > a { display: flex !important; align-items: center; gap: 12px; padding: 13px 10px !important; color: var(--c-ink) !important; font-weight: 600 !important; border-radius: var(--r-sm); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), padding var(--dur) var(--ease); } .offcanvas-menu-list > li > a > i:first-child { width: 22px; text-align: center; font-size: 15px; color: var(--c-navy); transition: color var(--dur) var(--ease); } .offcanvas-menu-list > li > a:hover { background: var(--c-navy-100) !important; color: var(--c-navy) !important; padding-inline-start: 18px !important; } .offcanvas-menu-list > li > a:hover > i:first-child { color: var(--c-gold-600); } /* Dropdown chevron */ .offcanvas-menu-list .dropdown-icon { margin-inline-start: auto; font-size: 12px; transition: transform var(--dur) var(--ease); } .offcanvas-menu-list .has-dropdown.active > .dropdown-toggle .dropdown-icon, .offcanvas-menu-list .has-dropdown.open > .dropdown-toggle .dropdown-icon { transform: rotate(180deg); } /* Submenu */ .offcanvas-menu-list .submenu { list-style: none; margin: 0 0 6px; padding: 4px 0; } .offcanvas-menu-list .submenu > li > a { display: block; padding: 10px 16px !important; color: var(--c-body) !important; font-weight: 500 !important; font-size: 14px; border-radius: var(--r-sm); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .offcanvas-menu-list .submenu > li > a::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold); margin-inline-end: 9px; vertical-align: middle; opacity: .65; } .offcanvas-menu-list .submenu > li > a:hover { background: var(--c-navy-100); color: var(--c-navy) !important; } /* Logout row */ .offcanvas-menu-list .menu-logout > a, .offcanvas-menu-list .menu-logout > a > i { color: #d92d20 !important; } /* Social row */ .offcanvas-social h4 { color: var(--c-ink); font-weight: 800; margin-bottom: 14px; } .offcanvas-social ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .offcanvas-social ul li a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-navy-100); color: var(--c-navy) !important; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .offcanvas-social ul li a:hover { background: var(--grad-brand); color: #fff !important; transform: translateY(-3px); } /* ============================================================================ 18. HEADER TOP BAR — login, language, category dropdown, search ========================================================================== */ .tp-header-inner-login a { color: var(--c-navy) !important; font-weight: 700 !important; transition: color var(--dur) var(--ease); } .tp-header-inner-login:hover a, .tp-header-inner-login a:hover { color: var(--c-gold-600) !important; } .header-bottom__lang-2 a, .header-bottom__lang-2 .nice-select, .header-bottom__lang-2 { color: var(--c-navy) !important; font-weight: 600; } /* Header search field */ .tp-header-inner-search input { background: var(--c-bg) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-pill) !important; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .tp-header-inner-search input:focus { border-color: var(--c-navy-400) !important; box-shadow: 0 0 0 3px var(--c-navy-100) !important; } /* Header category mega-dropdown */ .tp-header-2-category-list { background: #fff !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; box-shadow: var(--sh-lg) !important; padding: 6px !important; } .tp-header-2-category-list li a { border-radius: var(--r-sm); color: var(--c-body) !important; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .tp-header-2-category-list li a:hover { background: var(--c-navy-100); color: var(--c-navy) !important; } .tp-header-2-category-icon { color: var(--c-navy); } /* ============================================================================ 19. INNER-PAGE SHARED PATTERNS Covers components reused across login/register, contact, FAQ, breadcrumb pages, and the user dashboard/profile — so every inner page lifts, not home. ========================================================================== */ /* ---- Form controls (login, register, contact, profile edit, address) ---- */ .form-control, .tp-login-input input, .tp-login-input-form input, .login-form input:not([type="checkbox"]):not([type="radio"]), .login-form textarea, .login-form select, textarea.form-control, select.form-control { border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; background: var(--c-surface) !important; color: var(--c-ink) !important; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important; } .form-control:focus, .tp-login-input input:focus, .login-form input:focus, .login-form textarea:focus, .login-form select:focus { border-color: var(--c-navy-400) !important; box-shadow: 0 0 0 3px var(--c-navy-100) !important; outline: none !important; } .form-control::placeholder { color: var(--c-muted) !important; opacity: 1; } .form-group label, .form-label, .tp-login-input label { color: var(--c-ink); font-weight: 600; } .tp-login-input-eye { color: var(--c-muted); transition: color var(--dur) var(--ease); } .tp-login-input-eye:hover { color: var(--c-navy); } /* Auth card + submit */ .tp-login-register-box, .tp-login-from-box { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-xl) !important; box-shadow: var(--sh-md) !important; } .tp-login-register-banner-box, .tp-login-register-shape { border-radius: var(--r-xl); overflow: hidden; } .tp-login-from-heading, .tp-login-from-title { color: var(--c-ink) !important; font-weight: 800 !important; } .tp-login-from-btn .tp-btn, .tp-login-from-btn button, .login-form button[type="submit"] { width: 100%; border-radius: var(--r-pill) !important; background: var(--grad-brand) !important; color: #fff !important; box-shadow: var(--sh-brand); } /* ---- Breadcrumb links ---- NOTE: In this theme `.tp-breadcrumb__bg` is a separate cover-image strip and the breadcrumb/title sit BELOW it on a white area with dark text. So we must NOT recolor the background or force white text here (that hides the title). Only refine the link colours, keeping everything dark-on-light. */ .breadcrumb-item a { color: var(--c-body) !important; } .breadcrumb-item a:hover { color: var(--c-navy) !important; } .breadcrumb-item.active { color: var(--c-ink) !important; font-weight: 600 !important; } /* ---- Accordion / FAQ ---- */ .accordion-item, .faq-expend { border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; overflow: hidden; margin-bottom: 14px; box-shadow: var(--sh-xs); transition: box-shadow var(--dur) var(--ease); } .accordion-item:hover { box-shadow: var(--sh-sm); } .accordion-button, .accordion-btn { font-weight: 700 !important; color: var(--c-ink) !important; background: var(--c-surface) !important; } .accordion-button:not(.collapsed), .accordion-button[aria-expanded="true"] { color: var(--c-navy) !important; background: var(--c-navy-100) !important; box-shadow: none !important; } .accordion-button:focus { box-shadow: 0 0 0 3px var(--c-navy-100) !important; } .accordion-body { color: var(--c-body); } /* ---- Tabs ---- */ .nav-tabs { border-bottom: 1px solid var(--c-line) !important; gap: 4px; } .nav-tabs .nav-link { color: var(--c-body) !important; border: 0 !important; border-radius: var(--r-sm) var(--r-sm) 0 0 !important; font-weight: 600; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-tabs .nav-link:hover { background: var(--c-navy-100) !important; color: var(--c-navy) !important; } .nav-tabs .nav-link.active { color: var(--c-navy) !important; background: transparent !important; border-bottom: 3px solid var(--c-gold) !important; } /* ---- Dashboard / profile cards ---- */ .dashboard-box, .tp-profile-box, .single-profile-wrapper, .dashboard-detail { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .dashboard-box:hover, .tp-profile-box:hover { box-shadow: var(--sh-md) !important; transform: translateY(-3px); } .dashboard-title, .tp-profile-title { color: var(--c-ink) !important; font-weight: 800 !important; } .tp-dashboard-banner-wrap { border-radius: var(--r-xl); overflow: hidden; } /* ---- Pagination ---- */ .pagination { gap: 6px; } .pagination .page-link, .pagination .page-item a, .pagination .page-item span { border: 1px solid var(--c-line) !important; border-radius: var(--r-sm) !important; color: var(--c-navy) !important; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .pagination .page-link:hover { background: var(--c-navy-100) !important; border-color: var(--c-navy-100) !important; } .pagination .page-item.active .page-link, .pagination .active > .page-link { background: var(--grad-brand) !important; border-color: transparent !important; color: #fff !important; } /* ============================================================================ 20. INSTRUCTORS GRID — "تعرف على مدربين المنصة" Replaces the broken JS flex-slider with a clean responsive card grid. Keeps the .cq8s-team-card-3d class + data-* attrs so the existing click-to-open-modal behaviour still works; the JS 3D tilt is neutralised for a stable, premium look (image · name · job · rating). ========================================================================== */ /* Centered flex-wrap so the row looks right with 1 card or many. */ .cq8s-instructors-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 8px; } .instructor-card.cq8s-team-card-3d { flex: 0 1 220px !important; max-width: 240px; background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important; padding: 26px 18px 20px !important; text-align: center; cursor: pointer; overflow: visible !important; /* cancel slider/3d leftovers */ transform: none !important; perspective: none !important; min-width: 0 !important; height: auto !important; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease) !important; } .instructor-card .card-inner { transform: none !important; /* cancel JS mousemove tilt */ background: transparent !important; box-shadow: none !important; border-radius: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 5px; } .instructor-card:hover { transform: translateY(-8px) !important; box-shadow: var(--sh-lg) !important; border-color: var(--c-navy-100) !important; } /* Avatar with gradient ring */ .instructor-card .instructor-avatar { width: 104px; height: 104px; border-radius: 50%; padding: 4px; margin-bottom: 8px; background: var(--grad-brand); box-shadow: var(--sh-sm); transition: background var(--dur) var(--ease); } .instructor-card:hover .instructor-avatar { background: var(--grad-gold); } .instructor-card .instructor-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; display: block; } /* Name & job */ .instructor-card .instructor-name { margin: 2px 0 0; font-size: 17px; font-weight: 800; color: var(--c-ink); } .instructor-card .instructor-job { font-size: 13px; font-weight: 600; color: var(--c-navy); } /* Rating */ .instructor-card .instructor-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; } .instructor-card .instructor-rating .stars { display: inline-flex; gap: 2px; } .instructor-card .instructor-rating .stars i { font-size: 13px; color: #d9deea; } .instructor-card .instructor-rating .stars i.is-on { color: var(--c-gold); } .instructor-card .rating-value { font-size: 13px; font-weight: 700; color: var(--c-ink); } .instructor-card .rating-count { font-size: 12px; color: var(--c-muted); } /* Hover "view profile" hint */ .instructor-card .instructor-view { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--c-navy); opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); } .instructor-card:hover .instructor-view { opacity: 1; transform: none; color: var(--c-gold-600); } .cq8s-team-3d-section .cq8s-team-header { text-align: center; margin-bottom: 28px; } /* ---- Elite analysts variant (مدربين النخبة) ---- */ .cq8s-elite-section { padding-top: 10px; } .instructor-card.elite-card { position: relative; border-color: var(--c-gold-300) !important; } .instructor-card.elite-card .instructor-avatar { background: var(--grad-gold); } /* gold ring by default */ .instructor-card.elite-card:hover .instructor-avatar { background: var(--grad-brand); } .instructor-card.elite-card .instructor-job { color: var(--c-gold-700); } .instructor-card.elite-card .elite-badge { display: inline-flex; align-items: center; gap: 5px; align-self: center; margin-bottom: 8px; padding: 3px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; color: var(--c-navy-900); background: var(--grad-gold); box-shadow: var(--sh-gold); } .instructor-card.elite-card .elite-badge i { font-size: 10px; } @media (max-width: 575px) { .cq8s-instructors-grid { gap: 14px; } .instructor-card.cq8s-team-card-3d { flex: 0 1 150px !important; } .instructor-card .instructor-avatar { width: 84px; height: 84px; } .instructor-card .instructor-view { display: none; } } /* ============================================================================ 21. RESPONSIVE NUDGES ========================================================================== */ @media (max-width: 768px) { .tp-section-3-title { font-size: clamp(22px, 6vw, 28px) !important; } .cq8s-section-divider::before, .cq8s-section-divider::after { width: 18vw; } .slider-cta-btn { padding: 12px 26px; } .tp-category-banner { flex-direction: column; gap: 16px; text-align: center; } .offcanvas-auth-btns { flex-direction: column; } } /* ============================================================================ 22. ACCESSIBILITY — respect reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .cq-reveal { opacity: 1; transform: none; } }