installStyles();
const work = document.querySelector('#work, section.work');
if (!work) return;
if (path === '/') { showLiveList(work); const liveProjectList = work.querySelector('.rd-project-list'); if (liveProjectList) liveProjectList.remove(); }
if (path === '/homepage-work-review') showReviewGrid(work);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run, {once:true});
} else {
run();
}
setTimeout(run, 500);
setTimeout(run, 1600);
document.addEventListener('mercury:load', run);
})();
New List Item
New List Item
New List Item
} else {
run();
}
setTimeout(run, 450);
setTimeout(run, 1400);
document.addEventListener('mercury:load', run);
})();
if (path === '/shop') {
location.replace('/projects');
return;
}
const projects = [
{
href: '/case-immc',
XX category: 'Award-Winning Museum Exhibition',
title: 'Covenants & Coexistence — IMMC',
alt: 'Covenants and Coexistence museum exhibition for IMMC',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/401a5a65-b042-4739-9bcc-da84217cdaac/immc-museum-exhibition-covenants-coexistence-rissala-design-1.jpg?content-type=image%2Fjpeg'
},
{
href: '/palestine-exhibition',
category: 'Exhibition & Public Education',
title: 'Journey to Understanding — Palestine & Israel Unveiled',
alt: 'Journey to Understanding Palestine exhibition installed in the gallery',
cover: 'https://framerusercontent.com/images/9TiiAzAIlKnQ6NiatdvCNJPdz8.jpg'
},
{
href: '/case-ramadan',
category: 'International Museum Exhibition',
title: 'Spirit of Ramadan — Islamic Arts Museum Malaysia',
alt: 'Spirit of Ramadan exhibition at the Islamic Arts Museum Malaysia',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/7c11b1b8-6f1c-42ab-8d96-45d4138332ba/csor-exhibition-panorama-iamm-kuala-lumpur.jpg?content-type=image%2Fjpeg'
},
{
href: '/case-danat',
category: 'Luxury Hospitality Branding',
title: 'Danat Hotels & Resorts — Arabic Brand System',
alt: 'Danat Hotels and Resorts luxury bilingual identity system',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/8ae6001b-3ca0-4966-b392-4f9f11acc4d8/danat-hotels-resorts-brand-identity-hero.webp?content-type=image%2Fwebp'
},
{
href: '/case-lamer',
category: 'Hospitality Brand & Spatial Experience',
title: 'La Mer — Restaurant Experience',
alt: 'La Mer restaurant brand and spatial experience in Muscat',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/c2a170b1-72ee-48cc-8aa5-75f872d541fb/la-mer-restaurant-oman-bar-design-rissala-design.jpg?content-type=image%2Fjpeg'
},
{
href: '/case-sme',
category: 'National Exhibition',
title: 'Oman SME Expo — A National Stage',
alt: 'Oman SME national exhibition design and visitor experience',
cover: 'https://static1.squarespace.com/static/580be1f7bebafb59fd8a475c/t/6a74994236c7794e9651d188/1786026307655/sme-national-exhibition-overview.jpg'
},
{
href: '/case-oman',
category: 'Cultural Festival & Experience',
title: 'Oman — Land of Civilizations',
alt: 'Oman Land of Civilizations cultural festival experience',
cover: 'https://images.squarespace-cdn.com/content/v1/580be1f7bebafb59fd8a475c/d0b86b0b-b70c-464e-8c69-4a5a22dd3c18/Oman-Art-Expo.jpg?format=1500w'
},
{
href: '/case-mediation',
category: 'Diplomatic Brand Platform',
title: 'Qatar Mediation Forum — Doha',
alt: 'Qatar Mediation Forum diplomatic brand platform in Doha',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/38b5baee-5266-4d92-b43c-100d30f5fcc2/qatar-mediation-forum-doha-brand-platform-rissala-design.jpg?content-type=image%2Fjpeg'
},
{
href: '/case-alareen',
category: 'Brand Identity Across Place',
title: 'Al Areen — A Living Identity',
alt: 'Al Areen academy brand identity across signage and place',
cover: 'https://images.squarespace-cdn.com/content/580be1f7bebafb59fd8a475c/5de185e4-b6f5-4e33-9e83-f930573a4f93/al-areen-academy-dubai-street-sign-brand-identity-rissala-design.jpg?content-type=image%2Fjpeg'
},
{
href: '/case-astraqua',
category: 'Aerospace Brand System',
title: 'AstraQua — Aerospace Innovation',
alt: 'AstraQua aerospace innovation brand identity system',
cover: 'https://images.squarespace-cdn.com/content/v1/580be1f7bebafb59fd8a475c/2ad997d4-3f55-42db-a4ea-50506c7055ff/Rissala-Design_AstraQua_Aerospace-Innovation_Brand-Identity.png?format=1500w'
},
{
href: '/case-yafa',
category: 'Digital Innovation Identity',
title: 'YAFA — A Brand with Roots and Reach',
alt: 'YAFA digital innovation brand identity',
cover: 'https://images.squarespace-cdn.com/content/v1/580be1f7bebafb59fd8a475c/2d12963b-b5fa-4829-8f63-009c2691d070/yafa.png?format=1500w'
},
{
href: '/case-msjw',
category: 'Movement Identity',
title: 'Mississippi for a Just World',
alt: 'Mississippi for a Just World movement identity',
cover: 'https://images.squarespace-cdn.com/content/v1/6824d59240c70e599ca8838a/1f41d601-6f67-4e6a-971a-beb2ca1ca0eb/62.png'
},
{
href: '/case-advisory',
category: 'Public-Sector Cultural Branding',
title: 'Environmental Protection Advisory',
alt: 'Environmental protection advisory cultural branding system',
cover: 'https://images.squarespace-cdn.com/content/v1/580be1f7bebafb59fd8a475c/af1a3b9d-fbe6-467d-8a4c-6891fd6dba0d/arabic-branding.png?format=1500w'
},
{
href: '/case-thuluth',
category: 'Cultural Art & Craft',
title: 'Quran 49:13 — Dimensional Thuluth',
alt: 'Dimensional Thuluth calligraphy composition of Quran 49 verse 13',
cover: 'https://images.squarespace-cdn.com/content/v1/580be1f7bebafb59fd8a475c/08d5a14e-50f8-45d0-ae41-b1d5ea4c2113/3D-Calligraphy-Art+-Rissala-Design.png?format=1500w'
}
];
const portfolioOrder = [
'/case-immc',
'/palestine-exhibition',
'/case-ramadan',
'/case-lamer',
'/case-danat',
'/case-oman',
'/case-sme',
'/case-mediation',
'/case-alareen',
'/case-astraqua',
'/case-yafa',
'/case-msjw',
'/case-advisory',
'/case-thuluth'
];
const archivedProjectHrefs = new Set(['/case-advisory', '/case-thuluth']);
const orderIndex = new Map(portfolioOrder.map((href, index) => [href, index]));
projects.sort((a, b) => (orderIndex.get(a.href) ?? 999) - (orderIndex.get(b.href) ?? 999));
const projectMap = new Map(projects.map((project) => [project.href, project]));
const portfolioProjects = projects.filter((project) => !archivedProjectHrefs.has(project.href));
const featuredProjectHrefs = portfolioOrder.slice(0, 8);
const featuredProjects = featuredProjectHrefs.map((href) => projectMap.get(href)).filter(Boolean);
function updateNavigation() {
document.querySelectorAll('a[href]').forEach((anchor) => {
const href = cleanPath(anchor.href);
if (href === '/shop') {
if ((anchor.textContent || '').trim().toLowerCase() === 'shop') {
anchor.removeAttribute('href');
anchor.setAttribute('aria-hidden', 'true');
anchor.setAttribute('tabindex', '-1');
anchor.style.display = 'none';
}
} else if (href === '/portfolio') {
anchor.setAttribute('href', '/projects');
} else if (href === '/welcome') {
anchor.setAttribute('href', '/');
}
});
}
function updateCards() {
const cards = [...document.querySelectorAll('a[href]')].filter((card) => projectMap.has(cleanPath(card.href)));
cards.forEach((card) => {
const project = projectMap.get(cleanPath(card.href));
const category = card.querySelector('.cap .k, .pcap .k');
const title = card.querySelector('.cap .t, .pcap .t');
const image = card.querySelector('img');
if (category) category.textContent = project.category;
if (title) title.textContent = project.title;
if (image) {
if (image.getAttribute('src') !== project.cover) image.setAttribute('src', project.cover);
image.removeAttribute('srcset');
image.setAttribute('alt', project.alt);
}
});
const parents = [...new Set(cards.map((card) => card.parentElement).filter(Boolean))];
parents.forEach((parent) => {
portfolioOrder.forEach((href) => {
const project = projectMap.get(href);
if (!project) return;
const card = [...parent.children].find((child) => child.matches && child.matches('a') && cleanPath(child.href) === project.href);
if (card) parent.appendChild(card);
});
});
}
function updateHomeGrid() {
if (path !== '/') return;
const grid = document.querySelector('#work .grid, section.work .grid');
if (!grid || grid.dataset.premiumCurated === FLAG) return;
grid.innerHTML = featuredProjects.map((project, index) => `
${project.category} ${project.title} View case study →
`).join('');
grid.dataset.premiumCurated = FLAG;
}
function rebuildMarquee() {
const track = document.querySelector('.marq-track');
if (!track || track.dataset.premiumCurated === 'true') return;
const figureMarkup = featuredProjects.slice(0, 7).map((project) => `${project.title} `).join('');
track.innerHTML = figureMarkup.repeat(4);
track.dataset.premiumCurated = 'true';
}
function updatePalestineProject() {
if (path !== '/palestine-exhibition' || document.querySelector('.rd-palestine-case')) return;
const frame = document.querySelector('main article iframe, article iframe');
if (!frame) return;
frame.classList.add('rd-palestine-frame');
const section = document.createElement('section');
section.className = 'rd-palestine-case';
section.setAttribute('aria-label', 'Journey to Understanding exhibition case study');
section.innerHTML = `
Exhibition · Research · Experience Design
Journey to Understanding.
A public exhibition that turns a complex history into a clear, human journey. Rissala shaped the narrative, information system and physical gallery experience across 59 panels in two parts.
Visit palexhibit.org ↗
Installation photography · Journey to Understanding
`;
frame.before(section);
}
function curateCaseImages() {
const blocked = {
'/case-astraqua': ['sky-winter', 'Sb-colors-street-banner'],
'/case-yafa': ['MMFF.png', 'Sb-colors-street-banner'],
'/case-oman': ['Sb-colors-street-banner', 'arabic-branding.png'],
'/case-advisory': ['Sb-colors-street-banner', '3D-Calligraphy-Art'],
'/case-thuluth': ['arabic-branding.png', 'Basel-Almisshal-Ramadan-Exhibition']
};
(blocked[path] || []).forEach((fragment) => {
document.querySelectorAll(`.gallery img[src*="${fragment}"]`).forEach((image) => image.closest('figure')?.remove());
});
const hero = document.querySelector('.cs-figure img');
if (hero) {
const heroPath = cleanPath(hero.src);
document.querySelectorAll('.gallery figure img').forEach((image) => {
if (cleanPath(image.src) === heroPath) image.closest('figure')?.remove();
});
}
document.querySelectorAll('.gallery').forEach((gallery) => {
if (!gallery.querySelector('figure img')) gallery.remove();
});
if (path === '/case-mediation') {
const project = projectMap.get(path);
const visual = document.querySelector('.cs-figure');
if (visual && !visual.querySelector('img')) {
visual.innerHTML = ` `;
}
}
}
function updateProjectIntro() {
if (path !== '/projects') return;
const heading = document.querySelector('h1');
if (heading) heading.textContent = 'Selected work. Built to carry meaning.';
const existingGrid = document.querySelector('.pgrid');
if (existingGrid) {
existingGrid.innerHTML = portfolioProjects.map((project) => `
${project.category} ${project.title}
`).join('');
return;
}
if (!document.querySelector('a[href*="/case-"], a[href="/palestine-exhibition"]')) {
const section = document.createElement('section');
section.className = 'gallery rd-curated-projects';
section.setAttribute('aria-label', 'Selected Rissala Design projects');
section.innerHTML = ``;
const cta = document.querySelector('.cta');
if (cta) cta.before(section);
}
}
function run() {
updateNavigation();
updateHomeGrid();
updateCards();
rebuildMarquee();
curateCaseImages();
updatePalestineProject();
updateProjectIntro();
}
if (path === '/portfolio') {
location.replace('/projects');
return;
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run, { once: true });
} else {
run();
}
setTimeout(run, 450);
setTimeout(run, 1400);
document.addEventListener('mercury:load', run);
})();