(function(){ var h=document.getElementById('heroH'); if(!h) return; var lines = (h.dataset.text||'').split('|'); h.innerHTML=''; var g=0; lines.forEach(function(line,li){ var parts = line.split(/(.*?<\/i>)/g); parts.forEach(function(part){ if(!part) return; var isI = part.indexOf('')===0; var text = isI ? part.replace(/<\/?i>/g,'') : part; var wrap = document.createElement('span'); if(isI){ wrap.style.fontStyle='italic'; wrap.style.color='var(--coral)'; } // One nowrap span per word, real spaces between them — so a line that // is too wide for the screen wraps between words, never mid-word. text.split(' ').forEach(function(word, wi){ if(wi > 0){ wrap.appendChild(document.createTextNode(' ')); g++; } if(!word) return; var w = document.createElement('span'); w.style.whiteSpace = 'nowrap'; [].forEach.call(word, function(c){ var s = document.createElement('span'); s.className='ch'; s.style.transitionDelay = (g*0.03)+'s'; s.textContent = c; w.appendChild(s); g++; }); wrap.appendChild(w); }); h.appendChild(wrap); }); if(li < lines.length-1) h.appendChild(document.createElement('br')); }); setTimeout(function(){ h.classList.add('show'); }, 200); })(); (function(){ var d=document.getElementById('curDot'),r=document.getElementById('curRing'),l=document.getElementById('curLabel'); if(!matchMedia('(hover:hover)').matches) return; var mx=0,my=0,dx=0,dy=0,rx=0,ry=0; window.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY}); (function loop(){dx+=(mx-dx)*.9;dy+=(my-dy)*.9;rx+=(mx-rx)*.14;ry+=(my-ry)*.14; d.style.transform='translate('+dx+'px,'+dy+'px) translate(-50%,-50%)'; r.style.transform='translate('+rx+'px,'+ry+'px) translate(-50%,-50%)'; l.style.transform='translate('+rx+'px,'+ry+'px) translate(-50%,-50%)'; requestAnimationFrame(loop)})(); function set(s,t){r.classList.remove('is-hover','is-view');d.classList.remove('is-hide');if(s){r.classList.add('is-'+s);if(s==='view')d.classList.add('is-hide')}if(t){l.textContent=t;l.classList.add('on')}else l.classList.remove('on')} document.querySelectorAll('[data-cursor]').forEach(function(el){ el.addEventListener('mouseenter',function(){set(el.dataset.cursor,el.dataset.label||'')}); el.addEventListener('mouseleave',function(){set(null,'')}); }); })(); (function(){var p=document.getElementById('progress');window.addEventListener('scroll',function(){var h=document.documentElement;p.style.setProperty('--p',Math.max(0,Math.min(1,h.scrollTop/(h.scrollHeight-h.clientHeight))))},{passive:true})})(); (function(){var n=document.getElementById('nav');window.addEventListener('scroll',function(){n.classList.toggle('scrolled',scrollY>80)},{passive:true})})(); (function(){var o=new IntersectionObserver(function(e){e.forEach(function(x){if(x.isIntersecting){x.target.classList.add('in');o.unobserve(x.target)}})},{threshold:.14});document.querySelectorAll('.reveal,.stagger').forEach(function(el){o.observe(el)})})(); (function(){document.querySelectorAll('.mag').forEach(function(el){el.addEventListener('mousemove',function(e){var r=el.getBoundingClientRect(),x=e.clientX-r.left-r.width/2,y=e.clientY-r.top-r.height/2;el.style.transform='translate('+(x*.25)+'px,'+(y*.35)+'px)'});el.addEventListener('mouseleave',function(){el.style.transform=''})})})(); (function(){ var all=[['new-car','01','New car','https://jxcvruwfwutbwdzxkogm.supabase.co/storage/v1/object/public/carecay-media/uploads/1781434887118-cppbyc03.jpg'],['used-car','02','Used cars','https://images.unsplash.com/photo-1542362567-b07e54358753?w=900&q=85&auto=format&fit=crop'],['workshop','03','Workshop','https://jxcvruwfwutbwdzxkogm.supabase.co/storage/v1/object/public/carecay-media/uploads/1781507728737-1sax8rox.jpg'],['detailing','04','Detailing','https://jxcvruwfwutbwdzxkogm.supabase.co/storage/v1/object/public/carecay-media/uploads/1781435022028-w2kytoq6.jpg'],['finance','05','Finance','https://images.unsplash.com/photo-1449965408869-eaa3f722e40d?w=900&q=85&auto=format&fit=crop'],['accessories','06','Accessories','https://jxcvruwfwutbwdzxkogm.supabase.co/storage/v1/object/public/carecay-media/uploads/1781435192360-fi657d6i.jpg'],['insurance','07','Insurance','https://images.unsplash.com/photo-1580273916550-e323be2ae537?w=900&q=85&auto=format&fit=crop'],['sell','08','Sell your car','https://jxcvruwfwutbwdzxkogm.supabase.co/storage/v1/object/public/carecay-media/uploads/1781434933520-0jk8cqrd.jpg'],['news','09','News & EV','https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=900&q=85&auto=format&fit=crop'],['contact','10','Contact','https://images.unsplash.com/photo-1486006920555-c77dcf18193c?w=900&q=85&auto=format&fit=crop']]; var grid=document.getElementById('nextGrid'); if(!grid) return; var here=grid.dataset.here; var depts = all.filter(function(a){return a[0]!==here}); var section = grid.closest('section.next'); if(!section) return; if(section.dataset.wheeled) return; section.dataset.wheeled = '1'; section.querySelectorAll('.wheel__ctrls, .wheel__hub, .hwheel__ctrls, .cyl__ctrls').forEach(function(el){el.remove()}); grid.innerHTML = ''; grid.className = 'cf'; grid.removeAttribute('id'); var stage = document.createElement('div'); stage.className='cf__stage'; var track = document.createElement('div'); track.className='cf__track'; depts.forEach(function(a,i){ var c=document.createElement('a'); // draggable=false: the cards are links, and Chromium starts a native // link-drag on press-and-move, which kills the pointer stream the // coverflow's own drag depends on. c.className='cf__c'; c.href='/'+a[0]; c.dataset.i=i; c.draggable=false; c.setAttribute('data-cursor','hover'); c.innerHTML=''+ ''+ ''+a[2]+''; track.appendChild(c); }); stage.appendChild(track); grid.appendChild(stage); // Controls under var ctrls=document.createElement('div'); ctrls.className='cf__ctrls'; ctrls.innerHTML=''+ '01/'+String(depts.length).padStart(2,'0')+''+ ''; section.appendChild(ctrls); var active=0, n=depts.length; function focus(i){ active=((i % n)+n) % n; [].slice.call(track.children).forEach(function(c,idx){ var diff = idx - active; if(diff > n/2) diff -= n; if(diff < -n/2) diff += n; var abs = Math.abs(diff); c.classList.toggle('on', diff===0); var translateX, rotateY, scale, opacity, z; if(diff === 0){ translateX = 0; rotateY = 0; scale = 1; opacity = 1; z = 5; } else if(diff === -1){ translateX = -280; rotateY = 15; scale = .8; opacity = 1; z = 4; } else if(diff === 1){ translateX = 280; rotateY = -15; scale = .8; opacity = 1; z = 4; } else if(diff === -2){ translateX = -460; rotateY = 22; scale = .6; opacity = .35; z = 3; } else if(diff === 2){ translateX = 460; rotateY = -22; scale = .6; opacity = .35; z = 3; } else { translateX = diff < 0 ? -580 : 580; rotateY = diff < 0 ? 30 : -30; scale = .4; opacity = 0; z = 1; } c.style.transform = 'translate(-50%,-50%) translateX('+translateX+'px) rotateY('+rotateY+'deg) scale('+scale+')'; c.style.opacity = opacity; c.style.zIndex = z; c.style.pointerEvents = abs > 2 ? 'none' : ''; }); var _ct=grid.querySelectorAll('.cf__tab');for(var _ci=0;_ci<_ct.length;_ci++){_ct[_ci].classList.toggle('on',_ci===active);}document.getElementById('cfIdx').textContent = String(active+1).padStart(2,'0'); } ctrls.querySelector('.cf__btn--prev').addEventListener('click', function(){focus(active-1)}); ctrls.querySelector('.cf__btn--next').addEventListener('click', function(){focus(active+1)}); // Every card is a plain link to its department — clicking an off-centre one // used to only rotate it into focus, which made the cards feel dead. Rotate // with the arrows, the tabs, drag, wheel or the arrow keys instead. // Pointer drag — continuous follow + snap on release. Previously the // wheel jumped one slot per 120px of drag motion (Math.round). Now // the whole .cf__track translates with the pointer in real time // (transition suppressed via .cf--dragging) and snaps to the // nearest slot on pointerup. // Pointer capture is deliberately NOT used here. While an element holds // capture the browser retargets the click to it, so a plain click on a card // never reached its and the coverflow linked nowhere. Listening on // window gives the same "keep tracking once the pointer leaves the stage" // behaviour, and a real drag swallows its own trailing click so releasing // over a card spins the wheel instead of navigating. var dragging=false, startX=0, startActive=0, dragDx=0, moved=false; stage.addEventListener('pointerdown', function(e){ if(e.pointerType==='touch') return; dragging=true; startX=e.clientX; startActive=active; dragDx=0; moved=false; }); window.addEventListener('pointermove', function(e){ if(!dragging) return; dragDx = e.clientX - startX; if(!moved){ if(Math.abs(dragDx) < 6) return; moved=true; grid.classList.add('cf--dragging'); } track.style.transform = 'translateX(' + dragDx + 'px)'; }); function endDrag(){ if(!dragging) return; dragging=false; if(!moved) return; moved=false; grid.classList.remove('cf--dragging'); track.style.transform = ''; var step = Math.round(dragDx / -160); if(step !== 0){ focus(startActive + step); } var swallow=function(ev){ ev.preventDefault(); ev.stopPropagation(); }; window.addEventListener('click', swallow, true); setTimeout(function(){ window.removeEventListener('click', swallow, true); }, 0); } window.addEventListener('pointerup', endDrag); window.addEventListener('pointercancel', endDrag); // Keyboard section.tabIndex=0; section.addEventListener('keydown', function(e){ if(e.key==='ArrowLeft'){e.preventDefault();focus(active-1);} else if(e.key==='ArrowRight'){e.preventDefault();focus(active+1);} });var _tabs=document.createElement('div');_tabs.className='cf__tabs';depts.forEach(function(a,i){var b=document.createElement('a');b.className='cf__tab';b.href='/'+a[0];b.dataset.i=i;b.setAttribute('data-cursor','hover');b.innerHTML=a[2];b.addEventListener('mouseenter',function(){focus(i);});b.addEventListener('focus',function(){focus(i);});_tabs.appendChild(b);});grid.insertBefore(_tabs,grid.firstChild);var _wlock=false;stage.addEventListener('wheel',function(e){var d=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.deltaY;if(Math.abs(d)<6)return;e.preventDefault();if(_wlock)return;_wlock=true;focus(active+(d>0?1:-1));setTimeout(function(){_wlock=false;},420);},{passive:false}); focus(0); })(); (function(){ // From-the-wire: hydrate #newsFeedGrid from /api/news as one combined // feed. (The "The day in cars" heading and its per-department filter // pills were removed at the owner's request; every story now shows in // a single grid.) Six skeleton cards ship server-side for a steady frame. // Pinned stories (/api/news/pinned) sit above the feed and are left out // of it; older stories page in below from /api/news/archive. Logged-in // admins get a Pin / Unpin button on every card. var grid = document.getElementById('newsFeedGrid'); var section = document.getElementById('newsFeed'); var pinSec = document.getElementById('newsPinned'); var pinGrid = document.getElementById('newsPinnedGrid'); var arcSec = document.getElementById('newsArchive'); var arcGrid = document.getElementById('newsArchiveGrid'); var more = document.getElementById('newsArchiveMore'); if(!grid || !section) return; var ARC_PAGE = 12; var isAdmin = false, live = null, pinned = [], arcOffset = 0, stories = {}; function escapeHtml(s){ return String(s||'').replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } function fmtDate(iso){ if(!iso) return ''; var d = new Date(iso); if(isNaN(d.getTime())) return ''; return d.toLocaleDateString('en-IN', {day:'numeric', month:'short', year:'numeric'}); } function isPinned(id){ return pinned.some(function(p){ return p.id === id; }); } // Each card sits in a .nfeed__cell so the admin pin button can be a // sibling of the link rather than nested inside it. function card(it, lg){ if(it.id) stories[it.id] = it; var src = it.source ? escapeHtml(it.source) : 'Wire'; var date = fmtDate(it.publishedAt); var byline = src + (date ? ' · ' + date : ''); var on = isPinned(it.id); var pin = isAdmin && it.id ? '' : ''; return '
'+ ''+ '
'+ '
'+ ''+src+''+ '
'+escapeHtml(it.title)+'
'+ ''+byline+''+ '
'+ ''+pin+'
'; } function getJson(url){ return fetch(url, {credentials:'same-origin'}).then(function(r){ return r.json().then(function(d){ if(!r.ok || !d || d.ok === false) throw new Error(url+': '+((d && d.error) || r.status)); return d; }); }); } function renderPinned(){ if(!pinSec) return; pinGrid.innerHTML = pinned.map(function(it){ return card(it, false); }).join(''); pinSec.hidden = !pinned.length; } function renderLive(){ if(!live) return; var items = live.filter(function(it){ return !isPinned(it.id); }); grid.innerHTML = items.map(function(it, i){ return card(it, i===0); }).join(''); } function loadArchive(reset){ if(!arcSec) return; if(reset){ arcOffset = 0; } // Admins bypass the 5-minute CDN cache so a pin change shows at once. var url = '/api/news/archive?offset='+arcOffset+'&limit='+ARC_PAGE+(isAdmin ? '&t='+Date.now() : ''); more.disabled = true; getJson(url).then(function(d){ var liveIds = {}; (live || []).forEach(function(it){ liveIds[it.id] = 1; }); var html = d.items.filter(function(it){ return !liveIds[it.id]; }) .map(function(it){ return card(it, false); }).join(''); if(reset) arcGrid.innerHTML = html; else arcGrid.insertAdjacentHTML('beforeend', html); arcOffset = d.offset + d.items.length; arcSec.hidden = !arcGrid.children.length; more.hidden = arcOffset >= d.total; more.disabled = false; }).catch(function(e){ console.error('[news] archive', e); more.disabled = false; }); } if(more) more.addEventListener('click', function(){ loadArchive(false); }); // Admin pin / unpin — delegated, since every grid re-renders. document.addEventListener('click', function(e){ var b = e.target.closest && e.target.closest('[data-pin]'); if(!b) return; e.preventDefault(); var id = b.getAttribute('data-pin'); var body = isPinned(id) ? {pinned:false, id:id} : {pinned:true, story:stories[id]}; b.disabled = true; fetch('/api/news/pinned', { method:'POST', credentials:'same-origin', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body) }).then(function(r){ return r.json(); }).then(function(d){ if(!d || !d.ok) throw new Error((d && d.error) || 'pin failed'); pinned = d.items; renderPinned(); renderLive(); loadArchive(true); }).catch(function(err){ b.disabled = false; alert('Could not update the pin: ' + err.message); }); }); var pLive = getJson('/api/news').then(function(d){ // The API returns stories grouped by department; show them newest first. live = (d.items || []).slice().sort(function(a, b){ return (Date.parse(b.publishedAt) || 0) - (Date.parse(a.publishedAt) || 0); }); }).catch(function(e){ console.error('[news] live', e); }); var pPinned = getJson('/api/news/pinned').then(function(d){ pinned = d.items || []; }) .catch(function(e){ console.error('[news] pinned', e); }); var pAdmin = fetch('/api/admin/me', {credentials:'same-origin'}) .then(function(r){ return r.ok ? r.json() : null; }) .then(function(d){ isAdmin = !!(d && d.ok); }) .catch(function(e){ console.error('[news] admin check', e); }); Promise.all([pLive, pPinned, pAdmin]).then(function(){ renderPinned(); if(!live || !live.length) section.classList.add('nfeed--empty'); else renderLive(); loadArchive(true); }); })();

Earlier on the wire.

Looking for a car?

Other departments