/* Scoped styles for lessons_detail.html */
.lessons-detail {
/* Base styles */
body {
text-align: right;
direction: rtl;
font-family: vazir;
background: #ffffff;
}
p {
font-family: vazir, sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 1.9em;
color: #4b4949;
margin-top: 20px;
}
.lessons-title {
font-family: vazir, sans-serif;
font-size: 1.4em;
font-weight: 300;
line-height: 1.7em;
color: #454343;
padding: 00px 9px 0px 10px;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
img {
border-radius: 10px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
float: left;
display: block;
position: relative;
top: 15px;
/* right: 20px; */
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
/*background: #0077cc;*/
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #0066af;
}
a.article,
a.article:hover {
background: #ffffff !important;
color: #0066af !important;
}
.list-items {
padding-right: 0;
list-style: none;
}
.btn-info {
background-color: #0066af;
border-color: #0066af;
}
.btn-info:hover {
background-color: #ffc107;
color: #0066af;
border-color: #0066af;
}
.btn-dark {
color: #fff;
background-color: #0066af;
border-color: #0066af;
}
.c-btn {
color: #0066af;
/* background-color: #f2f2f2; */
/*border-color: #ffc10*/
}
.c-btn:hover {
color: #fff;
/* background-color: #0066af; */
/*background-color: #ffc107;*/
/*border-color: #0389e8;*/
}
/* Pagination */
#Pagination {
direction: ltr;
}
.w3-border {
box-shadow: 2px 3px 11px 0px #efefef;
border: 1px solid #ebebeb !important;
padding: 0;
height: auto;
width: auto;
text-align: center;
border-radius: 10px;
}
.w3-padding-large {
padding: 12px 24px !important;
}
.w3-padding-32 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.w3-padding {
padding: 12px 0px !important;
}
.widget-ads {
display: block;
text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #4b4b4b;
/* font-family: "Vazir", "Poppins", sans-serif; */
/* font-weight: 700; */
line-height: 1.5;
/* margin: 20px 0; */
}
b,
strong {
font-weight: bold;
}
.wrapper {
display: flex;
align-items: stretch;
}
/* .wrapper.lessons-detail {
display: flex !important;
flex-direction: row-reverse;
align-items: flex-start;
width: 100% !important;
position: relative !important;
} */
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
@media (min-width: 992px) {
.main-content-contact-us {
padding: 90px 30px 90px 30px !important;
}
}
@media (max-width: 991.98px) {
.main-content-contact-us {
padding: 40px 15px 20px 15px !important;
}
}
@media (min-width: 992px) {
.main-content {
padding: 40px 300px 20px 30px !important;
}
}
@media (max-width: 991.98px) {
.main-content {
padding: 30px 0px 20px 0px !important;
}
}
@media (min-width: 992px) {
.col-right {
padding-left: 35px;
}
}
@media (max-width: 991.98px) {
.col-right {
padding-bottom: 40px;
}
}
@media (max-width: 768px) {
#content {
padding-right: 0px !important;
;
}
#content.active {
padding-right: 0px !important;
;
}
}
#content.active {
padding-right: 0px;
}
#content {
width: 100%;
flex-grow: 1;
/* padding: 0px 250px 0px 0px; */
/* min-height: 100vh;
transition: all 0.3s; */
}
/* homepage content style */
/* @media (min-width: 992px) {
.homepage-content {
padding: 40px 328px 20px 30px !important;
}
} */
@media (max-width: 991.98px) {
.homepage-content {
padding: 0 0px 0px 0px !important;
}
}
/* برای ویدیوهایی که از طریق tinymce ادد میشن*/
/* ویژگیهای پیشفرض برای کلاس vid-responsive */
.vid-responsive {
width: 100%;
/* عرض 100% */
height: 500px;
/* ارتفاع خودکار */
}
/* اگر صفحه نمایش کوچکتر از 1070 پیکسل باشد */
@media (max-width: 1070px) {
.vid-responsive {
max-width: 100%;
/* حداکثر عرض 100% */
}
}
/* اگر صفحه نمایش کوچکتر از 767 پیکسل باشد */
@media (max-width: 767px) {
.vid-responsive {
max-width: 100%;
/* حداکثر عرض 100% */
height: 300px;
}
}
/* برای تصاویری که از طریق tinymce درج میشن */
.img-responsive {
width: 100%;
/* عرض 100% */
height: auto;
/* ارتفاع خودکار */
}
@media (max-width: 1070px) {
.img-responsive {
max-width: 100%;
/* حداکثر عرض 100% */
}
}
@media (max-width: 767px) {
.img-responsive {
max-width: 100%;
}
}
/* ---------------------------------------------------
sidebar STYLE
----------------------------------------------------- */
#sidebarCollapse {
border-radius: 0.375rem;
}
/* استایل دکمه بستن در حالت دسکتاپ */
.close-sidebar {
border: none;
background-color: transparent;
color: #ffffff;
font-size: 30px;
/* padding: 8px; */
cursor: pointer;
display: none;
}
.close-sidebar:hover {
color: #ff0000;
}
/* استایل دکمه بستن در حالت موبایل */
@media (max-width: 768px) {
.close-sidebar {
display: block;
/* استایل دیگر مربوط به دکمه بستن در حالت موبایل */
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
}
}
#sidebar .close-sidebar {
align-self: flex-start;
margin-top: 20px;
margin-bottom: 20px;
}
.ad_sidebar {
display: block;
position: sticky;
top: 80px;
height: 100%;
}
/*#sidebar.active .sidebar-header h3,*/
/*#sidebar.active .CTAs {*/
/* display: none;*/
/*}*/
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar.active ul li a {
padding: 20px 12px;
text-align: right;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header h3 {
font-size: 20px;
padding: 20px 5px 20px 5px;
background: #006fbe;
color: #ffffff;
text-align: center;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 0px 0px 0px 0px;
/* border-bottom: 1px solid #006bb7; */
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
text-align: right;
}
#sidebar ul li a:hover {
color: #0077cc;
background: #ffffff;
}
#sidebar ul li a:active {
color: #0077cc;
background: #ffffff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #ffffff;
background: #0077cc;
}
/* ۲. تنظیمات مخصوص دسکتاپ (صفحههای بزرگتر از 992 پیکسل) */
@media (min-width: 992px) {
.wrapper.lessons-detail {
display: flex !important;
flex-direction: row-reverse;
/* برای سایت فارسی */
align-items: stretch;
/* سایدبار و محتوا همقد میشوند */
position: relative;
}
/* ۲. سایدبار با قدرت مطلق */
#sidebar {
position: -webkit-sticky !important;
position: sticky !important;
top: 60px !important;
height: calc(100vh - 60px) !important;
width: 279px !important;
z-index: 1000 !important;
float: right;
flex-shrink: 0;
overflow-y: auto;
/* یا استفاده از flex در والد */
background-color: #f2f2f2;
/* margin-right: 0; */
}
}
/* ۳. وقتی سایدبار در موبایل باز میشود (کلاس active) */
#sidebar.active {
margin-right: 0 !important;
min-width: 0px;
max-width: 0px;
text-align: center;
}
/* ---------------------------------------------------
header STYLE
----------------------------------------------------- */
/* .navbar { */
/* padding: 0px 0px 0px 0px; */
/*border: none;*/
/*border-radius: 0;*/
/* margin-bottom: 40px; */
/* } */
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
@media (max-width: 991.98px) {
.navbar-expand-lg>.container,
.navbar-expand-lg>.container-fluid {
/* padding-right: 0; */
/* padding-left: 0; */
padding: 6px 0px 10px 0px;
}
}
#main-nav {
padding: 0px 0px 0px 0px;
}
.nav-item {
padding: 0px 0px 0px 0px;
}
@media (max-width: 992px) {
#main-nav {
padding: 15px 0px 0px 0px;
}
}
.header-1 .nav-link {
color: #676767;
}
.header.sticky-top {
overflow: hidden;
/* هر چیزی که از هدر بیرون بزنه رو قطع میکنه */
}
.header.sticky-top .navbar {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: auto !important;
/* جلوی ارتفاع حداقلی پیشفرض رو میگیره */
margin-bottom: 0 !important;
}
/* اگر دکمهها باعث کش آمدن هدر شدن، این رو بزن */
.header .navbar .btn {
color: #ffffff;
font-size: 23px;
padding-top: 8px !important;
padding-bottom: 5px !important;
line-height: 1 !important;
}
.header.sticky-top .navbar-nav .nav-item {
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 10px;
/* تنظیم فاصله از بالا */
padding-bottom: 10px;
/* تنظیم فاصله از پایین */
}
.header .navbar-nav .nav-item {
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 10px;
/* تنظیم فاصله از بالا */
padding-bottom: 10px;
/* تنظیم فاصله از پایین */
}
/* استایل منوی اول در دستگاههای موبایل و تبلت */
@media (max-width: 991px) {
.header-1 .navbar-nav {
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding: 5px 0px 0px 0px;
}
.header-1>.navbar-expand-lg>.container,
.navbar-expand-lg>.container-fluid {
padding: 0px 0px 0px 0px;
}
.header-1 .navbar {
height: 50px;
padding: 0px 0px 0px 0px;
border: none;
border-radius: 0;
/* margin-bottom: 40px; */
}
.header-1 .navbar .navbar-nav .nav-item {
display: inline-block;
margin-left: 8px;
margin-right: 8px;
height: 50px;
}
}
.header-1 {
z-index: 1;
background-color: rgb(255, 255, 255);
width: 100%;
/* height: 50px; */
}
/* استایل منوی اول در دستگاههای دسکتاپ */
/*@media (min-width: 992px) {*/
/* .header-1 .navbar-nav {*/
/* flex-direction: row !important;*/
/* }*/
/* .header-1 .navbar-nav .nav-item {*/
/* margin-left: 16px;*/
/* margin-right: 16px;*/
/* }*/
/*}*/
.header {
position: sticky;
top: 0;
z-index: 1050;
background-color: #006fbe;
height: 58px;
width: 100%;
/* box-shadow: -8px 3px 8px 5px rgb(0 0 0 / 10%); */
/* padding: 10px 0px 10px 10px; */
/*margin-bottom: 40px;*/
}
@media (min-width: 992px) {
.header .navbar {
height: 60px;
padding: 0;
}
.header .navbar > .container-fluid {
height: 60px;
padding-left: 24px;
padding-right: 24px;
align-items: center;
}
.header .navbar-nav {
gap: 18px;
margin-right: 20px;
}
.header .navbar-nav .nav-link {
color: #ffffff;
padding: 0 1rem;
line-height: 1;
display: inline-flex;
align-items: center;
height: 36px;
}
.header .modern-search-box {
margin: 0 16px;
}
.header .search-container {
max-width: 320px;
}
.header .search-input {
height: 36px;
padding: 0 40px 0 15px;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #ffffff;
font-size: 0.95rem;
box-shadow: 0 8px 24px rgba(31, 38, 135, 0.18);
}
.header .search-input::placeholder {
color: rgba(255, 255, 255, 0.8);
font-family: vazir, sans-serif;
}
.header .search-input:focus {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 24px rgba(31, 38, 135, 0.25);
color: #ffffff;
}
.header .search-btn {
left: auto;
right: 4px;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #ffc107;
border: none;
color: #333;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.header .search-btn:hover {
background-color: #ffdb4d;
transform: translateY(-50%) scale(1.03);
}
.header .login-btn-desktop {
height: 36px;
/* line-height: 36px; */
padding: 4px 15px;
}
.header .profile-avatar {
width: 36px;
height: 36px;
}
.header .profile-menu,
.header .profile-trigger {
display: inline-flex;
align-items: center;
height: 36px;
}
}
#sidebar .sidebar-header strong {
display: block;
}
input[type='text'] {
text-align: right;
direction: rtl;
z-index: 1;
}
#search-box {
/* padding: 10px 10px 10px 20px; */
/* position: absolute; */
/* margin: 8px 60px 0px 60px; */
direction: ltr;
/* left: 0; */
}
.container {
float: right;
}
/*.btn:hover{*/
/* color:#fff;*/
/*}*/
.input-text:focus {
box-shadow: 0px 0px 0px;
border-color: #0077cc;
outline: 0px;
text-align: right;
}
.form-control {
border: 1px solid #0077cc;
}
.btn-outline-warning {
color: #ffffff;
background-color: #0066af;
background-image: none;
border-color: #0077cc;
height: 38px
}
/* Modern Search Box Styles */
.modern-search-box {
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.search-container {
position: relative;
width: 100%;
max-width: 320px;
}
.search-input {
width: 100%;
padding: 0 44px 0 16px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
font-size: 0.92rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
backdrop-filter: blur(8px);
font-family: 'Poppins', sans-serif;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.75);
font-family: vazir, sans-serif;
}
.search-input:focus {
border-color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.22);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.search-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: none;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.search-btn:hover {
background: rgba(255, 255, 255, 0.32);
transform: translateY(-50%) scale(1.03);
}
/* Responsive for Search Box */
@media (max-width: 768px) {
.search-container {
max-width: 220px;
}
.search-input {
height: 34px;
font-size: 0.8rem;
padding: 0 38px 0 12px;
}
.search-btn {
width: 26px;
height: 26px;
font-size: 12px;
}
}
}
.search-icon-mobile {
font-size: 22px;
}
/* Desktop Login Button Styles - Modern Version */
.login-btn-desktop {
background-color: #ffffff;
/* پسزمینه سفید برای تضاد با آبی هدر */
color: #006fbe !important;
/* متن آبی هدر */
padding: 5px 15px;
/* پدینگ بیشتر برای ظاهر کشیده و مدرن */
border-radius: 20px;
/* لبههای گرد مدرن */
font-weight: 700;
/* متن ضخیمتر */
text-decoration: none;
display: inline-block;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-left: 20px;
/* فاصله مناسب از باکس جستجو */
border: 2px solid transparent;
}
.login-btn-desktop:hover {
background-color: #ffb700;
/* در حالت هوور آبی میشود */
color: #ffffff !important;
/* متن سفید میشود */
transform: translateY(-3px);
/* دکمه کمی بالا میپرد */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.login-btn-desktop:active {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* بخش تنظیمات ریسپانسیو و تراز کردن */
@media (min-width: 992px) {
.modern-search-box {
display: flex;
align-items: center;
margin-right: 15px;
}
#main-nav {
flex-grow: 1;
}
/* این کلاس در بوتاسترپ ۵ شده ms-auto، برای اطمینان هر دو رو پوشش میدیم */
.navbar-nav.ml-auto,
.navbar-nav.ms-auto {
margin-left: auto !important;
}
}
/* Ensure mobile header elements are vertically centered and have equal spacing */
@media (max-width: 991.98px) {
.header {
height: auto;
/* Allow header to expand for two rows */
}
.mobile-secondary-nav {
/* Renamed from mobile-top-bar */
background-color: #f2f2f2;
/* New background color */
height: 33px;
/* Shorter row height */
padding: 0 15px;
/* Add some horizontal padding */
display: flex;
align-items: center;
justify-content: flex-start;
}
.mobile-secondary-nav .btn {
padding: 0.25rem 0.5rem !important;
/* Adjust button padding for smaller row */
font-size: 0.875rem;
}
.mobile-secondary-nav #sidebarCollapse-mobile {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
/* Remove all padding */
color: #006fbe !important;
/* Override c-btn white color for visibility */
display: flex;
/* Make the button itself a flex container */
align-items: center;
/* Center the icon vertically within the button */
justify-content: center;
/* Center the icon horizontally if needed */
height: 100%;
/* Make button take full height of parent 30px */
width: auto;
/* Allow width to be determined by content */
}
.mobile-secondary-nav #sidebarCollapse-mobile i {
font-size: 23px;
/* Set icon size */
line-height: 1;
/* Ensures the icon doesn't add extra height */
}
.mobile-primary-nav {
/* Renamed from mobile-bottom-bar */
background-color: #006fbe;
/* Same as header background */
height: 58px;
/* Height for the main nav row */
padding: 0 15px;
/* Add some horizontal padding */
position: relative;
}
.mobile-primary-nav .container-fluid {
height: 100%;
/* Ensure fluid container takes full height */
}
.mobile-header-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
height: 100%;
position: relative;
}
.mobile-header-left,
.mobile-header-right {
display: inline-flex;
align-items: center;
gap: 10px;
}
.mobile-header-left {
justify-self: start;
}
.mobile-header-center {
position: absolute;
left: 50%;
top: 54%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-header-right {
justify-self: end;
}
.mobile-header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
}
.mobile-primary-nav .navbar-brand {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-primary-nav .logo_blog {
display: block;
max-height: 36px;
margin: 0 auto;
}
.mobile-header-right .profile-menu,
.mobile-header-right .profile-trigger,
.mobile-header-right .login-btn-mobile {
height: 36px;
display: inline-flex;
align-items: center;
}
.mobile-search-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 12px;
background: rgba(0, 111, 190, 0.98);
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 20;
}
.mobile-search-overlay.is-open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.mobile-search-form {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 8px;
}
.mobile-search-input {
flex: 1;
height: 38px;
border-radius: 999px;
border: none;
padding: 0 38px 0 14px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
outline: none;
font-family: vazir, sans-serif;
}
.mobile-search-input::placeholder {
color: rgba(255, 255, 255, 0.8);
font-family: vazir, sans-serif;
}
.mobile-search-submit {
position: absolute;
right: 6px;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: #ffc107;
color: #333;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mobile-search-close {
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.2);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Remove the previous generic mobile navbar styling */
.d-lg-none .navbar {
min-height: auto;
padding-top: initial !important;
padding-bottom: initial !important;
}
.d-lg-none .navbar .container-fluid {
padding-top: initial !important;
padding-bottom: initial !important;
}
}
.custom-nav-mobile-menu {
background-color: #006fbe !important;
/* اینجا کد رنگ دلخواهت رو بذار */
border-bottom: 2px solid #005999 ;
/* اگر بخوای لبه پایینی کمی تیره تر باشه */
}
.custom-Searchbox-mobile-menu {
background-color: #f2f2f2 !important;
/* اینجا کد رنگ دلخواهت رو بذار */
}
/* Mobile and Tablet Login Button Styles - Modern Version */
.login-btn-mobile {
background-color: #ffffff;
/* پسزمینه سفید برای تضاد با آبی هدر */
color: #006fbe !important;
/* متن آبی هدر */
padding: 5px 15px;
/* پدینگ بیشتر برای ظاهر کشیده و مدرن */
border-radius: 20px;
/* لبههای گرد مدرن */
font-weight: 700;
/* متن ضخیمتر */
text-decoration: none;
display: inline-block;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-left: 1px;
/* فاصله مناسب از باکس جستجو */
border: 2px solid transparent;
}
.login-btn-mobile:hover {
background-color: #ffb700;
/* در حالت هوور آبی میشود */
color: #ffffff !important;
/* متن سفید میشود */
transform: translateY(-3px);
/* دکمه کمی بالا میپرد */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.login-btn-mobile:active {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* ----------------------------
footer box STYLE
------------------------------ */
.footer-description {
text-align: justify;
}
.footer-basic {
padding: 40px 0;
background-color: #002e4e;
color: #ffffff;
}
.footer-basic ul {
padding: 0;
list-style: none;
text-align: center;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
}
.footer-basic li {
padding: 0 10px;
}
.footer-basic ul a {
color: inherit;
text-decoration: none;
opacity: 0.8;
}
.footer-basic ul a:hover {
opacity: 1;
}
.footer-basic .social {
text-align: center;
padding-bottom: 25px;
}
.footer-basic .social>a {
font-size: 24px;
width: 40px;
height: 40px;
line-height: 40px;
display: inline-block;
text-align: center;
/* border-radius:50%;
border:1px solid #ccc; */
margin: 0 8px;
/* color:inherit; */
opacity: 0.75;
}
.footer-basic .social>a:hover {
opacity: 0.9;
}
.footer-basic .copyright {
margin-top: 15px;
text-align: center;
font-size: 13px;
color: #aaa;
margin-bottom: 0;
}
.telegram {
color: #006bb7;
}
.mail {
color: #ff0000;
}
.instagram {
color: #c60077;
}
/* Styles for mobile sidebar */
.overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
/* Below sidebar but above content */
top: 0;
left: 0;
cursor: pointer;
}
.overlay.active {
display: block;
}
@media (max-width: 991.98px) {
/* Deactivate old sidebar logic on mobile */
#sidebar {
margin-right: 0 !important;
transform: translateX(100%);
/* Start off-screen to the right */
position: fixed;
top: 91px;
/* 56px primary nav + 33px secondary nav */
right: 0;
width: 280px;
/* A reasonable width for mobile sidebar */
height: calc(100% - 91px);
z-index: 1052;
/* Above header and overlay */
transition: transform 0.3s ease-in-out;
background-color: #f2f2f2;
min-width: unset;
max-width: unset;
text-align: right;
padding-top: 20px;
overflow-y: scroll;
}
#sidebar.active-mobile-sidebar {
transform: translateX(0);
/* Slide in */
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
/* Ensure old active class doesn't interfere */
#sidebar.active {
min-width: unset;
max-width: unset;
}
/* Reset padding and other properties that might be affected by old '.active' styles */
#sidebar.active-mobile-sidebar ul li a {
padding: 10px 15px;
text-align: right;
font-size: 1.1em;
}
#sidebar.active-mobile-sidebar ul li a i {
margin-right: 0;
display: inline-block;
font-size: inherit;
margin-bottom: 0;
}
/* Make sure close button is visible and properly styled */
#sidebar .close-sidebar {
display: block;
position: absolute;
top: 15px;
left: 15px;
font-size: 24px;
color: #333;
background: none;
border: none;
line-height: 1;
padding: 0;
}
}
/* -- Scoped Hero Section Styles -- */
/* Ensures these styles only apply to the new hero section and do not interfere with other pages. */
.hero-section {
background: linear-gradient(to top left, #f1f4f8, #ffffff);
/* padding: 100px 0; */
direction: rtl;
/* Ensure RTL layout */
position: relative;
/* Ensure it's above the following content */
z-index: 1;
/* Stacking context to prevent overlap */
}
.hero-section h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.4;
color: #212529;
/* Explicitly setting color to avoid being overridden */
}
.hero-section p {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 30px;
}
.hero-section .btn {
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
/* Rounded corners */
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-left: 10px;
line-height: 1.5;
/* Added for consistent button height */
}
.hero-section .btn-primary {
background-color: #006fbe;
border-color: #006fbe;
color: #fff;
/* Explicitly setting text color */
box-shadow: 0 0px 30px rgb(0 111 190 / 43%);
}
.hero-section .btn-primary:hover {
background-color: #ffb700;
/* Darker shade of #006fbe */
border-color: #ffb700;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 111, 190, 0.3);
}
.hero-section .btn-outline-secondary {
border-color: #6c757d;
color: #6c757d;
background-color: transparent;
/* Ensure it's an outline button */
}
.hero-section .btn-outline-secondary:hover {
background-color: #6c757d;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(108, 117, 125, 0.2);
}
.hero-section .btn i {
margin-right: 8px;
/* Space between icon and text */
}
.hero-section .hero-image {
max-width: 100%;
height: auto;
border-radius: 15px;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.hero-section {
text-align: center;
min-height: calc(100vh - 58px);
min-height: calc(100svh - 58px);
display: flex;
align-items: flex-start;
}
.hero-section .row {
flex-direction: column-reverse;
/* Stack image on top of text */
gap: 0;
}
.hero-section h1 {
font-size: 1.6rem;
margin-bottom: 12px;
}
.hero-section .hero-image-container {
margin-bottom: 8px;
}
.hero-section p {
font-size: 0.95rem;
margin-bottom: 12px;
}
.hero-section .hero-image {
max-height: 26vh;
object-fit: contain;
}
.hero-section .container {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
}
@media (max-width: 768px) {
.hero-section .btn {
width: 100%;
margin-bottom: 8px;
margin-left: 0;
padding: 9px 18px;
}
}
@media (max-width: 576px) {
.hero-section h1 {
font-size: 1.45rem;
}
.hero-section p {
font-size: 0.9rem;
}
.hero-section .hero-image {
max-height: 40vh;
}
}
/* Fix for floated container issue */
.hero-section .container {
float: none;
}
/* Home page section titles (match features title style) */
.homepage-content .section-title {
font-weight: 800;
font-size: 2.5rem;
color: #212529;
margin-bottom: 1rem;
padding-bottom: 0;
position: static;
}
.homepage-content .section-title::after {
display: none;
}
.homepage-content .title-divider {
width: 70px;
height: 4px;
background-color: #006fbe;
margin: 0 auto 4rem auto;
border-radius: 2px;
}
@media (max-width: 991.98px) {
.homepage-content .section-title {
font-size: 2.2rem;
}
}
@media (max-width: 767.98px) {
.homepage-content .section-title {
font-size: 1.8rem;
}
}
/* -- Scoped Category Cards Section Styles -- */
/* Ensures these styles only apply to the category cards and do not interfere with other elements. */
.category-cards-section {
direction: rtl;
}
.category-cards-section .section-header {
margin-bottom: 40px;
}
.category-cards-section .category-card {
background-color: #fff;
border: 2px solid transparent;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.category-cards-section .category-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-color: #3776ab;
/* Python-like blue */
}
.category-cards-section .card-icon {
font-size: 3rem;
color: #006fbe;
margin-bottom: 20px;
line-height: 1;
}
.category-cards-section .card-title {
font-weight: 700;
font-size: 1.25rem;
margin-bottom: 15px;
color: #212529;
}
.category-cards-section .card-text {
color: #6c757d;
font-size: 0.95rem;
min-height: 45px;
/* Approx 2 lines of text */
}
.category-cards-section .card-link {
color: #006fbe;
text-decoration: none;
font-weight: 600;
margin-top: 20px;
display: inline-block;
transition: color 0.3s ease;
}
.category-cards-section .card-link:hover {
color: #005c9e;
}
.category-cards-section .card-link i {
transition: transform 0.3s ease;
display: inline-block;
}
.category-cards-section .category-card:hover .card-link i {
transform: translateX(-5px);
}
/* ===================================================================
* 20. Latest Courses Section - Modern Cards
* =================================================================== */
.latest-courses-section {
padding-bottom: 6rem;
padding-top: 3rem;
direction: rtl;
}
.latest-courses-section .section-header {
margin-bottom: 40px;
}
.latest-courses-section .course-card-wrapper {
text-decoration: none;
display: block;
}
.latest-courses-section .course-card {
position: relative;
overflow: hidden;
border-radius: 24px;
background: #ffffff;
display: grid;
grid-template-rows: 1fr auto;
min-height: 260px;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
border: 1px solid #eef2f7;
}
.latest-courses-section .course-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(0, 111, 190, 0.12), transparent 45%),
radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 50%);
opacity: 1;
z-index: 1;
}
.latest-courses-section .course-card::after {
display: none;
}
.latest-courses-section .course-card-body {
position: relative;
z-index: 3;
padding: 26px 24px 0 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.latest-courses-section .course-card-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 700;
color: #006fbe;
background: rgba(0, 111, 190, 0.1);
padding: 6px 12px;
border-radius: 999px;
width: fit-content;
}
.latest-courses-section .course-title {
font-family: 'Vazir', sans-serif;
font-weight: 800;
font-size: 1.35rem;
color: #0f172a;
margin: 0;
line-height: 1.6;
text-shadow: none;
}
.latest-courses-section .card-glow {
position: absolute;
inset: 0;
border-radius: 24px;
background: radial-gradient(circle at 15% 15%, rgba(59, 130, 246, 0.2), transparent 55%);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 0;
}
.latest-courses-section .course-desc {
margin: 0;
font-size: 0.95rem;
color: #475569;
line-height: 1.7;
min-height: 72px;
}
.latest-courses-section .course-card-footer {
position: relative;
z-index: 3;
padding: 0 24px 24px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.latest-courses-section .course-cta {
font-weight: 700;
color: #ffffff;
background: #006fbe;
padding: 8px 16px;
border-radius: 999px;
transition: background 0.3s ease, transform 0.3s ease;
}
.latest-courses-section .course-card-wrapper:hover .course-card {
transform: translateY(-8px);
box-shadow: 0 26px 55px rgba(15, 23, 42, 0.15);
border-color: rgba(0, 111, 190, 0.35);
}
.latest-courses-section .course-card-wrapper:hover .card-glow {
opacity: 1;
}
.latest-courses-section .course-cta:hover {
background: #ffb700;
color: #ffffff;
transform: translateY(-1px);
}
@media (max-width: 991.98px) {
.latest-courses-section .course-title {
font-size: 1.2rem;
}
}
@media (max-width: 767.98px) {
.latest-courses-section .course-title {
font-size: 1.1rem;
}
.latest-courses-section .course-card {
min-height: 220px;
}
.latest-courses-section .course-card-body {
padding: 20px 18px 0 18px;
}
.latest-courses-section .course-card-footer {
padding: 0 18px 18px;
}
}
/* ===================================================================
* 21. Features Section
* =================================================================== */
.features-section {
direction: rtl;
padding: 80px 0;
}
.features-section .bg-light {
background-color: #f8f9fa !important;
/* A very light gray */
}
.features-section .features-section-title {
font-weight: 800;
font-size: 2.5rem;
color: #212529;
margin-bottom: 1rem;
}
.features-section .title-divider {
width: 70px;
height: 4px;
background-color: #006fbe;
/* Python Blue */
margin: 0 auto 4rem auto;
/* Centers the divider */
border-radius: 2px;
}
.features-section .feature-item {
padding: 1rem;
}
.features-section .feature-icon {
width: 88px;
height: 88px;
border-radius: 22px;
/* Rounded square */
background-color: rgba(0, 111, 190, 0.1);
/* Light tint of Python blue */
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.features-section .feature-icon i {
font-size: 40px;
color: #005a9c;
transition: color 0.3s ease;
}
.features-section .feature-title {
font-weight: 700;
font-size: 1.2rem;
color: #343a40;
margin-bottom: 0.75rem;
}
.features-section .feature-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.7;
}
/* --- Hover Effect --- */
.features-section .feature-item:hover .feature-icon {
transform: scale(1.1) translateY(-5px);
background-color: rgba(0, 111, 190, 0.15);
/* Slightly darker tint on hover */
}
/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
.features-section {
padding: 60px 0;
}
.features-section .features-section-title {
font-size: 2.2rem;
}
}
@media (max-width: 767.98px) {
.features-section .feature-item {
margin-bottom: 1.5rem;
/* Add space between stacked items on mobile */
}
.features-section .features-section-title {
font-size: 1.8rem;
}
}
/* ===================================================================
* 22. Latest Articles Section
* =================================================================== */
.latest-articles-section {
direction: rtl;
padding-bottom: 6rem;
padding-top: 3rem;
background-color: #ffffff;
}
.latest-articles-section .section-header {
margin-bottom: 40px;
}
.latest-articles-section .container-xl {
padding-left: 24px;
padding-right: 24px;
}
/* Reusing title style from the features section for consistency */
.latest-articles-section .features-section-title {
margin-bottom: 1rem;
}
.latest-articles-section .title-divider {
margin-bottom: 4rem;
}
.latest-articles-section .article-card {
border: 1px solid #e9ecef;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
background-color: #fff;
text-align: right;
}
.latest-articles-section .card-img-container {
overflow: hidden;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.latest-articles-section .article-card .card-img-top {
transition: transform 0.4s ease-in-out;
}
.latest-articles-section .article-card .card-body {
padding: 1.5rem;
}
.latest-articles-section .article-card .card-title {
font-weight: 700;
font-size: 1.15rem;
color: #212529;
margin-bottom: 0.75rem;
}
.latest-articles-section .article-card .card-text {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.6;
min-height: 54px;
/* Approx 3 lines of text */
}
.latest-articles-section .article-card .card-footer {
background-color: transparent;
border-top: 1px solid #f1f1f1;
padding: 1rem 1.5rem;
}
.latest-articles-section .read-more-link {
color: #006fbe;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.latest-articles-section .read-more-link i {
transition: transform 0.3s ease;
display: inline-block;
}
.latest-articles-section .read-more-link:hover {
color: #005a9c;
}
.latest-articles-section .read-more-link:hover i {
transform: translateX(-4px);
}
/* --- Hover Effect --- */
.latest-articles-section .article-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
border-color: #006fbe;
/* Subtle glow effect */
}
.latest-articles-section .article-card:hover .card-img-top {
transform: scale(1.05);
}
/* --- View All Button --- */
.latest-articles-section .view-all-btn {
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
background-color: #006fbe;
border-color: #006fbe;
}
.latest-articles-section .view-all-btn:hover {
background-color: #005a9c;
border-color: #005a9c;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 111, 190, 0.3);
}
@media (max-width: 767.98px) {
.latest-articles-section {
padding: 60px 0;
}
}
@media (max-width: 991.98px) {
.latest-articles-section .container-xl {
padding-left: 16px;
padding-right: 16px;
}
}
/* ===================================================================
* 23. Final CTA Section
* =================================================================== */
.final-cta-section {
padding: 2rem 0 4rem 0;
/* Extra padding at the bottom */
direction: rtl;
}
.final-cta-section .cta-container {
background: linear-gradient(135deg, #0d324d 0%, #001f36 100%);
/* Dark Blue/Navy Gradient */
border-radius: 30px;
padding: 3rem;
position: relative;
overflow: hidden;
/* To contain pseudo-elements */
box-shadow: 0 30px 60px -20px rgba(13, 50, 77, 0.5);
}
/* Subtle background pattern */
.final-cta-section .cta-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 30px 30px;
opacity: 0.5;
z-index: 0;
}
.final-cta-section .cta-content {
position: relative;
z-index: 1;
}
.final-cta-section .cta-text h1 {
font-weight: 900;
font-size: 2.0rem;
color: #ffffff;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.final-cta-section .cta-text p {
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
margin-top: 0;
}
.final-cta-section .btn-cta {
background-color: #ffc107;
color: #212529;
font-weight: 700;
font-size: 1.1rem;
padding: 0.9rem 2.2rem;
border-radius: 50px;
border: none;
box-shadow: 0 0 25px 0 rgba(255, 193, 7, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.final-cta-section .btn-cta:hover {
transform: scale(1.05) translateY(-2px);
box-shadow: 0 0 40px 8px rgba(255, 193, 7, 0.55);
color: #000;
}
/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
.final-cta-section .cta-container {
padding: 2.5rem;
}
.final-cta-section .cta-text h1 {
font-size: 2rem;
}
}
@media (max-width: 767.98px) {
.final-cta-section .cta-container {
padding: 2rem 1.5rem;
}
.final-cta-section .cta-text h1 {
font-size: 1.8rem;
}
.final-cta-section .btn-cta {
width: 100%;
padding: 1rem;
}
}
/* ===================================================================
* 24. Site Footer
* =================================================================== */
.site-footer {
margin-top: 0px;
background-color: #161c22;
/* Near Black / Dark Charcoal */
color: #a0aec0 !important;
/* Light Gray */
font-size: 0.9rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
direction: rtl;
}
.site-footer .footer-col {
margin-bottom: 2rem;
}
.site-footer .footer-col-title {
color: #ffffff;
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.site-footer .footer-links li {
margin-bottom: 0.75rem;
}
.site-footer .footer-links a {
color: #a0aec0;
text-decoration: none;
position: relative;
padding-bottom: 3px;
transition: color 0.3s ease;
}
/* Animated underline for links */
.site-footer .footer-links a::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 1.5px;
background-color: #ffc107;
/* Python Yellow */
transition: width 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Responsive Iframe for YouTube Embeds */
.video-responsive-wrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
margin-bottom: 1.5rem;
/* Optional: for spacing */
}
.video-responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.site-footer .footer-links a:hover {
color: #ffffff;
}
.site-footer .footer-links a:hover::after {
width: 50%;
}
.site-footer .social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff;
font-size: 1rem;
margin-left: 0.3rem;
text-decoration: none;
transition: all 0.3s ease;
}
.site-footer .social-icons a:hover {
background-color: #ffc107;
color: #161c22;
transform: translateY(-3px);
}
.site-footer .footer-bottom-separator {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 2rem 0;
}
.site-footer .copyright-section {
color: #718096;
/* Medium Gray */
font-size: 0.85rem;
}
.site-footer .made-with-love {
color: #a0aec0;
}
/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
.site-footer {
text-align: center;
}
.site-footer .footer-col {
text-align: center !important;
/* Override text-md-end */
}
.site-footer .footer-links a:hover::after {
right: 50%;
transform: translateX(50%);
}
}
/* ===================================================================
* 25. User Dashboard Styles
* =================================================================== */
/* --- Main Container --- */
.dashboard-container {
display: flex;
min-height: 100vh;
direction: rtl;
background-color: #f4f7f6;
/* Light gray background */
width: 100%;
align-items: flex-start;
/* Align items to the top */
gap: 20px;
/* Add a gutter between sidebar and content */
}
/* --- Sidebar --- */
.dashboard-container .sidebar {
width: 290px;
flex-shrink: 0;
/* Prevent flexbox from shrinking it */
background: #ffffff;
color: #333;
transition: all 0.3s;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
/* Sticky positioning */
position: -webkit-sticky;
position: sticky;
top: 60px;
/* Sizing and alignment */
align-self: flex-start;
/* Critical for sticky in flexbox */
height: calc(100vh - 60px);
overflow-y: auto;
z-index: 100;
}
.dashboard-container .sidebar-header {
padding: 20px;
text-align: center;
border-bottom: 1px solid #e9ecef;
}
.dashboard-container .profile-image {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 10px;
object-fit: cover;
border: 3px solid #006fbe;
}
.dashboard-container .profile-image-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #64748b;
}
.dashboard-container .profile-image-fallback i {
font-size: 30px;
line-height: 1;
}
.dashboard-container .sidebar-header h5 {
margin-bottom: 0;
font-weight: 600;
color: #343a40;
}
.dashboard-container .sidebar-menu {
list-style: none;
padding: 10px 0;
}
.dashboard-container .sidebar-menu li a {
font-size: 15px !important;
display: block;
padding: 12px 20px;
color: #495057;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
border-right: 3px solid transparent;
}
.dashboard-container .sidebar-menu li a:hover {
background-color: #f8f9fa;
color: #006fbe;
border-right-color: #006fbe;
}
.dashboard-container .sidebar-menu li.active a {
background-color: #e9f5ff;
color: #006fbe;
border-right-color: #006fbe;
font-weight: 700;
}
.dashboard-container .sidebar-menu li a i {
margin-left: 10px;
width: 20px;
text-align: center;
}
.dashboard-container .sidebar-menu li.logout {
margin-top: 20px;
border-top: 1px solid #e9ecef;
padding-top: 10px;
}
.dashboard-container .sidebar-menu li.logout a:hover {
color: #dc3545;
border-right-color: #dc3545;
}
/* --- Main Content --- */
.dashboard-container .main-content {
flex-grow: 1;
padding: 20px !important;
/* The margin and width are no longer needed due to the parent being a flex container
and the sidebar being sticky (in-flow) */
transition: margin-right 0.3s;
}
.dashboard-container .main-content h2 {
font-weight: 700;
color: #343a40;
}
/* --- Stat Cards --- */
.dashboard-container .stat-card {
border-radius: 15px;
padding: 25px;
color: #fff;
display: flex;
align-items: flex-start;
justify-content: space-between;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
min-height: 140px;
height: 100%;
}
.dashboard-container .stat-card:hover {
transform: translateY(-5px);
}
.dashboard-container .stat-card-info h5 {
font-size: 1rem;
margin-bottom: 15px;
font-weight: normal;
color: #fff;
}
.dashboard-container .stat-card-info p {
font-size: 2rem;
font-weight: 700;
margin: 0;
color: #fff;
}
.dashboard-container .stat-icon i {
font-size: 3rem;
opacity: 0.5;
}
/* Specific card colors */
.dashboard-container .bg-primary-dark {
background: linear-gradient(135deg, #007bff, #0056b3);
}
.dashboard-container .bg-success-dark {
background: linear-gradient(135deg, #28a745, #1e7e34);
}
.dashboard-container .bg-warning-dark {
background: linear-gradient(135deg, #ffc107, #d39e00);
}
.dashboard-container .bg-danger-dark {
background: linear-gradient(135deg, #dc3545, #b02a37);
}
/* --- Activities Card --- */
.dashboard-container .activities-card {
border-radius: 15px;
border: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
.dashboard-container .activities-card .card-header {
font-weight: 600;
font-size: 1.1rem;
background-color: #fff;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.dashboard-container .activities-table tbody tr {
border-bottom: 1px solid #f1f3f5;
}
.dashboard-container .activities-table tbody tr:last-child {
border-bottom: none;
}
.dashboard-container .activities-table td {
padding: 15px;
vertical-align: middle;
color: #495057;
}
.dashboard-container .activities-table .text-muted {
font-size: 0.9rem;
color: #6c757d !important;
}
/* --- Responsive Design --- */
.dashboard-container .mobile-menu-toggle {
display: none;
position: fixed;
top: 95px;
right: 15px;
z-index: 1055;
background-color: #006fbe;
color: white;
border-radius: 50%;
width: 50px;
height: 50px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.dashboard-container .content-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
transition: opacity 0.3s;
}
.dashboard-container .content-overlay.active {
display: block;
}
@media (max-width: 991.98px) {
.dashboard-container {
display: block;
/* Stack sidebar and content */
gap: 0;
align-items: normal;
}
.dashboard-container .sidebar {
/* Revert to fixed overlay for mobile */
position: fixed;
top: 0;
right: 0;
height: 100%;
align-self: auto;
/* Reset desktop property */
overflow-y: auto;
transform: translateX(290px);
/* Hide sidebar off-screen */
transition: transform 0.3s ease-in-out;
z-index: 1060;
/* Above everything */
}
.dashboard-container .sidebar.active {
transform: translateX(0);
/* Show sidebar */
}
.dashboard-container .main-content {
/* Reset any desktop layout properties */
width: 100%;
margin-right: 0;
padding: 20px;
padding-top: 80px;
/* Space for fixed toggle button */
}
.dashboard-container .mobile-menu-toggle {
display: block;
}
.dashboard-container .stat-card {
margin-bottom: 20px;
}
}
/* --- LOGIN PAGE STYLES --- */
/* Override wrapper flex layout for login page to be full-screen */
.wrapper.lessons-detail:has(> #content.login-page-body) {
display: block;
}
#content.login-page-body {
background-color: #0068af;
color: #e0e0e0;
font-family: 'vazir', sans-serif;
padding: 0 !important;
margin: 0;
width: 100%;
min-height: calc(100vh - 120px);
/* Adjust based on header/footer height */
display: flex;
align-items: center;
justify-content: center;
}
/* #content.login-page-body .h-100 {
padding: 50px 35px 50px 0px;
min-height: calc(100vh - 120px);
width: 100%;
} */
.login-card {
width: 100%;
max-width: 520px;
/* background:linear-gradient(-160deg, #0083e0, #005b9c, #003e6a, #001f35); */
background-color: #00101b;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
direction: rtl;
}
.login-card-body {
padding: 2.5rem;
}
.login-logo {
max-width: 80px;
filter: drop-shadow(0 0 10px rgba(255, 212, 59, 0.5));
}
#content.login-page-body h1 {
color: #ffffff;
}
#content.login-page-body .text-muted {
color: #a0a0a0 !important;
}
.btn-google {
background-color: #ffffff;
color: #1E1E1E;
font-weight: 600;
border: 1px solid #dcdcdc;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.btn-google:hover {
background-color: #f5f5f5;
border-color: #c0c0c0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-accept {
color: #000000;
border: 0;
border-radius: 25px;
font-family: "Vazir", "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.divider-or {
display: flex;
align-items: center;
text-align: center;
color: #7a7a7a;
margin: 1.5rem 0;
font-size: 0.9em;
}
.divider-or::before,
.divider-or::after {
content: '';
flex: 1;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.divider-or:not(:empty)::before {
margin-left: .5em;
}
.divider-or:not(:empty)::after {
margin-right: .5em;
}
#content.login-page-body .form-control {
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 1rem;
}
#content.login-page-body .form-control:focus {
background-color: rgba(0, 0, 0, 0.4);
border-color: #FFD43B;
box-shadow: 0 0 0 0.25rem rgba(255, 212, 59, 0.25);
}
#content.login-page-body .form-floating>label {
color: #a0a0a0;
}
#content.login-page-body .form-floating>.form-control:focus~label,
#content.login-page-body .form-floating>.form-control:not(:placeholder-shown)~label {
color: #FFD43B;
}
#content.login-page-body #otp-section .form-control {
padding-top: 1.5rem;
padding-bottom: 0.85rem;
padding-right: 1rem;
padding-left: 1rem;
direction: ltr;
text-align: left;
}
#content.login-page-body #otp-section .form-floating>label {
padding-top: 0.6rem;
}
#content.login-page-body .form-control:invalid {
border-color: #e74c3c;
}
#content.login-page-body .form-control:valid {
border-color: #2ecc71;
}
.btn-otp {
background-color: #FFD43B;
color: #1E1E1E;
font-weight: 700;
border: none;
padding: 0.8rem;
transition: all 0.3s ease;
}
.btn-otp:hover {
background-color: #f1c40f;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 212, 59, 0.3);
}
.card-footer-links a {
color: #9e9e9e;
font-size: 0.85em;
text-decoration: none;
transition: color 0.3s;
}
.card-footer-links a:hover {
color: #FFD43B;
}
.card-footer-links span {
color: #7a7a7a;
margin: 0 0.5rem;
}
.login-bg-illustration {
/* background: linear-gradient(-75deg, #3776ab, #2c5f89, #1f4867, #123145); */
align-items: center;
justify-content: center;
color: #fff;
}
.python-code-animation {
/* background: linear-gradient(-75deg, #0083e0, #005b9c, #003e6a, #213340); */
font-family: 'monospace';
background-color: #00101b;
padding: 2rem;
border-radius: 10px;
width: 80%;
max-width: 600px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.python-code-animation code {
display: block;
color: #f8f8f2;
opacity: 0;
animation: fadeInLine 0.5s forwards;
}
/* Staggered animation for code lines */
.python-code-animation code:nth-child(1) {
animation-delay: 0.5s;
}
.python-code-animation code:nth-child(2) {
animation-delay: 1.0s;
}
.python-code-animation code:nth-child(3) {
animation-delay: 1.5s;
}
.python-code-animation code:nth-child(4) {
animation-delay: 2.0s;
}
.python-code-animation code:nth-child(5) {
animation-delay: 2.5s;
}
.python-code-animation code:nth-child(6) {
animation-delay: 3.0s;
}
.python-code-animation code:nth-child(7) {
animation-delay: 3.5s;
}
.python-code-animation code:nth-child(8) {
animation-delay: 4.0s;
}
.python-code-animation code:nth-child(9) {
animation-delay: 4.5s;
}
.python-code-animation code:nth-child(10) {
animation-delay: 5.0s;
}
.python-code-animation code:nth-child(11) {
animation-delay: 5.5s;
}
.python-code-animation code:nth-child(12) {
animation-delay: 6.0s;
}
.python-code-animation code:nth-child(13) {
animation-delay: 6.5s;
}
@keyframes fadeInLine {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.python-code-animation .keyword {
color: #3776AB;
font-weight: bold;
}
.python-code-animation .function {
color: #FFD43B;
}
.python-code-animation .class-name {
color: #4db4d7;
}
.python-code-animation .decorator {
color: #7e57c2;
}
.python-code-animation .string {
color: #8bc34a;
}
.python-code-animation .comment {
color: #9E9E9E;
}
/* Responsive */
@media (max-width: 991.98px) {
#content.login-page-body .h-100 {
min-height: auto;
width: 100%;
}
#content.login-page-body {
align-items: flex-start;
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.login-card {
margin: 0 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
}
@media (min-width: 992px) {
#content.login-page-body .h-100 {
padding: 50px 35px 50px 0px;
min-height: calc(100vh - 120px);
width: 100%;
}
}
/* ===================================================================
* 25. Profile Completion Form Styles
* =================================================================== */
.login-page-body {
background-color: #0068Af;
font-family: 'Vazir', sans-serif;
}
.login-card.profile-card {
background: rgba(0, 16, 27, 0.85);
/* #00101b with opacity */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
max-width: 450px;
}
.profile-card .login-card-body {
padding: 2.5rem;
}
.profile-card .h3 {
color: #fff;
}
.mobile-display-box {
background-color: #002d4d;
border-radius: 8px;
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
}
.mobile-display-box a {
color: #a0d8ff;
/* Light blue */
text-decoration: none;
font-size: 0.85rem;
transition: color 0.3s ease;
}
.mobile-display-box a:hover {
color: #fff;
}
.profile-card .form-floating>.form-control {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.profile-card .form-floating>.form-control:focus {
border-color: #ffc107;
/* Python Yellow */
box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
/* Yellow Glow */
}
.profile-card .form-floating>label {
color: rgba(255, 255, 255, 0.5);
right: 0;
transition: all 0.2s ease-in-out;
}
/* Floating label states */
.profile-card .form-floating>.form-control:focus~label,
.profile-card .form-floating>.form-control:not(:placeholder-shown)~label {
transform: scale(.85) translateY(-.5rem) translateX(-.15rem);
color: #ffc107;
}
/* Adjust for RTL placeholder-shown behavior */
.profile-card .form-floating>.form-control::placeholder {
color: transparent;
}
.profile-card .btn-warning {
background-color: #ffc107;
border-color: #ffc107;
color: #00101b;
font-weight: 700;
padding: 12px;
transition: all 0.3s ease;
}
.profile-card .btn-warning:hover {
background-color: #ffca2c;
border-color: #ffca2c;
box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}
.profile-card .card-footer-links a {
color: rgba(255, 255, 255, 0.6);
}
.profile-card .card-footer-links a:hover {
color: #fff;
}
.profile-card .card-footer-links span {
color: rgba(255, 255, 255, 0.4);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.login-card.profile-card {
width: 100%;
max-width: none;
border-radius: 0;
min-height: 100vh;
border: none;
display: flex;
align-items: center;
}
.profile-card .login-card-body {
padding: 2rem;
}
}
/* =========================================
BLOG FEATURED HERO STYLES
Scoped with specific classes to prevent conflicts
========================================= */
.blog-featured-hero {
position: relative;
width: calc(100% - 40px);
/* Creates space on sides */
margin: 20px auto 40px auto;
/* Centers the box with spacing */
height: 600px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
direction: rtl;
/* Enforce RTL */
}
/* Ensure carousel items fill the container */
.blog-featured-hero .carousel-inner,
.blog-featured-hero .carousel-item {
height: 100%;
}
.blog-featured-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
transition: transform 6s ease;
/* Slower zoom for slider effect */
}
.carousel-item.active .blog-featured-hero-bg {
transform: scale(1.05);
/* Slight zoom on active slide */
}
/* Indicators Styling */
/* Indicators Styling */
.blog-featured-hero .carousel-indicators {
direction: ltr;
/* Force LTR for predictable positioning */
margin-left: 40px;
/* Distance from left */
margin-right: 0;
margin-bottom: 40px;
justify-content: flex-start;
/* Left aligned in LTR */
z-index: 10;
}
.blog-featured-hero .carousel-indicators [data-bs-target] {
background-color: #fff;
opacity: 0.5;
transition: all 0.3s;
}
.blog-featured-hero .carousel-indicators .active {
opacity: 1;
background-color: #ffc107;
/* Active color */
width: 50px;
/* Expand active line */
}
.blog-featured-hero:hover .blog-featured-hero-bg {
transform: scale(1.03);
}
.blog-featured-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Dark gradient from bottom (0.9) to top (transparent) */
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
z-index: 2;
pointer-events: none;
/* Let clicks pass through if needed */
}
/* Modern Stacked Hero (2026 Design) */
.blog-featured-section-wrapper {
/* Wrapper inside the full-width bg */
margin: 0px auto 0px auto;
width: calc(100% - 40px);
padding: 20px;
border-radius: 24px;
}
@media (min-width: 992px) {
.blog-featured-section-wrapper {
margin: 0px auto 0px auto;
width: calc(100% - 250px);
}
}
.featured-hero-item {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 20px;
background-color: #1a1a1a;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}
.featured-hero-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.featured-hero-item.main-hero-item {
height: 420px;
/* Reduced height as requested */
}
/* Sub items clean list layout */
.featured-hero-item.sub-hero-item {
height: auto;
min-height: 120px;
display: flex;
flex-direction: row;
align-items: center;
background: transparent;
border: none;
box-shadow: none;
padding: 5px 0;
overflow: visible;
}
.featured-hero-item.sub-hero-item:hover {
transform: translateY(-3px);
box-shadow: none;
}
.featured-hero-item.sub-hero-item .featured-hero-bg {
width: 120px;
height: 100px;
position: relative;
border-radius: 16px;
clip-path: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.featured-hero-item.sub-hero-item:hover .featured-hero-bg {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.featured-hero-item.sub-hero-item .featured-hero-overlay {
display: none;
}
.featured-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Enhanced readability overlay for main item */
.featured-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.1) 100%);
z-index: 1;
}
.featured-hero-item.main-hero-item .featured-hero-overlay {
background: linear-gradient(to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0.2) 100%);
}
.featured-hero-content {
position: absolute;
bottom: 0;
right: 0;
padding: 35px;
z-index: 2;
text-align: right;
width: 100%;
}
/* Text box for main item clarity */
.featured-hero-item.main-hero-item .featured-hero-content {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 40px;
width: 100%;
max-width: 100%;
}
.featured-hero-content.sub-content {
position: relative;
width: auto;
flex-grow: 1;
padding: 0 20px 0 0;
/* Right padding for RTL spacing */
background: transparent;
display: block;
/* Stack title vertically */
text-align: right;
}
.featured-hero-title {
color: #ffffff !important;
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.3;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}
.featured-hero-title.sub-title {
font-size: 1.1rem;
line-height: 1.5;
margin: 0 !important;
font-weight: 800;
color: #333 !important;
/* Dark text for sub items */
text-shadow: none;
transition: color 0.3s ease;
}
.featured-hero-item.sub-hero-item:hover .featured-hero-title.sub-title {
color: #006fbe !important;
/* Highlight title on hover */
}
.featured-hero-desc {
color: #ffffff !important;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 0;
padding-left: 10%;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
padding: 15px;
border-radius: 12px;
border-right: 4px solid #ffc107;
}
@media (max-width: 768px) {
.featured-hero-item.main-hero-item {
height: 350px;
}
.featured-hero-item.sub-hero-item {
height: 200px;
}
.featured-hero-title {
font-size: 1.6rem;
}
.featured-hero-content {
padding: 20px;
}
}
/* =========================================
BLOG LATEST POSTS SECTION
========================================= */
.blog-latest-posts-section {
width: calc(100% - 40px);
margin: 0 auto 60px auto;
direction: rtl;
/* Ensure RTL */
}
/* Responsive container width matches hero */
@media (max-width: 768px) {
.blog-latest-posts-section {
width: calc(100% - 30px);
}
}
/* Increased margin for Desktop only */
@media (min-width: 992px) {
.blog-latest-posts-section {
width: calc(100% - 250px);
}
}
.blog-section-title {
font-size: 1.8rem;
font-weight: 800;
color: #333;
margin-bottom: 40px;
/* Space between title and cards */
margin-top: 20px;
text-align: right;
position: relative;
padding-right: 20px;
}
.blog-section-title::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 100%;
background-color: #ffc107;
/* Yellow accent */
border-radius: 4px;
}
/* See All Button Style */
.btn-see-all {
display: inline-flex;
align-items: center;
padding: 10px 20px;
background-color: transparent;
color: #006fbe;
border: 2px solid #006fbe;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-see-all:hover {
background-color: #006fbe;
color: #fff;
transform: translateX(-5px);
box-shadow: 0 5px 15px rgba(0, 111, 190, 0.2);
}
.btn-see-all i {
transition: transform 0.3s ease;
}
.btn-see-all:hover i {
transform: translateX(-3px);
}
@media (max-width: 576px) {
.btn-see-all {
padding: 8px 16px;
font-size: 0.85rem;
}
}
.blog-post-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.04);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: visible;
height: 100%;
display: flex;
flex-direction: column;
}
.blog-card-img-wrapper {
position: relative;
width: 100%;
padding-top: 66.66%;
/* Aspect Ratio 3:2 */
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.blog-card-img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
/* Hover Effects */
.blog-post-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
.blog-post-card:hover .blog-card-img-wrapper img {
transform: scale(1.1);
}
.blog-card-body {
padding: 24px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: right;
/* RTL Text */
}
.blog-card-title {
font-size: 1.2rem;
font-weight: 700;
color: #333;
margin-bottom: 15px;
line-height: 1.6;
transition: color 0.3s ease;
}
.blog-post-card:hover .blog-card-title {
color: #006fbe;
/* Highlight title on hover */
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
font-size: 0.85rem;
color: #888;
}
.blog-card-link {
margin-top: auto;
/* Push to bottom */
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: 0.95rem;
color: #006fbe;
text-decoration: none;
transition: all 0.3s ease;
}
.blog-card-link i {
margin-right: 8px;
/* Gap for icon */
transition: transform 0.3s ease;
}
.blog-card-link:hover {
color: #ffc107;
}
.blog-card-link:hover i {
transform: translateX(-5px);
/* Move arrow left on hover (RTL) */
}
/* =========================================
BLOG CATEGORIES SECTION
========================================= */
.blog-categories-section {
width: calc(100% - 40px);
margin: 60px auto 50px auto;
direction: rtl;
/* Ensure RTL */
}
@media (min-width: 992px) {
.blog-categories-section {
width: calc(100% - 250px);
}
}
@media (max-width: 768px) {
.blog-categories-section {
width: calc(100% - 30px);
}
}
.blog-categories-container {
display: flex;
gap: 20px;
padding: 15px 5px 25px 5px;
/* Added top/side padding to prevent clipping on hover */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Smooth scroll on iOS */
scrollbar-width: none;
/* Hide scrollbar Firefox */
}
/* Hide scrollbar Chrome/Safari/Opera */
.blog-categories-container::-webkit-scrollbar {
display: none;
}
.blog-category-card {
flex: 0 0 150px;
/* Default width for cards */
height: 150px;
background: #f8f9fa;
/* Light grey background */
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid transparent;
}
@media (min-width: 992px) {
.blog-category-card {
flex: 1;
/* Distribute evenly on desktop */
height: auto;
aspect-ratio: 1/1;
/* Square cards */
max-width: 180px;
}
}
.category-icon {
font-size: 2rem;
color: #006fbe;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.category-name {
font-size: 0.95rem;
font-weight: 700;
color: #333;
margin-bottom: 5px;
transition: all 0.3s ease;
text-align: center;
}
.category-count {
font-size: 0.75rem;
color: #888;
transition: all 0.3s ease;
}
/* Hover Effects */
.blog-category-card:hover {
background-color: #006fbe;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 111, 190, 0.2);
}
.blog-category-card:hover .category-icon,
.blog-category-card:hover .category-name,
.blog-category-card:hover .category-count {
color: #ffffff;
}
@media (max-width: 768px) {
.blog-category-card {
flex: 0 0 110px;
/* Smaller cards on mobile */
height: 110px;
border-radius: 16px;
}
.category-icon {
font-size: 1.5rem;
margin-bottom: 8px;
}
.category-name {
font-size: 0.8rem;
}
.category-count {
font-size: 0.7rem;
}
}
/* =========================================
BLOG LATEST UPDATES SECTION (Compact Bar)
========================================= */
.blog-latest-updates-section {
width: calc(100% - 40px);
margin: 0 auto 60px auto;
direction: rtl;
/* Ensure RTL */
}
@media (min-width: 992px) {
.blog-latest-updates-section {
width: calc(100% - 250px);
}
}
@media (max-width: 768px) {
.blog-latest-updates-section {
width: calc(100% - 30px);
}
}
.blog-updates-bar {
background: #fdfdfd;
/* Very light background */
border: 1px solid rgba(0, 0, 0, 0.03);
border-radius: 12px;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
overflow-x: auto;
/* Horizontal scroll on mobile */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.blog-updates-bar::-webkit-scrollbar {
display: none;
}
.blog-update-item {
display: flex;
align-items: center;
gap: 12px;
padding-left: 20px;
border-left: 1px solid rgba(0, 0, 0, 0.05);
/* Divider */
min-width: max-content;
/* Ensure items don't wrap/squish */
transition: all 0.3s ease;
cursor: default;
}
.blog-update-item:last-child {
border-left: none;
/* No divider for last item */
padding-left: 0;
}
.update-icon {
width: 36px;
height: 36px;
background-color: rgba(0, 111, 190, 0.08);
/* Light tint of brand color */
color: #006fbe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.5s ease;
}
.update-content {
display: flex;
flex-direction: column;
}
.update-title {
font-size: 0.9rem;
font-weight: 600;
/* Medium/Semi-bold */
color: #444;
line-height: 1.2;
transition: color 0.3s ease;
}
.update-meta {
font-size: 0.75rem;
color: #999;
margin-top: 2px;
}
/* Hover Effects */
.blog-update-item:hover .update-title {
color: #006fbe;
}
.blog-update-item:hover .update-icon {
transform: rotate(360deg);
background-color: #006fbe;
color: #fff;
box-shadow: 0 0 10px rgba(0, 111, 190, 0.3);
}
/* Mobile specific for scrolling - items are already set to min-width: max-content */
@media (max-width: 768px) {
.blog-updates-bar {
padding: 15px;
justify-content: flex-start;
/* Start from right in RTL */
}
.blog-update-item {
padding-left: 15px;
margin-left: 15px;
/* Add margin instead of just padding for spacing */
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.blog-update-item:last-child {
margin-left: 0;
border-left: none;
}
.blog-update-item:last-child {
margin-left: 0;
border-left: none;
}
}
/* =========================================
BLOG MOST VIEWED SECTION (Typography Focus)
========================================= */
.blog-most-viewed-section {
width: calc(100% - 40px);
margin: 0 auto 80px auto;
direction: rtl;
}
@media (min-width: 992px) {
.blog-most-viewed-section {
width: calc(100% - 250px);
}
}
@media (max-width: 768px) {
.blog-most-viewed-section {
width: calc(100% - 30px);
}
}
.blog-most-viewed-list {
display: flex;
flex-direction: column;
}
.blog-most-viewed-item {
position: relative;
padding: 25px 30px 25px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
display: flex;
align-items: center;
}
.blog-most-viewed-item:last-child {
border-bottom: none;
}
/* The Number */
.viewed-number {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 6rem;
font-weight: 900;
color: rgba(0, 0, 0, 0.03);
/* Very faint initial color */
line-height: 1;
z-index: 0;
transition: all 0.4s ease;
pointer-events: none;
/* Let clicks pass through */
font-family: sans-serif;
/* Use simple font for number */
}
.viewed-content {
position: relative;
z-index: 1;
/* On top of number */
padding-right: 60px;
/* Space from right to avoid overlap with number start */
display: flex;
flex-direction: column;
}
.viewed-category {
font-size: 0.8rem;
color: #006fbe;
font-weight: 600;
margin-bottom: 8px;
display: inline-block;
}
.viewed-title {
font-size: 1.3rem;
font-weight: 800;
color: #333;
margin-bottom: 10px;
line-height: 1.5;
transition: color 0.3s ease;
}
.viewed-meta {
font-size: 0.85rem;
color: #999;
}
/* Hover Effects */
.blog-most-viewed-item:hover {
background-color: rgb(245, 252, 255);
/* Very subtle background change */
}
.blog-most-viewed-item:hover .viewed-title {
color: #006fbe;
}
.blog-most-viewed-item:hover .viewed-number {
color: rgba(0, 111, 190, 0.1);
/* Brand color faint on hover */
transform: translateY(-50%) scale(1.1);
/* Slight Zoom */
right: 10px;
/* Slight movement */
}
@media (max-width: 768px) {
.viewed-number {
font-size: 4rem;
/* Smaller number on mobile */
right: 5px;
}
.viewed-content {
padding-right: 40px;
}
.viewed-title {
font-size: 1.1rem;
}
.blog-tag-item {
padding: 10px 22px;
/* Slightly larger touch area */
font-size: 0.85rem;
}
}
/* =========================================
BLOG ARCHIVE PAGE STYLES
========================================= */
/* --- Wrapper and General --- */
.blog-archive-wrapper {
background-color: #f8f9fa;
/* Light overall background */
min-height: 100vh;
direction: rtl;
padding-bottom: 60px;
}
/* --- Hero Search Section --- */
.archive-hero-search {
background: linear-gradient(135deg, #006fbe 0%, #004e85 100%);
padding: 60px 0 40px 0;
margin-bottom: 40px;
color: #fff;
border-radius: 0 0 30px 30px;
box-shadow: 0 10px 30px rgba(0, 78, 133, 0.2);
position: relative;
z-index: 100;
}
.archive-search-box {
position: relative;
max-width: 600px;
margin: 0 auto 30px auto;
}
.archive-search-box .form-control {
height: 60px;
border-radius: 30px;
padding-right: 70px;
padding-left: 40px;
border: none;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 1.1rem;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}
.archive-search-box .form-control::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.archive-search-box .form-control:focus {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
color: #fff;
}
.archive-search-box .search-btn {
position: absolute;
left: 5px;
/* top: 5px; */
height: 50px;
width: 50px;
border-radius: 50%;
background-color: #ffc107;
border: none;
color: #333;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 9999;
}
.archive-search-box .search-btn:hover {
/* transform: scale(1.1); */
background-color: #ffdb4d;
}
.archive-filters {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.archive-filters .btn-filter {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
border-radius: 20px;
padding: 8px 20px;
font-size: 0.9rem;
backdrop-filter: blur(5px);
transition: all 0.3s;
}
.archive-filters .btn-filter:hover,
.archive-filters .btn-filter:focus {
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
/* --- Timeline Layout --- */
.archive-timeline-layout {
display: flex;
gap: 20px;
}
.timeline-strip {
width: 60px;
flex-shrink: 0;
position: relative;
border-left: 2px solid #e0e0e0;
/* Timeline Line */
}
.sticky-date {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
padding: 10px 0;
border: 2px solid #006fbe;
border-radius: 50px;
/* Pill shape Vertical */
width: 40px;
margin-right: -21px;
/* Center on line (line is left border) - adjust for RTL */
/* In RTL, border-left is on the left side of the element. */
/* Let's adjust logic: Use a pseudo element for the line or just place it right. */
/* Refined: */
/* The Sidebar is on the Right of the content. */
}
/* Adjust sticky date positioning for RTL */
.timeline-strip {
border-left: none;
border-right: 2px solid #e0e0e0;
}
.sticky-date {
margin-right: -21px;
/* Centers somewhat on the border-right */
}
.sticky-date .year {
font-weight: 800;
font-size: 0.9rem;
color: #006fbe;
display: block;
mix-blend-mode: multiply;
writing-mode: vertical-rl;
/* Vertical Text */
transform: rotate(180deg);
/* Fix orientation */
}
.sticky-date .month {
font-size: 0.8rem;
color: #666;
margin-top: 5px;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* --- Articles Grid & Cards --- */
.archive-article-card {
/* Container handled by Bootstrap col */
}
.archive-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
transition: all 0.4s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.archive-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.archive-card-img {
position: relative;
padding-top: 60%;
/* Aspect Ratio */
overflow: hidden;
}
.archive-card-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.5s ease, transform 0.5s ease;
}
.archive-card:hover .archive-card-img img {
filter: grayscale(0%);
transform: scale(1.05);
}
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 111, 190, 0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.archive-card:hover .card-overlay {
opacity: 1;
}
.read-icon {
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #006fbe;
font-size: 1.2rem;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.archive-card:hover .read-icon {
transform: scale(1);
}
.archive-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.archive-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
margin-bottom: 12px;
}
.cat-tag {
background: rgba(0, 111, 190, 0.1);
color: #006fbe;
padding: 4px 10px;
border-radius: 10px;
font-weight: 600;
}
.read-time {
color: #999;
}
.archive-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
line-height: 1.5;
}
.archive-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
color: #888;
font-size: 0.85rem;
border-top: 1px solid #f0f0f0;
padding-top: 15px;
}
.btn-save {
background: none;
border: none;
color: #aaa;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-save:hover {
color: #ffc107;
transform: scale(1.2);
}
.btn-save.active {
color: #ffc107;
font-weight: bold;
}
.btn-save.active:hover {
color: #ff9800;
}
/* Bookmark Button Wrapper */
.bookmark-btn-wrapper {
position: relative;
display: inline-block;
}
/* Inline Save Message */
.inline-save-message {
position: absolute;
bottom: 100%;
right: 50%;
transform: translateX(50%);
margin-bottom: 10px;
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
color: white;
padding: 10px 16px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
animation: slideInUp 0.3s ease;
z-index: 1000;
}
.inline-save-message.error {
background: linear-gradient(135deg, #f44336 0%, #da190b 100%);
box-shadow: 0 4px 16px rgba(244, 67, 54, 0.3);
}
.inline-save-message.fade-out {
animation: slideOutDown 0.3s ease forwards;
}
.inline-save-message i {
font-size: 1rem;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateX(50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(50%) translateY(0);
}
}
@keyframes slideOutDown {
from {
opacity: 1;
transform: translateX(50%) translateY(0);
}
to {
opacity: 0;
transform: translateX(50%) translateY(10px);
}
}
/* --- Pagination --- */
.archive-pagination .page-link {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 50%;
/* Circular */
margin: 0 5px;
border: none;
background: #fff;
color: #555;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
font-weight: 600;
transition: all 0.3s;
}
.archive-pagination .page-link:hover,
.archive-pagination .page-link.active {
background: #006fbe;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 5px 10px rgba(0, 111, 190, 0.3);
}
/* --- Sidebar Widgets --- */
.archive-widget {
background: #fff;
border-radius: 16px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.widget-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
position: relative;
padding-right: 15px;
}
.widget-title::before {
content: '';
position: absolute;
right: 0;
top: 5px;
height: 15px;
width: 4px;
background: #ffc107;
border-radius: 2px;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-cloud a {
background: #f1f5f9;
color: #555;
padding: 6px 14px;
border-radius: 20px;
text-decoration: none;
font-size: 0.85rem;
transition: all 0.3s;
}
.tag-cloud a:hover {
background: #006fbe;
color: #fff;
}
.author-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.author-item:last-child {
margin-bottom: 0;
}
.author-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background-size: cover;
background-position: center;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-info .name {
font-weight: 600;
font-size: 0.95rem;
color: #333;
}
.author-info .role {
font-size: 0.75rem;
color: #999;
}
.youtube-banner {
background: linear-gradient(45deg, #ff0000, #c00000);
padding: 30px 20px;
text-align: center;
color: #fff;
}
.youtube-banner h5 {
color: #fff;
font-weight: 700;
margin-bottom: 5px;
}
.youtube-banner p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin-bottom: 0;
}
.yt-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.youtube-banner .btn-yt {
background-color: #212529 !important;
color: #ffffff !important;
border-radius: 25px;
padding: 10px 30px;
font-weight: 700;
font-size: 0.95rem;
margin-top: 15px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
display: inline-block;
text-decoration: none;
}
.youtube-banner .btn-yt:hover {
background-color: #000000 !important;
color: #ffffff !important;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
/* =========================================
MOBILE FULLSCREEN FILTER MENU
========================================= */
.mobile-filter-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(10, 25, 47, 0.98) 0%, rgba(0, 111, 190, 0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 9999;
display: flex;
flex-direction: column;
visibility: hidden;
opacity: 0;
transform: translateY(100%);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-filter-overlay.active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.mobile-filter-header {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
}
.filter-header-title {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
}
.mobile-filter-body {
flex-grow: 1;
position: relative;
overflow: hidden;
}
.filter-slide-container {
display: flex;
width: 200%;
height: 100%;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* In RTL:
Flex direction is Right to Left.
View Main is Right. View Sub is Left.
To show Sub, we assume we need to translate content to the Right?
Wait, CSS Transforms don't care about RTL flex direction logic usually.
If flex-direction: row (default rtl):
[Main View] [Sub View] -> (Main is on Right, Sub is on Left).
To see Sub, we need to move Main out to the Right.
So transform: translateX(50%)?
*/
.filter-slide-container.show-sub {
transform: translateX(50%);
}
.filter-view {
width: 50%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.filter-list-group {
list-style: none;
padding: 0;
margin: 0;
}
.filter-list-item {
padding: 22px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.filter-list-item:active {
background: rgba(255, 255, 255, 0.15);
}
.filter-list-item span:first-child {
font-weight: 600;
font-size: 1.05rem;
letter-spacing: 0.3px;
}
.filter-list-item .selected-value {
margin-right: auto;
margin-left: 10px;
font-size: 0.95rem;
color: #ffc107;
font-weight: 500;
}
.filter-list-item .arrow-icon {
font-size: 0.85rem;
opacity: 0.6;
transition: transform 0.3s ease;
}
/* Sub filter adjustments */
.sub-filter-content .list-group-item {
padding: 20px 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
font-size: 1rem;
transition: all 0.2s ease;
}
.sub-filter-content .list-group-item:active {
background-color: rgba(255, 255, 255, 0.1) !important;
padding-right: 30px;
}
/* =========================================
BLOG POPULAR TAGS SECTION
========================================= */
.blog-popular-tags-section {
width: calc(100% - 40px);
margin: 0 auto 100px auto;
/* Spacious bottom margin */
direction: rtl;
}
@media (min-width: 992px) {
.blog-popular-tags-section {
width: calc(100% - 250px);
}
}
@media (max-width: 768px) {
.blog-popular-tags-section {
width: calc(100% - 30px);
}
}
.blog-tags-container {
background-color: #fcfcfc;
/* Minimal soft background */
border: 1px solid rgba(0, 0, 0, 0.02);
border-radius: 20px;
padding: 30px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: flex-start;
/* Align tags to start (right in RTL) */
}
.blog-tag-item {
display: inline-block;
padding: 8px 20px;
font-size: 0.9rem;
color: #666;
border: 1px solid #e0e0e0;
border-radius: 50px;
/* Pill shape */
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
background-color: transparent;
font-weight: 500;
}
/* Hover Effects */
.blog-tag-item:hover {
background-color: #006fbe;
/* Brand color fill */
color: #ffffff;
border-color: #006fbe;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 111, 190, 0.2);
}
@media (max-width: 768px) {
.blog-tags-container {
padding: 20px;
gap: 15px;
/* More space for touch targets */
}
.blog-tag-item {
padding: 10px 22px;
/* Slightly larger touch area */
font-size: 0.85rem;
}
}
@keyframes tags-infinite-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
.archive-tags-slider {
position: relative;
width: 100%;
overflow: hidden;
padding: 5px 0;
margin-top: 20px;
direction: ltr;
/* Control the flow direction for the animation logic */
}
.tags-scroll-container {
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
overflow: hidden;
}
.tags-track {
display: flex;
gap: 15px;
width: max-content;
animation: tags-infinite-scroll 40s linear infinite;
padding: 10px 0;
}
.tags-track:hover {
animation-play-state: paused;
}
.archive-tags-slider .blog-tag-item {
direction: rtl;
/* Keep text direction RTL inside the item */
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 7px 20px;
border-radius: 50px;
white-space: nowrap;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.archive-tags-slider .blog-tag-item:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffc107 !important;
border-color: rgba(255, 193, 7, 0.5);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* ==========================================================================
ARTICLE DETAIL V2 (2026 UX)
========================================================================== */
:root {
--article-primary: #006fbe;
--article-bg-glass: rgba(255, 255, 255, 0.7);
--article-border-glass: rgba(255, 255, 255, 0.3);
--code-bg: #282c34;
--code-header: #21252b;
}
/* Reading Progress Bar */
.reading-progress-container {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: transparent;
z-index: 10000;
}
#readingProgress {
height: 100%;
background: linear-gradient(to left, #ff9800, #ffc107, #ffdb58);
width: 0%;
transition: width 0.1s ease;
}
.article-detail-v2 {
background-color: #f8fafc;
padding-bottom: 60px;
}
/* Hero Section */
.article-hero {
padding: 40px 0 40px;
background: #fff;
border-bottom: 1px solid #edf2f7;
margin-bottom: 10px;
}
.article-category-label {
display: inline-block;
padding: 6px 16px;
background: rgba(0, 111, 190, 0.1);
color: var(--article-primary);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 20px;
}
.article-main-title {
font-size: 3rem;
font-weight: 900;
line-height: 1.3;
color: #1a202c;
margin-bottom: 25px;
}
.article-meta-v2 {
display: flex;
flex-wrap: wrap;
gap: 20px;
color: #718096;
font-size: 0.95rem;
margin-bottom: 40px;
}
.article-meta-v2 span i {
margin-left: 6px;
color: #a0aec0;
}
.featured-image-wrapper {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.featured-image-wrapper img {
width: 100%;
height: auto;
display: block;
}
/* Sidebar & TOC */
.sidebar-glass-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}
.mobile-toc-container {
margin: 30px 0;
}
.mobile-toc-container .sidebar-glass-card {
background: #ffffff;
border: 1px solid #edf2f7;
padding: 20px;
}
.toc-title {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-link {
display: block;
padding: 8px 0;
color: #4a5568;
text-decoration: none !important;
font-size: 0.95rem;
transition: all 0.2s;
border-right: 2px solid transparent;
padding-right: 15px;
}
.toc-link:hover,
.toc-link.active {
color: var(--article-primary);
border-right-color: var(--article-primary);
background: rgba(0, 111, 190, 0.05);
}
/* Floating Share Bar Redesign */
.share-bar-vertical {
display: flex;
flex-direction: column;
gap: 15px;
position: sticky;
top: 120px;
align-items: center;
z-index: 100;
}
.action-btn-v2 {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #4a5568;
border: 1px solid #edf2f7;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none !important;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.action-btn-v2:hover {
background: #f8fafc;
color: var(--article-primary);
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.action-btn-v2.active {
background: var(--article-primary);
color: #fff;
border-color: var(--article-primary);
}
/* Expandable Share Group */
.share-group-v2 {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.share-toggle-v2 {
z-index: 2;
}
.share-options-v2 {
display: flex;
flex-direction: column;
gap: 10px;
position: absolute;
top: 100%;
margin-top: 15px;
opacity: 0;
visibility: hidden;
transform: translateY(-20px) scale(0.8);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
}
.share-group-v2.active .share-options-v2 {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.share-sub-btn {
width: 40px;
height: 40px;
background: #fff;
border: 1px solid #edf2f7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #718096;
transition: all 0.2s;
text-decoration: none !important;
font-size: 0.9rem;
}
.share-sub-btn:hover {
background: var(--article-primary);
color: #fff;
transform: scale(1.1);
}
/* Content Area */
.article-body-v2 {
font-size: 1.15rem;
line-height: 1.8;
color: #2d3748;
}
.article-body-v2 h2 {
font-size: 1.8rem;
font-weight: 800;
margin-top: 50px;
margin-bottom: 20px;
color: #1a202c;
position: relative;
padding-right: 20px;
}
.article-body-v2 h2::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: var(--article-primary);
border-radius: 2px;
}
.article-body-v2 p {
font-size: 18px;
line-height: 1.99;
margin-bottom: 25px;
}
.article-body-v2 blockquote {
margin: 40px 0;
padding: 30px;
background: #f1f5f9;
border-right: 5px solid var(--article-primary);
border-radius: 10px;
font-style: italic;
color: #475569;
}
/* Code Blocks */
.code-block-wrapper {
margin: 35px 0;
background: var(--code-bg);
border-radius: 12px;
overflow: hidden;
direction: ltr;
/* Always LTR for code */
}
.code-header {
background: var(--code-header);
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: #94a3b8;
font-size: 0.85rem;
font-family: inherit;
}
.code-lang {
text-transform: uppercase;
font-weight: 600;
}
.copy-btn {
background: transparent;
border: 1px solid #475569;
color: #94a3b8;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.copy-btn:hover {
background: #475569;
color: #fff;
}
.code-block-wrapper pre {
margin: 0;
padding: 20px;
color: #abb2bf;
overflow-x: auto;
}
/* Author Section */
.author-box-v2 {
margin-top: 80px;
padding: 40px;
background: #fff;
border-radius: 24px;
display: flex;
align-items: center;
gap: 30px;
border: 1px solid #edf2f7;
}
.author-avatar-v2 {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #f8fafc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.author-detail-v2 h4 {
margin-bottom: 10px;
font-weight: 800;
}
.author-detail-v2 p {
color: #718096;
margin-bottom: 15px;
font-size: 0.95rem;
}
/* Prev/Next Nav */
.article-nav-v2 {
margin-top: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.nav-card-v2 {
padding: 20px;
background: #fff;
border-radius: 20px;
display: flex;
align-items: center;
gap: 15px;
text-decoration: none !important;
color: inherit;
border: 1px solid #edf2f7;
transition: all 0.3s;
}
.nav-card-v2:hover {
border-color: var(--article-primary);
transform: translateY(-5px);
}
.nav-thumb-v2 {
width: 70px;
height: 70px;
border-radius: 12px;
object-fit: cover;
}
.nav-content-v2 span {
display: block;
font-size: 0.8rem;
color: #a0aec0;
margin-bottom: 4px;
}
.nav-content-v2 h6 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.4;
}
@media (max-width: 991px) {
.article-hero {
padding: 30px 0 20px !important;
/* Reduced top spacing by 10px more */
}
.article-detail-v2 .container-xl.mt-5 {
margin-top: 1rem !important;
}
.article-main-title {
font-size: 1.8rem;
/* Slightly smaller for mobile */
margin-bottom: 20px;
}
.article-meta-v2 {
color: #71809694 !important;
font-size: 0.80rem !important;
justify-content: center;
gap: 12px !important;
}
.article-meta-v2 span i {
color: inherit !important;
}
.article-body-v2 {
font-size: 16px !important;
line-height: 1.99 !important;
}
.article-body-v2 p {
font-size: 16px !important;
line-height: 1.99 !important;
}
/* Ensure breadcrumb items don't hide or wrap awkwardly */
.breadcrumb {
flex-wrap: nowrap !important;
justify-content: center !important;
overflow-x: auto;
padding-bottom: 5px;
}
.breadcrumb-item {
font-size: 0.8rem;
white-space: nowrap;
display: flex !important;
align-items: center;
}
.breadcrumb-item+.breadcrumb-item::before {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.share-bar-vertical {
flex-direction: row;
position: static;
margin-bottom: 30px;
justify-content: center;
}
.share-btn-v2:hover {
transform: translateY(-5px);
}
.article-nav-v2 {
grid-template-columns: 1fr;
}
.author-box-v2 {
flex-direction: column;
padding: 25px;
text-align: center;
}
}
/* Sidebar CTA Card Overrides */
.sidebar-cta-card {
background: linear-gradient(135deg, #006fbe 0%, #004e85 100%) !important;
}
.sidebar-cta-card h5,
.sidebar-cta-card p,
.sidebar-cta-card i {
color: #ffffff !important;
}
.btn-sidebar-cta {
background-color: #ffffff !important;
color: #006fbe !important;
transition: all 0.3s ease;
border: none;
}
.btn-sidebar-cta:hover {
background-color: #f0f0f0 !important;
color: #004e85 !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Smart Recommendation Widget */
.smart-recommendation-widget {
margin-top: 45px;
}
.smart-widget-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.smart-widget-title {
font-size: 1.1rem;
font-weight: 800;
margin: 0;
color: #1a202c;
}
/* Pulse Animation */
.pulse-icon {
width: 12px;
height: 12px;
background: #006fbe;
border-radius: 50%;
position: relative;
display: inline-block;
}
.pulse-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: inherit;
border-radius: inherit;
animation: pulse-ring 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes pulse-ring {
0% {
transform: scale(0.5);
opacity: 0.8;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* Card Styles */
.smart-cards-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.article-smart-card {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
background: #fff;
border: 1px solid #f0f2f5;
border-radius: 12px;
text-decoration: none !important;
color: inherit;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Hover Indicator */
.article-smart-card::before {
content: '';
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 3px;
height: 0;
background: #006fbe;
transition: height 0.3s ease;
}
.article-smart-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border-color: #e2e8f0;
}
.article-smart-card:hover::before {
height: 70%;
}
.smart-card-thumb {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 8px;
overflow: hidden;
}
.smart-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.article-smart-card:hover .smart-card-thumb img {
transform: scale(1.1);
}
.smart-card-content {
flex: 1;
min-width: 0;
}
.smart-card-title {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.4;
color: #2d3748;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.2s;
}
.article-smart-card:hover .smart-card-title {
color: #006fbe;
}
.smart-card-meta {
font-size: 0.75rem;
color: #a0aec0;
display: flex;
align-items: center;
gap: 10px;
}
/* Mobile 2x2 Grid */
@media (max-width: 991px) {
.smart-recommendation-widget {
margin-top: 40px;
}
.smart-cards-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.article-smart-card {
flex-direction: column;
text-align: center;
padding: 15px;
}
.smart-card-thumb {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.smart-card-meta {
justify-content: center;
}
/* Mobile Engagement Box */
.mobile-engagement-box {
background: #ffffff;
border: 1px dashed #e2e8f0;
border-radius: 20px;
padding: 24px;
margin-top: 40px;
margin-bottom: -40px;
/* Offset author box margin */
text-align: center;
position: relative;
z-index: 1;
}
.engagement-text {
font-size: 0.95rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 15px;
line-height: 1.6;
}
.engagement-actions {
display: flex;
justify-content: center;
gap: 12px;
}
.eng-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 10px;
border-radius: 14px;
font-size: 0.8rem;
font-weight: 700;
border: 1px solid transparent;
transition: all 0.2s;
}
.eng-btn-save {
background: #f8fafc;
color: #4a5568;
border-color: #edf2f7;
}
.eng-btn-save.active {
background: #fffaf0;
color: #dd6b20;
border-color: #fbd38d;
}
.eng-btn-favorite {
background: #fff5f5;
color: #e53e3e;
border-color: #feb2b2;
}
.eng-btn-favorite.active {
background: #e53e3e !important;
color: #fff !important;
border-color: #e53e3e !important;
}
.eng-btn-share {
background: #006fbe;
color: #fff;
}
}
/* --- Recommended Content Section 2026 Style --- */
.ap-recommended-section {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.ap-glass-card {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 20px;
overflow: hidden;
height: 100%;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
position: relative;
display: flex;
flex-direction: column;
text-align: right;
}
.ap-glass-card:hover {
transform: translateY(-10px) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
border-color: rgba(0, 123, 255, 0.3) !important;
}
.ap-card-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.ap-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
border-radius: 20px 20px 0 0;
}
.ap-glass-card:hover .ap-card-img-wrap img {
transform: scale(1.1);
}
.ap-badge {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 111, 190, 0.85);
backdrop-filter: blur(8px);
color: #fff;
padding: 6px 14px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ap-card-body {
padding: 28px 22px !important;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.ap-card-title {
font-size: 1.2rem !important;
font-weight: 800 !important;
line-height: 1.8 !important;
color: #2d3436 !important;
margin-top: 15px !important;
margin-bottom: 25px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ap-card-meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 30px !important;
/* Increased significantly */
color: #636e72 !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
margin-top: auto !important;
padding-top: 15px !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.ap-card-meta i {
font-size: 0.9rem;
margin-left: 4px;
}
/* Horizontal Scroll for Mobile */
@media (max-width: 767.98px) {
.ap-recommended-section {
position: relative;
}
.ap-scroll-container {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 20px;
padding: 10px 5px 45px 5px !important;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.ap-scroll-container::-webkit-scrollbar {
display: none;
}
.ap-card-col {
flex: 0 0 82% !important;
max-width: 82% !important;
scroll-snap-align: center;
}
.ap-recommended-section::after {
content: '•••';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
color: #006fbe;
font-size: 26px;
letter-spacing: 6px;
opacity: 0.5;
animation: ap-swipe-hint 2s infinite;
}
}
@keyframes ap-swipe-hint {
0%,
100% {
transform: translateX(-50%);
opacity: 0.5;
}
50% {
transform: translateX(-40%);
opacity: 0.9;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.ap-glass-card {
background: rgba(30, 39, 46, 0.7);
border-color: rgba(255, 255, 255, 0.1);
}
.ap-card-title {
color: #f1f2f6;
}
.ap-card-meta {
color: #a4b0be;
}
.ap-section-header h3 {
color: #ffffff;
}
}
/* --- Latest System Notifications Style --- */
.bg-primary-soft {
background: rgba(0, 111, 190, 0.1) !important;
}
.bg-blue-soft {
background: rgba(52, 152, 219, 0.1);
}
.bg-green-soft {
background: rgba(46, 204, 113, 0.1);
}
.bg-orange-soft {
background: rgba(243, 156, 18, 0.1);
}
.bg-purple-soft {
background: rgba(155, 89, 182, 0.1);
}
.bg-red-soft {
background: rgba(231, 76, 60, 0.1);
}
.text-purple {
color: #9b59b2;
}
.ap-notifications-list {
display: flex;
flex-direction: column;
}
.ap-notification-item {
display: flex;
gap: 20px;
padding: 20px 25px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
transition: all 0.3s ease;
position: relative;
text-align: right;
}
.ap-notification-item:last-child {
border-bottom: none;
}
.ap-notification-item:hover {
background: rgba(0, 111, 190, 0.02);
transform: translateX(-5px);
}
.ap-notification-item.unread {
background: rgba(0, 111, 190, 0.03);
}
.ap-notification-item.unread::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
background: #006fbe;
}
.ap-noti-icon {
width: 50px;
height: 50px;
min-width: 50px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.ap-noti-content {
flex-grow: 1;
}
.ap-noti-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.ap-noti-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0;
color: #2d3436;
}
.ap-noti-time {
font-size: 0.75rem;
color: #a4b0be;
font-weight: 500;
}
.ap-noti-text {
font-size: 0.88rem;
color: #636e72;
margin-bottom: 0;
line-height: 1.6;
}
@media (max-width: 768px) {
.ap-notification-item {
padding: 15px;
gap: 15px;
}
.ap-noti-icon {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1rem;
}
.ap-noti-header {
flex-direction: column;
align-items: flex-start;
}
.ap-noti-time {
margin-top: 4px;
}
}
/* Dark Mode Support for Notifications */
@media (prefers-color-scheme: dark) {
.ap-notification-item:hover {
background: rgba(255, 255, 255, 0.03);
}
.ap-notification-item.unread {
background: rgba(255, 255, 255, 0.05);
}
.ap-noti-title {
color: #f1f2f6;
}
.ap-noti-text {
color: #a4b0be;
}
.bg-primary-soft {
background: rgba(0, 111, 190, 0.2) !important;
}
.bg-blue-soft {
background: rgba(52, 152, 219, 0.2);
}
.bg-green-soft {
background: rgba(46, 204, 113, 0.2);
}
.bg-orange-soft {
background: rgba(243, 156, 18, 0.2);
}
.bg-purple-soft {
background: rgba(155, 89, 182, 0.2);
}
.bg-red-soft {
background: rgba(231, 76, 60, 0.2);
}
}
/* --- Smart Welcome Card Style --- */
.ap-welcome-card {
background: linear-gradient(135deg, #006fbe 0%, #00d2ff 100%);
border-radius: 24px;
color: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 111, 190, 0.2);
margin: 20px 0 35px 0;
}
.ap-welcome-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 40px;
position: relative;
z-index: 2;
}
.ap-welcome-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 250px;
height: 250px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 1;
}
.ap-welcome-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.ap-welcome-subtitle {
font-size: 1.05rem;
opacity: 0.95;
margin-bottom: 22px;
font-weight: 500;
}
.ap-highlight {
background: rgba(255, 255, 255, 0.2);
padding: 2px 10px;
border-radius: 8px;
font-weight: 700;
}
.ap-welcome-footer {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.ap-btn-welcome {
background: #ffffff;
color: #006fbe;
font-weight: 800;
border-radius: 12px;
padding: 10px 24px;
transition: all 0.3s ease;
border: none;
font-size: 0.95rem;
}
.ap-btn-welcome:hover {
background: #f8f9fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
color: #005691;
}
.ap-welcome-status {
font-size: 0.9rem;
background: rgba(0, 0, 0, 0.15);
padding: 7px 14px;
border-radius: 10px;
backdrop-filter: blur(5px);
font-weight: 600;
}
.ap-welcome-visual {
font-size: 4.5rem;
opacity: 0.9;
display: flex;
align-items: center;
justify-content: center;
}
.ap-rocket-anim {
animation: ap-rocket-float 4s ease-in-out infinite;
display: inline-block;
}
@keyframes ap-rocket-float {
0%,
100% {
transform: translateY(0) rotate(5deg);
}
50% {
transform: translateY(-15px) rotate(-5deg);
}
}
@media (max-width: 991px) {
.ap-welcome-visual {
display: none;
}
}
@media (max-width: 768px) {
.ap-welcome-wrapper {
padding: 30px 20px;
text-align: center;
flex-direction: column;
}
.ap-welcome-title {
font-size: 1.3rem;
}
.ap-btn-welcome {
width: 100%;
margin-bottom: 10px;
}
}
/* ========================================
Archive Sidebar Widgets - Popular & Updated
======================================== */
/* Popular Articles Widget */
.sidebar-popular-widget {
background: linear-gradient(135deg, #fff5e6 0%, #ffffff 100%);
border: 1px solid #ffe0b2;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(255, 152, 0, 0.08);
transition: all 0.3s ease;
}
.sidebar-popular-widget:hover {
box-shadow: 0 8px 30px rgba(255, 152, 0, 0.15);
transform: translateY(-2px);
}
.sidebar-popular-widget .widget-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #ffa726;
display: flex;
align-items: center;
}
.popular-articles-list {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Vertical Card Design */
.popular-article-card {
display: block;
background: #fff;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid transparent;
}
.popular-article-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(255, 152, 0, 0.2);
border-color: #ffa726;
}
.popular-card-image {
position: relative;
width: 100%;
height: 160px;
overflow: hidden;
background: #f5f5f5;
}
.popular-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.popular-article-card:hover .popular-card-image img {
transform: scale(1.08);
}
.popular-rank {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
border: 2px solid #fff;
}
.popular-card-body {
padding: 14px 16px;
}
.popular-card-title {
font-size: 0.95rem;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.5em;
}
.popular-article-card:hover .popular-card-title {
color: #ff9800;
}
/* Recently Updated Widget */
.sidebar-updated-widget {
background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
border: 1px solid #bbdefb;
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(33, 150, 243, 0.08);
transition: all 0.3s ease;
}
.sidebar-updated-widget:hover {
box-shadow: 0 8px 30px rgba(33, 150, 243, 0.15);
transform: translateY(-2px);
}
.sidebar-updated-widget .widget-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #42a5f5;
display: flex;
align-items: center;
}
.updated-articles-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.updated-article-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px;
background: rgba(255, 255, 255, 0.5);
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(66, 165, 245, 0.1);
}
.updated-article-item:hover {
background: #fff;
border-color: #42a5f5;
transform: translateX(-5px);
box-shadow: 0 5px 15px rgba(33, 150, 243, 0.12);
}
.updated-article-thumb {
width: 70px;
height: 70px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
background: #f0f0f0;
}
.updated-article-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.updated-article-item:hover .updated-article-thumb img {
transform: scale(1.1);
}
.updated-article-content {
flex: 1;
padding-top: 2px;
}
.updated-article-title {
font-size: 0.88rem;
font-weight: 600;
color: #444;
margin: 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s ease;
}
.updated-article-item:hover .updated-article-title {
color: #2196f3;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.sidebar-popular-widget,
.sidebar-updated-widget {
margin-top: 30px;
}
.popular-article-item,
.updated-article-item {
padding: 14px;
}
.popular-article-thumb {
width: 140px;
height: 90px;
}
.updated-article-thumb {
width: 90px;
height: 90px;
}
}
@media (max-width: 576px) {
.sidebar-popular-widget,
.sidebar-updated-widget {
padding: 18px;
}
.popular-article-thumb {
width: 100px;
height: 70px;
}
.updated-article-thumb {
width: 70px;
height: 70px;
}
.popular-article-title,
.updated-article-title {
font-size: 0.85rem;
}
}
/* Popular Widget Responsive Updates */
@media (max-width: 991px) {
.popular-card-image {
height: 180px;
}
}
@media (max-width: 576px) {
.popular-card-image {
height: 140px;
}
.popular-card-title {
font-size: 0.9rem;
min-height: 4em;
}
}
/* Article Detail Category Styles */
.article-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.article-category-label {
background: rgba(0, 111, 190, 0.1);
color: #006fbe;
padding: 6px 16px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.article-category-label:hover {
background: #006fbe;
color: white;
transform: translateY(-2px);
}
/* Modern Article Tags 2025 Style */
.article-tags-wrapper {
background: #f8f9fa;
padding: 25px;
border-radius: 16px;
border: 1px solid #eee;
}
.tags-header {
font-size: 1.1rem;
color: #444;
}
.article-modern-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.modern-tag-item {
background: #ffffff;
border: 1px solid #e0e0e0;
padding: 10px 20px;
border-radius: 12px;
color: #555;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}
.tag-symbol {
color: #006fbe;
margin-left: 6px;
font-weight: 700;
}
.modern-tag-item:hover {
background: #006fbe;
color: #ffffff;
border-color: #006fbe;
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 20px rgba(0, 111, 190, 0.2);
}
.modern-tag-item:hover .tag-symbol {
color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.article-tags-wrapper {
padding: 20px;
}
.modern-tag-item {
padding: 5px 10px;
font-size: 0.8rem;
}
}
/* =========================================
Article Detail Comments Premium (V3)
========================================= */
.comments-section-v2 {
margin-top: 80px;
padding-top: 50px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
}
.comments-section-v2::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
background: #006fbe;
border-radius: 2px;
}
.form-title-v2 {
font-size: 1.6rem;
font-weight: 800;
margin-bottom: 40px;
color: #1a202c;
display: flex;
align-items: center;
gap: 15px;
}
.form-title-v2::before {
content: '\f086';
/* fa-comment-dots */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #006fbe;
font-size: 1.8rem;
}
/* --- Form Styles --- */
.comment-form-v2 {
background: #ffffff;
padding: 35px;
border-radius: 24px;
margin-bottom: 60px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
}
.comment-form-v2::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, #006fbe, #00a6fb);
}
.comment-textarea-v2 {
background-color: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 20px;
font-size: 1rem;
color: #4a5568;
transition: all 0.3s ease;
min-height: 150px;
}
.comment-textarea-v2:focus {
background-color: #fff;
border-color: #006fbe;
box-shadow: 0 0 0 4px rgba(0, 111, 190, 0.1);
}
.submit-comment-btn {
background: linear-gradient(135deg, #006fbe 0%, #004e86 100%);
color: white;
border: none;
padding: 10px 25px;
border-radius: 10px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 20px rgba(0, 111, 190, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
}
.submit-comment-btn::after {
content: '\f1d8';
/* fa-paper-plane */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.9em;
transition: transform 0.3s;
}
.submit-comment-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 111, 190, 0.3);
}
.submit-comment-btn:hover::after {
transform: translate(-3px, -3px);
}
/* --- Comment Cards --- */
.comments-list-v2 {
display: flex;
flex-direction: column;
gap: 30px;
}
.comment-item-v2 {
background: #fff;
border-radius: 20px;
padding: 30px;
position: relative;
border: 1px solid #edf2f7;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Level 0 Hover */
.comment-item-v2:not(.reply):hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
border-color: #e2e8f0;
z-index: 10;
}
/* Avatar & connecting lines */
.comment-header-v2 {
display: flex;
align-items: center;
margin-bottom: 18px;
position: relative;
}
.comment-avatar-v2 {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-left: 18px;
border: 3px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.comment-user-info {
display: flex;
flex-direction: column;
}
.comment-user-info h6 {
margin: 0;
font-weight: 800;
font-size: 1.05rem;
color: #2d3748;
}
.comment-user-info span {
font-size: 0.85rem;
color: #a0aec0;
margin-top: 4px;
}
.comment-content-v2 {
color: #4a5568;
line-height: 1.8;
font-size: 1rem;
/* padding-right: 78px; Align under name */
}
/* Replies (Nested) Styling */
.comment-item-v2.reply {
margin-top: 25px;
margin-right: 30px;
/* Reduced specific indent, rely on structure */
background: #f8fafc;
border: none;
border-right: 3px solid #006fbe;
border-radius: 12px 0 0 12px;
/* Stylish squared corner on right */
padding: 20px 25px;
}
/* Nested Thread Line Visual (Optional enhancement) */
.comment-item-v2.reply::before {
/* Implicit thread line handled by border-right */
}
/* Level 2 Indent (Grandchild) */
.comment-item-v2.reply .comment-item-v2.reply {
margin-right: 20px;
background: #ffffff;
border-right: 3px solid #cbd5e0;
border: 1px solid #edf2f7;
border-right-width: 3px;
}
/* Reply Action */
.text-end {
text-align: left !important;
/* Move reply button to left in RTL */
}
.reply-btn-v2 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
background-color: rgba(0, 111, 190, 0.08);
color: #006fbe;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none !important;
transition: all 0.2s;
margin-top: 5px;
/* Reduced from 10px */
}
.reply-btn-v2 i {
margin-left: 8px;
/* Fixed: use margin-left for RTL separation */
margin-right: 0;
font-size: 0.8rem;
}
.reply-btn-v2:hover {
background-color: #006fbe;
color: #fff;
transform: scale(1.05);
}
/* Replying Alert */
#replyingToAlert {
background: #ebf8ff;
border: 1px solid #bee3f8;
color: #2c5282;
border-radius: 12px;
padding: 10px 20px;
margin-bottom: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.comment-item-v2 {
padding: 20px;
}
.comment-avatar-v2 {
width: 45px;
height: 45px;
margin-left: 12px;
}
.comment-content-v2 {
padding-right: 0;
font-size: 0.95rem;
}
.comment-item-v2.reply {
margin-right: 15px;
padding: 15px;
}
.form-title-v2 {
font-size: 1.3rem;
}
.comment-form-v2 {
padding: 20px;
}
}
/* =========================================
Toggle Replies (Collapse/Expand)
========================================= */
.btn-toggle-replies {
background: none;
border: none;
color: #006fbe;
font-size: 0.9rem;
font-weight: 600;
margin-top: 0px;
/* Removed extra top margin */
margin-right: 15px;
/* RTL spacing */
display: inline-flex;
align-items: center;
gap: 10px;
/* Increased gap */
cursor: pointer;
transition: all 0.2s;
padding: 5px 0;
}
.btn-toggle-replies:hover {
color: #004e86;
}
.btn-toggle-replies i {
transition: transform 0.3s;
font-size: 0.8rem;
}
.btn-toggle-replies.active i {
transform: rotate(180deg);
}
.replies-container {
animation: slideDownFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: top;
will-change: transform, opacity;
}
@keyframes slideDownFade {
0% {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* =========================================
PROFILE EDIT PAGE STYLES (PREMIUM V2)
========================================= */
/* Unified Container for all user panel pages */
.user-panel-content {
padding: 40px 0;
direction: rtl;
}
/* Premium Header */
.profile-header-premium {
position: relative;
padding: 20px 0;
}
.header-accent {
position: absolute;
right: 0;
top: 0;
width: 6px;
height: 100%;
background: linear-gradient(to bottom, #006fbe, #00c6ff);
border-radius: 10px;
}
.profile-header-premium .header-content {
padding-right: 25px;
}
.profile-card-glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
/* Sidebar Specifics */
.sticky-sidebar {
position: sticky;
top: 20px;
}
.user-email-display {
font-size: 0.85rem;
word-break: break-all;
}
.badge-premium {
background: linear-gradient(135deg, #fff3e0 0%, #ffcc80 100%);
color: #e65100;
padding: 6px 15px;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 800;
display: inline-block;
border: 1px solid #ffe0b2;
}
.profile-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.stat-mini-box {
background: #f8fafc;
padding: 12px;
border-radius: 15px;
display: flex;
flex-direction: column;
}
.stat-mini-box .stat-value {
font-weight: 800;
color: #006fbe;
font-size: 1.1rem;
}
.stat-mini-box .stat-label {
font-size: 0.7rem;
color: #718096;
}
.profile-progress {
height: 8px;
border-radius: 10px;
background-color: #edf2f7;
overflow: hidden;
}
.bg-success-gradient {
background: linear-gradient(to left, #48bb78, #38a169);
}
/* Form Decorations */
.section-divider {
display: flex;
align-items: center;
color: #4a5568;
font-weight: 800;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.section-divider span {
background: #f1f5f9;
padding: 5px 15px;
border-radius: 10px;
}
.section-divider::after {
content: "";
flex: 1;
height: 2px;
background: #edf2f7;
margin-right: 15px;
}
/* Avatar Styling */
.avatar-preview {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 0 auto;
position: relative;
border: 4px solid #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.avatar-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-preview-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #64748b;
}
.avatar-preview-fallback i {
font-size: 48px;
line-height: 1;
}
.avatar-upload-wrapper {
position: relative;
display: inline-block;
}
.avatar-edit-btn {
position: absolute;
bottom: 5px;
left: 5px;
width: 38px;
height: 38px;
background: #006fbe;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 111, 190, 0.3);
z-index: 5;
transition: all 0.3s ease;
}
.avatar-edit-btn:hover {
transform: scale(1.1);
background: #004e86;
}
input[type="file"] {
margin-top: 25px;
font-size: 0.85rem;
border-radius: 10px;
cursor: pointer;
}
.profile-info-footer {
padding-top: 20px;
}
.profile-info-footer .status-label {
display: inline-block;
margin-left: 5px;
color: #718096;
}
.floating-label-group {
position: relative;
}
.floating-label-group .form-control {
background: #f8fafc;
border: 2px solid #edf2f7;
border-radius: 18px;
padding: 24px 55px 10px 20px;
height: 70px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #2d3748;
font-weight: 500;
}
.floating-label-group textarea.form-control {
height: 140px;
padding-top: 35px;
}
.floating-label-group label {
position: absolute;
top: 50%;
right: 55px;
transform: translateY(-50%);
color: #a0aec0;
transition: all 0.3s;
pointer-events: none;
font-size: 0.95rem;
}
.floating-label-group textarea~label {
top: 35px;
}
.floating-label-group .field-icon {
position: absolute;
top: 50%;
right: 22px;
transform: translateY(-50%);
color: #cbd5e0;
font-size: 1.1rem;
}
.floating-label-group textarea~.field-icon {
top: 35px;
}
.floating-label-group .form-control:focus,
.floating-label-group .form-control.has-value {
background: #fff;
border-color: #006fbe;
/* box-shadow: 0 0 0 4px rgba(0, 111, 190, 0.1); */
}
.floating-label-group .form-control:focus~label,
.floating-label-group .form-control.has-value~label {
top: 18px;
font-size: 0.75rem;
font-weight: 800;
color: #006fbe;
}
.floating-label-group .form-control:focus~.field-icon {
color: #006fbe;
}
.field-help-text {
font-size: 0.7rem;
color: #a0aec0;
margin-right: 20px;
margin-top: 5px;
display: block;
}
/* Save Button - High Contrast Premium */
.user-panel-content .btn-save-profile {
background: #00c879 !important;
color: #ffffff !important;
border: none !important;
border-radius: 16px;
font-weight: 700;
font-size: 1.05rem;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
transition: all 0.4s;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
}
.user-panel-content .btn-save-profile:hover {
background: #006fbe !important;
color: #ffffff !important;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 111, 190, 0.3);
}
.user-panel-content .btn-save-profile:active {
transform: scale(0.96);
}
/* Utility */
.fs-sm {
font-size: 0.85rem;
}
.fs-xs {
font-size: 0.75rem;
}
@media (max-width: 991px) {
.sticky-sidebar {
position: static;
}
.profile-card-glass {
padding: 25px !important;
}
.user-panel-content .btn-save-profile {
padding: 10px 20px !important;
font-size: 0.9rem !important;
width: 100%;
}
}
/* =========================================
ACTIVITY PAGE STYLES (PREMIUM)
========================================= */
/* Kept for backward compatibility - use user-panel-content instead */
.activity-container {
padding: 40px 0;
direction: rtl;
}
.stat-icon-wrap {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 1.4rem;
}
/* Color Palette Utilities */
.bg-blue-soft {
background-color: #e3f2fd;
}
.bg-green-soft {
background-color: #e8f5e9;
}
.bg-purple-soft {
background-color: #f3e5f5;
}
.bg-orange-soft {
background-color: #fff3e0;
}
.bg-primary-soft {
background-color: rgba(0, 111, 190, 0.1);
}
.bg-success-soft {
background-color: rgba(0, 200, 121, 0.1);
}
.bg-warning-soft {
background-color: rgba(255, 193, 7, 0.1);
}
.bg-danger-soft {
background-color: rgba(255, 68, 68, 0.1);
}
.text-purple {
color: #8e24aa;
}
.text-light-gray {
color: #cbd5e0;
}
/* Timeline Styles */
.activity-timeline {
position: relative;
padding-right: 20px;
}
.activity-timeline::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 2px;
height: 100%;
background: #edf2f7;
}
.timeline-item {
position: relative;
padding-bottom: 30px;
/* padding-right: 30px; */
}
.timeline-icon {
position: absolute;
right: -11px;
top: 0;
width: 24px;
height: 24px;
/* background: #006fbe; */
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
border: 4px solid #fff;
box-shadow: 0 0 10px rgba(0, 111, 190, 0.2);
}
.timeline-content {
background: #f8fafc;
padding: 15px;
border-radius: 15px;
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-content {
background: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.activity-time {
font-size: 0.75rem;
color: #a0aec0;
}
.activity-text {
font-size: 0.9rem;
margin-bottom: 0;
}
.activity-quote {
font-style: italic;
font-size: 0.8rem;
border-right: 3px solid #cbd5e0;
padding-right: 10px;
}
/* Recommended Mini List */
.recommended-item-box {
transition: transform 0.3s ease;
}
.recommended-item-box:hover {
transform: translateX(-5px);
}
.recommended-img-mini img {
width: 100px;
height: 70px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.bg-primary-gradient {
background: linear-gradient(135deg, #006fbe 0%, #00c6ff 100%) !important;
}
.fs-xs {
font-size: 0.75rem !important;
}
.pr-3 {
padding-right: 1rem !important;
}
.italic {
font-style: italic;
}
/* Premium Segmented Control for Tabs (Used in Activity) */
.custom-segmented-control {
background: rgba(240, 242, 245, 0.8);
padding: 5px;
border-radius: 15px;
display: flex;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.custom-segmented-control .nav-item {
flex: 1;
}
.custom-segmented-control .nav-link {
border-radius: 12px;
color: #6c757d;
font-weight: bold;
font-size: 0.9rem;
transition: all 0.3s ease;
border: none;
width: 100%;
padding: 10px;
background: transparent;
}
.custom-segmented-control .nav-link.active {
background: white !important;
color: #006fbe !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.custom-segmented-control .nav-link.active i,
.custom-segmented-control .nav-link.active span:not(.badge) {
color: #006fbe !important;
}
/* Tab Pane Mobile Responsive Helper */
@media (min-width: 992px) {
.tab-pane-mobile {
display: block !important;
opacity: 1 !important;
}
}
@media (max-width: 991.98px) {
.tab-pane-mobile:not(.active) {
display: none !important;
}
.tab-pane-mobile.fade {
transition: opacity 0.15s linear;
}
.tab-pane-mobile.fade:not(.show) {
opacity: 0;
}
.profile-card-glass-mobile-fix {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
}
/* UI Enhancements */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rounded-4 {
border-radius: 1.5rem !important;
}
.rounded-5 {
border-radius: 2.5rem !important;
}
.profile-card-glass {
border-radius: 2rem !important;
}
.stat-icon-wrap {
border-radius: 1.2rem !important;
}
.timeline-content {
border-radius: 1.5rem !important;
}
@media (max-width: 768px) {
.activity-timeline {
padding-right: 15px;
}
.timeline-icon {
right: -10px;
}
}
.breadcrumb-custom {
font-size: 0.85rem;
}
.breadcrumb-custom span {
transition: color 0.3s ease;
}
/* =========================================
FAVORITES PAGE STYLES
========================================= */
.favorite-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
position: relative;
}
.favorite-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.9);
}
.favorite-img-wrapper {
position: relative;
height: 180px;
overflow: hidden;
}
.favorite-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.favorite-card:hover .favorite-img-wrapper img {
transform: scale(1.1);
}
.favorite-badge {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 111, 190, 0.9);
color: white;
padding: 5px 12px;
border-radius: 10px;
font-size: 0.75rem;
font-weight: bold;
backdrop-filter: blur(5px);
z-index: 2;
}
.favorite-content {
padding: 20px;
}
.favorite-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.5;
height: 3rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.favorite-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 0.8rem;
color: #718096;
}
.btn-remove-favorite {
width: 35px;
height: 35px;
border-radius: 50%;
background: rgba(255, 68, 68, 0.1);
color: #ff4444;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: all 0.3s ease;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 5;
}
.btn-remove-favorite:hover {
background: #ff4444;
color: white;
transform: rotate(90deg);
}
.btn-view-favorite {
border-radius: 12px;
padding: 8px 20px;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s ease;
}
.empty-state {
text-align: center;
padding: 80px 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 30px;
border: 2px dashed #e2e8f0;
}
.empty-icon {
font-size: 4rem;
color: #cbd5e0;
margin-bottom: 20px;
}
.empty-state .btn-primary {
background: #006fbe !important;
border-color: #006fbe !important;
color: white !important;
}
.empty-state .btn-success {
background: #00c879 !important;
border-color: #00c879 !important;
color: white !important;
}
.section-title {
position: relative;
padding-bottom: 15px;
margin-bottom: 30px;
font-weight: 800;
color: #2d3748;
}
.section-title::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 60px;
height: 4px;
background: linear-gradient(to left, #006fbe, #00c6ff);
border-radius: 2px;
}
.nav-pills-custom .nav-link {
color: #718096;
font-weight: 600;
padding: 12px 25px;
border-radius: 15px;
transition: all 0.3s ease;
background: transparent;
margin-left: 10px;
}
.nav-pills-custom .nav-link.active {
background: white;
color: #006fbe;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.text-dark-blue {
color: #004e86 !important;
}
.text-dark-green {
color: #007a4a !important;
}
/* =========================================
Lesson Detail - Clean Editorial Style
========================================= */
.lesson-editorial-container {
background: #f8fafc;
padding: 0;
padding-top: 0 !important;
margin-top: 0 !important;
}
.lesson-hero-section {
background: #ffffff;
padding: 80px 0 60px;
margin-bottom: 0;
position: relative;
overflow: visible;
border-bottom: 1px solid #e5e7eb;
}
.lesson-hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.lesson-hero-content {
position: relative;
z-index: 2;
}
.lesson-hero-video {
position: sticky;
top: 100px;
width: 100%;
}
.lesson-category-badge {
display: inline-block;
padding: 8px 20px;
background: #006fbe;
color: #ffffff;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 25px;
letter-spacing: 0.5px;
}
.lesson-main-title {
font-size: 3.5rem;
font-weight: 900;
color: #111827;
line-height: 1.2;
margin-bottom: 30px;
}
.lesson-meta-bar {
display: flex;
flex-wrap: wrap;
gap: 30px;
color: #6b7280;
font-size: 0.95rem;
}
.lesson-meta-bar span {
display: flex;
align-items: center;
gap: 8px;
}
.lesson-meta-bar i {
color: #006fbe;
opacity: 0.8;
}
.meta-favorite-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.meta-favorite-btn:hover {
background: #fef2f2;
border-color: #ef4444;
color: #ef4444;
}
.meta-favorite-btn.active {
background: #ef4444;
border-color: #ef4444;
color: #ffffff;
}
.meta-favorite-btn i {
font-size: 1rem;
opacity: 1;
}
.meta-favorite-btn.active i {
color: #ffffff;
}
.meta-actions-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.meta-action-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 10px;
color: #6b7280;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
transition: all 0.22s ease;
font-family: inherit;
line-height: 1;
}
.meta-action-btn i {
font-size: 1.25rem;
opacity: 1;
display: inline-block;
line-height: 1;
}
.meta-bookmark-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.meta-bookmark-btn:hover {
background: #fef9e7;
border-color: #f59e0b;
color: #f59e0b;
}
.meta-bookmark-btn.active {
background: #f59e0b;
border-color: #f59e0b;
color: #ffffff;
}
.meta-bookmark-btn i {
font-size: 1.15rem;
opacity: 1;
}
.meta-bookmark-btn.active i {
color: #ffffff;
}
.meta-share-wrapper {
position: relative;
}
.meta-share-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #6b7280;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.meta-share-btn:hover {
background: #eff6ff;
border-color: #006fbe;
color: #006fbe;
}
.meta-share-btn i {
font-size: 1.15rem;
opacity: 1;
}
.share-dropdown {
position: absolute;
top: 50%;
right: calc(100% + 12px);
left: auto;
transform: translateY(-50%) translateX(10px);
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
min-width: 180px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9999;
padding: 8px 0;
}
.share-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 991.98px) {
.share-dropdown {
display: none;
}
}
.share-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: #374151;
text-decoration: none;
transition: all 0.2s ease;
font-size: 0.95rem;
font-weight: 500;
}
.share-option:hover {
background: #f9fafb;
color: #006fbe;
}
.share-option i {
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.share-option:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.share-option:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.lesson-featured-image {
width: 100%;
max-width: 1200px;
margin: 0 auto 60px;
/* padding: 0 20px; */
}
.lesson-featured-image img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.lesson-hero-video .lesson-video-container {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
overflow: hidden;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}
.lesson-hero-video .lesson-video-container:hover {
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.lesson-hero-video .lesson-video-header {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lesson-hero-video .lesson-video-header i {
font-size: 1.5rem;
color: #ffffff;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.lesson-hero-video .lesson-video-title {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.3px;
}
.lesson-hero-video .lesson-video-wrapper {
padding: 0;
}
.lesson-hero-video .video-responsive-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
/* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
background: #000000;
}
.lesson-hero-video .video-responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 0;
}
.lesson-content-wrapper {
max-width: 100%;
/* margin: 0 auto; */
/* padding: 0 20px 80px; */
}
.lesson-editorial-content {
font-size: 18px;
line-height: 1.9;
color: #4b4949;
font-family: 'vazir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.lesson-editorial-content>* {
margin-bottom: 1.5em;
}
.lesson-editorial-content h2 {
font-size: 2rem;
font-weight: 800;
color: #4b4b4b;
margin-top: 2em;
margin-bottom: 0.75em;
line-height: 1.3;
}
.lesson-editorial-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: #4b4b4b;
margin-top: 1.75em;
margin-bottom: 0.75em;
}
.lesson-editorial-content h4 {
font-size: 1.25rem;
font-weight: 700;
color: #374151;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.lesson-editorial-content p {
margin-bottom: 1.5em;
text-align: justify;
}
.lesson-editorial-content strong {
font-weight: 700;
color: #4b4b4b;
}
.lesson-editorial-content a {
color: #006fbe;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: all 0.2s ease;
}
.lesson-editorial-content a:hover {
color: #004e86;
}
.lesson-editorial-content img {
width: 100%;
height: auto;
border-radius: 8px;
margin: 2.5em 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}
.lesson-editorial-content code {
background: #f3f4f6;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.9em;
color: #dc2626;
font-family: 'Courier New', monospace;
}
.lesson-editorial-content pre {
background: #1f2937;
padding: 30px;
border-radius: 10px;
overflow-x: auto;
margin: 2em 0;
border-left: 4px solid #006fbe;
}
.lesson-editorial-content pre code {
background: transparent;
color: #e5e7eb;
padding: 0;
font-size: 0.95em;
}
.lesson-editorial-content ul,
.lesson-editorial-content ol {
padding-right: 1.5em;
margin-bottom: 1.5em;
}
.lesson-editorial-content li {
margin-bottom: 0.75em;
line-height: 1.7;
}
.lesson-editorial-content blockquote {
border-right: 4px solid #006fbe;
padding: 1.5em 2em;
margin: 2em 0;
background: #fff6db;
border-radius: 8px;
font-style: italic;
color: #4b5563;
}
.lesson-navigation {
max-width: 1200px;
margin: 80px auto 0;
padding: 60px 20px 0;
border-top: 2px solid #e5e7eb;
}
.nav-card-minimal {
display: block;
padding: 30px;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 12px;
transition: all 0.3s ease;
text-decoration: none;
height: 100%;
}
.nav-card-minimal:hover {
border-color: #006fbe;
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 111, 190, 0.1);
}
.nav-direction {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: #006fbe;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.5px;
}
.nav-lesson-title {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
line-height: 1.4;
}
.nav-card-minimal.disabled {
opacity: 0.3;
pointer-events: none;
}
@media (max-width: 991px) {
.lesson-main-title {
font-size: 2.5rem;
}
.lesson-hero-section {
padding: 60px 0 40px;
}
.lesson-hero-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.lesson-hero-video {
position: static;
order: -1;
}
.lesson-hero-video .lesson-video-container {
border-radius: 16px;
}
.lesson-hero-video .lesson-video-header {
padding: 16px 20px;
}
.lesson-hero-video .lesson-video-title {
font-size: 1rem;
}
.lesson-editorial-content {
font-size: 17px;
}
.lesson-editorial-content h2 {
font-size: 1.75rem;
}
.lesson-editorial-content h3 {
font-size: 1.375rem;
}
}
@media (max-width: 768px) {
.lesson-main-title {
font-size: 2rem;
}
.lesson-hero-wrapper {
padding: 0 15px;
gap: 30px;
}
.lesson-hero-video .lesson-video-container {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.lesson-hero-video .lesson-video-header {
padding: 14px 16px;
flex-direction: row;
align-items: center;
gap: 10px;
}
.lesson-hero-video .lesson-video-header i {
font-size: 1.25rem;
}
.lesson-hero-video .lesson-video-title {
font-size: 0.95rem;
}
.lesson-meta-bar {
gap: 12px;
font-size: 0.85rem;
}
.meta-actions-group {
gap: 8px;
width: 100%;
justify-content: flex-start;
}
.meta-action-btn {
padding: 8px 14px;
font-size: 0.95rem;
}
/* Show the text label beside icon on smaller screens as well */
.meta-action-btn span {
display: inline-block;
white-space: nowrap;
font-weight: 600;
}
.meta-favorite-btn {
padding: 8px 14px;
font-size: 0.95rem;
}
.meta-favorite-btn span {
display: inline-block;
}
.meta-bookmark-btn span {
display: inline-block;
}
.meta-share-btn span {
display: inline-block;
}
.lesson-editorial-content {
font-size: 16px;
line-height: 1.8;
}
.lesson-editorial-content h2 {
font-size: 1.5rem;
}
.lesson-editorial-content h3 {
font-size: 1.25rem;
}
.nav-card-minimal {
padding: 20px;
}
}
@media print {
.lesson-hero-section,
.lesson-navigation {
display: none;
}
.lesson-editorial-content {
max-width: 100%;
font-size: 12pt;
}
}
/* ===================================================================
BOOKMARKS PAGE STYLES
Kept for backward compatibility - use user-panel-content instead */
.bookmarks-container {
padding: 40px 0;
direction: rtl;
}
.profile-header-premium {
background: linear-gradient(135deg, #006fbe 0%, #004e86 100%);
border-radius: 16px;
padding: 40px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 111, 190, 0.15);
}
.header-accent {
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.header-content {
position: relative;
z-index: 2;
}
.header-content h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 12px;
color: white !important;
}
.header-content p {
font-size: 1.1rem;
opacity: 0.95;
margin: 0;
color: white;
}
/* Filter & Search Section */
.bookmarks-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.search-filter-group {
display: flex;
gap: 15px;
flex: 1;
min-width: 300px;
}
.search-input-wrapper {
flex: 1;
position: relative;
}
.search-input-wrapper input {
width: 100%;
padding: 12px 45px 12px 18px;
border: 2px solid #e0e7ff;
border-radius: 12px;
font-size: 0.95rem;
font-family: 'Vazir', sans-serif;
transition: all 0.3s ease;
background: white;
}
.search-input-wrapper input:focus {
outline: none;
border-color: #006fbe;
box-shadow: 0 0 0 3px rgba(0, 111, 190, 0.1);
}
.search-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #8b93b5;
font-size: 1.1rem;
}
.filter-btn-group {
display: flex;
gap: 8px;
}
.filter-btn {
padding: 10px 20px;
border: 2px solid #e0e7ff;
background: white;
border-radius: 10px;
cursor: pointer;
font-family: 'Vazir', sans-serif;
font-weight: 600;
font-size: 0.9rem;
color: #676767;
transition: all 0.3s ease;
white-space: nowrap;
}
.filter-btn:hover {
border-color: #006fbe;
background: #f0f4f8;
}
.filter-btn.active {
background: #006fbe;
border-color: #006fbe;
color: white;
}
.view-toggle {
display: flex;
gap: 8px;
background: white;
padding: 8px;
border-radius: 10px;
border: 2px solid #e0e7ff;
}
.view-toggle-btn {
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #8b93b5;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.view-toggle-btn.active {
background: #f0f4f8;
color: #006fbe;
}
/* Category Filter Tags */
.category-filter {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 20px 0;
}
.category-tag {
padding: 8px 16px;
background: white;
border: 2px solid #e0e7ff;
border-radius: 20px;
cursor: pointer;
font-size: 0.9rem;
font-family: 'Vazir', sans-serif;
color: #676767;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.category-tag:hover {
border-color: #006fbe;
background: #f0f4f8;
}
.category-tag.selected {
background: #006fbe;
border-color: #006fbe;
color: white;
}
/* Bookmarks Grid */
.bookmarks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
margin-top: 30px;
}
.bookmark-card {
background: white;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
display: flex;
flex-direction: column;
}
.bookmark-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 111, 190, 0.15);
}
.bookmark-card-image {
width: 100%;
height: 180px;
background: linear-gradient(135deg, #006fbe 0%, #004e86 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.bookmark-card-image::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.bookmark-icon {
font-size: 3.5rem;
color: white;
opacity: 0.9;
z-index: 1;
}
.bookmark-badge {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255, 255, 255, 0.95);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
color: #006fbe;
}
.bookmark-remove-btn {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #ef4444;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.bookmark-remove-btn:hover {
background: #ef4444;
color: white;
transform: scale(1.1);
}
.bookmark-card-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.bookmark-card-category {
display: inline-block;
width: fit-content;
padding: 4px 12px;
background: #f0f4f8;
color: #006fbe;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 700;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bookmark-card-title {
font-size: 1.1rem;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bookmark-card-description {
font-size: 0.9rem;
color: #8b93b5;
margin-bottom: 12px;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bookmark-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid #f0f4f8;
}
.bookmark-date {
font-size: 0.85rem;
color: #a5aec0;
}
.bookmark-action-btn {
padding: 6px 12px;
background: linear-gradient(135deg, #006fbe 0%, #004e86 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
transition: all 0.3s ease;
}
.bookmark-action-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 111, 190, 0.3);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 40px;
background: white;
border-radius: 14px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.empty-state-icon {
font-size: 4rem;
margin-bottom: 20px;
opacity: 0.3;
}
.empty-state-title {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
margin-bottom: 10px;
}
.empty-state-text {
color: #8b93b5;
font-size: 1rem;
margin-bottom: 30px;
}
.empty-state-btn {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(135deg, #006fbe 0%, #004e86 100%);
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
}
.empty-state-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 111, 190, 0.3);
}
/* Stats Bar */
.bookmarks-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: #006fbe;
}
.stat-label {
font-size: 0.9rem;
color: #8b93b5;
margin-top: 4px;
}
/* Responsive */
@media (max-width: 768px) {
.profile-header-premium {
padding: 30px 20px;
}
.header-content h2 {
font-size: 1.8rem;
}
.bookmarks-controls {
flex-direction: column;
gap: 15px;
}
.search-filter-group {
min-width: unset;
width: 100%;
}
.bookmarks-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.bookmarks-stats {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.bookmarks-grid {
grid-template-columns: 1fr;
}
.header-content h2 {
font-size: 1.5rem;
}
.filter-btn-group {
width: 100%;
}
.view-toggle {
width: 100%;
justify-content: space-around;
}
}
/* Notification System Enhancements */
.notification-actions-bar {
border: 1px solid #edf2f7;
transition: all 0.3s ease;
}
.custom-check .form-check-input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0;
cursor: pointer;
border: 2px solid #cbd5e0;
}
.custom-check .form-check-input:checked {
background-color: var(--primary-color, #3182ce);
border-color: var(--primary-color, #3182ce);
}
.notification-item-container {
transition: all 0.3s ease;
}
.notification-card {
background: #f2f2f2;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
display: flex;
gap: 1.25rem;
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.notification-card.unread {
background: #ffffff;
border-color: #3182ce40;
box-shadow: 0 4px 12px rgba(49, 130, 206, 0.08);
}
.notification-card.unread::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--primary-color, #3182ce);
border-radius: 0 1rem 1rem 0;
}
.notification-icon {
width: 48px;
height: 48px;
background: #edf2f7;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: #4a5568;
flex-shrink: 0;
}
.unread .notification-icon {
background: #ebf8ff;
color: #3182ce;
}
.notification-content {
flex: 1;
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.notification-title {
font-size: 1rem;
font-weight: 700;
color: #2d3748;
margin: 0;
}
.notification-time {
font-size: 0.75rem;
color: #718096;
white-space: nowrap;
}
.notification-body {
font-size: 16px !important;
color: #4a5568;
line-height: 1.7em !important;
margin: 0;
font-family: vazir, sans-serif;
}
.unread .notification-title {
color: #1a202c;
}
/* RTL specific adjustments */
[dir="rtl"] .notification-card.unread::before {
right: 0;
left: auto;
}
/* Unread Indicator Dot */
.unread-dot {
width: 8px;
height: 8px;
background: #3182ce;
border-radius: 50%;
box-shadow: 0 0 0 3px #ebf8ff;
flex-shrink: 0;
transition: all 0.3s ease;
}
/* Custom Pagination */
.custom-pagination .page-item .page-link {
border: none;
background: #f1f5f9;
color: #4a5568;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-weight: 600;
transition: all 0.2s ease;
}
.custom-pagination .page-item.active .page-link {
background: var(--primary-color, #3182ce);
color: white;
box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
}
.custom-pagination .page-item .page-link:hover:not(.active) {
background: #e2e8f0;
transform: translateY(-2px);
}
/* Mobile Responsive Notifications Overlay */
@media (max-width: 576px) {
.notification-card {
padding: 1rem;
gap: 1rem;
}
.notification-icon {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
.notification-header {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
/* Security & Sessions Premium Styles 2026 */
.security-score-container {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 24px;
padding: 2rem;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}
.security-score-container::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
animation: rotate-gradient 20s linear infinite;
}
@keyframes rotate-gradient {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.score-visual-wrapper {
position: relative;
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.score-visual {
width: 120px;
height: 120px;
border-radius: 50%;
border: 8px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-top-color: #10b981;
z-index: 2;
}
.score-value {
font-size: 2.5rem;
font-weight: 800;
}
.security-badge-shield {
font-size: 3rem;
color: #3b82f6;
filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}
.security-card-glass {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.security-card-glass:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}
.active-session-item {
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 1.25rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 1.5rem;
transition: all 0.2s ease;
}
.active-session-item:hover {
border-color: #3b82f640;
background: #f8fbff;
}
.device-icon-wrapper {
width: 56px;
height: 56px;
background: #f1f5f9;
color: #475569;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.active-session-item.current .device-icon-wrapper {
background: #ecfdf5;
color: #10b981;
}
.current-status-tag {
background: #ecfdf5;
color: #059669;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
}
.session-info {
flex-grow: 1;
}
.session-title {
font-weight: 700;
color: #1e293b;
margin-bottom: 0.25rem;
}
.session-meta {
font-size: 0.85rem;
color: #64748b;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.terminate-btn {
color: #ef4444;
background: #fef2f2;
border: none;
padding: 8px 16px;
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.2s;
}
.terminate-btn:hover {
background: #ef4444;
color: white;
}
.security-checklist-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #f1f5f9;
}
.security-checklist-item:last-child {
border-bottom: none;
}
.check-circle {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.check-circle.completed {
background: #10b981;
color: white;
}
.check-circle.pending {
background: #f1f5f9;
color: #94a3b8;
border: 2px solid #e2e8f0;
}
.bg-danger-soft {
background-color: #fef2f2;
}
.text-danger-premium {
color: #ef4444;
}
@media (max-width: 768px) {
.active-session-item {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.terminate-btn {
width: 100%;
text-align: center;
}
}
/* Security Log & Linked Accounts 2026 Refinements */
.security-log-item {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
transition: background 0.2s;
}
.security-log-item:last-child {
border-bottom: none;
}
.security-log-item:hover {
background: #f8fafc;
}
.log-icon-wrap {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.bg-success-soft {
background: #ecfdf5;
color: #10b981;
}
.bg-danger-soft {
background: #fef2f2;
color: #ef4444;
}
.bg-warning-soft {
background: #fffbeb;
color: #f59e0b;
}
.bg-info-soft {
background: #eff6ff;
color: #3b82f6;
}
.linked-account-card {
border: 1px solid #e2e8f0;
transition: all 0.3s;
}
.linked-account-card:hover {
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.05);
}
.badge-outline {
border: 1px solid currentColor;
background: transparent;
padding: 4px 10px;
}
.btn-terminate-all {
font-size: 0.85rem;
transition: all 0.3s;
}
.btn-terminate-all:hover {
opacity: 0.8;
}
.google-help-banner {
background: #f8fafc;
border-radius: 12px;
padding: 1rem;
border-right: 4px solid #3b82f6;
}
/* --- Security Page Buttons & Alerts --- */
.btn-google-connect {
background-color: #4285F4 !important;
color: #ffffff !important;
border: none !important;
padding: 8px 18px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
border-radius: 50px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px;
transition: all 0.3s ease !important;
box-shadow: 0 4px 10px rgba(66, 133, 244, 0.2) !important;
}
.btn-google-connect:hover {
background-color: #3367D6 !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(66, 133, 244, 0.3) !important;
}
.btn-change-mobile {
background-color: #f8fafc !important;
color: #3182ce !important;
border: 1.5px solid #e2e8f0 !important;
padding: 7px 18px !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
border-radius: 50px !important;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer !important;
display: inline-block !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}
.btn-change-mobile:hover {
background-color: #3182ce !important;
color: #ffffff !important;
border-color: #3182ce !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(49, 130, 206, 0.2) !important;
}
.alert-premium {
background: #ffffff !important;
border: none !important;
border-right: 5px solid #ef4444 !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
padding: 1.25rem !important;
color: #1a202c !important;
/* Force dark text color */
}
.alert-premium.alert-success {
border-right-color: #10b981 !important;
}
.alert-premium .btn-close {
padding: 1rem !important;
}
/* ===================================================================
* 25. Dashboard Premium UI (2026 Edition)
* =================================================================== */
.dashboard-premium-wrap {
animation: fadeIn 0.8s ease-out;
}
/* Glassmorphism Card Base */
.glass-card-premium {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card-premium:hover {
transform: translateY(-5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.06);
}
/* Premium Welcome Header */
.welcome-hero-card {
background: linear-gradient(135deg, #006fbe 0%, #003d6d 100%);
border-radius: 28px;
color: #ffffff;
padding: 3rem;
position: relative;
overflow: hidden;
}
.welcome-hero-card::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
.welcome-text h1 {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.welcome-text p {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 300;
}
.streak-badge-premium {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
padding: 10px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Futuristic Stat Tiles */
.stat-tile-premium {
padding: 1.5rem;
text-align: right;
}
.stat-tile-icon {
width: 60px;
height: 60px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.25rem;
background: #f8fafc;
}
.stat-tile-label {
display: block;
color: #64748b;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.stat-tile-value {
font-size: 1.75rem;
font-weight: 800;
color: #1e293b;
display: block;
}
/* List Items (Activities/Notifications) */
.list-item-premium {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 1rem;
transition: background 0.3s;
}
.list-item-premium:hover {
background: #f8fafc;
}
.list-item-premium:last-child {
border-bottom: none;
}
.item-icon-wrap {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.item-content-wrap {
flex-grow: 1;
}
.item-title-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.item-title-meta h6 {
margin: 0;
font-weight: 700;
font-size: 0.95rem;
color: #1e293b;
}
.item-time-stamp {
font-size: 0.75rem;
color: #94a3b8;
}
.item-desc-short {
font-size: 0.85rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* Recommended Section Grid */
.recommend-card-modern {
border-radius: 20px;
overflow: hidden;
background: #ffffff;
border: 1px solid #f1f5f9;
transition: all 0.3s;
}
.recommend-card-modern:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
transform: translateY(-8px);
}
.recommend-thumb-wrap {
position: relative;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
overflow: hidden;
}
.recommend-thumb-wrap img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.recommend-cat-badge {
position: absolute;
bottom: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 12px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 700;
color: #006fbe;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.recommend-info-content {
padding: 1.25rem;
}
.recommend-title-link {
font-size: 1rem;
font-weight: 700;
color: #1e293b;
line-height: 1.5;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3rem;
text-decoration: none;
transition: color 0.3s;
}
.recommend-title-link:hover {
color: #006fbe;
}
.recommend-meta-footer {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #94a3b8;
border-top: 1px solid #f1f5f9;
padding-top: 0.75rem;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rocketSlide {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.rocket-premium-anim {
animation: rocketSlide 3s ease-in-out infinite;
}
/* Color Helpers */
.text-purple {
color: #8b5cf6;
}
.bg-purple-soft {
background: #f5f3ff;
color: #8b5cf6;
}
.bg-blue-soft {
background: #eff6ff;
color: #3b82f6;
}
.bg-green-soft {
background: #f0fdf4;
color: #22c55e;
}
.bg-orange-soft {
background: #fff7ed;
color: #f97316;
}
/* --- Continue Learning Section --- */
.continue-learning-section {
animation: fadeIn 0.8s ease-out 0.2s both;
margin-top: 4rem;
}
.continue-learning-card {
background: #ffffff;
border-radius: 20px;
padding: 2rem;
display: flex;
align-items: center;
gap: 2rem;
border: 1px solid #f1f5f9;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.continue-learning-card:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
transform: translateY(-3px);
border-color: #e2e8f0;
}
.learning-card-image {
width: 140px;
height: 90px;
border-radius: 12px;
object-fit: cover;
flex-shrink: 0;
}
.learning-card-info {
flex-grow: 1;
}
.learning-type-badge {
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 6px;
margin-bottom: 0.75rem;
display: inline-block;
}
.badge-lesson {
background: #f0fdf4;
color: #22c55e;
}
.learning-card-title {
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.progress-container-premium {
background: #f1f5f9;
height: 8px;
border-radius: 10px;
overflow: hidden;
margin-bottom: 0.5rem;
width: 100%;
}
.progress-bar-premium {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
border-radius: 10px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-text-premium {
font-size: 0.85rem;
color: #64748b;
font-weight: 600;
}
.resume-btn-premium {
background: #006fbe;
color: white;
padding: 10px 24px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
white-space: nowrap;
}
.resume-btn-premium:hover {
background: #005a9e;
transform: scale(1.05);
color: white;
box-shadow: 0 8px 20px rgba(0, 111, 190, 0.2);
}
/* --- Dashboard Notifications --- */
.dashboard-notifications {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
overflow: hidden;
margin-inline: auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.search-results-page {
padding: 2.5rem 0 4rem;
}
.search-hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-bottom: 2rem;
}
.search-hero-text h1 {
font-family: vazir, sans-serif;
font-size: 2.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.5rem;
}
.search-hero-text p {
color: #64748b;
margin: 0;
}
.search-hero-box {
background: linear-gradient(135deg, #f8fafc, #eef2ff);
border: 1px solid #e2e8f0;
padding: 0.9rem 1.2rem;
border-radius: 14px;
text-align: right;
}
.search-inline-form {
display: flex;
align-items: center;
gap: 0.75rem;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 0.75rem;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
margin-bottom: 1.6rem;
flex-wrap: wrap;
}
.search-inline-input {
display: flex;
align-items: center;
gap: 0.6rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 0.6rem 0.85rem;
flex: 1 1 260px;
}
.search-inline-input i {
color: #94a3b8;
font-size: 0.9rem;
}
.search-inline-input input {
border: none;
background: transparent;
outline: none;
width: 100%;
color: #0f172a;
font-weight: 600;
}
.search-inline-btn {
border: none;
background: var(--primary-color, #006fbe);
color: #ffffff;
font-weight: 700;
padding: 0.6rem 1.3rem;
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.search-inline-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(0, 111, 190, 0.2);
}
.search-pagination {
margin-top: 2.2rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
direction: ltr;
}
.page-numbers {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
direction: ltr;
}
.page-link,
.page-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
padding: 0.45rem 0.8rem;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #0f172a;
font-weight: 700;
text-decoration: none;
transition: all 0.2s ease;
}
.page-link:hover,
.page-number:hover {
border-color: var(--primary-color, #006fbe);
color: var(--primary-color, #006fbe);
}
.page-number.is-active {
background: var(--primary-color, #006fbe);
border-color: var(--primary-color, #006fbe);
color: #ffffff;
}
.page-link.is-disabled {
opacity: 0.45;
pointer-events: none;
}
@media (max-width: 768px) {
.search-inline-form {
flex-direction: row;
align-items: center;
padding: 0.6rem;
gap: 0.5rem;
}
.search-inline-btn {
width: auto;
padding: 0.55rem 1.1rem;
}
.search-inline-input {
flex: 1 1 auto;
padding: 0.5rem 0.75rem;
}
.search-pagination {
justify-content: center;
}
}
.search-query-chip {
font-weight: 700;
color: #1e3a8a;
margin-bottom: 0.35rem;
}
/* --- Contact Us 2026 --- */
.contact-hero {
padding: 3.5rem 0 2.5rem;
background: radial-gradient(circle at top right, rgba(0, 111, 190, 0.12), transparent 45%),
linear-gradient(135deg, #f8fafc, #eef2ff);
border-bottom: 1px solid #e2e8f0;
}
.contact-hero-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.contact-hero-text h1 {
font-size: 2.4rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.6rem;
}
.contact-kicker {
color: var(--primary-color, #006fbe);
font-weight: 700;
margin-bottom: 0.4rem;
}
.contact-lead {
color: #64748b;
max-width: 520px;
margin: 0;
}
.contact-breadcrumb {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 999px;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #64748b;
font-size: 0.9rem;
}
.contact-breadcrumb a {
color: #0f172a;
text-decoration: none;
font-weight: 600;
}
.contact-body {
padding: 2.5rem 0 4rem;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.contact-info-card {
display: flex;
gap: 1rem;
align-items: center;
padding: 1.2rem 1.4rem;
border-radius: 18px;
background: #ffffff;
border: 1px solid #eef2f7;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.contact-info-card > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(0, 111, 190, 0.12);
color: var(--primary-color, #006fbe);
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
text-align: center;
float: none !important;
position: relative;
padding: 0;
align-self: center;
}
.contact-icon::before {
display: inline-block;
line-height: 1;
position: static !important;
margin: 0;
transform: translateY(0);
}
.contact-icon i {
font-size: 1.1rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 0;
}
.contact-icon i::before {
display: block;
line-height: 1;
}
.contact-info-card h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: #0f172a;
}
.contact-info-card p {
margin: 0;
color: #64748b;
}
.contact-form-card {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 22px;
padding: 2rem;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
.contact-form-header h2 {
font-size: 1.6rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.4rem;
}
.contact-form-header p {
color: #64748b;
margin-bottom: 1.6rem;
}
.contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}
.contact-form-field.full {
grid-column: 1 / -1;
}
.contact-form-modern label {
display: block;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.5rem;
}
.contact-form-modern input,
.contact-form-modern textarea,
.contact-form-modern select {
width: 100%;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: #f8fafc;
padding: 0.75rem 0.9rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form-modern input:focus,
.contact-form-modern textarea:focus,
.contact-form-modern select:focus {
border-color: var(--primary-color, #006fbe);
box-shadow: 0 0 0 3px rgba(0, 111, 190, 0.15);
}
.contact-form-modern textarea {
min-height: 140px;
resize: vertical;
}
.contact-captcha-hint {
font-size: 0.9rem;
color: #64748b;
margin: 0 0 0.5rem;
}
.contact-alert {
list-style: none;
padding: 0.75rem 1rem;
border-radius: 12px;
background: #ecfdf3;
border: 1px solid #bbf7d0;
color: #166534;
text-align: center;
margin-bottom: 1rem;
}
.contact-form-modern .with-errors {
color: #dc2626;
margin-top: 0.5rem;
font-size: 0.9rem;
}
.contact-submit {
margin-top: 1.5rem;
border: none;
background: var(--primary-color, #006fbe);
color: #ffffff;
padding: 0.75rem 2rem;
border-radius: 14px;
font-weight: 700;
box-shadow: 0 14px 30px rgba(0, 111, 190, 0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0, 111, 190, 0.3);
}
@media (max-width: 991px) {
.contact-info-grid {
grid-template-columns: 1fr;
}
.contact-form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.contact-hero {
padding: 2.5rem 0 2rem;
}
.contact-form-card {
padding: 1.5rem;
}
}
.search-meta {
font-size: 0.85rem;
color: #64748b;
}
.search-filters {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.filter-pill {
border: 1px solid #e2e8f0;
background: #ffffff;
color: #0f172a;
border-radius: 999px;
padding: 0.45rem 1rem;
font-size: 0.9rem;
font-weight: 700;
transition: all 0.2s ease;
}
.filter-pill.active,
.filter-pill:hover {
background: var(--primary-color, #006fbe);
border-color: var(--primary-color, #006fbe);
color: #ffffff;
}
.search-results-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.search-result-card {
border-radius: 18px;
overflow: hidden;
border: 1px solid #eef2f7;
background: #ffffff;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.search-result-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}
.search-card-media {
position: relative;
}
.search-card-media img {
width: 100%;
height: 190px;
object-fit: cover;
display: block;
}
.search-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 0.3rem 0.6rem;
border-radius: 10px;
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
}
.badge-lesson {
background: var(--primary-color, #006fbe);
}
.badge-article {
background: var(--primary-color, #006fbe);
}
.search-card-body {
padding: 1.1rem 1.3rem 1.3rem;
}
.search-card-body h3 {
font-size: 1.1rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.5rem;
}
.search-card-body p {
color: #64748b;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 0.9rem;
}
.search-card-meta {
display: flex;
gap: 1rem;
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.search-card-meta i {
margin-left: 0.35rem;
}
.search-card-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--primary-color, #006fbe);
font-weight: 700;
text-decoration: none;
}
.search-card-cta:hover {
text-decoration: underline;
}
.search-empty {
grid-column: 1 / -1;
background: #f8fafc;
border: 1px dashed #e2e8f0;
border-radius: 14px;
padding: 2rem;
text-align: center;
color: #64748b;
font-weight: 600;
}
@media (max-width: 991px) {
.search-hero {
flex-direction: column;
align-items: flex-start;
}
.search-results-grid {
grid-template-columns: 1fr;
}
}
.dashboard-notifications-link {
font-size: 0.9rem;
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
.dashboard-notifications-link:hover {
text-decoration: underline;
}
.dashboard-notifications-list {
display: grid;
gap: 0.9rem;
width: 100%;
box-sizing: border-box;
margin-inline: auto;
}
.dashboard-notification-card {
display: flex;
gap: 0.9rem;
padding: 0.9rem 1rem;
border-radius: 14px;
border: 1px solid #f1f5f9;
background: #fbfdff;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.dashboard-notification-card.is-unread {
border-color: #dbeafe;
background: #f8fbff;
}
.dashboard-notification-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef2ff;
color: #4f46e5;
flex-shrink: 0;
}
.dashboard-notification-icon.type-success {
background: #ecfdf3;
color: #16a34a;
}
.dashboard-notification-icon.type-warning {
background: #fff7ed;
color: #f59e0b;
}
.dashboard-notification-icon.type-error {
background: #fef2f2;
color: #ef4444;
}
.dashboard-notification-body {
flex: 1;
min-width: 0;
}
.dashboard-notification-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
.dashboard-notification-title {
font-weight: 700;
font-size: 0.95rem;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-notification-time {
font-size: 0.78rem;
color: #94a3b8;
white-space: nowrap;
}
.dashboard-notification-text {
font-size: 0.88rem;
color: #475569;
line-height: 1.6;
}
.dashboard-notification-cta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
color: #0ea5e9;
text-decoration: none;
}
.dashboard-notification-cta:hover {
text-decoration: underline;
}
.dashboard-security {
background: #ffffff;
border: 1px solid #eef2f7;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}
.dashboard-security-list {
display: grid;
gap: 0.9rem;
}
.dashboard-security-card {
display: flex;
gap: 0.9rem;
padding: 0.9rem 1rem;
border-radius: 14px;
border: 1px solid #f1f5f9;
background: #fbfdff;
}
.dashboard-security-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #eef2ff;
color: #4f46e5;
flex-shrink: 0;
}
.dashboard-security-body {
flex: 1;
min-width: 0;
}
.dashboard-security-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
.dashboard-security-title {
font-weight: 700;
font-size: 0.95rem;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-security-time {
font-size: 0.78rem;
color: #94a3b8;
white-space: nowrap;
}
.dashboard-security-text {
font-size: 0.88rem;
color: #475569;
line-height: 1.6;
}
.mobile-masked {
direction: ltr;
unicode-bidi: bidi-override;
text-align: left;
}
@media (max-width: 991px) {
.continue-learning-card {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.learning-card-image {
width: 100%;
height: 180px;
}
.learning-card-info {
width: 100%;
}
.resume-btn-premium {
width: 100%;
text-align: center;
}
.dashboard-notifications {
padding: 1.25rem;
}
.dashboard-notification-card {
flex-direction: column;
align-items: flex-start;
}
.dashboard-notification-head {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.dashboard-notifications-list {
justify-content: center;
}
.dashboard-security-card {
flex-direction: column;
align-items: flex-start;
}
.dashboard-security-head {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
@media (max-width: 768px) {
.welcome-hero-card {
padding: 2rem;
text-align: center;
}
.welcome-text h1 {
font-size: 1.75rem;
}
}
/* --- Profile Edit & Mobile Change Styles --- */
.mobile-change-btn {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background: #f0f7ff;
color: #3b82f6;
border: none;
padding: 5px 12px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 700;
transition: all 0.3s;
z-index: 5;
}
.mobile-change-btn:hover {
background: #3b82f6;
color: white;
}
.floating-label-group.with-btn input {
padding-left: 70px !important;
}
.custom-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: all 0.3s ease;
}
.custom-modal-overlay.active {
display: flex;
opacity: 1;
}
.custom-modal-card {
background: white;
width: 100%;
max-width: 450px;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.custom-modal-overlay.active .custom-modal-card {
transform: translateY(0);
}
.modal-close-icon {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
color: #94a3b8;
transition: color 0.3s;
border: none;
background: none;
}
.modal-close-icon:hover {
color: #ef4444;
}
.otp-inputs-wrap {
display: flex;
gap: 10px;
justify-content: center;
direction: ltr;
width: 100%;
}
.otp-field {
width: 45px;
height: 55px;
border: 2px solid #e2e8f0;
border-radius: 12px;
text-align: center;
font-size: 1.5rem;
font-weight: 800;
color: #3b82f6;
transition: all 0.3s;
}
.custom-modal-card input[type='text'],
.custom-modal-card .otp-field {
text-align: center !important;
direction: ltr !important;
}
.otp-field:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
outline: none;
}
.timer-wrap {
color: #64748b;
font-size: 0.9rem;
}
.btn-verify-otp {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
border: none;
border-radius: 12px;
}
.btn-verify-otp:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
color: white;
}
.custom-modal-card .btn-save-profile {
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
color: #ffffff !important;
border: none !important;
}
.custom-modal-card .btn-save-profile span {
color: #ffffff !important;
}
.custom-modal-card .btn-link {
color: #2563eb;
}
.custom-modal-card .btn-link:hover {
color: #1d4ed8;
text-decoration: underline;
}
#otp-active-msg {
text-align: center;
}
#otp-active-msg a {
display: inline-block;
margin-bottom: 0.75rem;
}
#mobile-duplicate-msg {
margin-bottom: 0.75rem;
}
/* Header profile menu */
.profile-menu {
position: relative;
display: inline-flex;
align-items: center;
}
.profile-trigger {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
position: relative;
}
.profile-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #64748b;
font-size: 1.3rem;
line-height: 1;
}
.profile-avatar i {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 16px;
margin: 0;
padding: 0;
transform: none;
}
.profile-avatar i::before {
display: block;
line-height: 1;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-badge {
position: absolute;
top: -4px;
right: -4px;
left: auto;
background: #ef4444;
color: #fff;
font-size: 0.7rem;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.profile-dropdown {
position: absolute;
top: 100%;
margin-top: 4px;
right: 0;
left: auto;
inset-inline-end: 0;
inset-inline-start: auto;
transform-origin: top right;
width: 320px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.15);
display: none;
z-index: 1000;
overflow: hidden;
}
.profile-menu.is-open .profile-dropdown {
display: block;
}
.profile-menu.is-open .profile-dropdown {
display: block;
}
.profile-dropdown-header {
padding: 0.9rem 1rem;
font-weight: 700;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.profile-dropdown-link {
font-size: 0.85rem;
font-weight: 600;
color: #2563eb;
text-decoration: none;
white-space: nowrap;
}
.profile-dropdown-link:hover {
text-decoration: underline;
}
.profile-notifications {
max-height: 280px;
overflow-y: auto;
}
.profile-notification-item {
display: block;
padding: 0.75rem 1rem;
text-decoration: none;
color: #0f172a;
border-bottom: 1px solid #f1f5f9;
}
.profile-notification-item.unread {
background: #f8fafc;
font-weight: 600;
}
.profile-notification-title {
font-size: 0.95rem;
margin-bottom: 0.25rem;
}
.profile-notification-meta {
font-size: 0.8rem;
color: #64748b;
}
.profile-notification-empty {
padding: 1rem;
color: #64748b;
}
.profile-dropdown-actions {
display: grid;
gap: 0.4rem;
padding: 0.9rem 1rem 1rem;
background: #fff;
}
.profile-dropdown-actions a {
text-decoration: none;
color: #1e293b;
font-weight: 600;
padding: 0.4rem 0;
}
@media (max-width: 991.98px) {
.profile-dropdown {
width: min(94vw, 360px);
left: 0 !important;
right: auto !important;
inset-inline-start: 0;
inset-inline-end: auto;
transform: none !important;
transform-origin: top left;
}
}