/** * Instructor pages — interactive states (hover, focus, active). * Load after instructor-pages.css so layout variables (--ins-*) apply. */ .ins-page { --ins-int-orange: #f09a1a; --ins-int-orange-icon: #f4951f; --ins-int-orange-hover: #d97706; --ins-int-orange-surface: #fff4e6; --ins-int-blue: #0f4c81; --ins-int-blue-hover: #0a3a63; --ins-int-border-soft: #c6d2df; --ins-focus-blue: 0 0 0 3px rgba(15, 76, 129, 0.28); --ins-focus-orange: 0 0 0 3px rgba(240, 173, 40, 0.35); } .ins-reduced-motion .ins-page .ins-more-link, .ins-reduced-motion .ins-page .ins-load-more, .ins-reduced-motion .ins-page .ins-btn, .ins-reduced-motion .ins-page .ins-filter-field select, .ins-reduced-motion .ins-page .ins-teacher-item { transition: none !important; } /* ---- Transitions (respect motion preferences via .ins-reduced-motion on ) ---- */ .ins-page .ins-more-link, .ins-page .ins-more-link i, .ins-page .ins-load-more, .ins-page .ins-btn, .ins-page .ins-filter-field select, .ins-page .ins-teacher-item { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease; } /* ---- Filter selects: border aligns with primary / navy ---- */ .ins-page .ins-filter-field select:hover { border-color: rgba(15, 76, 129, 0.45); } .ins-page .ins-filter-field select:focus { outline: none; border-color: var(--ins-int-blue); box-shadow: var(--ins-focus-blue); } /* ---- Teacher cards: subtle lift; border matches brand blue ---- */ .ins-page .ins-teacher-item:hover { border-color: rgba(15, 76, 129, 0.22); box-shadow: 0 10px 25px rgba(15, 76, 129, 0.08); transform: translateY(-4px); } /* ---- "More" link + arrow: orange family ---- */ .ins-page .ins-more-link:hover { color: var(--ins-int-orange-hover); } .ins-page .ins-more-link:hover i { color: var(--ins-int-orange-hover); } .ins-page .ins-more-link:focus-visible { outline: none; color: var(--ins-int-orange-hover); box-shadow: var(--ins-focus-orange); border-radius: 6px; } .ins-page .ins-more-link:focus-visible i { color: var(--ins-int-orange-hover); } /* ---- Load more: orange text/border like CTA ---- */ .ins-page .ins-load-more { cursor: pointer; } .ins-page .ins-load-more:disabled { cursor: wait; } .ins-page .ins-load-more:hover { background: var(--ins-int-orange-surface); border-color: var(--ins-int-orange-icon); color: var(--ins-int-orange-hover); } .ins-page .ins-load-more:focus-visible { outline: none; border-color: var(--ins-int-orange-icon); box-shadow: var(--ins-focus-orange); } .ins-page .ins-load-more:active:not(:disabled) { transform: scale(0.96); background: #ffe8cc; } .ins-page .ins-load-more.is-loading { opacity: 0.72; pointer-events: none; } /* ---- 1. Follow & 2. Rate Buttons (Follow and Rate Instructor) ---- */ .ins-btn.ins-btn-follow:hover, .ins-btn.ins-btn-follow:focus-visible, .ins-btn.ins-btn-rate:hover, .ins-btn.ins-btn-rate:focus-visible { background: #0f4c81; /* Match exact text color */ color: #ffffff; border-color: #0f4c81; } .ins-btn.ins-btn-follow:hover .ins-plus-circle, .ins-btn.ins-btn-follow:focus-visible .ins-plus-circle { border-color: #ffffff; color: #ffffff; } .ins-btn.ins-btn-rate:hover i, .ins-btn.ins-btn-rate:focus-visible i { color: #ffffff; } .ins-btn.ins-btn-follow:active, .ins-btn.ins-btn-rate:active { background: #0a3a63; border-color: #0a3a63; transform: scale(0.96); } /* ---- Followed state (Unfollow) ---- */ .ins-btn.ins-btn-follow.followed { border-color: #e84570 !important; color: #e84570 !important; background: transparent !important; } .ins-btn.ins-btn-follow.followed:hover, .ins-btn.ins-btn-follow.followed:focus-visible { background: #e84570 !important; color: #ffffff !important; border-color: #e84570 !important; } .ins-btn.ins-btn-follow.followed i, .ins-btn.ins-btn-follow.followed:hover i { color: inherit !important; } .ins-btn.ins-btn-follow.followed:active { background: #c32d54 !important; border-color: #c32d54 !important; transform: scale(0.96); } /* ---- 3. Message button ---- */ .ins-btn.ins-btn-msg:hover, .ins-btn.ins-btn-msg:focus-visible { background: #f4951f; /* Match exact border/icon color */ border-color: #f4951f; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(244, 149, 31, 0.25); } .ins-btn.ins-btn-msg:hover i, .ins-btn.ins-btn-msg:focus-visible i { color: #ffffff !important; } .ins-btn.ins-btn-msg:focus-visible { outline: none; box-shadow: var(--ins-focus-orange); } .ins-btn.ins-btn-msg:active { transform: scale(0.92); background: #d97706; border-color: #d97706; } /* ---- Icon specific animations upon button hover ---- */ .ins-btn i, .ins-btn .ins-plus-circle i { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .ins-btn.ins-btn-follow:hover .fa-plus { transform: rotate(90deg); } .ins-btn.ins-btn-rate:hover .fa-star { transform: scale(1.15); } .ins-btn.ins-btn-msg:hover i { transform: scale(1.15) rotate(-5deg); } /* Stars: very subtle motion only (keeps gold / outline colors from layout CSS) */ .ins-page .ins-rate i { transition: transform 0.15s ease; } .ins-page .ins-rate:hover .fa-solid.fa-star { transform: scale(1.06); } /* ---- Ripple & Animations ---- */ .ins-page .ins-btn, .ins-page .ins-load-more { position: relative; overflow: hidden; } .ins-ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-anim 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); background-color: rgba(0, 0, 0, 0.15); pointer-events: none; z-index: 10; } .ins-page .ins-btn:not(.icon) .ins-ripple { background-color: rgba(255, 255, 255, 0.3); } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } @keyframes fadeInUpItem { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= */ /* RATING MODAL (rating dialog) */ /* ========================================================= */ .ins-rating-modal .modal-content { border-radius: 12px; padding: 30px 20px; border: 1px solid #4db5f4 !important; /* Blue border like image */ } .ins-modal-close { position: absolute; top: 15px; left: 15px; /* RTL top-left */ background: transparent; border: 1px solid #0f4c81; color: #0f4c81; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.3s ease; z-index: 10; } .ins-modal-close:hover { background: #0f4c81; color: #fff; transform: rotate(90deg); } .ins-rating-avatar-wrap { background: #4db5f4; /* Sky blue background */ width: 140px; height: 140px; margin: 0 auto; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .ins-rating-avatar { width: 120px; height: auto; } .ins-rating-stars { font-size: 32px; color: #d1d5db; /* Light gray */ cursor: pointer; display: inline-flex; gap: 8px; direction: ltr; /* Ensure 1 to 5 mapping works properly */ } .ins-star { transition: transform 0.2s, color 0.2s; } .ins-star:hover { transform: scale(1.15); } .ins-rating-stars .ins-star.active, .ins-rating-stars .ins-star.hovered { color: #f4951f; /* Brand Orange/Gold for stars */ } .ins-btn-submit-rating { transition: all 0.3s; } .ins-btn-submit-rating:disabled { background: #aab9c7 !important; border-color: #aab9c7 !important; cursor: not-allowed; opacity: 1; } /* Modal fade transition step 1 -> step 2 */ #ratingStep1, #ratingStep2 { transition: opacity 0.4s ease, transform 0.4s ease; }