الكل
مدن ذكية
سياحة فاخرة
بنية تحتية
السعودية نيوم NEOM أرض المستقبل، حيث تلتقي التقنية بالطبيعة في بيئة مستدامة
بالكامل.
مصر العاصمة الإدارية مركز سياسي واقتصادي جديد، يمثل نقلة نوعية في التخطيط العمراني.
الإمارات أجندة دبي D33 خطة طموحة لمضاعفة حجم اقتصاد دبي وجعلها ضمن الأفضل عالمياً.
السعودية القدية Qiddiya عاصمة الترفيه والرياضة والفنون، ووجهة عالمية للمستقبل.
قطر مدينة لوسيل نموذج للمدينة الذكية والمستدامة التي تجمع بين الحداثة والتراث.
السعودية البحر الأحمر مشروع السياحة المتجددة الأكثر طموحاً، يضع معايير جديدة
للاستدامة.
/* ============================================
VARIABLES & THEME
============================================ */
:root {
--p-bg-main: #0b1120;
--p-bg-card: #1e293b;
--p-text-light: #f8fafc;
--p-text-muted: #94a3b8;
--p-accent: #38bdf8;
--p-accent-grad: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
--p-border: rgba(255, 255, 255, 0.1);
--p-card-border: rgba(255, 255, 255, 0.08);
}/* ============================================
SECTION STYLES (Existing)
============================================ */
.ar-projects-section {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 100px 0 120px;
background: var(--p-bg-main);
font-family: 'IBM Plex Sans Arabic', sans-serif;
direction: rtl;
overflow: hidden;
}.ar-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 10;
}/* Blobs */
.ar-projects-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}.bg-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.4;
}.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
/* Reduced from 120px for better performance */
opacity: 0.12;
/* Reduced opacity */
}.bg-orb--1 {
width: 600px;
height: 600px;
background: #38bdf8;
top: -200px;
right: -200px;
}.bg-orb--2 {
width: 500px;
height: 500px;
background: #818cf8;
bottom: -100px;
left: -100px;
}/* Header */
.ar-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 60px;
position: relative;
}.ar-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--p-accent);
text-transform: uppercase;
margin-bottom: 12px;
}.ar-pulse {
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
}.ar-main-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
color: var(--p-text-light);
margin: 0 0 16px;
line-height: 1.1;
}.ar-gradient-text {
background: var(--p-accent-grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}.ar-subtitle {
color: var(--p-text-muted);
font-size: 18px;
max-width: 550px;
line-height: 1.7;
margin: 0;
font-weight: 300;
}/* Impact Stats Box */
.ar-impact-stats {
display: flex;
align-items: center;
gap: 24px;
background: rgba(255, 255, 255, 0.03);
padding: 20px 32px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
}.stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}.stat-num {
color: var(--p-accent);
font-size: 24px;
font-weight: 800;
line-height: 1;
}.stat-desc {
color: var(--p-text-muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}.stat-divider {
width: 1px;
height: 30px;
background: rgba(255, 255, 255, 0.1);
}@media (max-width: 991px) {
.ar-header {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}.ar-impact-stats {
width: 100%;
justify-content: center;
}
}/* Tabs */
.ar-tabs-wrapper {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--p-border);
}.ar-tabs {
display: flex;
gap: 16px;
overflow-x: auto;
padding-bottom: 4px;
}.ar-tab {
border-radius: 100px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
background: transparent;
color: var(--p-text-muted);
border: 1px solid transparent;
transition: 0.3s;
white-space: nowrap;
}.ar-tab:hover {
color: var(--p-text-light);
background: rgba(255, 255, 255, 0.05);
}.ar-tab.active {
background: rgba(56, 189, 248, 0.1);
color: var(--p-accent);
border-color: rgba(56, 189, 248, 0.3);
}/* Cards */
#projectsSwiper {
overflow: visible !important;
padding-bottom: 40px;
}.swiper-slide {
width: 360px !important;
height: 480px;
transition: 0.4s;
}.swiper-slide.hidden {
opacity: 0.2;
pointer-events: none;
transform: scale(0.95);
}.ar-card {
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--p-bg-card);
border: 1px solid var(--p-card-border);
overflow: hidden;
display: flex;
flex-direction: column;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
cursor: pointer;
}.ar-card:hover {
transform: translateY(-10px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}.ar-card-image {
position: relative;
height: 240px;
overflow: hidden;
}.ar-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}.ar-card:hover .ar-card-image img {
transform: scale(1.1);
}.card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
}.ar-badge {
position: absolute;
top: 16px;
right: 16px;
background: rgba(15, 23, 42, 0.85);
/* Slightly darker background instead of high blur */
padding: 6px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 6px;
}.ar-badge::before {
content: '';
width: 6px;
height: 6px;
background: var(--p-accent);
border-radius: 50%;
}.ar-card-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}.ar-card-title {
font-size: 22px;
font-weight: 700;
color: var(--p-text-light);
margin: 0 0 10px;
}.ar-card-desc {
font-size: 14px;
color: var(--p-text-muted);
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}.content-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
margin-top: 20px;
}.meta-item {
font-size: 12px;
font-weight: 600;
color: var(--p-text-muted);
display: flex;
align-items: center;
gap: 6px;
}.meta-item i {
color: var(--p-accent);
font-size: 14px;
}.details-btn {
width: 36px;
height: 36px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--p-text-light);
transition: 0.3s;
}.ar-card:hover .details-btn {
background: var(--p-accent);
color: #fff;
transform: scale(1.1);
}.ar-modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.75);
/* Darker overlay but no blur */
display: none;
/* Changed from opacity/visibility for instant show */
align-items: center;
justify-content: center;
padding: 24px;
}.ar-modal-overlay.active {
display: flex;
}.ar-modal-container {
background: #1e293b;
width: 100%;
max-width: 800px;
max-height: 80vh;
/* Not covering full screen */
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}.ar-modal-close {
position: absolute;
top: 20px;
right: 20px;
z-index: 20;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
transition: 0.2s;
}.ar-modal-close:hover {
background: #fff;
color: #000;
transform: rotate(90deg);
}.ar-modal-scroller {
overflow-y: auto;
flex: 1;
/* Custom scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}/* Modal Content */
.ar-modal-hero {
height: 350px;
position: relative;
}.ar-modal-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}.ar-modal-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to top, #1e293b 0%, rgba(30, 41, 59, 0.5) 50%, rgba(30, 41, 59, 0) 100%);
}.ar-modal-hero-content {
position: absolute;
bottom: 30px;
right: 32px;
z-index: 2;
}.ar-modal-pill {
display: inline-block;
background: var(--p-accent);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 6px;
margin-bottom: 12px;
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}.ar-modal-title {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.1;
}.ar-modal-body {
padding: 32px;
}/* Stats Grid */
.ar-modal-quick-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}.stat-box {
background: rgba(255, 255, 255, 0.03);
padding: 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
text-align: center;
}.stat-label {
display: block;
font-size: 11px;
color: var(--p-text-muted);
text-transform: uppercase;
margin-bottom: 6px;
}.stat-value {
display: block;
font-size: 15px;
font-weight: 700;
color: #fff;
}.desc-title {
font-size: 20px;
color: #fff;
margin-bottom: 16px;
}.ar-modal-desc {
color: #e2e8f0;
line-height: 1.8;
font-size: 16px;
margin-bottom: 32px;
background: rgba(255, 255, 255, 0.02);
padding: 20px;
border-radius: 12px;
border-right: 4px solid var(--p-accent);
}/* Extra Info Styles */
.ar-modal-extra {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 24px;
}.extra-section {
background: rgba(15, 23, 42, 0.4);
padding: 20px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
}.extra-title {
color: #38bdf8;
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}.extra-content {
color: #94a3b8;
font-size: 14px;
line-height: 1.7;
white-space: pre-line;
}.ar-modal-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}.primary-btn {
background: var(--p-accent);
color: #fff;
padding: 14px 32px;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
transition: 0.3s;
box-shadow: 0 4px 20px rgba(56, 189, 248, 0.25);
}.primary-btn:hover {
background: #0ea5e9;
transform: translateY(-2px);
}.secondary-btn {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 14px 24px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: 0.3s;
}.secondary-btn:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.05);
}@media (max-width: 768px) {
.ar-modal-container {
max-height: 90vh;
/* Fixed height on mobile, not full screen */
width: 95%;
margin: 0 auto;
border-radius: 20px;
}.ar-modal-hero {
height: 200px;
}.ar-modal-quick-stats {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
}(function () {
function initProjectsSection() {
// --- Swiper Init ---
const swiperEl = document.getElementById('projectsSwiper');
if (swiperEl) {
const swiper = new Swiper(swiperEl, {
slidesPerView: 'auto',
spaceBetween: 32,
speed: 500, /* Optimized transition speed */
grabCursor: true,
watchSlidesProgress: true, /* Performance optimization */
touchEventsTarget: 'container',
breakpoints: { 320: { spaceBetween: 16 }, 768: { spaceBetween: 32 } }
});// Tabs Logic
const tabs = document.querySelectorAll('#projectTabs .ar-tab');
const slides = swiperEl.querySelectorAll('.swiper-slide');tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const filter = tab.getAttribute('data-filter');
slides.forEach(slide => {
const categories = slide.getAttribute('data-category') || '';
if (filter === 'all' || categories.indexOf(filter) !== -1) {
slide.style.display = 'block';
slide.classList.remove('hidden');
} else {
slide.style.display = 'none';
slide.classList.add('hidden');
}
});
swiper.update();
swiper.slideTo(0);
});
});
}// --- Modal Logic ---
const modal = document.getElementById('arProjectModal');
const closeBtn = document.getElementById('arModalClose');
const cards = document.querySelectorAll('.js-open-modal');// Elements to populate
const mTitle = document.getElementById('m-title');
const mSubtitle = document.getElementById('m-subtitle');
const mDesc = document.getElementById('m-desc');
const mImage = document.getElementById('m-image');
const mBudget = document.getElementById('m-budget');
const mYear = document.getElementById('m-year');
const mArea = document.getElementById('m-area');
const mJobs = document.getElementById('m-jobs');
const mGoals = document.getElementById('m-goals');
const mEco = document.getElementById('m-eco');function openModal(card) {
// Populate Data
mTitle.innerText = card.dataset.title;
mSubtitle.innerText = card.dataset.subtitle;
mDesc.innerText = card.dataset.desc;
mImage.src = card.dataset.image;mBudget.innerText = card.dataset.budget;
mYear.innerText = card.dataset.year;
mArea.innerText = card.dataset.area;
mJobs.innerText = card.dataset.jobs;
mGoals.innerText = card.dataset.goals;
mEco.innerText = card.dataset.eco;// Show Modal
modal.classList.add('active');
document.body.style.overflow = 'hidden'; // Prevent background scrolling
}function closeModal() {
modal.classList.remove('active');
document.body.style.overflow = '';
}cards.forEach(card => {
card.addEventListener('click', function (e) {
if (!e.target.closest('a')) { // Don't trigger if click inside a link
openModal(this);
}
});
});closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function (e) {
if (e.target === modal) closeModal();
});
}if (document.readyState === 'complete') {
initProjectsSection();
} else {
window.addEventListener('load', initProjectsSection);
}
})();
السعودية
مصر
الإمارات
السعودية
قطر
السعودية