/* Variables CSS - متغيرات الموقع المشتركة */
:root {
/* الألوان الأساسية */
--primary-color: #C08B2D;
--secondary-color: #B22B2B;
--accent-color: #c1aa51;
/* ألوان الخلÙية */
--light-bg: #f8fafc;
--white: #fff;
--dark-bg: #1a1a1a;
/* ألوان النصوص */
--dark-text: #333;
--gray-text: #6c757d;
--light-text: #999;
--white-text: #fff;
/* ألوان الØدود */
--border-color: #eaeaea;
--border-light: #f0f0f0;
--border-dark: #ddd;
/* ألوان الهيدر */
--header-bg: #ffffff;
--header-border: #e9ecef;
--header-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
--top-nav-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
--main-nav-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
--hover-bg: rgba(192, 139, 45, 0.08);
--menu-hover-bg: rgba(192, 139, 45, 0.05);
/* الظلال */
--box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
--box-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
--box-shadow-heavy: 0 8px 30px rgba(0, 0, 0, 0.15);
--dropdown-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
/* الأØجام */
--header-height: 80px;
--top-bar-height: 40px;
--footer-height: 60px;
--logo-height: 55px;
--logo-height-mobile: 45px;
/* المساÙات */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Ø£Øجام الخطوط */
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
/* أوزان الخطوط */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* نص٠قطر الØدود */
--border-radius-sm: 0.25rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-full: 9999px;
/* الانتقالات */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
/* Ø£Øجام الشاشات */
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-2xl: 1400px;
}
/* Ùئات الألوان المساعدة */
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-dark { color: var(--dark-text) !important; }
.text-gray { color: var(--gray-text) !important; }
.text-light { color: var(--light-text) !important; }
.text-white { color: var(--white-text) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-accent { background-color: var(--accent-color) !important; }
.bg-light { background-color: var(--light-bg) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-dark { background-color: var(--dark-bg) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.border-secondary { border-color: var(--secondary-color) !important; }
.border-light { border-color: var(--border-light) !important; }
.border-dark { border-color: var(--border-dark) !important; }
/* Ùئات الظلال */
.shadow-sm { box-shadow: var(--box-shadow) !important; }
.shadow-md { box-shadow: var(--box-shadow-medium) !important; }
.shadow-lg { box-shadow: var(--box-shadow-heavy) !important; }
/* Ùئات الانتقالات */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-normal { transition: var(--transition-normal) !important; }
.transition-slow { transition: var(--transition-slow) !important; }
/* Ùئات نص٠قطر الØدود */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }
/* Reset CSS - إعادة تعيين الأنماط الاÙتراضية */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Tajawal', sans-serif;
line-height: 1.6;
color: var(--dark-text);
background: var(--light-bg);
overflow-x: hidden;
}
/* إعادة تعيين العناصر الأساسية */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: 0.5em;
}
p {
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
ul, ol {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
input, textarea, select {
font-family: inherit;
border: none;
outline: none;
}
/* إزالة التمرير من شريط التمرير */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--light-bg);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
}
/* إزالة التØديد الاÙتراضي */
::selection {
background: var(--primary-color);
color: var(--white);
}
/* إزالة النقاط من القوائم */
ul, ol {
list-style: none;
}
/* إزالة الØدود من الصور */
img {
border: none;
}
/* إزالة المساÙات من الجداول */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* إزالة التØديد من الأزرار */
button:focus {
outline: none;
}
/* إزالة التØديد من الروابط */
a:focus {
outline: none;
}
/* إزالة التØديد من الØقول */
input:focus, textarea:focus, select:focus {
outline: none;
}
/* Utilities CSS - الÙئات المساعدة المشتركة */
/* المساÙات */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-xs) !important; }
.m-2 { margin: var(--spacing-sm) !important; }
.m-3 { margin: var(--spacing-md) !important; }
.m-4 { margin: var(--spacing-lg) !important; }
.m-5 { margin: var(--spacing-xl) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacing-xs) !important; }
.mr-2 { margin-right: var(--spacing-sm) !important; }
.mr-3 { margin-right: var(--spacing-md) !important; }
.mr-4 { margin-right: var(--spacing-lg) !important; }
.mr-5 { margin-right: var(--spacing-xl) !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--spacing-xs) !important; }
.ml-2 { margin-left: var(--spacing-sm) !important; }
.ml-3 { margin-left: var(--spacing-md) !important; }
.ml-4 { margin-left: var(--spacing-lg) !important; }
.ml-5 { margin-left: var(--spacing-xl) !important; }
/* الØشو */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacing-xs) !important; }
.pt-2 { padding-top: var(--spacing-sm) !important; }
.pt-3 { padding-top: var(--spacing-md) !important; }
.pt-4 { padding-top: var(--spacing-lg) !important; }
.pt-5 { padding-top: var(--spacing-xl) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--spacing-xs) !important; }
.pb-2 { padding-bottom: var(--spacing-sm) !important; }
.pb-3 { padding-bottom: var(--spacing-md) !important; }
.pb-4 { padding-bottom: var(--spacing-lg) !important; }
.pb-5 { padding-bottom: var(--spacing-xl) !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacing-xs) !important; }
.pr-2 { padding-right: var(--spacing-sm) !important; }
.pr-3 { padding-right: var(--spacing-md) !important; }
.pr-4 { padding-right: var(--spacing-lg) !important; }
.pr-5 { padding-right: var(--spacing-xl) !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--spacing-xs) !important; }
.pl-2 { padding-left: var(--spacing-sm) !important; }
.pl-3 { padding-left: var(--spacing-md) !important; }
.pl-4 { padding-left: var(--spacing-lg) !important; }
.pl-5 { padding-left: var(--spacing-xl) !important; }
/* العرض والارتÙاع */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-fit { width: fit-content !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.h-fit { height: fit-content !important; }
/* العرض - تجنب التضارب مع الهيدر */
.utilities-d-none { display: none !important; }
.utilities-d-block { display: block !important; }
.utilities-d-inline { display: inline !important; }
.utilities-d-inline-block { display: inline-block !important; }
.utilities-d-flex { display: flex !important; }
.utilities-d-grid { display: grid !important; }
/* الÙئات الأصلية للهيدر */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }
/* النص */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
/* الموضع - تجنب التضارب مع الهيدر */
.utilities-position-relative { position: relative !important; }
.utilities-position-absolute { position: absolute !important; }
.utilities-position-fixed { position: fixed !important; }
.utilities-position-sticky { position: sticky !important; }
/* الموضع للهيدر */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }
/* الØدود */
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: none !important; }
.border-t { border-top: 1px solid var(--border-color) !important; }
.border-b { border-bottom: 1px solid var(--border-color) !important; }
.border-r { border-right: 1px solid var(--border-color) !important; }
.border-l { border-left: 1px solid var(--border-color) !important; }
/* الخلÙية */
.bg-transparent { background-color: transparent !important; }
/* الظهور */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }
/* التمرير */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
/* المؤشر */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
/* المستخدم */
.user-select-none { user-select: none !important; }
.user-select-text { user-select: text !important; }
.user-select-all { user-select: all !important; }
/* z-index - تجنب التضارب مع الهيدر */
.utilities-z-0 { z-index: 0 !important; }
.utilities-z-10 { z-index: 10 !important; }
.utilities-z-20 { z-index: 20 !important; }
.utilities-z-30 { z-index: 30 !important; }
.utilities-z-40 { z-index: 40 !important; }
.utilities-z-50 { z-index: 50 !important; }
.utilities-z-auto { z-index: auto !important; }
/* z-index للهيدر */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-30 { z-index: 30 !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.z-auto { z-index: auto !important; }
/* التجاوب */
@media (max-width: 768px) {
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-flex { display: flex !important; }
.text-md-left { text-align: left !important; }
.text-md-center { text-align: center !important; }
.text-md-right { text-align: right !important; }
}
@media (max-width: 576px) {
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
.text-sm-left { text-align: left !important; }
.text-sm-center { text-align: center !important; }
.text-sm-right { text-align: right !important; }
}
/* ===== Utilities CSS - المساعدات الإضاÙية ===== */
/* Line Clamp Utilities */
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.line-clamp-4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
/* Aspect Ratio Utilities */
.aspect-square {
aspect-ratio: 1 / 1;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.aspect-16-9 {
aspect-ratio: 16 / 9;
}
/* Backdrop Blur */
.backdrop-blur-sm {
backdrop-filter: blur(4px);
}
.backdrop-blur-md {
backdrop-filter: blur(12px);
}
.backdrop-blur-lg {
backdrop-filter: blur(16px);
}
/* Opacity Utilities */
.opacity-10 {
opacity: 0.1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
/* Transform Utilities */
.transform {
transform: translateZ(0);
}
.hover\:transform:hover {
transform: translateZ(0);
}
.hover\:scale-105:hover {
transform: scale(1.05);
}
.hover\:scale-110:hover {
transform: scale(1.1);
}
.hover\:translate-y-1:hover {
transform: translateY(-0.25rem);
}
.hover\:translate-y-2:hover {
transform: translateY(-0.5rem);
}
.hover\:translate-y-3:hover {
transform: translateY(-0.75rem);
}
.hover\:translate-y-4:hover {
transform: translateY(-1rem);
}
/* Transition Utilities */
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
/* Easing Functions */
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
/* Shadow Utilities */
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-3xl {
box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}
/* Border Radius */
.rounded-2xl {
border-radius: 1rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
/* Z-Index */
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
/* Min Width */
.min-w-0 {
min-width: 0px;
}
/* Flex Shrink */
.flex-shrink-0 {
flex-shrink: 0;
}
/* Text Colors */
.text-white\/80 {
color: rgba(255, 255, 255, 0.8);
}
.text-white\/90 {
color: rgba(255, 255, 255, 0.9);
}
/* Background Colors */
.bg-white\/10 {
background-color: rgba(255, 255, 255, 0.1);
}
.bg-white\/20 {
background-color: rgba(255, 255, 255, 0.2);
}
.bg-white\/30 {
background-color: rgba(255, 255, 255, 0.3);
}
.bg-black\/40 {
background-color: rgba(0, 0, 0, 0.4);
}
.bg-black\/50 {
background-color: rgba(0, 0, 0, 0.5);
}
.bg-black\/60 {
background-color: rgba(0, 0, 0, 0.6);
}
.bg-black\/70 {
background-color: rgba(0, 0, 0, 0.7);
}
.bg-black\/90 {
background-color: rgba(0, 0, 0, 0.9);
}
/* Border Colors */
.border-white\/20 {
border-color: rgba(255, 255, 255, 0.2);
}
/* Responsive Utilities */
@media (max-width: 640px) {
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
/* ارتفاع مخصص للأقسام الطويلة */
.h-64 {
height: 16rem !important;
}
@media (max-width: 768px) {
.md\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.md\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (max-width: 1024px) {
.lg\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.lg\:text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.lg\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.lg\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
}
/* Grid Utilities */
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 640px) {
.sm\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.md\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
}
/* Gap Utilities */
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
/* Space Utilities */
.space-y-1 > * + * {
margin-top: 0.25rem;
}
.space-y-2 > * + * {
margin-top: 0.5rem;
}
.space-y-3 > * + * {
margin-top: 0.75rem;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
.space-y-6 > * + * {
margin-top: 1.5rem;
}
.space-y-8 > * + * {
margin-top: 2rem;
}
.space-y-12 > * + * {
margin-top: 3rem;
}
/* Padding Utilities */
.p-1 {
padding: 0.25rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.p-12 {
padding: 3rem;
}
.p-16 {
padding: 4rem;
}
/* Margin Utilities */
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-12 {
margin-top: 3rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-3 {
margin-right: 0.75rem;
}
.mr-4 {
margin-right: 1rem;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-3 {
margin-left: 0.75rem;
}
.ml-4 {
margin-left: 1rem;
}
/* Text Alignment */
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
/* Font Weight */
.font-light {
font-weight: 300;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-extrabold {
font-weight: 800;
}
/* Font Size */
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
/* Display - تجب التضارب مع الهيدر */
.utilities-block {
display: block;
}
.utilities-inline-block {
display: inline-block;
}
.utilities-inline {
display: inline;
}
.utilities-flex {
display: flex;
}
.utilities-inline-flex {
display: inline-flex;
}
.utilities-grid {
display: grid;
}
.utilities-hidden {
display: none;
}
/* Position - تجب التضارب مع الهيدر */
.utilities-relative {
position: relative;
}
.utilities-absolute {
position: absolute;
}
.utilities-fixed {
position: fixed;
}
.utilities-sticky {
position: sticky;
}
/* Overflow */
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.overflow-scroll {
overflow: scroll;
}
/* Object Fit */
.object-cover {
object-fit: cover;
}
.object-contain {
object-fit: contain;
}
.object-fill {
object-fit: fill;
}
/* Width & Height */
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.w-1 {
width: 0.25rem;
}
.w-2 {
width: 0.5rem;
}
.w-4 {
width: 1rem;
}
.w-6 {
width: 1.5rem;
}
.w-8 {
width: 2rem;
}
.w-12 {
width: 3rem;
}
.w-16 {
width: 4rem;
}
.w-24 {
width: 6rem;
}
.w-32 {
width: 8rem;
}
.h-1 {
height: 0.25rem;
}
.h-2 {
height: 0.5rem;
}
.h-4 {
height: 1rem;
}
.h-6 {
height: 1.5rem;
}
.h-8 {
height: 2rem;
}
.h-12 {
height: 3rem;
}
.h-16 {
height: 4rem;
}
.h-20 {
height: 5rem;
}
.h-24 {
height: 6rem;
}
.h-32 {
height: 8rem;
}
.h-48 {
height: 12rem;
}
.h-80 {
height: 20rem;
}
/* Border */
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-2 {
border-width: 2px;
}
.border-3 {
border-width: 3px;
}
.border-b {
border-bottom-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-l {
border-left-width: 1px;
}
.border-r {
border-right-width: 1px;
}
/* Border Radius */
.rounded {
border-radius: 0.25rem;
}
.rounded-sm {
border-radius: 0.125rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-full {
border-radius: 9999px;
}
/* Background */
.bg-white {
background-color: rgb(255 255 255);
}
.bg-slate-50 {
background-color: rgb(248 250 252);
}
.bg-slate-100 {
background-color: rgb(241 245 249);
}
.bg-slate-200 {
background-color: rgb(226 232 240);
}
.bg-slate-300 {
background-color: rgb(203 213 225);
}
.bg-slate-500 {
background-color: rgb(100 116 139);
}
.bg-slate-600 {
background-color: rgb(71 85 105);
}
.bg-slate-800 {
background-color: rgb(30 41 59);
}
.bg-gray-50 {
background-color: rgb(249 250 251);
}
.bg-gray-100 {
background-color: rgb(243 244 246);
}
.bg-gray-200 {
background-color: rgb(229 231 235);
}
.bg-gray-300 {
background-color: rgb(209 213 219);
}
.bg-gray-500 {
background-color: rgb(107 114 128);
}
.bg-gray-600 {
background-color: rgb(75 85 99);
}
.bg-gray-800 {
background-color: rgb(31 41 55);
}
.bg-gray-900 {
background-color: rgb(17 24 39);
}
.bg-red-600 {
background-color: rgb(220 38 38);
}
.bg-red-700 {
background-color: rgb(185 28 28);
}
.bg-blue-500 {
background-color: rgb(59 130 246);
}
.bg-blue-600 {
background-color: rgb(37 99 235);
}
.bg-blue-700 {
background-color: rgb(29 78 216);
}
.bg-yellow-400 {
background-color: rgb(250 204 21);
}
.bg-yellow-600 {
background-color: rgb(202 138 4);
}
.bg-green-500 {
background-color: rgb(34 197 94);
}
.bg-purple-500 {
background-color: rgb(168 85 247);
}
.bg-purple-600 {
background-color: rgb(147 51 234);
}
.bg-black {
background-color: rgb(0 0 0);
}
/* Text Colors */
.text-white {
color: rgb(255 255 255);
}
.text-slate-300 {
color: rgb(203 213 225);
}
.text-slate-500 {
color: rgb(100 116 139);
}
.text-slate-600 {
color: rgb(71 85 105);
}
.text-slate-800 {
color: rgb(30 41 59);
}
.text-gray-300 {
color: rgb(209 213 219);
}
.text-gray-500 {
color: rgb(107 114 128);
}
.text-gray-600 {
color: rgb(75 85 99);
}
.text-gray-800 {
color: rgb(31 41 55);
}
.text-gray-900 {
color: rgb(17 24 39);
}
.text-red-600 {
color: rgb(220 38 38);
}
.text-blue-500 {
color: rgb(59 130 246);
}
.text-blue-600 {
color: rgb(37 99 235);
}
.text-green-500 {
color: rgb(34 197 94);
}
.text-yellow-300 {
color: rgb(253 224 71);
}
.text-yellow-500 {
color: rgb(234 179 8);
}
.text-purple-600 {
color: rgb(147 51 234);
}
.text-black {
color: rgb(0 0 0);
}
/* Flexbox */
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-shrink-0 {
flex-shrink: 0;
}
/* Cursor */
.cursor-pointer {
cursor: pointer;
}
/* Outline */
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
/* Focus */
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-white:focus {
--tw-ring-color: rgb(255 255 255);
}
/* Hover */
.hover\:bg-gray-100:hover {
background-color: rgb(243 244 246);
}
.hover\:bg-slate-50:hover {
background-color: rgb(248 250 252);
}
.hover\:text-red-600:hover {
color: rgb(220 38 38);
}
.hover\:text-blue-600:hover {
color: rgb(37 99 235);
}
.hover\:underline:hover {
text-decoration: underline;
}
.hover\:shadow-xl:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.hover\:shadow-2xl:hover {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* Group Hover */
.group:hover .group-hover\:text-yellow-200 {
color: rgb(254 240 138);
}
.group:hover .group-hover\:scale-110 {
transform: scale(1.1);
}
.group:hover .group-hover\:translate-x-1 {
transform: translateX(0.25rem);
}
/* Last Child */
.last\:border-b-0:last-child {
border-bottom-width: 0px;
}
/* Border Bottom */
.border-b {
border-bottom-width: 1px;
border-color: rgb(226 232 240);
}
/* Animation Classes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(192, 139, 45, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(192, 139, 45, 0.8);
}
}
@keyframes golden-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Animation Classes */
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.slide-in-right {
animation: slideInRight 0.6s ease-out;
}
.slide-in-up {
animation: slideInUp 0.6s ease-out;
}
.rotate-on-hover:hover {
animation: rotate 0.6s ease-in-out;
}
.hover-glow:hover {
animation: glow 2s ease-in-out infinite;
}
.golden-line::after {
animation: golden-flow 2s ease-in-out infinite;
}
/* Custom Classes */
.hover-lift:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.expand-on-hover:hover {
transform: scale(1.05);
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(192, 139, 45, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.ripple-effect:hover::before {
width: 100%;
height: 100%;
}
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-particles::before,
.floating-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(192, 139, 45, 0.3);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-particles::before {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.floating-particles::after {
top: 60%;
left: 80%;
animation-delay: 3s;
}
.featured-icon {
transition: all 0.3s ease;
}
.featured-icon:hover {
transform: scale(1.2) rotate(5deg);
color: #C08B2D;
}
.featured-badge {
position: relative;
overflow: hidden;
animation: pulse 2s infinite;
}
.featured-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.featured-badge:hover::before {
left: 100%;
}
.number-badge {
position: relative;
overflow: hidden;
animation: bounce 1s ease-in-out infinite alternate;
}
.number-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.number-badge:hover::before {
left: 100%;
}
.featured-title {
position: relative;
transition: all 0.3s ease;
}
.featured-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: width 0.3s ease;
}
.featured-title:hover::after {
width: 100%;
}
/* Responsive Design */
@media (max-width: 640px) {
.container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 1024px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
/* Container */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.bg-white {
background-color: rgb(255 255 255);
border: 1px solid rgb(0 0 0);
}
.text-slate-800 {
color: rgb(0 0 0);
}
.text-slate-600 {
color: rgb(0 0 0);
}
}
/* Print Styles */
@media print {
.bg-white {
background-color: rgb(255 255 255) !important;
color: rgb(0 0 0) !important;
}
.text-slate-800 {
color: rgb(0 0 0) !important;
}
.text-slate-600 {
color: rgb(0 0 0) !important;
}
.shadow-lg,
.shadow-xl,
.shadow-2xl {
box-shadow: none !important;
}
}
/* Container Utilities */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 0.5rem;
}
@media (min-width: 640px) {
.container {
padding: 0 1rem;
}
}
@media (min-width: 768px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
}
/* Full Width Container */
.w-full {
width: 100%;
}
/* Centered Content */
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-8xl {
max-width: 88rem;
}
/* Card Styles with Light Borders */
.card {
background: white;
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.03);
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
/* Section Cards with Very Light Borders */
.section-card {
background: white;
border-radius: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.02);
overflow: hidden;
transition: all 0.3s ease;
}
.section-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
transform: translateY(-3px);
}
/* Category Section Specific Styles */
.category-section .section-card {
height: 100%;
display: flex;
flex-direction: column;
}
.category-section .section-card .bg-gradient-to-r {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
position: relative;
overflow: hidden;
}
.category-section .section-card .bg-gradient-to-r::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s;
}
.category-section .section-card:hover .bg-gradient-to-r::before {
left: 100%;
}
.category-section .section-card .p-4 {
flex: 1;
display: flex;
flex-direction: column;
}
.category-section .section-card article {
flex: 1;
}
.category-section .section-card .pt-2 {
margin-top: auto;
}
/* Responsive Grid for Categories */
@media (max-width: 768px) {
.category-section .grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.category-section .grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
}
@media (min-width: 1024px) {
.category-section .grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
}
/* Featured News Cards */
.featured-news-card {
background: white;
border-radius: 1.5rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.015);
overflow: hidden;
transition: all 0.4s ease;
}
.featured-news-card:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
/* News Grid Cards */
.news-grid-card {
background: white;
border-radius: 1rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.01);
overflow: hidden;
transition: all 0.3s ease;
}
.news-grid-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
transform: translateY(-1px);
}
/* Sidebar Widgets */
.sidebar-widget {
background: white;
border-radius: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.008);
overflow: hidden;
transition: all 0.3s ease;
}
.sidebar-widget:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
transform: translateY(-1px);
}
/* Button Styles */
.btn-primary {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 2px 8px rgba(192, 139, 45, 0.2);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
color: white;
text-decoration: none;
}
.btn-secondary {
background: rgba(192, 139, 45, 0.1);
color: #C08B2D;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: all 0.3s ease;
border: 1px solid rgba(192, 139, 45, 0.2);
}
.btn-secondary:hover {
background: rgba(192, 139, 45, 0.15);
color: #B22B2B;
text-decoration: none;
transform: translateY(-1px);
}
/* Section Headers */
.section-header {
margin-bottom: 1.5rem;
}
.section-header h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.5rem;
}
.section-header p {
color: #64748b;
font-size: 0.875rem;
}
/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Gap Utilities */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
/* Spacing Utilities */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
/* Padding Utilities */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
/* Margin Utilities */
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
/* Text Utilities */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
/* Color Utilities */
.text-white { color: #ffffff; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
/* Background Utilities */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
/* Border Radius */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
/* Flexbox Utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Responsive Grid */
@media (min-width: 640px) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }
@media (min-width: 640px) {
.sm\:block { display: block; }
.sm\:hidden { display: none; }
}
@media (min-width: 768px) {
.md\:block { display: block; }
.md\:hidden { display: none; }
}
@media (min-width: 1024px) {
.lg\:block { display: block; }
.lg\:hidden { display: none; }
}
/* Width and Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
/* Z-index */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
/* Transform */
.transform { transform: translateZ(0); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
/* Transition */
.transition-all { transition: all 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
/* Shadow */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
/* Line Clamp */
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Backdrop Filter */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
/* Gradient Backgrounds */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-\[#C08B2D\] { --tw-gradient-from: #C08B2D; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(192, 139, 45, 0)); }
.to-\[#B22B2B\] { --tw-gradient-to: #B22B2B; }
.via-\[#B22B2B\] { --tw-gradient-stops: var(--tw-gradient-from), #B22B2B, var(--tw-gradient-to, rgba(178, 43, 43, 0)); }
/* Custom Colors */
.text-\[#C08B2D\] { color: #C08B2D; }
.text-\[#B22B2B\] { color: #B22B2B; }
.bg-\[#C08B2D\] { background-color: #C08B2D; }
.bg-\[#B22B2B\] { background-color: #B22B2B; }
/* Hover States */
.hover\:text-\[#C08B2D\]:hover { color: #C08B2D; }
.hover\:text-\[#B22B2B\]:hover { color: #B22B2B; }
.hover\:bg-\[#C08B2D\]:hover { background-color: #C08B2D; }
.hover\:bg-\[#B22B2B\]:hover { background-color: #B22B2B; }
/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }
/* Border Colors */
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
/* Border Width */
.border { border-width: 1px; }
.border-0 { border-width: 0px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
/* Border Radius */
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
/* Aspect Ratio */
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-square { aspect-ratio: 1 / 1; }
/* Object Fit */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
/* User Select */
.select-none { user-select: none; }
.select-text { user-select: text; }
/* Whitespace */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
/* Word Break */
.break-words { word-wrap: break-word; }
.break-all { word-break: break-all; }
/* Text Decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
/* List Style */
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }
/* Outline */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
/* Resize */
.resize-none { resize: none; }
.resize-y { resize: vertical; }
.resize-x { resize: horizontal; }
/* Appearance */
.appearance-none { appearance: none; }
/* Placeholder */
.placeholder-gray-400::placeholder { color: #9ca3af; }
.placeholder-gray-500::placeholder { color: #6b7280; }
/* Focus States */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:ring-\[#C08B2D\]:focus { box-shadow: 0 0 0 3px rgba(192, 139, 45, 0.5); }
/* Group Hover */
.group:hover .group-hover\:text-\[#C08B2D\] { color: #C08B2D; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
/* Animation Classes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes bounce {
0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-fadeIn { animation: fadeIn 0.6s ease-out; }
.animate-slideIn { animation: slideIn 0.5s ease-out; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }
/* Loading States */
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { left: -100%; }
100% { left: 100%; }
}
/* Ripple Effect */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.ripple-effect:active::after {
width: 300px;
height: 300px;
}
/* Hover Lift Effect */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
/* Expand on Hover */
.expand-on-hover {
transition: transform 0.3s ease;
}
.expand-on-hover:hover {
transform: scale(1.1);
}
/* Rotate on Hover */
.rotate-on-hover {
transition: transform 0.3s ease;
}
.rotate-on-hover:hover {
transform: rotate(360deg);
}
/* Featured Icon Animation */
.featured-icon {
transition: transform 0.3s ease;
}
.featured-icon:hover {
transform: scale(1.2);
}
/* Featured Badge */
.featured-badge {
position: relative;
overflow: hidden;
}
.featured-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.featured-badge:hover::before {
left: 100%;
}
/* Number Badge */
.number-badge {
position: relative;
overflow: hidden;
}
.number-badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s;
}
.number-badge:hover::before {
transform: translateX(100%);
}
/* Newsletter Sidebar */
.newsletter-sidebar {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
position: relative;
overflow: hidden;
}
.newsletter-sidebar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Weather Widget */
.weather-widget {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: white;
position: relative;
overflow: hidden;
}
.weather-widget::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: weatherFloat 6s ease-in-out infinite;
}
@keyframes weatherFloat {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-10px, -10px) rotate(180deg); }
}
/* Homepage Button Section */
.homepage-btn-section {
position: relative;
overflow: hidden;
}
.homepage-btn-section::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.8s;
}
.homepage-btn-section:hover::before {
left: 100%;
}
/* Responsive Design */
@media (max-width: 640px) {
.container {
padding: 0 0.5rem;
}
.card, .section-card, .featured-news-card {
border-radius: 0.75rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.005);
}
.btn-primary {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.section-header h2 {
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
.grid-cols-2, .grid-cols-3, .grid-cols-4 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.gap-6 {
gap: 1rem;
}
.p-6 {
padding: 1rem;
}
}
/* Print Styles */
@media print {
.card, .section-card, .featured-news-card {
box-shadow: none;
border: 1px solid #e5e7eb;
}
.btn-primary, .btn-secondary {
background: #374151 !important;
color: white !important;
border: 1px solid #374151 !important;
}
.newsletter-sidebar, .weather-widget {
background: #f3f4f6 !important;
color: #374151 !important;
}
}
/* Header Styles - شبوة21 */
/* Desktop Header Container */
.desktop-header-container {
display: none;
}
@media (min-width: 768px) {
.desktop-header-container {
display: block;
}
}
/* Mobile Header Container */
.mobile-header-container {
display: block;
}
@media (min-width: 768px) {
.mobile-header-container {
display: none;
}
}
/* Top Navigation Scroll Effects */
.theme-header.header-scrolled .top-nav {
transform: translateY(-100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-header.header-compact .top-nav {
transform: translateY(-100%);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Main Navigation - No slide effect */
.theme-header.header-scrolled .main-nav-wrapper {
transform: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-header.header-compact .main-nav-wrapper {
transform: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Remove gap when top nav is hidden */
.theme-header.header-scrolled .top-nav,
.theme-header.header-compact .top-nav {
margin-bottom: 0;
height: 0;
overflow: hidden;
}
.theme-header.header-compact .search-input {
width: 250px;
padding: 0.4rem 0.8rem 0.4rem 2rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-header.header-compact .search-input:focus {
width: 280px;
}
/* Main Header Container */
.theme-header {
position: relative;
z-index: 1000;
background: white;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
width: 100%;
}
/* Sticky Header - Fixed for Chrome */
.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
animation: slideDown 0.3s ease-out;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: translateZ(0);
will-change: transform;
}
/* إصلاح التداخل مع hero section عند التمرير */
body.has-sticky-header {
padding-top: 0;
}
body.has-sticky-header .hero-section {
margin-top: 0;
padding-top: 2rem;
}
/* ضمان عدم تداخل المحتوى مع الـ sticky header */
.theme-header.sticky-header + * {
margin-top: 0 !important;
}
/* إصلاح إضافي للتداخل مع hero section */
.hero-section {
position: relative;
z-index: 1;
margin-top: 0;
}
/* ضمان عدم تداخل hero section مع sticky header */
.theme-header.header-scrolled ~ * .hero-section,
.theme-header.header-compact ~ * .hero-section {
margin-top: 0;
padding-top: 1rem;
}
/* إصلاح خاص للصفحة الرئيسية */
.homepage .hero-section {
margin-top: 0;
padding-top: 2rem;
}
/* إصلاح للصفحات الأخرى */
body:not(.homepage) .hero-section {
margin-top: 0;
padding-top: 1rem;
}
/* إصلاح شامل للتداخل */
.theme-header {
position: relative;
z-index: 1001 !important;
}
.theme-header.sticky-header,
.theme-header.header-scrolled,
.theme-header.header-compact {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
}
/* ضمان أن hero section يبقى تحت الـ header */
.hero-section,
.hero-section * {
position: relative;
z-index: 1 !important;
}
/* إصلاح خاص للمحتوى */
main,
.main-content,
.content-wrapper {
position: relative;
z-index: 1;
}
/* إصلاح للـ breaking news */
.breaking-news-section {
position: relative;
z-index: 10;
}
/* Ensure sticky header works in Chrome */
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
@keyframes slideDown {
from {
transform: translateY(-100%) translateZ(0);
-webkit-transform: translateY(-100%) translateZ(0);
}
to {
transform: translateY(0) translateZ(0);
-webkit-transform: translateY(0) translateZ(0);
}
}
/* Top Navigation */
.top-nav {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;
padding: 0.5rem 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 1002;
height: auto;
overflow: visible;
}
.topbar-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.topbar-today-date {
color: #6c757d;
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.topbar-today-date::before {
content: '📅';
font-size: 1rem;
}
.components {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.social-icons-item {
margin: 0;
}
.social-icons-item a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: #6c757d;
text-decoration: none;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.5);
position: relative;
overflow: hidden;
}
.social-icons-item a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.social-icons-item a:hover::before {
left: 100%;
}
.social-icons-item a:hover {
color: var(--primary-color);
background: rgba(192, 139, 45, 0.1);
transform: translateY(-2px);
}
.menu-item {
margin: 0;
}
.custom-menu-link a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
color: #6c757d;
text-decoration: none;
border-radius: 0.5rem;
transition: all 0.3s ease;
font-size: 0.875rem;
background: rgba(255, 255, 255, 0.5);
position: relative;
overflow: hidden;
}
.custom-menu-link a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.1), transparent);
transition: left 0.5s ease;
}
.custom-menu-link a:hover::before {
left: 100%;
}
.custom-menu-link a:hover {
color: var(--primary-color);
background: rgba(192, 139, 45, 0.1);
}
/* Search Bar */
.search-bar {
position: relative;
}
.search-input {
width: 200px;
padding: 0.5rem 1rem 0.5rem 2.5rem;
border: 1px solid #dee2e6;
border-radius: 2rem;
font-size: 0.875rem;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.8);
}
.search-input:focus {
width: 250px;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(192, 139, 45, 0.1);
outline: none;
}
.search-submit {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6c757d;
cursor: pointer;
transition: color 0.3s ease;
}
.search-submit:hover {
color: var(--primary-color);
}
/* Main Navigation */
.main-nav-wrapper {
background: white;
border-bottom: 1px solid #dee2e6;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.main-menu-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1rem 0;
}
.image-logo {
flex-shrink: 0;
}
.image-logo img {
height: 55px;
width: auto;
transition: transform 0.3s ease;
}
.image-logo:hover img {
transform: scale(1.05);
}
.main-menu {
flex: 1;
}
.main-menu-wrap {
display: flex;
justify-content: center;
}
.header-menu {
display: flex;
align-items: center;
}
.menu {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.menu-item {
position: relative;
}
.menu-item a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: #333;
text-decoration: none;
font-weight: 500;
border-radius: 0.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.menu-item a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.1), transparent);
transition: left 0.5s ease;
}
.menu-item a:hover::before {
left: 100%;
}
.menu-item a:hover {
color: var(--primary-color);
background: rgba(192, 139, 45, 0.05);
}
/* Dropdown Menu */
.menu-item ul {
position: absolute;
top: 100%;
right: 0;
min-width: 200px;
background: white;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
list-style: none;
margin: 0;
padding: 0.5rem 0;
}
.menu-item:hover ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.menu-item ul li {
margin: 0;
}
.menu-item ul li a {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 0;
font-weight: normal;
}
.menu-item ul li a:hover {
background: rgba(192, 139, 45, 0.1);
color: var(--primary-color);
}
/* Main Page Button */
.main-page-btn {
flex-shrink: 0;
}
.main-page-btn a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
text-decoration: none;
border-radius: 2rem;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.main-page-btn a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.main-page-btn a:hover::before {
left: 100%;
}
.main-page-btn a:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.3);
color: white;
}
/* Mobile Header Styles */
.mobile-header-container {
background: white;
border-bottom: 1px solid #dee2e6;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1000;
width: 100%;
}
/* Mobile Header Sticky Fix */
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.mobile-header-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
gap: 1rem;
}
.mobile-logo-section {
flex: 1;
}
.mobile-logo-link {
display: flex;
align-items: center;
text-decoration: none;
transition: transform 0.3s ease;
}
.mobile-logo-link:hover {
transform: scale(1.05);
}
.mobile-logo-img {
height: 45px;
width: auto;
max-width: 150px;
object-fit: contain;
}
.mobile-controls-section {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mobile-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: none;
background: rgba(192, 139, 45, 0.1);
color: var(--primary-color);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
font-size: 1.2rem;
}
.mobile-control-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.2), transparent);
transition: left 0.5s ease;
}
.mobile-control-btn:hover::before {
left: 100%;
}
.mobile-control-btn:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.mobile-control-btn.active {
background: var(--primary-color);
color: white;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
}
/* Mobile Search Container */
.mobile-search-container {
padding: 1rem;
background: rgba(192, 139, 45, 0.05);
border-top: 1px solid #dee2e6;
}
.mobile-search-form {
display: flex;
gap: 0.5rem;
}
.mobile-search-input-wrapper {
flex: 1;
position: relative;
}
.mobile-search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 1rem;
}
.mobile-search-input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
border: 1px solid #dee2e6;
border-radius: 2rem;
font-size: 1rem;
background: white;
transition: all 0.3s ease;
}
.mobile-search-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(192, 139, 45, 0.1);
outline: none;
}
.mobile-search-submit-btn {
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 2rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.mobile-search-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
}
/* Mobile Navigation Menu */
.mobile-nav-menu {
position: fixed;
top: 0;
right: 0;
width: 320px;
height: 100vh;
background: white;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
z-index: 1001;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.mobile-nav-menu[x-show="true"] {
transform: translateX(0);
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
backdrop-filter: blur(5px);
}
/* Mobile Menu Header */
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
}
.mobile-nav-title-section {
flex: 1;
}
.mobile-nav-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.mobile-nav-subtitle {
font-size: 0.875rem;
opacity: 0.9;
margin: 0;
}
.mobile-nav-close-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.mobile-nav-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Mobile Menu Content */
.mobile-nav-content {
padding: 1rem 0;
}
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-item {
margin: 0;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.1), transparent);
transition: left 0.5s ease;
}
.mobile-nav-link:hover::before {
left: 100%;
}
.mobile-nav-link:hover {
background: rgba(192, 139, 45, 0.05);
color: var(--primary-color);
}
.mobile-nav-link-primary {
background: rgba(192, 139, 45, 0.1);
color: var(--primary-color);
font-weight: 600;
}
.mobile-nav-link-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mobile-nav-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
}
.mobile-nav-text {
font-weight: 500;
}
.mobile-nav-arrow {
font-size: 1rem;
transition: transform 0.3s ease;
}
.mobile-nav-link:hover .mobile-nav-arrow {
transform: translateX(-5px);
}
/* Mobile Sub Navigation */
.mobile-sub-nav-list {
list-style: none;
margin: 0;
padding: 0;
background: rgba(192, 139, 45, 0.05);
}
.mobile-sub-nav-item {
margin: 0;
}
.mobile-sub-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.5rem 0.875rem 3rem;
color: #666;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(192, 139, 45, 0.1);
}
.mobile-sub-nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.1), transparent);
transition: left 0.5s ease;
}
.mobile-sub-nav-link:hover::before {
left: 100%;
}
.mobile-sub-nav-link:hover {
background: rgba(192, 139, 45, 0.1);
color: var(--primary-color);
}
.mobile-sub-nav-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mobile-sub-nav-icon {
font-size: 1rem;
width: 20px;
text-align: center;
}
.mobile-sub-nav-text {
font-size: 0.9rem;
}
.mobile-sub-nav-arrow {
font-size: 0.875rem;
transition: transform 0.3s ease;
}
.mobile-sub-nav-link:hover .mobile-sub-nav-arrow {
transform: translateX(-5px);
}
/* Mobile Menu Footer */
.mobile-nav-footer {
padding: 1.5rem;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
}
.mobile-social-section {
margin-bottom: 1rem;
}
.mobile-social-title {
font-size: 1rem;
font-weight: 600;
color: #333;
margin: 0 0 0.75rem 0;
}
.mobile-social-links {
display: flex;
gap: 0.5rem;
}
.mobile-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--primary-color);
color: white;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mobile-social-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.mobile-social-link:hover::before {
left: 100%;
}
.mobile-social-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
}
.mobile-footer-info {
text-align: center;
}
.mobile-footer-text {
font-size: 0.875rem;
color: #666;
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.search-input {
width: 180px;
}
.search-input:focus {
width: 220px;
}
.menu {
gap: 1.5rem;
}
.menu-item a {
padding: 0.625rem 0.875rem;
}
.main-page-btn a {
padding: 0.625rem 1.25rem;
}
}
@media (max-width: 768px) {
/* إخÙاء الهيدر العادي ÙÙŠ الموبايل */
.desktop-header-container {
display: none !important;
}
/* إظهار الهيدر الموبايل */
.mobile-header-container {
display: block !important;
}
/* Mobile Header Scroll Effects - Fixed */
.theme-header.header-scrolled .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.theme-header.header-compact .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.theme-header.header-compact .mobile-header-wrapper {
padding: 0.5rem 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-header.header-compact .mobile-logo-img {
max-height: 35px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-menu {
width: 300px;
}
.mobile-logo-img {
height: 40px !important;
}
.mobile-control-btn {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.mobile-nav-menu {
width: 100%;
}
.mobile-logo-img {
height: 35px !important;
}
.mobile-control-btn {
width: 36px;
height: 36px;
font-size: 1.1rem;
}
.mobile-header-wrapper {
padding: 0.75rem;
}
.mobile-search-container {
padding: 0.75rem;
}
.mobile-nav-header {
padding: 1rem;
}
.mobile-nav-link {
padding: 0.875rem 1rem;
}
.mobile-sub-nav-link {
padding: 0.625rem 1rem;
}
}
/* Fix for overlapping elements */
.theme-header {
position: relative;
z-index: 1000;
}
.top-nav,
.main-nav-wrapper {
position: relative;
z-index: 1001;
}
.menu-item ul {
z-index: 1002;
}
/* Enhanced hover effects */
.menu-item a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transition: all 0.3s ease;
transform: translateX(-50%);
}
.menu-item a:hover::after {
width: 80%;
}
/* Search input focus enhancement */
.search-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(192, 139, 45, 0.1);
}
/* Animation for mobile menu */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Print styles */
@media print {
.theme-header {
display: none;
}
.mobile-nav-menu,
.mobile-menu-overlay {
display: none;
}
}
/* Additional scroll effects for desktop */
.theme-header.header-scrolled .top-nav,
.theme-header.header-compact .top-nav {
transform: translateY(-100%);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-header.header-scrolled .main-nav-wrapper,
.theme-header.header-compact .main-nav-wrapper {
transform: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Chrome-specific fixes */
@supports (-webkit-appearance: none) {
.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Mobile specific Chrome fixes */
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
.hero-section {
position: relative;
z-index: 1;
padding: 1rem 0;
margin: 0;
background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
min-height: auto;
overflow: hidden;
/* إضافة padding-top للتعويض عن الـ sticky header */
padding-top: 2rem;
}
/* Animated Background */
.hero-bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.floating-shapes {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
opacity: 0.1;
filter: blur(1px);
}
.shape-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 60px;
height: 60px;
top: 20%;
right: 15%;
animation-delay: 1s;
}
.shape-3 {
width: 100px;
height: 100px;
bottom: 20%;
left: 20%;
animation-delay: 2s;
}
.shape-4 {
width: 40px;
height: 40px;
top: 60%;
right: 10%;
animation-delay: 3s;
}
.shape-5 {
width: 70px;
height: 70px;
bottom: 10%;
right: 30%;
animation-delay: 4s;
}
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(192, 139, 45, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(178, 43, 43, 0.05) 0%, transparent 50%);
z-index: 1;
}
.hero-section::before {
content: '';
position: absolute;
top: -30%;
left: -30%;
width: 160%;
height: 160%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.03) 0%, transparent 60%);
z-index: 0;
animation: rotate 20s linear infinite;
}
.logo-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 800px;
}
.logo-box {
position: relative;
width: 160px;
height: 160px;
transform-style: preserve-3d;
transition: all 0.3s ease;
}
.logo-box:hover {
transform: scale(1.05) rotateY(5deg);
}
.logo-glow-bg {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.15) 0%, transparent 70%);
border-radius: 50%;
filter: blur(8px);
opacity: 0.7;
animation: pulse 2s ease-in-out infinite;
}
.logo-glow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.2) 0%, transparent 70%);
border-radius: 50%;
filter: blur(12px);
opacity: 0.3;
animation: glow 3s ease-in-out infinite;
}
.logo-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3.5rem;
font-weight: 800;
color: var(--primary-color);
text-shadow: 0 3px 15px rgba(192, 139, 45, 0.3);
z-index: 2;
transition: all 0.3s ease;
}
.logo-text:hover {
transform: translate(-50%, -50%) scale(1.1) rotate(3deg);
filter: brightness(1.2);
}
.logo-decoration {
position: absolute;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
z-index: 3;
}
.logo-21 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
font-weight: 700;
color: white;
background: var(--primary-color);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.4);
z-index: 3;
}
/* Enhanced Title Styling */
.hero-title-container {
position: relative;
}
.hero-title {
position: relative;
z-index: 2;
}
.title-highlight {
position: relative;
display: inline-block;
transition: all 0.3s ease;
}
.title-highlight:hover {
transform: scale(1.05);
}
.title-highlight::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
z-index: -1;
transition: all 0.3s ease;
}
.title-highlight:hover::after {
height: 6px;
box-shadow: 0 2px 8px rgba(192, 139, 45, 0.3);
}
.title-sparkle {
font-size: 0.8em;
filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}
/* Enhanced Description */
.hero-description {
position: relative;
}
.hero-description p {
position: relative;
padding: 1rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border: 1px solid rgba(192, 139, 45, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.hero-description p:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
border-color: rgba(192, 139, 45, 0.2);
}
.quote-mark {
font-family: serif;
font-weight: bold;
filter: drop-shadow(0 2px 4px rgba(192, 139, 45, 0.3));
}
/* Enhanced Buttons */
.hero-actions {
position: relative;
z-index: 2;
}
.btn-primary, .btn-secondary {
position: relative;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.6);
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}
.btn-secondary {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.3);
background: var(--primary-color);
color: white;
}
.btn-shine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transform: translateX(-100%);
transition: all 0.6s ease;
}
.btn-primary:hover .btn-shine,
.btn-secondary:hover .btn-shine {
transform: translateX(100%);
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-indicator:hover {
transform: translateX(-50%) scale(1.2);
}
.scroll-arrow {
width: 24px;
height: 24px;
border: 2px solid var(--primary-color);
border-top: none;
border-left: none;
transform: rotate(45deg);
animation: bounce 2s infinite;
}
/* Enhanced Animations */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes glow {
0%, 100% {
opacity: 0.3;
transform: scale(1.05);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.05);
}
}
@keyframes shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.1;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.2;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) rotate(45deg);
}
40% {
transform: translateY(-10px) rotate(45deg);
}
60% {
transform: translateY(-5px) rotate(45deg);
}
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.logo-box {
width: 140px;
height: 140px;
}
.logo-text {
font-size: 3.5rem;
}
.logo-21 {
width: 55px;
height: 55px;
font-size: 2rem;
}
.hero-section {
padding: 0.75rem 0;
}
.shape-1 { width: 60px; height: 60px; }
.shape-2 { width: 45px; height: 45px; }
.shape-3 { width: 75px; height: 75px; }
.shape-4 { width: 30px; height: 30px; }
.shape-5 { width: 55px; height: 55px; }
}
@media (max-width: 768px) {
.logo-box {
width: 120px;
height: 120px;
}
.logo-text {
font-size: 3rem;
}
.logo-21 {
width: 50px;
height: 50px;
font-size: 1.8rem;
}
.hero-title {
font-size: 2rem;
}
.hero-section {
padding: 0.5rem 0;
}
.btn-primary, .btn-secondary {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
.shape-1 { width: 50px; height: 50px; }
.shape-2 { width: 35px; height: 35px; }
.shape-3 { width: 60px; height: 60px; }
.shape-4 { width: 25px; height: 25px; }
.shape-5 { width: 45px; height: 45px; }
}
@media (max-width: 480px) {
.logo-box {
width: 100px;
height: 100px;
}
.logo-text {
font-size: 2.5rem;
}
.logo-21 {
width: 40px;
height: 40px;
font-size: 1.5rem;
}
.hero-title {
font-size: 1.6rem;
}
.hero-section {
padding: 0.25rem 0;
}
.btn-primary, .btn-secondary {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.shape-1 { width: 40px; height: 40px; }
.shape-2 { width: 30px; height: 30px; }
.shape-3 { width: 50px; height: 50px; }
.shape-4 { width: 20px; height: 20px; }
.shape-5 { width: 35px; height: 35px; }
}
/* Additional improvements */
.hero-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.hero-section .container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.hero-section .container {
padding: 0 2rem;
}
}
/* Smooth animations */
.hero-section * {
transition: all 0.3s ease;
}
/* Optimized for performance */
.hero-section::before,
.logo-box,
.floating-shapes .shape {
will-change: transform;
}
/* Enhanced accessibility */
@media (prefers-reduced-motion: reduce) {
.hero-section::before,
.floating-shapes .shape,
.logo-glow,
.logo-glow-bg,
.title-sparkle,
.scroll-arrow {
animation: none;
}
.logo-box {
transform: none;
}
.animate-fade-in-up,
.animate-fade-in-delay,
.animate-fade-in-delay2,
.animate-fade-in-delay3 {
animation: none;
opacity: 1;
transform: none;
}
.btn-primary:hover,
.btn-secondary:hover {
transform: none;
}
}
/* Glass morphism effect for modern browsers */
@supports (backdrop-filter: blur(10px)) {
.hero-description p {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.7);
}
}
/* Enhanced focus states for accessibility */
.btn-primary:focus,
.btn-secondary:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Loading animation for images */
.logo-text img {
transition: opacity 0.3s ease;
}
.logo-text img[loading] {
opacity: 0;
}
.logo-text img[loaded] {
opacity: 1;
}
.footer-section {
position: relative;
padding-top: 10px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}
.footer-bg-pattern {
background-image:
radial-gradient(circle at 25% 25%, rgba(192, 139, 45, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(178, 43, 43, 0.1) 0%, transparent 50%);
}
.pattern-grid {
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(192, 139, 45, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(192, 139, 45, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.floating-particles::before,
.floating-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(192, 139, 45, 0.3);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-particles::before {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.floating-particles::after {
top: 60%;
left: 80%;
animation-delay: 3s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.footer-section {
margin-bottom: 2rem;
}
.footer-title {
color: #fbbf24;
font-size: 1.25rem;
font-weight: 700;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-link {
color: #d1d5db;
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 0.5rem 0;
position: relative;
}
.footer-link:hover {
color: var(--primary-color);
transform: translateX(-5px);
}
.footer-link::before {
content: '→';
position: absolute;
right: -15px;
opacity: 0;
transition: all 0.3s ease;
color: var(--primary-color);
}
.footer-link:hover::before {
opacity: 1;
right: -20px;
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: all 0.3s ease;
z-index: -1;
}
.social-link:hover::before {
opacity: 1;
}
.social-link:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.4);
}
.social-link.facebook {
background: #1877f2;
}
.social-link.twitter {
background: #1da1f2;
}
.social-link.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.social-link.youtube {
background: #ff0000;
}
.social-link.telegram {
background: #0088cc;
}
.social-link.linkedin {
background: #0077b5;
}
/* Contact Info */
.contact-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
}
.contact-icon {
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(192, 139, 45, 0.3);
}
.contact-link, .contact-text {
color: #d1d5db;
text-decoration: none;
transition: all 0.3s ease;
}
.contact-link:hover {
color: var(--primary-color);
}
/* Newsletter Section */
.newsletter-section {
background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
border: 1px solid rgba(192, 139, 45, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.1) 0%, transparent 70%);
animation: newsletterFloat 8s ease-in-out infinite;
}
@keyframes newsletterFloat {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(-10px, -10px) rotate(180deg); }
}
.newsletter-icon {
animation: pulse 2s ease-in-out infinite;
}
.newsletter-title {
color: #fbbf24;
font-weight: 700;
}
.newsletter-description {
color: #d1d5db;
font-size: 0.95rem;
}
.newsletter-form {
display: flex;
max-width: 400px;
margin: 0 auto;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.newsletter-form:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.newsletter-input {
flex: 1;
padding: 0.75rem 1rem;
border: none;
outline: none;
background: #1f2937;
color: white;
font-size: 0.95rem;
}
.newsletter-input::placeholder {
color: #9ca3af;
}
.newsletter-input:focus {
background: #111827;
}
.newsletter-btn {
padding: 0.75rem 1.5rem;
border: none;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-btn:hover {
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(192, 139, 45, 0.4);
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid #374151;
padding-top: 1.5rem;
}
.copyright {
color: #9ca3af;
font-size: 0.875rem;
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.legal-link {
color: #9ca3af;
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
position: relative;
}
.legal-link:hover {
color: var(--primary-color);
}
.legal-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.legal-link:hover::after {
width: 100%;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-section {
text-align: center;
}
.footer-title::after {
right: 50%;
transform: translateX(50%);
}
.social-links {
justify-content: center;
}
.contact-item {
justify-content: center;
}
.footer-legal {
justify-content: center;
margin-top: 1rem;
}
.newsletter-form {
flex-direction: column;
max-width: 100%;
}
.newsletter-input {
border-radius: 0.5rem 0.5rem 0 0;
}
.newsletter-btn {
border-radius: 0 0 0.5rem 0.5rem;
}
}
@media (max-width: 480px) {
.footer-section {
padding: 1rem 0;
}
.social-links {
gap: 0.75rem;
}
.social-link {
width: 40px;
height: 40px;
font-size: 0.875rem;
}
.footer-legal {
flex-direction: column;
gap: 0.5rem;
}
}
/* Animation Effects */
.footer-section {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Hover Effects */
.footer-section:hover .pattern-grid {
animation: patternMove 20s linear infinite;
}
@keyframes patternMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(20px, 20px);
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.footer-section,
.footer-link,
.social-link,
.newsletter-btn,
.legal-link {
animation: none;
transition: none;
}
.footer-section:hover .pattern-grid {
animation: none;
}
}
/* Focus States */
.footer-link:focus,
.social-link:focus,
.contact-link:focus,
.newsletter-input:focus,
.newsletter-btn:focus,
.legal-link:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* Print Styles */
@media print {
.footer-section {
background: white !important;
color: black !important;
}
.social-links,
.newsletter-section {
display: none !important;
}
}
/* Category Page Styles - شبوة21 */
.category-page {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
padding-top: 20px; /* إضاÙØ© مساÙØ© من الأعلى */
}
/* Hero Section */
.category-hero {
position: relative;
overflow: hidden;
margin-bottom: 2rem; /* إضاÙØ© مساÙØ© من الأسÙÙ„ */
border-radius: 1rem;
background: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.category-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.category-icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.category-icon {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
animation: float 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
.category-title {
background: linear-gradient(135deg, #2d3748, #4a5568);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
margin-bottom: 1rem;
}
/* Stats */
.category-stats {
margin-top: 2rem;
position: relative;
z-index: 2;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: 1rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.1), transparent);
transition: left 0.5s ease;
}
.stat-card:hover::before {
left: 100%;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.stat-number {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.stat-label {
color: #6b7280;
font-size: 0.875rem;
position: relative;
z-index: 1;
}
/* Breadcrumb */
.breadcrumb-section {
background: white;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 2rem;
padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.breadcrumb-nav {
display: flex;
align-items: center;
}
.breadcrumb-list {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-link {
color: #6b7280;
text-decoration: none;
padding: 0.5rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.breadcrumb-link:hover {
color: var(--primary-color);
background: rgba(192, 139, 45, 0.1);
}
.breadcrumb-separator {
color: #d1d5db;
margin: 0 0.5rem;
}
.breadcrumb-text {
color: var(--primary-color);
font-weight: 600;
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.section-title {
font-size: 2.5rem;
font-weight: bold;
color: #2d3748;
margin-bottom: 1rem;
position: relative;
}
.section-line {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
margin: 0 auto;
border-radius: 2px;
}
/* Articles Grid */
.articles-section {
margin-bottom: 4rem;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.article-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
}
.article-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.article-image {
position: relative;
height: 200px;
overflow: hidden;
flex-shrink: 0;
}
.article-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.article-card:hover .article-img {
transform: scale(1.1);
}
.article-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.article-badges {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 3;
}
.badge {
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
display: flex;
align-items: center;
gap: 0.25rem;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.badge-breaking {
background: rgba(220, 38, 38, 0.95);
color: white;
}
.badge-featured {
background: rgba(245, 158, 11, 0.95);
color: white;
}
.article-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
}
.article-card:hover .article-overlay {
opacity: 1;
}
.read-more-btn {
color: white;
text-decoration: none;
padding: 0.75rem 1.5rem;
border: 2px solid white;
border-radius: 0.5rem;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.read-more-btn:hover {
background: white;
color: #2d3748;
}
.article-content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.article-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 0.875rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.article-category,
.article-date {
display: flex;
align-items: center;
gap: 0.25rem;
color: #6b7280;
background: rgba(0,0,0,0.05);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.article-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1rem;
line-height: 1.4;
flex: 1;
}
.article-title a {
color: #2d3748;
text-decoration: none;
transition: color 0.3s ease;
}
.article-title a:hover {
color: var(--primary-color);
}
.article-excerpt {
color: #6b7280;
line-height: 1.6;
margin-bottom: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.article-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: #9ca3af;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}
.article-author,
.article-views {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin: 2rem 0;
}
.empty-icon {
font-size: 4rem;
color: #d1d5db;
margin-bottom: 1rem;
}
.empty-title {
font-size: 1.5rem;
font-weight: bold;
color: #6b7280;
margin-bottom: 0.5rem;
}
.empty-description {
color: #9ca3af;
margin-bottom: 2rem;
}
.empty-actions {
display: flex;
justify-content: center;
gap: 1rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.4);
color: white;
}
/* Related Categories */
.related-categories {
margin-top: 4rem;
padding-top: 3rem;
border-top: 1px solid #e5e7eb;
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.category-card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
text-decoration: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
display: flex;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.category-card:hover::before {
left: 100%;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.category-card-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.category-card-content {
flex: 1;
}
.category-card-title {
font-size: 1.125rem;
font-weight: bold;
color: #2d3748;
margin-bottom: 0.25rem;
}
.category-card-count {
color: #6b7280;
font-size: 0.875rem;
}
.category-card-arrow {
color: #d1d5db;
transition: all 0.3s ease;
}
.category-card:hover .category-card-arrow {
color: var(--primary-color);
transform: translateX(-5px);
}
/* Pagination */
.pagination-section {
display: flex;
justify-content: center;
margin-top: 3rem;
background: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
/* Responsive Design */
@media (max-width: 1024px) {
.articles-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.categories-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.category-page {
padding-top: 10px;
}
.category-hero {
margin-bottom: 1rem;
padding: 1.5rem;
}
.category-icon {
width: 80px;
height: 80px;
}
.category-title {
font-size: 2rem;
}
.articles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.categories-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 2rem;
}
.stat-card {
padding: 1rem;
}
.stat-number {
font-size: 1.5rem;
}
.article-image {
height: 180px;
}
.article-content {
padding: 1rem;
}
.article-meta {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.category-hero {
padding: 1rem;
}
.category-icon {
width: 60px;
height: 60px;
}
.category-title {
font-size: 1.5rem;
}
.stat-card {
padding: 0.75rem;
}
.stat-number {
font-size: 1.25rem;
}
.article-image {
height: 160px;
}
.article-title {
font-size: 1.125rem;
}
}
/* Animation for page load */
.category-page {
animation: fadeInUp 0.8s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced hover effects */
.article-card {
position: relative;
overflow: hidden;
}
.article-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(192, 139, 45, 0.05), rgba(178, 43, 43, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.article-card:hover::after {
opacity: 1;
}
/* Loading animation for images */
.article-img {
transition: all 0.5s ease;
}
.article-img.loading {
filter: blur(5px);
transform: scale(1.1);
}
/* Enhanced badges */
.badge {
position: relative;
overflow: hidden;
}
.badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.badge:hover::before {
left: 100%;
}
/* Fix for overlapping elements */
.category-hero > * {
position: relative;
z-index: 2;
}
.article-card > * {
position: relative;
z-index: 1;
}
/* Print styles */
@media print {
.category-hero {
background: white !important;
}
.article-overlay,
.category-card-arrow {
display: none !important;
}
.article-card {
break-inside: avoid;
box-shadow: none !important;
border: 1px solid #ddd !important;
}
}
/* ===== Featured News Styles ===== */
/* تأثيرات عامة للأخبار المميزة */
.featured-news-section {
position: relative;
overflow: hidden;
}
.featured-news-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(192, 139, 45, 0.02) 0%, rgba(178, 43, 43, 0.02) 100%);
z-index: -1;
}
/* تأثيرات الخبر الرئيسي */
.main-featured-article {
position: relative;
overflow: hidden;
}
.main-featured-article::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
z-index: 1;
}
.main-featured-article:hover::before {
left: 100%;
}
/* تأثيرات الصورة */
.featured-image-container {
position: relative;
overflow: hidden;
}
.featured-image-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
z-index: 2;
}
.featured-image-container:hover::after {
transform: translateX(100%);
}
/* تأثيرات الأزرار */
.featured-btn {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.featured-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
z-index: 1;
}
.featured-btn:hover::before {
left: 100%;
}
.featured-btn span,
.featured-btn i {
position: relative;
z-index: 2;
}
/* تأثيرات البطاقات الجانبية */
.side-featured-card {
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-featured-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.05), transparent);
transition: left 0.5s ease;
z-index: 1;
}
.side-featured-card:hover::before {
left: 100%;
}
.side-featured-card:hover {
transform: translateY(-8px) scale(1.02);
}
/* تأثيرات الشارات */
.featured-badge {
position: relative;
overflow: hidden;
animation: pulse 2s infinite;
}
.featured-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.featured-badge:hover::before {
left: 100%;
}
/* تأثيرات الرقم ÙÙŠ البطاقات */
.number-badge {
position: relative;
overflow: hidden;
animation: bounce 1s ease-in-out infinite alternate;
}
.number-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.number-badge:hover::before {
left: 100%;
}
/* تأثيرات النص */
.featured-title {
position: relative;
transition: all 0.3s ease;
}
.featured-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: width 0.3s ease;
}
.featured-title:hover::after {
width: 100%;
}
/* تأثيرات الأيقونات */
.featured-icon {
transition: all 0.3s ease;
}
.featured-icon:hover {
transform: scale(1.2) rotate(5deg);
color: #C08B2D;
}
/* تأثيرات الخلÙية المتØركة */
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.floating-particles::before,
.floating-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(192, 139, 45, 0.3);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-particles::before {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.floating-particles::after {
top: 60%;
left: 80%;
animation-delay: 3s;
}
/* تأثيرات الظل المتØرك */
.dynamic-shadow {
position: relative;
transition: all 0.3s ease;
}
.dynamic-shadow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
border-radius: inherit;
}
.dynamic-shadow:hover::before {
opacity: 1;
}
/* تأثيرات الخط المتØرك */
.animated-underline {
position: relative;
overflow: hidden;
}
.animated-underline::after {
content: '';
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: left 0.5s ease;
}
.animated-underline:hover::after {
left: 0;
}
/* تأثيرات النقاط المتØركة */
.loading-dots {
position: relative;
}
.loading-dots::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
background: #C08B2D;
border-radius: 50%;
animation: dot-pulse 1.5s infinite;
}
/* الأنيميشن */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes dot-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 20px rgba(192, 139, 45, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(192, 139, 45, 0.8);
}
}
/* تأثيرات الأنيميشن المتقدمة */
.hover-lift {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.hover-rotate {
transition: all 0.3s ease;
}
.hover-rotate:hover {
transform: rotate(2deg);
}
.hover-glow {
transition: all 0.3s ease;
}
.hover-glow:hover {
box-shadow: 0 0 30px rgba(192, 139, 45, 0.5);
}
/* تأثيرات الخلÙية المتدرجة */
.gradient-bg {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
background-size: 200% 200%;
animation: gradient-shift 3s ease infinite;
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* تأثيرات الØدود المتØركة */
.animated-border {
position: relative;
overflow: hidden;
}
.animated-border::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: left 0.5s ease;
}
.animated-border:hover::before {
left: 0;
}
/* تأثيرات التمدد */
.expand-on-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.expand-on-hover:hover {
transform: scale(1.05);
}
/* تأثيرات الشÙاÙية */
.fade-in-out {
transition: opacity 0.3s ease;
}
.fade-in-out:hover {
opacity: 0.8;
}
/* تأثيرات الدوران */
.rotate-on-hover {
transition: transform 0.3s ease;
}
.rotate-on-hover:hover {
transform: rotate(360deg);
}
/* تأثيرات التموج */
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(192, 139, 45, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.ripple-effect:hover::before {
width: 100%;
height: 100%;
}
/* الاستجابة للأجهزة المØمولة */
@media (max-width: 768px) {
.featured-news-section {
padding: 1rem;
}
.main-featured-article {
margin-bottom: 2rem;
}
.side-featured-card {
margin-bottom: 1rem;
}
.featured-btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.number-badge {
width: 24px;
height: 24px;
font-size: 0.75rem;
}
.featured-badge {
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
}
}
/* تأثيرات الØركة المتقدمة */
.slide-in-left {
animation: slideInLeft 0.5s ease-out;
}
.slide-in-right {
animation: slideInRight 0.5s ease-out;
}
.slide-in-up {
animation: slideInUp 0.5s ease-out;
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* تأثيرات الإضاءة */
.light-effect {
position: relative;
overflow: hidden;
}
.light-effect::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
}
.light-effect:hover::before {
opacity: 1;
}
/* تأثيرات الخط الذهبي */
.golden-line {
position: relative;
}
.golden-line::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B, #C08B2D);
background-size: 200% 100%;
animation: golden-flow 2s ease-in-out infinite;
}
@keyframes golden-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* تأثيرات الانعكاس */
.reflection-effect {
position: relative;
}
.reflection-effect::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(192, 139, 45, 0.2), transparent);
opacity: 0;
transition: opacity 0.3s ease;
transform: scaleY(-1);
}
.reflection-effect:hover::after {
opacity: 1;
}
/* Breaking News Enhanced Styles */
.breaking-news-container {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
padding: 0.75rem 1rem;
margin-top: -1px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Ù…Øسن للأداء */
.breaking-news-ticker-optimized {
display: inline-block;
white-space: nowrap;
will-change: transform;
backface-visibility: hidden;
animation: smooth-scroll-rtl 30s linear infinite;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
color: #ffffff !important;
visibility: visible !important;
opacity: 1 !important;
}
@keyframes smooth-scroll-rtl {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.ticker-item {
display: inline-block;
padding: 0 1.5rem;
white-space: nowrap;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ticker-badge {
background: rgba(255, 255, 255, 0.25);
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-weight: bold;
font-size: 0.85rem;
flex-shrink: 0;
text-shadow: none;
backdrop-filter: blur(4px);
}
.ticker-separator {
color: #fef3c7;
margin: 0 1rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Ø¥ØµÙ„Ø§Ø Ø´Ø§Ù…Ù„ لمشكلة الموبايل */
@media (max-width: 768px) {
.breaking-news-container {
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 0.5rem 1rem;
box-sizing: border-box;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news-ticker-optimized {
animation-duration: 120s;
font-size: 0.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
font-weight: 600;
}
.ticker-item {
padding: 0 1rem;
font-size: 0.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
font-weight: 500;
}
/* منع overflow على body */
body {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
html {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Ø¥ØµÙ„Ø§Ø Ù„Ù„container */
.container {
max-width: 100% !important;
overflow: hidden !important;
}
/* تØسينات إضاÙية للموبايل */
.breaking-news {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news .text-white {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
font-weight: 600;
}
.breaking-news a {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
}
@media (max-width: 480px) {
.breaking-news-container {
padding: 0.5rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news-ticker-optimized {
animation-duration: 150s;
font-size: 0.8125rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
font-weight: 700;
}
.ticker-item {
padding: 0 0.75rem;
font-size: 0.8125rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
font-weight: 600;
}
.ticker-badge {
font-size: 0.75rem;
padding: 0.125rem 0.5rem;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6px);
text-shadow: none;
}
/* تØسينات إضاÙية للشاشات الصغيرة */
.breaking-news {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news .text-white {
color: #ffffff !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
font-weight: 700;
}
.breaking-news a {
color: #ffffff !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
font-weight: 600;
}
.breaking-news a:hover {
color: #fef3c7 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 1);
}
}
/* تØسينات الأداء */
.breaking-news-container:hover .breaking-news-ticker-optimized,
.breaking-news-container:hover .ticker-content {
animation-play-state: paused;
}
/* إزالة التداخل مع أي animations أخرى */
.breaking-news-container * {
box-sizing: border-box;
}
/* Smooth performance optimizations */
.breaking-news-container,
.breaking-news-ticker-optimized {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Breaking News Ticker Styles - الأنماط المنقولة من البليد */
.breaking-news {
will-change: transform;
backface-visibility: hidden;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news:hover .breaking-news-ticker {
animation-play-state: paused;
}
/* تØسينات الألوان والتباين */
.breaking-news .text-white {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
color: #ffffff !important;
visibility: visible !important;
opacity: 1 !important;
}
.breaking-news a {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
color: #ffffff !important;
text-decoration: none;
transition: all 0.3s ease;
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
}
.breaking-news a:hover {
color: #fef3c7 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
transform: translateY(-1px);
}
.breaking-news a:active,
.breaking-news a:focus {
color: #fbbf24 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
outline: none;
}
.breaking-news a:visited {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* ضمان ظهور جميع النصوص ÙÙŠ البريكينج نيوز */
.breaking-news,
.breaking-news *,
.breaking-news-ticker,
.breaking-news-ticker * {
color: #ffffff !important;
visibility: visible !important;
opacity: 1 !important;
}
/* إجبار كل الروابط ÙÙŠ البريكينج نيوز لتبقى بيضاء */
.breaking-news-link,
.breaking-news-link:link,
.breaking-news-link:visited,
.breaking-news-link:active {
color: #ffffff !important;
text-decoration: none !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
visibility: visible !important;
opacity: 1 !important;
display: inline-block !important;
}
.breaking-news-link:hover {
color: #fef3c7 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
transform: translateY(-1px);
}
.breaking-news-link span {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
display: inline !important;
}
/* ضمان أن جميع العناصر الÙرعية ترث اللون */
.breaking-news a *,
.breaking-news-link * {
color: inherit !important;
}
/* إضاÙØ© قواعد شاملة للموبايل */
@media (max-width: 768px) {
.breaking-news-link,
.breaking-news-link:link,
.breaking-news-link:visited,
.breaking-news-link:active,
.breaking-news-link:focus {
color: #ffffff !important;
text-decoration: none !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
font-weight: 600 !important;
}
.breaking-news-link:hover {
color: #fef3c7 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 1) !important;
}
.breaking-news-link *,
.breaking-news-link span {
color: inherit !important;
}
}
@media (max-width: 480px) {
.breaking-news-link,
.breaking-news-link:link,
.breaking-news-link:visited,
.breaking-news-link:active,
.breaking-news-link:focus {
color: #ffffff !important;
text-decoration: none !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
font-weight: 700 !important;
}
.breaking-news-link:hover {
color: #fef3c7 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 1) !important;
}
}
@keyframes scroll-rtl {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.breaking-news-ticker {
display: inline-block;
padding-left: 100%;
will-change: transform;
backface-visibility: hidden;
animation: scroll-rtl 90s linear infinite;
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
white-space: nowrap;
font-weight: 600;
}
/* تأكد من أن الـ animation يعمل */
.breaking-news-ticker {
animation-name: scroll-rtl !important;
animation-duration: 90s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
animation-play-state: running !important;
}
/* إبطاء الØركة عند التمرير */
.breaking-news:hover .breaking-news-ticker {
animation-play-state: paused;
}
/* الØالة عندما لا توجد أخبار - إيقا٠animation */
.breaking-news-ticker.no-animation {
animation: none;
color: #ffffff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* ضمان ظهور النص بشكل طبيعي */
.breaking-news-ticker,
.breaking-news-ticker * {
visibility: visible !important;
opacity: 1 !important;
color: #ffffff !important;
}
/* Ø¥ØµÙ„Ø§Ø Ù…Ø´ÙƒÙ„Ø© الموبايل للتيكر */
@media (max-width: 768px) {
.breaking-news {
margin: 0;
width: 100vw;
max-width: 100vw;
box-sizing: border-box;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news .container {
max-width: 100%;
padding-left: 1rem;
padding-right: 1rem;
margin: 0;
}
.breaking-news-ticker {
font-size: 0.875rem;
animation-duration: 120s;
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
font-weight: 600;
}
.breaking-news-ticker a {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
/* منع overflow horizontal */
body, html {
overflow-x: hidden;
max-width: 100vw;
}
}
@media (max-width: 480px) {
.breaking-news {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
.breaking-news .container {
padding-left: 0.5rem;
padding-right: 0.5rem;
gap: 0.5rem;
}
.breaking-news-ticker {
font-size: 0.8125rem;
animation-duration: 150s;
color: #ffffff !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
font-weight: 700;
}
.breaking-news-ticker a {
color: #ffffff !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
font-weight: 600;
}
.breaking-news-ticker a:hover {
color: #fef3c7 !important;
text-shadow: 0 3px 6px rgba(0, 0, 0, 1);
}
}
/*=================== Animation للشريط المتØرك ===================*/
/* Animation بسيط ÙˆÙعال - من اليسار إلى اليمين */
@keyframes moveNews {
0% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
100% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
}
}
@-webkit-keyframes moveNews {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@-moz-keyframes moveNews {
0% {
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-moz-transform: translateX(100%);
transform: translateX(100%);
}
}
/* قواعد للشريط المتØرك */
.breaking-news-scroll {
display: inline-block !important;
white-space: nowrap !important;
color: #ffffff !important;
font-weight: 600 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
animation: scroll-rtl 90s linear infinite !important;
animation-name: scroll-rtl !important;
animation-duration: 90s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
animation-play-state: running !important;
padding-left: 100% !important;
will-change: transform !important;
backface-visibility: hidden !important;
-webkit-animation: scroll-rtl 90s linear infinite !important;
-moz-animation: scroll-rtl 90s linear infinite !important;
-o-animation: scroll-rtl 90s linear infinite !important;
}
.breaking-news-scroll:hover {
animation-play-state: paused !important;
}
/* تأكد من السرعات الصØÙŠØØ© لكل الأجهزة */
.breaking-news-scroll-simple {
display: inline-block !important;
white-space: nowrap !important;
color: #ffffff !important;
font-weight: 600 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
animation: scroll-rtl 90s linear infinite !important;
padding-left: 100% !important;
will-change: transform !important;
backface-visibility: hidden !important;
}
.breaking-news-scroll-simple:hover {
animation-play-state: paused !important;
}
/* للتابليت والموبايل - سرعات أبطأ جداً */
@media (max-width: 768px) {
.breaking-news-scroll,
.breaking-news-scroll-simple,
.breaking-news-ticker {
animation-duration: 120s !important;
font-size: 0.875rem !important;
}
}
@media (max-width: 480px) {
.breaking-news-scroll,
.breaking-news-scroll-simple,
.breaking-news-ticker {
animation-duration: 150s !important;
font-size: 0.8125rem !important;
}
}
/*=================== قواعد نهائية لضمان ظهور النصوص ===================*/
/* قواعد شاملة وأولوية عالية */
.breaking-news-ticker-wrapper .breaking-news,
.breaking-news-ticker-wrapper .breaking-news *,
.breaking-news-ticker-wrapper .breaking-news-ticker,
.breaking-news-ticker-wrapper .breaking-news-ticker *,
.breaking-news-ticker-wrapper .breaking-news-link,
.breaking-news-ticker-wrapper .breaking-news-link * {
color: #ffffff !important;
visibility: visible !important;
opacity: 1 !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
/* إجبار النصوص على الظهور دائماً - Øتى ÙÙŠ Øالة الـ hover */
.breaking-news-ticker-wrapper span,
.breaking-news-ticker-wrapper a,
.breaking-news-ticker-wrapper a span {
color: #ffffff !important;
visibility: visible !important;
opacity: 1 !important;
display: inline !important;
}
/* قواعد خاصة للـ animation - تأكد من أن النص مرئي أثناء الØركة */
@keyframes scroll-rtl {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Animation جديد Ù…Øسن للعربية */
@keyframes scroll-arabic {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* Sports Section Styles - شبوة21 */
/* Sports Container */
.sports-section-container {
width: 100%;
}
/* Sports News Item */
.sports-news-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
border: 1px solid #e2e8f0;
border-radius: 1rem;
margin-bottom: 1rem;
transition: all 0.3s ease;
background: white;
position: relative;
overflow: hidden;
}
.sports-news-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(192, 139, 45, 0.05), transparent);
transition: left 0.5s ease;
}
.sports-news-item:hover::before {
left: 100%;
}
.sports-news-item:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
border-color: var(--primary-color);
}
/* Sports News Image */
.sports-news-image {
flex-shrink: 0;
width: 128px;
height: 96px;
background: #f1f5f9;
border-radius: 0.75rem;
overflow: hidden;
position: relative;
}
.sports-news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.sports-news-item:hover .sports-news-image img {
transform: scale(1.1);
}
/* Sports News Placeholder */
.sports-news-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.875rem;
}
/* Sports News Content */
.sports-news-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Sports News Title */
.sports-news-title {
font-weight: bold;
color: #1e293b;
font-size: 1.125rem;
margin-bottom: 0.75rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
transition: color 0.3s ease;
}
.sports-news-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.sports-news-title a:hover {
color: var(--primary-color);
}
/* Sports News Excerpt */
.sports-news-excerpt {
color: #64748b;
font-size: 0.875rem;
margin-bottom: 1rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
overflow: hidden;
}
/* Sports News Meta */
.sports-news-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.875rem;
color: #64748b;
flex-wrap: wrap;
gap: 0.5rem;
}
.sports-news-meta-left {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.sports-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sports-meta-icon {
font-size: 0.875rem;
}
.sports-meta-icon.clock {
color: #3b82f6;
}
.sports-meta-icon.eye {
color: #10b981;
}
.sports-meta-icon.star {
color: #f59e0b;
}
/* Sports Category Badge */
.sports-category-badge {
background: rgba(139, 92, 246, 0.1);
color: #7c3aed;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
/* Sports Empty State */
.sports-empty-state {
text-align: center;
padding: 4rem 0;
}
.sports-empty-container {
background: #f8fafc;
border-radius: 1rem;
padding: 3rem;
max-width: 400px;
margin: 0 auto;
}
.sports-empty-icon {
font-size: 3.75rem;
color: #cbd5e1;
margin-bottom: 1.5rem;
display: block;
}
.sports-empty-title {
font-size: 1.5rem;
font-weight: bold;
color: #475569;
margin-bottom: 0.75rem;
}
.sports-empty-description {
color: #64748b;
}
/* Responsive Design */
@media (max-width: 1024px) {
.sports-news-item {
gap: 1rem;
padding: 1.25rem;
}
.sports-news-image {
width: 120px;
height: 90px;
}
.sports-news-title {
font-size: 1rem;
}
}
@media (max-width: 768px) {
.sports-news-item {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.sports-news-image {
width: 100%;
height: 200px;
order: -1;
}
.sports-news-content {
gap: 0.75rem;
}
.sports-news-title {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.sports-news-excerpt {
margin-bottom: 0.75rem;
}
.sports-news-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.sports-news-meta-left {
gap: 0.75rem;
}
.sports-meta-item {
font-size: 0.8rem;
}
.sports-empty-container {
padding: 2rem;
}
.sports-empty-icon {
font-size: 3rem;
}
.sports-empty-title {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.sports-news-item {
padding: 0.875rem;
border-radius: 0.75rem;
}
.sports-news-image {
height: 180px;
}
.sports-news-title {
font-size: 1rem;
line-height: 1.3;
}
.sports-news-excerpt {
font-size: 0.8rem;
line-height: 1.5;
}
.sports-news-meta {
font-size: 0.75rem;
}
.sports-meta-item {
font-size: 0.75rem;
gap: 0.25rem;
}
.sports-category-badge {
font-size: 0.7rem;
padding: 0.2rem 0.6rem;
}
.sports-empty-container {
padding: 1.5rem;
}
.sports-empty-icon {
font-size: 2.5rem;
}
.sports-empty-title {
font-size: 1.125rem;
}
.sports-empty-description {
font-size: 0.875rem;
}
}
/* Animation Effects */
@keyframes sportsFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sports-news-item {
animation: sportsFadeIn 0.6s ease-out;
}
.sports-news-item:nth-child(1) { animation-delay: 0.1s; }
.sports-news-item:nth-child(2) { animation-delay: 0.2s; }
.sports-news-item:nth-child(3) { animation-delay: 0.3s; }
.sports-news-item:nth-child(4) { animation-delay: 0.4s; }
/* Hover Effects */
.sports-news-item:hover .sports-news-image {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.sports-news-item:hover .sports-category-badge {
background: rgba(139, 92, 246, 0.2);
transform: scale(1.05);
}
/* Loading States */
.sports-news-item.loading {
opacity: 0.7;
pointer-events: none;
}
.sports-news-item.loading .sports-news-image {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Print Styles */
@media print {
.sports-news-item {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.sports-news-item:hover {
transform: none;
box-shadow: none;
}
.sports-news-image img {
transform: none;
}
}
/* Infographics Section Styles */
.infographics-section {
position: relative;
background: linear-gradient(135deg, rgba(192,139,45,0.08) 0%, rgba(178,43,43,0.08) 100%);
}
.infographics-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
pointer-events: none;
}
.infographics-slider {
position: relative;
padding: 0 80px;
}
.infographics-swiper {
overflow: hidden;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(241, 208, 208, 0.532);
}
.swiper-slide {
height: auto;
padding: 15px;
}
.infographic-card {
animation: fadeInUp 0.8s ease-out;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.infographic-card:hover {
transform: translateY(-8px) scale(1.02);
}
/* كارد الانÙوجراÙيك بألوان الهوية Ùقط */
.infographic-card .bg-white {
background: #fff;
border: 1.5px solid rgba(192,139,45,0.13);
box-shadow: 0 8px 32px 0 rgba(192,139,45,0.32), 0 1.5px 4px 0 rgba(192,139,45,0.18);
}
/* Navigation Buttons */
.infographic-swiper-button-next,
.infographic-swiper-button-prev {
color: #fff;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
width: 60px;
height: 60px;
border-radius: 50%;
box-shadow: 0 8px 25px rgba(192,139,45,0.13);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: none;
}
.infographic-swiper-button-next:hover,
.infographic-swiper-button-prev:hover {
background: linear-gradient(135deg, #B22B2B 0%, #C08B2D 100%);
color: #fff;
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(6, 182, 212, 0.3);
}
.infographic-swiper-button-next::after,
.infographic-swiper-button-prev::after {
font-size: 20px;
font-weight: bold;
}
/* Pagination */
.infographic-swiper-pagination {
position: relative;
margin-top: 40px;
}
.infographic-swiper-pagination .swiper-pagination-bullet {
background: #C08B2D;
opacity: 0.3;
width: 14px;
height: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 50%;
}
.infographic-swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
background: #B22B2B;
transform: scale(1.3);
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}
/* Card Content Styles */
.infographic-card h3 a {
color: #C08B2D;
transition: color 0.3s ease;
}
.infographic-card h3 a:hover {
color: #B22B2B;
}
.infographic-card .bg-cyan-50, .infographic-card .bg-blue-50 {
background: #fff;
border: 1px solid rgba(192,139,45,0.10);
color: #C08B2D;
}
.infographic-card .text-cyan-600, .infographic-card .text-blue-600 {
color: #C08B2D !important;
}
/* Button Styles */
.infographic-card .bg-gradient-to-r {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
color: #fff !important;
font-weight: 600;
border-radius: 0.8rem;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.13);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.infographic-card .bg-gradient-to-r:hover {
background: linear-gradient(135deg, #B22B2B 0%, #C08B2D 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.18);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.infographics-slider {
padding: 0 8px !important;
}
.infographics-swiper {
border-radius: 12px !important;
}
.swiper-slide {
padding: 4px !important;
}
.infographic-card .bg-white {
border-radius: 12px !important;
padding: 10px 4px !important;
}
.infographic-swiper-button-next,
.infographic-swiper-button-prev {
width: 36px !important;
height: 36px !important;
font-size: 1rem !important;
}
.infographic-card h3 {
font-size: 1.1rem !important;
}
.infographic-card .bg-gradient-to-r {
font-size: 0.95rem !important;
padding: 0.7rem 1.2rem !important;
}
.infographic-swiper-pagination {
margin-top: 12px !important;
}
}
@media (max-width: 480px) {
.infographics-slider {
padding: 0 20px;
}
.infographic-swiper-button-next,
.infographic-swiper-button-prev {
width: 45px;
height: 45px;
}
}
/* Enhanced Infographics Section Styles - Brand Identity Colors */
/* Section Container */
.infographics-section {
background: linear-gradient(135deg, #fff8e1 0%, #ffe4b5 50%, #ffd4a3 100%);
position: relative;
overflow: hidden;
}
.infographics-section::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(192, 139, 45, 0.05) 0%, transparent 70%);
animation: float 20s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(120deg); }
66% { transform: translate(-20px, 20px) rotate(240deg); }
}
/* Header Styling */
.infographics-section .section-header {
position: relative;
z-index: 1;
}
.infographics-section .icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
border-radius: 50%;
margin-bottom: 1.5rem;
box-shadow: 0 10px 30px rgba(192, 139, 45, 0.3);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.infographics-section h2 {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
/* Slider Container */
.infographics-slider {
position: relative;
padding: 2rem 0;
}
/* Card Styling */
.infographic-card {
height: 100%;
transition: all 0.3s ease;
}
.infographic-card-inner {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(192, 139, 45, 0.1);
}
.infographic-card:hover .infographic-card-inner {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(192, 139, 45, 0.2);
border-color: rgba(192, 139, 45, 0.3);
}
/* Image Container */
.infographic-image-container {
position: relative;
height: 280px;
overflow: hidden;
background: linear-gradient(135deg, #fff8e1 0%, #ffe4b5 100%);
}
.infographic-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.infographic-card:hover .infographic-image-container img {
transform: scale(1.1);
}
/* Overlay Effects */
.infographic-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(178, 43, 43, 0.7) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.infographic-card:hover .infographic-overlay {
opacity: 1;
}
/* Badge */
.infographic-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
z-index: 2;
}
/* Icon Badge */
.infographic-icon-badge {
position: absolute;
bottom: 1rem;
left: 1rem;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.infographic-icon-badge i {
font-size: 1.5rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Content */
.infographic-content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.infographic-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.75rem;
line-height: 1.4;
transition: color 0.3s ease;
}
.infographic-card:hover .infographic-title {
color: #C08B2D;
}
.infographic-excerpt {
color: #64748b;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1rem;
flex: 1;
}
/* Stats Grid */
.infographic-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.stat-box {
background: linear-gradient(135deg, #fff8e1 0%, #ffe4b5 100%);
border-radius: 12px;
padding: 0.75rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(192, 139, 45, 0.1);
}
.stat-box:hover {
background: linear-gradient(135deg, #ffe4b5 0%, #ffd4a3 100%);
transform: translateY(-2px);
border-color: rgba(192, 139, 45, 0.3);
}
.stat-value {
font-size: 1.25rem;
font-weight: 700;
color: #B22B2B;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: #C08B2D;
font-weight: 500;
}
/* CTA Button */
.infographic-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.3);
}
.infographic-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(192, 139, 45, 0.4);
color: white;
background: linear-gradient(135deg, #B22B2B 0%, #C08B2D 100%);
}
/* Navigation Buttons */
.infographic-swiper-button-next,
.infographic-swiper-button-prev {
width: 50px !important;
height: 50px !important;
background: white !important;
border-radius: 50% !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
border: 2px solid rgba(192, 139, 45, 0.2) !important;
}
.infographic-swiper-button-next:hover,
.infographic-swiper-button-prev:hover {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
transform: scale(1.1) !important;
border-color: transparent !important;
}
.infographic-swiper-button-next::after,
.infographic-swiper-button-prev::after {
font-size: 1.25rem !important;
font-weight: bold !important;
color: #C08B2D !important;
}
.infographic-swiper-button-next:hover::after,
.infographic-swiper-button-prev:hover::after {
color: white !important;
}
/* Pagination */
.infographic-swiper-pagination {
bottom: -20px !important;
}
.infographic-swiper-pagination .swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
background: rgba(192, 139, 45, 0.3) !important;
opacity: 1 !important;
transition: all 0.3s ease !important;
}
.infographic-swiper-pagination .swiper-pagination-bullet-active {
width: 30px !important;
border-radius: 6px !important;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
}
/* View All Button */
.view-all-infographics {
margin-top: 3rem;
text-align: center;
}
.view-all-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
padding: 1rem 2rem;
border-radius: 50px;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 6px 25px rgba(192, 139, 45, 0.3);
}
.view-all-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 35px rgba(192, 139, 45, 0.4);
color: white;
background: linear-gradient(135deg, #B22B2B 0%, #C08B2D 100%);
}
/* Responsive */
@media (max-width: 768px) {
.infographics-section h2 {
font-size: 2rem;
}
.infographic-image-container {
height: 200px;
}
.infographic-title {
font-size: 1.125rem;
}
.infographic-stats {
gap: 0.5rem;
}
.stat-value {
font-size: 1rem;
}
}
/* Special Sections Unified Card Styles */
.special-card {
background: #fff;
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 8px rgba(192,139,45,0.07);
padding: 0;
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
}
.special-card:hover {
box-shadow: 0 16px 40px rgba(192,139,45,0.13), 0 2px 8px rgba(178,43,43,0.10);
transform: translateY(-4px) scale(1.02);
}
.special-card-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.3rem 0 0.3rem 0;
border-radius: 0.75rem 0.75rem 0 0;
margin-bottom: 0.1rem;
background: #fff;
}
.icon-circle {
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f3f4f6;
color: #C08B2D;
font-size: 1rem;
margin-bottom: 0.1rem;
}
.poems-header .icon-circle { background: linear-gradient(135deg, #8B5CF6 0%, #7c3aed 100%); }
.health-header .icon-circle { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.greetings-header .icon-circle { background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); }
.condolences-header .icon-circle { background: linear-gradient(135deg, #6b7280 0%, #374151 100%); }
.poems-color { color: #8B5CF6; }
.health-color { color: #10B981; }
.greetings-color { color: #F59E0B; }
.condolences-color { color: #6b7280; }
/* توØيد خلÙية الكارد */
.special-card-greetings,
.special-card-condolences,
.special-card-poems,
.special-card-health {
background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
border: 1px solid #f3f4f6;
}
/* تخصيص الهيدر Ùقط */
.poems-header { border-bottom: 2px solid #8B5CF6; }
.health-header { border-bottom: 2px solid #10B981; }
.greetings-header { border-bottom: 2px solid #F59E0B; }
.condolences-header { border-bottom: 2px solid #6b7280; }
/* أزرار الأقسام المميزة */
.special-card a.btn-primary, .special-card a.bg-gradient-to-r {
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%) !important;
color: #fff !important;
font-weight: 600;
border-radius: 0.8rem;
box-shadow: 0 4px 15px rgba(192, 139, 45, 0.13);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.special-card a.btn-primary:hover, .special-card a.bg-gradient-to-r:hover {
background: linear-gradient(135deg, #B22B2B 0%, #C08B2D 100%) !important;
color: #fff !important;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 25px rgba(192, 139, 45, 0.18);
}
/* Responsive */
@media (max-width: 1024px) {
.special-card { min-height: 160px; }
.special-card h3 { font-size: 0.9rem; }
.icon-circle { width: 1.2rem; height: 1.2rem; font-size: 0.9rem; }
}
@media (max-width: 768px) {
.special-card { min-height: 120px; }
.special-card-header { padding: 0.15rem 0; }
.special-card h3 { font-size: 0.85rem; }
.icon-circle { width: 1rem; height: 1rem; font-size: 0.8rem; }
.special-sections .container { padding-left: 0 !important; padding-right: 0 !important; }
}
/* Privacy & Terms Pages Custom CSS */
/* Custom Properties */
:root {
--primary-gradient: linear-gradient(135deg, #1e293b 0%, #1e40af 50%, #3730a3 100%);
--secondary-gradient: linear-gradient(135deg, #f8fafc 0%, #dbeafe 50%, #e0e7ff 100%);
--accent-blue: #3b82f6;
--accent-indigo: #6366f1;
--accent-green: #10b981;
--accent-red: #ef4444;
--accent-purple: #8b5cf6;
--accent-orange: #f59e0b;
--accent-teal: #14b8a6;
--accent-pink: #ec4899;
--text-primary: #1f2937;
--text-secondary: #6b7280;
--text-light: #9ca3af;
--border-light: #e5e7eb;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Page Container */
.privacy-terms-container {
min-height: calc(100vh - 200px);
background: var(--secondary-gradient);
padding: 3rem 1.5rem 6rem;
align-items: flex-start;
justify-content: center;
position: relative;
overflow-x: hidden;
margin-top: 2rem;
}
/* Background Animation */
.privacy-terms-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
animation: backgroundFloat 20s ease-in-out infinite;
pointer-events: none;
}
@keyframes backgroundFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-20px) rotate(1deg); }
66% { transform: translateY(10px) rotate(-1deg); }
}
/* Content Wrapper */
.content-wrapper {
max-width: 64rem;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* Header Section */
.elegant-header {
background: var(--primary-gradient);
border-radius: 1rem;
box-shadow: var(--shadow-xl);
margin-bottom: 4rem;
position: relative;
overflow: hidden;
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elegant-header:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.elegant-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
pointer-events: none;
}
.header-content {
position: relative;
text-align: center;
padding: 4rem 2rem;
color: white;
}
.header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 5rem;
height: 5rem;
background: rgba(255, 255, 255, 0.15);
border-radius: 1rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: 2rem;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
}
.header-icon:hover {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.25);
}
.header-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
animation: titleSlideIn 0.8s ease-out;
}
@keyframes titleSlideIn {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.header-subtitle {
font-size: 1.125rem;
opacity: 0.9;
max-width: 32rem;
margin: 0 auto 2rem;
line-height: 1.6;
animation: subtitleFadeIn 1s ease-out 0.2s both;
}
@keyframes subtitleFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 0.9;
transform: translateY(0);
}
}
.header-meta {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.meta-badge {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 9999px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
}
.meta-badge:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.meta-badge i {
margin-left: 0.5rem;
font-size: 0.875rem;
}
/* Content Cards */
.content-card {
background: white;
border-radius: 1rem;
box-shadow: var(--shadow-lg);
padding: 2rem;
margin-bottom: 2rem;
border-left: 4px solid var(--accent-blue);
transform: translateY(0);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.content-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.content-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 8rem;
height: 8rem;
background: currentColor;
border-radius: 50%;
opacity: 0.05;
transform: translate(4rem, -4rem);
transition: all 0.3s ease;
}
.content-card:hover::before {
transform: translate(2rem, -2rem);
opacity: 0.1;
}
/* Card Variants */
.content-card.blue { border-left-color: var(--accent-blue); }
.content-card.green { border-left-color: var(--accent-green); }
.content-card.purple { border-left-color: var(--accent-purple); }
.content-card.red { border-left-color: var(--accent-red); }
.content-card.indigo { border-left-color: var(--accent-indigo); }
.content-card.orange { border-left-color: var(--accent-orange); }
.content-card.teal { border-left-color: var(--accent-teal); }
.content-card.pink { border-left-color: var(--accent-pink); }
/* Card Header */
.card-header {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.card-icon {
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
margin-left: 1.5rem;
transition: all 0.3s ease;
}
.card-icon:hover {
transform: scale(1.1) rotate(5deg);
}
.card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
}
.card-number {
background: currentColor;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 700;
margin-left: 0.75rem;
}
.card-content {
margin-left: 1.5rem;
}
.card-text {
color: var(--text-secondary);
line-height: 1.6;
font-size: 1rem;
margin-bottom: 1.5rem;
}
/* Grid Layouts */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.info-item {
background: #f9fafb;
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.info-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
background: white;
}
.info-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4rem;
height: 4rem;
background: currentColor;
border-radius: 50%;
opacity: 0.1;
transform: translate(2rem, -2rem);
}
.info-item-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.info-item-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.75rem;
box-shadow: var(--shadow-sm);
}
.info-item-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
}
.info-item-text {
color: var(--text-secondary);
font-size: 0.875rem;
line-height: 1.5;
}
/* List Items */
.list-item {
display: flex;
align-items: center;
padding: 1rem;
background: #f8fafc;
border-radius: 0.75rem;
border: 1px solid var(--border-light);
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.list-item:hover {
transform: translateX(5px);
box-shadow: var(--shadow-md);
background: white;
}
.list-item-icon {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1rem;
font-size: 0.75rem;
}
.list-item-text {
color: var(--text-primary);
font-size: 1rem;
font-weight: 500;
}
/* Contact Section */
.contact-section {
background: var(--primary-gradient);
border-radius: 1rem;
box-shadow: var(--shadow-xl);
padding: 2rem;
color: white;
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 8rem;
height: 8rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transform: translate(4rem, -4rem);
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.contact-item {
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: 0.75rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
}
.contact-item-header {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.contact-item-icon {
font-size: 1.125rem;
margin-left: 0.75rem;
}
.contact-item-title {
font-size: 1rem;
font-weight: 700;
}
.contact-item-text {
opacity: 0.9;
font-size: 0.875rem;
}
/* Action Buttons */
.action-buttons {
text-align: center;
margin-top: 4rem;
}
.button-group {
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: center;
align-items: center;
}
@media (min-width: 640px) {
.button-group {
flex-direction: row;
}
}
.action-button {
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
background: var(--primary-gradient);
color: white;
font-weight: 700;
font-size: 1rem;
border-radius: 0.75rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.action-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.action-button:hover::before {
left: 100%;
}
.action-button:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-xl);
}
.action-button i {
margin-left: 0.75rem;
transition: transform 0.3s ease;
}
.action-button:hover i {
transform: rotate(12deg);
}
/* Button Variants */
.action-button.blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.action-button.gray { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.action-button.indigo { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
/* Responsive Design */
@media (max-width: 768px) {
.privacy-terms-container {
padding: 2rem 1rem 8rem;
}
.header-content {
padding: 3rem 1.5rem;
}
.header-title {
font-size: 2rem;
}
.content-card {
padding: 1.5rem;
}
.card-header {
flex-direction: column;
align-items: flex-start;
}
.card-icon {
margin-left: 0;
margin-bottom: 1rem;
}
.card-content {
margin-left: 0;
}
.info-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
}
/* Loading Animation */
@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-card {
animation: cardSlideIn 0.6s ease-out;
}
.content-card:nth-child(1) { animation-delay: 0.1s; }
.content-card:nth-child(2) { animation-delay: 0.2s; }
.content-card:nth-child(3) { animation-delay: 0.3s; }
.content-card:nth-child(4) { animation-delay: 0.4s; }
.content-card:nth-child(5) { animation-delay: 0.5s; }
.content-card:nth-child(6) { animation-delay: 0.6s; }
.content-card:nth-child(7) { animation-delay: 0.7s; }
.content-card:nth-child(8) { animation-delay: 0.8s; }
/* Scroll Animations */
.scroll-reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.scroll-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* Custom Scrollbar */
.privacy-terms-container::-webkit-scrollbar {
width: 8px;
}
.privacy-terms-container::-webkit-scrollbar-track {
background: #f1f5f9;
}
.privacy-terms-container::-webkit-scrollbar-thumb {
background: var(--accent-blue);
border-radius: 4px;
}
.privacy-terms-container::-webkit-scrollbar-thumb:hover {
background: var(--accent-indigo);
}
/* Focus States */
.action-button:focus,
.content-card:focus,
.info-item:focus {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
/* Print Styles */
@media print {
.privacy-terms-container {
background: white;
padding: 0;
}
.elegant-header,
.action-buttons {
display: none;
}
.content-card {
box-shadow: none;
border: 1px solid #e5e7eb;
break-inside: avoid;
}
}
/* Footer Spacing */
.privacy-terms-container::after {
content: '';
display: block;
height: 4rem;
width: 100%;
}
/* Ensure proper spacing from footer */
.content-wrapper {
margin-bottom: 2rem;
}
.action-buttons {
margin-bottom: 3rem;
}
/* ===== Unified Sections Design ===== */
/* توØيد تصميم جميع السيكشنات ÙÙŠ الموقع الإخباري */
:root {
/* الألوان الأساسية */
--primary-color: #C08B2D;
--secondary-color: #B22B2B;
--text-primary: #1e293b;
--text-secondary: #475569;
--background-light: #f8fafc;
--background-white: #ffffff;
--border-color: #e5e7eb;
/* البادينج الموØد */
--section-padding-desktop: 3rem;
--section-padding-tablet: 2rem;
--section-padding-mobile: 1rem;
--container-padding-desktop: 2rem;
--container-padding-tablet: 1.5rem;
--container-padding-mobile: 1rem;
/* الظلال */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
/* الØوا٠*/
--border-radius-sm: 0.5rem;
--border-radius-md: 0.75rem;
--border-radius-lg: 1rem;
--border-radius-xl: 1.5rem;
/* الانتقالات */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== توØيد البادينج لجميع السيكشنات ===== */
.section-wrapper,
.hero-section,
.about-section,
.contact-info-section,
.additional-sections,
.special-sections,
.infographics-wrapper,
section[class*="-section"],
.section-card {
padding: var(--section-padding-desktop) 0;
}
/* توØيد الØاويات */
.container {
max-width: 1280px;
margin: 0 auto;
padding-left: var(--container-padding-desktop);
padding-right: var(--container-padding-desktop);
}
/* ===== تصميم موØد لعناوين السيكشنات ===== */
.section-header {
margin-bottom: 2.5rem;
position: relative;
animation: fadeInUp 0.6s ease-out;
}
.section-header::after {
display: none; /* إزالة الخط القديم */
}
/* العنوان الرئيسي الموØد */
.section-header h2,
.section-header h3 {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.5rem;
position: relative;
display: inline-block;
}
/* تصميم جديد أنيق للعناوين */
.section-header .title-wrapper {
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
}
/* خط زخرÙÙŠ جانبي */
.section-header .title-decoration {
width: 4px;
height: 60px;
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
border-radius: 2px;
position: relative;
overflow: hidden;
}
.section-header .title-decoration::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: translateY(-100%);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateY(-100%); }
50% { transform: translateY(100%); }
100% { transform: translateY(100%); }
}
/* النص الÙرعي */
.section-header p {
font-size: 1.125rem;
color: var(--text-secondary);
margin: 0;
font-weight: 400;
}
/* ===== كروت السيكشنات الموØدة ===== */
.section-card {
background: var(--background-white);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-md);
padding: 2rem;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.section-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-normal);
}
.section-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.section-card:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/* ===== Lazy Loading للصور ===== */
img[loading="lazy"] {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
position: relative;
}
img[loading="lazy"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* صور Ù…Øملة */
img.loaded {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===== تØسينات الأداء والسكرولينج ===== */
* {
-webkit-overflow-scrolling: touch;
}
body {
scroll-behavior: smooth;
overflow-x: hidden;
}
/* منع القÙز أثناء التØميل */
img, video, iframe {
aspect-ratio: attr(width) / attr(height);
}
/* تØسين أداء الانيميشن */
.will-animate {
will-change: transform, opacity;
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* ===== التصميم التجاوبي الموØد ===== */
@media (max-width: 1024px) {
:root {
--section-padding-desktop: var(--section-padding-tablet);
--container-padding-desktop: var(--container-padding-tablet);
}
.section-header h2,
.section-header h3 {
font-size: 2rem;
}
.section-header .title-decoration {
height: 50px;
}
.section-header p {
font-size: 1rem;
}
}
@media (max-width: 768px) {
:root {
--section-padding-desktop: var(--section-padding-mobile);
--container-padding-desktop: var(--container-padding-mobile);
}
.section-wrapper,
.hero-section,
.about-section,
.contact-info-section,
.additional-sections,
.special-sections,
.infographics-wrapper,
section[class*="-section"],
.section-card {
padding: var(--section-padding-mobile) 0;
}
.section-header {
margin-bottom: 1.5rem;
}
.section-header h2,
.section-header h3 {
font-size: 1.5rem;
}
.section-header .title-decoration {
width: 3px;
height: 40px;
}
.section-header p {
font-size: 0.875rem;
}
.section-card {
padding: 1.25rem;
border-radius: var(--border-radius-md);
}
/* تØسين المساÙات ÙÙŠ الموبايل */
.grid {
gap: 1rem !important;
}
}
@media (max-width: 480px) {
.section-header h2,
.section-header h3 {
font-size: 1.25rem;
}
.section-card {
padding: 1rem;
}
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* ===== تØسينات إضاÙية للأداء ===== */
/* تقليل استخدام الذاكرة للعناصر خارج الشاشة */
.section-card:not(:hover) {
will-change: auto;
}
/* تØسين الأداء للعناصر المتØركة */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* تØسين الأداء على الأجهزة الضعيÙØ© */
@media (max-width: 768px) and (hover: none) {
.section-card:hover {
transform: none;
}
.section-card::before {
display: none;
}
}
/* ===== أنماط خاصة للطباعة ===== */
@media print {
.section-card {
box-shadow: none;
border: 1px solid var(--border-color);
}
.section-header .title-decoration {
display: none;
}
}
/* Sticky Header Fixes - إصلاØات الهيدر الثابت */
/* Universal sticky header fixes */
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
/* Mobile Header Sticky Fixes */
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Chrome-specific fixes */
@supports (-webkit-appearance: none) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Firefox-specific fixes */
@supports (-moz-appearance: none) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
}
/* Safari-specific fixes */
@supports (-webkit-touch-callout: none) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Edge-specific fixes */
@supports (-ms-ime-align: auto) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
}
}
/* Force hardware acceleration */
.theme-header.sticky-header {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.theme-header.sticky-header .mobile-header-container {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
/* Ensure proper stacking context */
.theme-header.sticky-header {
z-index: 1001 !important;
position: fixed !important;
}
.theme-header.sticky-header .mobile-header-container {
z-index: 1001 !important;
position: fixed !important;
}
/* Fix for mobile browsers */
@media (max-width: 768px) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Ensure mobile header stays on top */
.mobile-header-container {
position: relative;
z-index: 1000;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
z-index: 1001 !important;
}
}
/* Fix for high DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.theme-header.sticky-header {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
.theme-header.sticky-header .mobile-header-container {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
}
/* Fix for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.theme-header.sticky-header {
transition: none !important;
animation: none !important;
}
.theme-header.sticky-header .mobile-header-container {
transition: none !important;
animation: none !important;
}
}
/* Fix for print */
@media print {
.theme-header.sticky-header {
position: static !important;
transform: none !important;
-webkit-transform: none !important;
}
.theme-header.sticky-header .mobile-header-container {
position: static !important;
transform: none !important;
-webkit-transform: none !important;
}
}
/* Additional Chrome fixes */
@supports (-webkit-appearance: none) and (not (-webkit-touch-callout: none)) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) and (not (-webkit-appearance: none)) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Fix for Android Chrome */
@supports (-webkit-appearance: none) and (-webkit-touch-callout: none) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Force repaint for Chrome */
@supports (-webkit-appearance: none) {
.theme-header.sticky-header {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.theme-header.sticky-header .mobile-header-container {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
}
/* Ensure proper viewport handling */
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
z-index: 1001 !important;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
z-index: 1001 !important;
}
/* Fix for viewport units */
@supports (width: 100vw) {
.theme-header.sticky-header {
width: 100vw !important;
max-width: 100vw !important;
}
.theme-header.sticky-header .mobile-header-container {
width: 100vw !important;
max-width: 100vw !important;
}
}
/* Fallback for older browsers */
@supports not (width: 100vw) {
.theme-header.sticky-header {
width: 100% !important;
max-width: 100% !important;
}
.theme-header.sticky-header .mobile-header-container {
width: 100% !important;
max-width: 100% !important;
}
}
/* Ensure proper body padding when header is sticky */
body.has-sticky-header {
padding-top: 120px; /* Adjust based on header height */
}
/* Fix for content jumping */
.theme-header.sticky-header + * {
margin-top: 0;
}
/* Ensure proper stacking in all contexts */
.theme-header.sticky-header {
z-index: 1001 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.theme-header.sticky-header .mobile-header-container {
z-index: 1001 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Additional fixes for Chrome 88+ */
@supports (-webkit-appearance: none) and (not (-webkit-touch-callout: none)) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-overflow-scrolling: touch;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* Mobile-specific sticky fixes */
@media (max-width: 768px) {
/* Ensure mobile header is always sticky when needed */
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Hide desktop header in mobile */
.theme-header.sticky-header .desktop-header-container {
display: none !important;
}
/* Show mobile header in mobile */
.theme-header.sticky-header .mobile-header-container {
display: block !important;
}
}
/* Additional mobile fixes for all browsers */
@media (max-width: 768px) {
.theme-header.sticky-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
}
.theme-header.sticky-header .mobile-header-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1001 !important;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
}
/* ===== Scroll Performance Optimization ===== */
/* تØسينات أداء السكرولينج ومنع المشاكل */
/* منع السكرول الأÙقي */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* تØسين أداء السكرول */
* {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* تØسين أداء العناصر الثابتة */
.will-change-transform {
will-change: transform;
}
.will-change-opacity {
will-change: opacity;
}
/* GPU acceleration للعناصر الثابتة */
.gpu-accelerated {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
}
/* تØسين أداء الصور أثناء السكرول */
img {
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* منع القÙز أثناء تØميل الصور */
img[loading="lazy"] {
min-height: 100px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
/* تØسين أداء العناصر الثابتة */
.sticky,
.fixed {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}
/* تØسين أداء الانيميشن */
@media (prefers-reduced-motion: no-preference) {
.smooth-scroll {
scroll-behavior: smooth;
}
.animate-on-scroll {
animation-play-state: paused;
}
.animate-on-scroll.in-view {
animation-play-state: running;
}
}
/* تØسين أداء السكرول على الموبايل */
@media (max-width: 768px) {
/* تقليل الانيميشن على الموبايل */
* {
animation-duration: 0.3s !important;
transition-duration: 0.2s !important;
}
/* تØسين أداء السكرول */
.mobile-optimized {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-overflow-scrolling: touch;
}
/* منع السكرول الأÙقي */
.container,
.section-wrapper {
overflow-x: hidden !important;
}
}
/* تØسين أداء Breaking News */
.breaking-news,
.breaking-news-ticker {
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
}
/* تØسين أداء السكرول للقوائم الطويلة */
.long-list {
contain: layout style paint;
}
.long-list-item {
contain: layout style;
}
/* Virtual Scrolling Helper */
.virtual-scroll-container {
position: relative;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.virtual-scroll-spacer {
position: absolute;
top: 0;
left: 0;
width: 1px;
pointer-events: none;
}
.virtual-scroll-content {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* Scroll Snap للأقسام */
@supports (scroll-snap-type: y mandatory) {
.scroll-snap-container {
scroll-snap-type: y mandatory;
scroll-padding-top: 80px; /* للهيدر الثابت */
}
.scroll-snap-section {
scroll-snap-align: start;
scroll-snap-stop: always;
}
}
/* تØسين أداء الظلال */
@media (max-width: 768px) {
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
}
/* تØسين أداء البوردر */
.optimized-border {
border: 1px solid transparent;
background-clip: padding-box;
}
/* Debounce hover effects on mobile */
@media (hover: none) and (pointer: coarse) {
.hover\:scale-105:hover,
.hover\:scale-110:hover,
.hover\:transform:hover {
transform: none !important;
}
.hover\:shadow-xl:hover,
.hover\:shadow-2xl:hover {
box-shadow: none !important;
}
}
/* Optimize paint areas */
.paint-optimized {
contain: paint;
}
.layout-optimized {
contain: layout;
}
.strict-optimized {
contain: strict;
}
/* Reduce repaints during scroll */
.no-paint-on-scroll {
will-change: transform;
transform: translateZ(0);
}
/* Optimize fixed elements */
.fixed-optimized {
transform: translateZ(0);
will-change: transform;
contain: layout style paint;
}
/* Scroll indicators */
.scroll-indicator {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, var(--primary-color) 0%, var(--secondary-color) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.1s linear;
z-index: 9999;
}
/* Smooth scroll to top button */
.scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
transform: translateY(20px);
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}
/* RTL optimizations */
[dir="rtl"] .scroll-to-top {
right: auto;
left: 20px;
}
/* Responsive Design - التصميم المتجاوب */
/* Ø¥ØµÙ„Ø§Ø Ù…Ø´ÙƒÙ„Ø© البريكينج نيوز ÙÙŠ الموبايل */
body, html {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
* {
box-sizing: border-box !important;
}
/* Container adjustments for reduced margins */
@media (max-width: 640px) {
.container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.gap-4 {
gap: 0.75rem !important;
}
.p-6 {
padding: 1rem !important;
}
.p-4 {
padding: 0.75rem !important;
}
}
/* Ø¥ØµÙ„Ø§Ø Ø®Ø§Øµ للهوات٠الصغيرة */
@media (max-width: 480px) {
.breaking-news {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
padding: 0 !important;
}
.breaking-news .container {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
gap: 0.5rem !important;
}
.breaking-news-ticker {
font-size: 0.8125rem !important;
animation-duration: 20s !important;
}
/* منع scroll horizontal على الشاشات الصغيرة */
body {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
}
}
@media (max-width: 768px) {
.container {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Ø¥ØµÙ„Ø§Ø Ø®Ø§Øµ للبريكينج نيوز ÙÙŠ الموبايل */
.breaking-news {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
box-sizing: border-box !important;
overflow: hidden !important;
position: relative !important;
}
.breaking-news .container {
max-width: 100% !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
margin: 0 !important;
overflow: hidden !important;
}
.breaking-news-ticker {
will-change: transform !important;
backface-visibility: hidden !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
.px-2 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.gap-4 {
gap: 1rem !important;
}
.p-6 {
padding: 1.25rem !important;
}
.p-4 {
padding: 1rem !important;
}
/* Mobile grid adjustments */
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 1024px) {
.container {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.px-2 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.gap-4 {
gap: 1.25rem !important;
}
.p-6 {
padding: 1.5rem !important;
}
.p-4 {
padding: 1.25rem !important;
}
/* Tablet grid adjustments */
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1024px) {
.container {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.px-2 {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.gap-4 {
gap: 1.5rem !important;
}
.p-6 {
padding: 1.5rem !important;
}
.p-4 {
padding: 1rem !important;
}
}
/* Grid system improvements */
.grid {
display: grid !important;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* Responsive grid columns */
@media (min-width: 640px) {
.sm\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 768px) {
.md\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (min-width: 1024px) {
.lg\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* Gap adjustments */
.gap-1 {
gap: 0.25rem !important;
}
.gap-2 {
gap: 0.5rem !important;
}
.gap-3 {
gap: 0.75rem !important;
}
.gap-4 {
gap: 1rem !important;
}
.gap-6 {
gap: 1.5rem !important;
}
.gap-8 {
gap: 2rem !important;
}
/* Padding adjustments */
.p-1 {
padding: 0.25rem !important;
}
.p-2 {
padding: 0.5rem !important;
}
.p-3 {
padding: 0.75rem !important;
}
.p-4 {
padding: 1rem !important;
}
.p-6 {
padding: 1.5rem !important;
}
.p-8 {
padding: 2rem !important;
}
.p-12 {
padding: 3rem !important;
}
.p-16 {
padding: 4rem !important;
}
/* Margin adjustments */
.mb-1 {
margin-bottom: 0.25rem !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.mb-3 {
margin-bottom: 0.75rem !important;
}
.mb-4 {
margin-bottom: 1rem !important;
}
.mb-6 {
margin-bottom: 1.5rem !important;
}
.mb-8 {
margin-bottom: 2rem !important;
}
.mb-12 {
margin-bottom: 3rem !important;
}
.mt-1 {
margin-top: 0.25rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mt-3 {
margin-top: 0.75rem !important;
}
.mt-4 {
margin-top: 1rem !important;
}
.mt-6 {
margin-top: 1.5rem !important;
}
.mt-8 {
margin-top: 2rem !important;
}
.mt-12 {
margin-top: 3rem !important;
}
/* Text alignment */
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-left {
text-align: left !important;
}
/* Font weights */
.font-light {
font-weight: 300 !important;
}
.font-normal {
font-weight: 400 !important;
}
.font-medium {
font-weight: 500 !important;
}
.font-semibold {
font-weight: 600 !important;
}
.font-bold {
font-weight: 700 !important;
}
.font-extrabold {
font-weight: 800 !important;
}
/* Font sizes */
.text-xs {
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.text-sm {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
}
.text-base {
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.text-lg {
font-size: 1.125rem !important;
line-height: 1.75rem !important;
}
.text-xl {
font-size: 1.25rem !important;
line-height: 1.75rem !important;
}
.text-2xl {
font-size: 1.5rem !important;
line-height: 2rem !important;
}
.text-3xl {
font-size: 1.875rem !important;
line-height: 2.25rem !important;
}
.text-4xl {
font-size: 2.25rem !important;
line-height: 2.5rem !important;
}
.text-5xl {
font-size: 3rem !important;
line-height: 1 !important;
}
.text-6xl {
font-size: 3.75rem !important;
line-height: 1 !important;
}
/* Display utilities */
.utilities-block {
display: block !important;
}
.utilities-inline-block {
display: inline-block !important;
}
.utilities-inline {
display: inline !important;
}
.utilities-flex {
display: flex !important;
}
.utilities-inline-flex {
display: inline-flex !important;
}
.utilities-grid {
display: grid !important;
}
.utilities-hidden {
display: none !important;
}
/* Position utilities */
.utilities-relative {
position: relative !important;
}
.utilities-absolute {
position: absolute !important;
}
.utilities-fixed {
position: fixed !important;
}
.utilities-sticky {
position: sticky !important;
}
/* Overflow utilities */
.overflow-hidden {
overflow: hidden !important;
}
.overflow-auto {
overflow: auto !important;
}
.overflow-scroll {
overflow: scroll !important;
}
/* Object fit utilities */
.object-cover {
object-fit: cover !important;
}
.object-contain {
object-fit: contain !important;
}
.object-fill {
object-fit: fill !important;
}
/* Width and height utilities */
.w-full {
width: 100% !important;
}
.h-full {
height: 100% !important;
}
.w-1 {
width: 0.25rem !important;
}
.w-2 {
width: 0.5rem !important;
}
.w-4 {
width: 1rem !important;
}
.w-6 {
width: 1.5rem !important;
}
.w-8 {
width: 2rem !important;
}
.w-12 {
width: 3rem !important;
}
.w-16 {
width: 4rem !important;
}
.w-24 {
width: 6rem !important;
}
.w-32 {
width: 8rem !important;
}
.h-1 {
height: 0.25rem !important;
}
.h-2 {
height: 0.5rem !important;
}
.h-4 {
height: 1rem !important;
}
.h-6 {
height: 1.5rem !important;
}
.h-8 {
height: 2rem !important;
}
.h-12 {
height: 3rem !important;
}
.h-16 {
height: 4rem !important;
}
.h-20 {
height: 5rem !important;
}
.h-24 {
height: 6rem !important;
}
.h-32 {
height: 8rem !important;
}
.h-48 {
height: 12rem !important;
}
.h-80 {
height: 20rem !important;
}
/* Border utilities */
.border {
border-width: 1px !important;
}
.border-0 {
border-width: 0 !important;
}
.border-2 {
border-width: 2px !important;
}
.border-3 {
border-width: 3px !important;
}
.border-b {
border-bottom-width: 1px !important;
}
.border-t {
border-top-width: 1px !important;
}
.border-l {
border-left-width: 1px !important;
}
.border-r {
border-right-width: 1px !important;
}
/* Border radius utilities */
.rounded {
border-radius: 0.25rem !important;
}
.rounded-sm {
border-radius: 0.125rem !important;
}
.rounded-md {
border-radius: 0.375rem !important;
}
.rounded-lg {
border-radius: 0.5rem !important;
}
.rounded-xl {
border-radius: 0.75rem !important;
}
.rounded-2xl {
border-radius: 1rem !important;
}
.rounded-3xl {
border-radius: 1.5rem !important;
}
.rounded-full {
border-radius: 9999px !important;
}
/* Background utilities */
.bg-white {
background-color: rgb(255 255 255) !important;
}
.bg-slate-50 {
background-color: rgb(248 250 252) !important;
}
.bg-slate-100 {
background-color: rgb(241 245 249) !important;
}
.bg-slate-200 {
background-color: rgb(226 232 240) !important;
}
.bg-slate-300 {
background-color: rgb(203 213 225) !important;
}
.bg-slate-500 {
background-color: rgb(100 116 139) !important;
}
.bg-slate-600 {
background-color: rgb(71 85 105) !important;
}
.bg-slate-800 {
background-color: rgb(30 41 59) !important;
}
.bg-gray-50 {
background-color: rgb(249 250 251) !important;
}
.bg-gray-100 {
background-color: rgb(243 244 246) !important;
}
.bg-gray-200 {
background-color: rgb(229 231 235) !important;
}
.bg-gray-300 {
background-color: rgb(209 213 219) !important;
}
.bg-gray-500 {
background-color: rgb(107 114 128) !important;
}
.bg-gray-600 {
background-color: rgb(75 85 99) !important;
}
.bg-gray-800 {
background-color: rgb(31 41 55) !important;
}
.bg-gray-900 {
background-color: rgb(17 24 39) !important;
}
.bg-red-600 {
background-color: rgb(220 38 38) !important;
}
.bg-red-700 {
background-color: rgb(185 28 28) !important;
}
.bg-blue-500 {
background-color: rgb(59 130 246) !important;
}
.bg-blue-600 {
background-color: rgb(37 99 235) !important;
}
.bg-blue-700 {
background-color: rgb(29 78 216) !important;
}
.bg-yellow-400 {
background-color: rgb(250 204 21) !important;
}
.bg-yellow-600 {
background-color: rgb(202 138 4) !important;
}
.bg-green-500 {
background-color: rgb(34 197 94) !important;
}
.bg-purple-500 {
background-color: rgb(168 85 247) !important;
}
.bg-purple-600 {
background-color: rgb(147 51 234) !important;
}
.bg-black {
background-color: rgb(0 0 0) !important;
}
/* Text color utilities */
.text-white {
color: rgb(255 255 255) !important;
}
.text-slate-300 {
color: rgb(203 213 225) !important;
}
.text-slate-500 {
color: rgb(100 116 139) !important;
}
.text-slate-600 {
color: rgb(71 85 105) !important;
}
.text-slate-800 {
color: rgb(30 41 59) !important;
}
.text-gray-300 {
color: rgb(209 213 219) !important;
}
.text-gray-500 {
color: rgb(107 114 128) !important;
}
.text-gray-600 {
color: rgb(75 85 99) !important;
}
.text-gray-800 {
color: rgb(31 41 55) !important;
}
.text-gray-900 {
color: rgb(17 24 39) !important;
}
.text-red-600 {
color: rgb(220 38 38) !important;
}
.text-blue-500 {
color: rgb(59 130 246) !important;
}
.text-blue-600 {
color: rgb(37 99 235) !important;
}
.text-green-500 {
color: rgb(34 197 94) !important;
}
.text-yellow-300 {
color: rgb(253 224 71) !important;
}
.text-yellow-500 {
color: rgb(234 179 8) !important;
}
.text-purple-600 {
color: rgb(147 51 234) !important;
}
.text-black {
color: rgb(0 0 0) !important;
}
/* Flexbox utilities */
.items-center {
align-items: center !important;
}
.items-start {
align-items: flex-start !important;
}
.items-end {
align-items: flex-end !important;
}
.justify-center {
justify-content: center !important;
}
.justify-between {
justify-content: space-between !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-end {
justify-content: flex-end !important;
}
.flex-col {
flex-direction: column !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-1 {
flex: 1 1 0% !important;
}
.flex-shrink-0 {
flex-shrink: 0 !important;
}
/* Cursor utilities */
.cursor-pointer {
cursor: pointer !important;
}
/* Focus utilities */
.outline-none {
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.focus\:outline-none:focus {
outline: 2px solid transparent !important;
outline-offset: 2px !important;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.focus\:ring-white:focus {
--tw-ring-color: rgb(255 255 255) !important;
}
/* Hover utilities */
.hover\:bg-gray-100:hover {
background-color: rgb(243 244 246) !important;
}
.hover\:bg-slate-50:hover {
background-color: rgb(248 250 252) !important;
}
.hover\:text-red-600:hover {
color: rgb(220 38 38) !important;
}
.hover\:text-blue-600:hover {
color: rgb(37 99 235) !important;
}
.hover\:underline:hover {
text-decoration: underline !important;
}
.hover\:shadow-xl:hover {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.hover\:shadow-2xl:hover {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
/* Group hover utilities */
.group:hover .group-hover\:text-yellow-200 {
color: rgb(254 240 138) !important;
}
.group:hover .group-hover\:scale-110 {
--tw-scale-x: 1.1 !important;
--tw-scale-y: 1.1 !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.group:hover .group-hover\:translate-x-1 {
--tw-translate-x: 0.25rem !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
/* Last child utilities */
.last\:border-b-0:last-child {
border-bottom-width: 0 !important;
}
/* Border bottom utility */
.border-b {
border-bottom-width: 1px !important;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 5px rgba(192, 139, 45, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(192, 139, 45, 0.8);
}
}
@keyframes golden-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Animation classes */
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.slide-in-right {
animation: slideInRight 0.6s ease-out;
}
.slide-in-up {
animation: slideInUp 0.6s ease-out;
}
.rotate-on-hover:hover {
animation: rotate 1s linear infinite;
}
.hover-glow:hover {
animation: glow 2s ease-in-out infinite alternate;
}
.golden-line::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: width 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.expand-on-hover:hover {
transform: scale(1.05);
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.ripple-effect:hover::before {
width: 300px;
height: 300px;
}
.floating-particles {
position: relative;
}
.floating-particles::before,
.floating-particles::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: rgba(192, 139, 45, 0.3);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.floating-particles::before {
top: 20%;
left: 20%;
animation-delay: 0s;
}
.floating-particles::after {
top: 60%;
left: 80%;
animation-delay: 3s;
}
.featured-icon {
transition: all 0.3s ease;
}
.featured-icon:hover {
transform: scale(1.2) rotate(5deg);
color: #C08B2D;
}
.featured-badge {
position: relative;
overflow: hidden;
animation: pulse 2s infinite;
}
.featured-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.featured-badge:hover::before {
left: 100%;
}
.number-badge {
position: relative;
overflow: hidden;
animation: bounce 1s ease-in-out infinite alternate;
}
.number-badge::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.number-badge:hover::before {
left: 100%;
}
.featured-title {
position: relative;
transition: all 0.3s ease;
}
.featured-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #C08B2D, #B22B2B);
transition: width 0.3s ease;
}
.featured-title:hover::after {
width: 100%;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.bg-white {
background-color: rgb(255 255 255);
border: 1px solid rgb(0 0 0);
}
.text-slate-800 {
color: rgb(0 0 0);
}
.text-slate-600 {
color: rgb(0 0 0);
}
}
/* Print Styles */
@media print {
.bg-white {
background-color: rgb(255 255 255) !important;
color: rgb(0 0 0) !important;
}
.text-slate-800 {
color: rgb(0 0 0) !important;
}
.text-slate-600 {
color: rgb(0 0 0) !important;
}
.shadow-lg,
.shadow-xl,
.shadow-2xl {
box-shadow: none !important;
}
}
/* تØسينات أداء البريكينج نيوز */
.breaking-news,
.breaking-news-ticker {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}
/* تØسين الـ animation performance */
@keyframes optimized-scroll-rtl {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
/* Ø¥ØµÙ„Ø§Ø Ù…Ø´ÙƒÙ„Ø© تØرك الصÙØØ© على الأجهزة المØمولة */
@media (max-width: 768px) {
.breaking-news-ticker {
animation-name: optimized-scroll-rtl !important;
}
/* منع أي تØرك غير مرغوب Ùيه */
.breaking-news * {
-webkit-transform: translateZ(0);
transform: translateZ(0);
position: relative;
}
}
/* Mobile Fixes for Breaking News - إصلاØات الموبايل للأخبار العاجلة */
/* Ø¥ØµÙ„Ø§Ø Ø´Ø§Ù…Ù„ لمنع تØرك الصÙØØ© ÙÙŠ الموبايل */
body, html {
overflow-x: hidden !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
* {
box-sizing: border-box !important;
}
/* إصلاØات البريكينج نيوز للموبايل */
.breaking-news {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
/* تØسينات الأداء */
will-change: transform;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000px;
perspective: 1000px;
}
.breaking-news-ticker {
will-change: transform !important;
backface-visibility: hidden !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
display: inline-block !important;
white-space: nowrap !important;
}
/* إصلاØات للشاشات الصغيرة */
@media (max-width: 768px) {
/* منع أي overflow horizontal */
body {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
html {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Ø¥ØµÙ„Ø§Ø Ø§Ù„Ø¨Ø±ÙŠÙƒÙŠÙ†Ø¬ نيوز ÙÙŠ الموبايل */
.breaking-news {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.breaking-news .container {
max-width: 100% !important;
width: 100% !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
margin: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.breaking-news-ticker {
font-size: 0.875rem !important;
animation-duration: 25s !important;
padding-left: 100% !important;
}
/* Ø¥ØµÙ„Ø§Ø animation ÙÙŠ الموبايل */
@keyframes mobile-scroll-rtl {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.breaking-news-ticker {
animation-name: mobile-scroll-rtl !important;
}
}
/* إصلاØات للأداء العام */
.breaking-news *,
.breaking-news-ticker * {
box-sizing: border-box !important;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Ø¥ØµÙ„Ø§Ø Ù…Ù†Ø¹ scroll bars غير مرغوبة */
.breaking-news::-webkit-scrollbar,
.breaking-news-ticker::-webkit-scrollbar {
display: none;
}
.breaking-news,
.breaking-news-ticker {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Ø¥ØµÙ„Ø§Ø Ù„Ù„Ù€ container العام ÙÙŠ الموبايل */
@media (max-width: 768px) {
.container {
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
}
/* Hover state optimization */
.breaking-news:hover .breaking-news-ticker {
animation-play-state: paused;
}
/* Ø¥ØµÙ„Ø§Ø Ù…Ø´ÙƒÙ„Ø© التأخير ÙÙŠ التØميل */
.breaking-news-ticker {
opacity: 0;
animation: mobile-scroll-rtl 30s linear infinite, fade-in 0.5s ease-in-out forwards;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
/* Ø¥ØµÙ„Ø§Ø Ù„Ù„Ù€ RTL direction */
.breaking-news {
direction: rtl;
}
.breaking-news-ticker {
direction: ltr;
text-align: left;
}
/* تØسين الأداء على الأجهزة المØمولة */
@media (max-width: 768px) {
.breaking-news-ticker {
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-perspective: 1000px !important;
perspective: 1000px !important;
}
}
/* Mobile Menu Fix CSS - Enhanced */
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-overlay.overlay-active {
opacity: 1;
}
/* Mobile Navigation Menu */
.mobile-nav-menu {
position: fixed !important;
top: 0 !important;
right: -100% !important;
width: 320px !important;
max-width: 85vw !important;
height: 100vh !important;
background: white !important;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
z-index: 9999 !important;
overflow-y: auto !important;
transition: right 0.3s ease !important;
-webkit-overflow-scrolling: touch;
display: none !important;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.mobile-nav-menu.menu-active {
right: 0 !important;
}
/* إظهار القائمة عند ÙتØها */
.mobile-nav-menu[style*="display: block"] {
display: block !important;
}
/* Body when menu is open */
body.menu-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
touch-action: none;
}
/* Mobile Menu Button */
.mobile-menu-btn {
background: none;
border: none;
padding: 0.5rem;
cursor: pointer;
position: relative;
z-index: 10001;
}
.mobile-menu-btn.active {
color: #C08B2D;
}
/* Mobile Menu Header */
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
background: linear-gradient(135deg, #C08B2D 0%, #B22B2B 100%);
color: white;
}
.mobile-nav-close-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.mobile-nav-close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Mobile Menu Links */
.mobile-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-item {
border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
}
.mobile-nav-link:hover {
background: rgba(192, 139, 45, 0.05);
color: #C08B2D;
}
.mobile-nav-link-primary {
background: rgba(192, 139, 45, 0.1);
color: #C08B2D;
font-weight: 600;
}
.mobile-nav-link-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mobile-nav-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
color: #C08B2D;
}
.mobile-nav-text {
font-weight: 500;
}
.mobile-nav-arrow {
font-size: 1rem;
transition: transform 0.3s ease;
color: #C08B2D;
}
.mobile-nav-link:hover .mobile-nav-arrow {
transform: translateX(-5px);
}
/* Sub Navigation */
.mobile-sub-nav-list {
list-style: none;
margin: 0;
padding: 0;
background: rgba(192, 139, 45, 0.05);
}
.mobile-sub-nav-item {
border-bottom: 1px solid rgba(192, 139, 45, 0.1);
}
.mobile-sub-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1.5rem 0.875rem 3rem;
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}
.mobile-sub-nav-link:hover {
background: rgba(192, 139, 45, 0.1);
color: #C08B2D;
}
/* Ensure menu is above everything */
@media (max-width: 768px) {
.mobile-header-container {
position: relative;
z-index: 10000;
}
.mobile-menu-overlay {
z-index: 10001;
}
.mobile-nav-menu {
z-index: 10002;
}
/* Fix for Alpine.js conflicts */
.mobile-nav-menu[x-show="true"] {
display: block !important;
right: 0 !important;
}
.mobile-menu-overlay[x-show="true"] {
display: block !important;
opacity: 1 !important;
}
}
/* =================================================================
Mobile Performance & Layout Fix
Version: 3.0
Purpose: To provide a stable, jank-free mobile experience by disabling heavy animations.
================================================================= */
/* 1. Base Layout & Scroll Behavior
/* - Prevents horizontal overflow.
/* -------------------------------------------------------------- */
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
overflow-x: hidden !important;
width: 100%;
max-width: 100vw;
}
/* 2. Content & Animation Reset for Mobile
/* - Disables all animations and transitions on mobile for performance.
/* -------------------------------------------------------------- */
@media (max-width: 768px) {
/* Globally disable animations and transitions on mobile for max performance */
.hero-section, .section-card, .news-card, .sidebar-widget,
.animate-pulse, .animate-bounce, .animate-spin, .animate-fade-in-up,
.animate-fade-in-delay, .animate-gradient-text, .floating-shapes,
.logo-glow-bg, .logo-glow, [class*="animate-"] {
animation: none !important;
transition: none !important;
}
/* Remove any blur effects that are expensive on mobile */
.backdrop-blur, .backdrop-filter {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
/* 3. Layer Promotion for Active Components
/* - Selectively applies layer promotion to elements that need it,
/* like sliders, to prevent them from causing page-wide repaints.
/* -------------------------------------------------------------- */
.swiper-container, .breaking-news-ticker {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/* نظام الإشعارات المخصص */
.custom-toast {
position: fixed;
top: 10px;
left: 10px;
margin: 10px;
padding: 16px 20px;
background: #10b981;
color: white;
border-radius: 0 0 8px 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-family: 'Tajawal', sans-serif;
z-index: 9999;
animation: slideIn 0.3s ease-out;
max-width: 400px;
min-width: 250px;
}
.custom-toast.error {
background: #ef4444;
}
.custom-toast.warning {
background: #f59e0b;
}
.custom-toast.info {
background: #3b82f6;
}
.custom-toast .icon {
font-size: 20px;
font-weight: bold;
flex-shrink: 0;
}
.custom-toast .message {
flex-grow: 1;
line-height: 1.4;
}
.custom-toast .close-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
margin-left: 10px;
opacity: 0.8;
transition: opacity 0.2s;
flex-shrink: 0;
}
.custom-toast .close-btn:hover {
opacity: 1;
}
@keyframes slideIn {
from {
transform: translateY(-100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100px);
opacity: 0;
}
}
/* جميع الإشعارات ÙÙŠ Ù†Ùس المكان */
.custom-toast:nth-of-type(2),
.custom-toast:nth-of-type(3),
.custom-toast:nth-of-type(4),
.custom-toast:nth-of-type(5) {
top: 0;
}
/* تØسينات للشاشات الصغيرة */
@media (max-width: 640px) {
.custom-toast {
left: 0;
right: 0;
max-width: 100vw;
border-radius: 0 0 8px 0;
}
@keyframes slideIn {
from {
transform: translateY(-100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-100px);
opacity: 0;
}
}
}
/* Header Layout Fix - Final Solution */
/* 1. Fix for Desktop - Prevent content from hiding behind header */
body {
padding-top: 0;
transition: padding-top 0.3s ease;
}
/* When header is sticky, add padding to body */
body.has-sticky-header {
padding-top: var(--header-height, 80px);
}
/* 2. Ensure header is properly positioned */
.theme-header {
position: relative;
width: 100%;
z-index: 1000;
background: white;
transition: none; /* Remove transition to prevent jumping */
}
.theme-header.sticky-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9999 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* 3. Mobile specific fixes */
@media (max-width: 768px) {
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Fix mobile header container */
.mobile-header-container {
position: relative;
width: 100%;
background: white;
z-index: 10000;
}
/* Ensure mobile menu overlay works */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 40;
}
.mobile-nav-menu {
transform: translateX(100%);
transition: transform 0.3s ease;
}
[x-show="open"] .mobile-nav-menu {
transform: translateX(0);
}
/* Disable all animations on mobile to prevent jank */
* {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
/* Prevent horizontal scroll */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
}
/* Secondary Button Style */
.btn-secondary {
background-color: #6B7280;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.btn-secondary:hover {
background-color: #4B5563;
transform: translateY(-1px);
}
.btn-warning {
background-color: #f59e0b;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-warning:hover {
background-color: #d97706;
}
.btn-info {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.btn-info:hover {
background-color: #2563eb;
}