:root{ –bg:#ffffff; –card:#f8fafc; –accent:#0ea5a4; –muted:#6b7280; –radius:12px; } *{box-sizing:border-box} body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,’Segoe UI’,Roboto,’Helvetica Neue’,Arial; background:var(–bg); color:#111827; margin:0; padding:20px} .portfolio-wrap{max-width:1200px;margin:0 auto} .portfolio-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .portfolio-header h2{margin:0;font-size:1.4rem} .portfolio-header p{margin:0;color:var(–muted)} .portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px} .portfolio-item{background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));border-radius:var(–radius);overflow:hidden;box-shadow:0 6px 22px rgba(15,23,42,0.06);cursor:pointer;transition:transform .18s ease, box-shadow .18s ease} .portfolio-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(15,23,42,0.12)} .thumb{width:100%;height:140px;display:flex;align-items:center;justify-content:center;background:#fff;padding:18px} .thumb img{max-width:90%;max-height:100%;object-fit:contain} .item-body{padding:14px} .client-name{font-weight:600;margin:0; font-size:1rem} .client-role{margin:6px 0 0;color:var(–muted);font-size:0.88rem} .item-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 18px} .badge{background:rgba(14,165,164,0.08);color:var(–accent);padding:6px 10px;border-radius:999px;font-size:0.82rem;font-weight:600} /* Lightbox */ .lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:9999;padding:20px} .lightbox.show{display:flex} .lightbox-card{max-width:920px;width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(2,6,23,0.6);display:grid;grid-template-columns:1fr 360px} .lightbox-left{min-height:360px;display:flex;align-items:center;justify-content:center;background:#111827} .lightbox-left img{max-width:100%;max-height:100%;object-fit:contain} .lightbox-right{padding:22px} .lightbox-right h3{margin:0 0 10px} .lightbox-right p{color:var(–muted);margin:0 0 18px} .lightbox-close{position:absolute;top:18px;right:18px;background:transparent;border:0;color:#fff;font-size:22px} /* responsive */ @media (max-width:880px){ .lightbox-card{grid-template-columns:1fr} .lightbox-right{padding:14px} } /* small helper */ .small{font-size:0.88rem;color:var(–muted)} (function(){ const items = document.querySelectorAll(‘.portfolio-item’); const lb = document.getElementById(‘lightbox’); const lbImage = document.getElementById(‘lbImage’); const lbName = document.getElementById(‘lbName’); const lbDesc = document.getElementById(‘lbDesc’); const lbClose = document.getElementById(‘lbClose’); const viewSite = document.getElementById(‘viewSite’); const contactBtn = document.getElementById(‘contactBtn’); items.forEach(it => { it.addEventListener(‘click’, () => { const img = it.getAttribute(‘data-image’) || ”; const name = it.getAttribute(‘data-name’) || ‘Client’; const desc = it.getAttribute(‘data-desc’) || ”; lbImage.src = img; lbImage.alt = name + ‘ image’; lbName.textContent = name; lbDesc.textContent = desc; viewSite.href = ‘#’; lb.classList.add(‘show’); document.body.style.overflow = ‘hidden’; }) }) lbClose.addEventListener(‘click’, closeLb); lb.addEventListener(‘click’, (e)=>{ if(e.target === lb) closeLb(); }); function closeLb(){ lb.classList.remove(‘show’); document.body.style.overflow = ”; } contactBtn.addEventListener(‘click’, ()=>{ window.location.href = ‘mailto:hello@digilisted.com?subject=Request%20for%20case%20study%20-%20’ + encodeURIComponent(lbName.textContent); }); // Accessibility: close on ESC document.addEventListener(‘keydown’, (e)=>{ if(e.key === ‘Escape’) closeLb(); }); })();