Berta Gábor - EKME

Koncepció Az EKME homlokzati elem az élesség esztétikáját, az erő és kifinomultság közötti kapcsolatot vizsgálja. Inspirációját a görög αἰχμή (aikhmē – „lándzsahegy, nyílhegy, pengeéle”) szó adta, amely az emberi kézművesség, fegyverkészítés és geometriai szerkesztés ősi szimbóluma. Az elem élesen megtört és finoman ívelt síkok találkozásából épül fel. Az egymásba forduló élek váltakozó irányú törése és lágy ívű kapcsolatai kiegyensúlyozzák az erőt és a kifinomultságot. A kialakítás így egyszerre idézi meg a dárdahegyek feszített szimmetriáját és a kortárs homlokzatok letisztult geometriáját, miközben a felület egymásba olvadó formái optikai hullámzást hoznak létre. :root{ --maxw: clamp(400px, 95vw, 1800px); --peek: clamp(32px, 8vw, 120px); --sep: clamp(6px, 1.4vw, 16px); --btn: clamp(42px, 4.5vw, 64px); --ui-bg: rgba(255,255,255,.96); --ui-fg: #111; --ui-bd: #b9c2c9; --shadow: 0 2px 12px rgba(0,0,0,.15); --shadow-hover: 0 8px 24px rgba(0,0,0,.18); } /* SLIDER */ .slider{ position: relative; max-width: var(--maxw); margin: 26px auto; padding: 0 20px; user-select: none; } .viewport{ position: relative; overflow: hidden; padding: 0 var(--peek); border-radius: 12px; background: #fff; box-shadow: var(--shadow); } .track{ display: flex; gap: var(--sep); will-change: transform; transition: transform .5s ease; } .slide{ position: relative; min-width: calc(100% - (var(--peek) * 2) - var(--sep)); height: 500px; /* desktop magasság */ border-radius: 10px; overflow: hidden; filter: grayscale(.9) brightness(.85); transition: filter .25s ease, transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow); } .slide.is-active{ filter: none; } .slide:hover{ transform: translateY(-2px) scale(1.015); box-shadow: var(--shadow-hover); } .slide img{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .counter{ position: absolute; left: calc(20px + 10px); bottom: 12px; padding: 4px 8px; font: 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color: #111; background: var(--ui-bg); border: 1px solid var(--ui-bd); border-radius: 8px; box-shadow: var(--shadow); z-index: 3; pointer-events: none; } .nav{ position: absolute; top: 50%; transform: translateY(-50%); width: var(--btn); height: var(--btn); display: grid; place-items: center; border: 1px solid var(--ui-bd); border-radius: 10px; background: var(--ui-bg); color: var(--ui-fg); cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, background .2s ease; z-index: 4; } .nav:hover{ transform: translateY(-50%) scale(1.03); } .nav:active{ transform: translateY(-50%) scale(0.98); } .nav:focus-visible{ outline: 2px solid #005a8d; outline-offset: 2px; } .nav svg{ width: 22px; height: 22px; } .nav.prev{ left: calc(20px + 8px); } .nav.next{ right: calc(20px + 8px); } .viewport.dragging .track{ transition: none; cursor: grabbing; } @media (max-width: 520px){ :root{ --peek: clamp(16px, 8vw, 42px); --sep: clamp(6px, 1.8vw, 10px); } .slide{ height: 360px; } /* mobil magasság */ } @media (prefers-reduced-motion: reduce){ .track{ transition: none !important; } .slide{ transition: none !important; } } /* LIGHTBOX (kép nagyítás) */ .lightbox { position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.85); z-index: 9999; } .lightbox.open { display: grid; } .lightbox__img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.4); user-select: none; } .lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } .lightbox__btn svg { width: 26px; height: 26px; } .lightbox__prev { left: 24px; } .lightbox__next { right: 24px; } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); background: rgba(30,30,30,.35); border-radius: 12px; color: #fff; cursor: pointer; } @media (max-width: 520px){ .lightbox__btn{ width: 46px; height: 46px; } .lightbox__btn svg{ width: 22px; height: 22px; } } 1 / 6 /* ===== SLIDER JS ===== */ (function(){ const viewport = document.getElementById('viewport'); const track = document.getElementById('track'); const btnPrev = document.getElementById('btnPrev'); const btnNext = document.getElementById('btnNext'); const counter = document.getElementById('counter'); const reals = Array.from(track.querySelectorAll('.slide[data-real]')); const N = reals.length; const prefix = reals.map(s => s.cloneNode(true)); const suffix = reals.map(s => s.cloneNode(true)); prefix.reverse().forEach(s => track.insertBefore(s, track.firstChild)); suffix.forEach(s => track.appendChild(s)); let slides = Array.from(track.children); let index = N; // első valódi dia let dragging = false; let startX = 0, currentX = 0; const padLeft = () => parseFloat(getComputedStyle(viewport).paddingLeft) || 0; const slideW = () => slides[N].getBoundingClientRect().width; const gap = () => parseFloat(getComputedStyle(track).gap) || 0; const stepSize = () => slideW() + gap(); const baseOffset = () => padLeft() + gap()/2; function applyTransform(noAnim=false){ if(noAnim) track.style.transition = 'none'; const offset = baseOffset() - index * stepSize(); track.style.transform = `translateX(${offset}px)`; if(noAnim) requestAnimationFrame(()=> track.style.transition = ''); } function updateActive(){ slides.forEach(el => el.classList.remove('is-active')); slides[index]?.classList.add('is-active'); const realIdx = ((index - N) % N + N) % N; counter.textContent = `${realIdx + 1} / ${N}`; } function setIndex(i, noAnim=false){ index = i; applyTransform(noAnim); updateActive(); } function next(){ if(index === 2*N - 1){ setIndex(N - 1, true); requestAnimationFrame(()=> setIndex(N, false)); } else setIndex(index + 1); } function prev(){ if(index === N){ setIndex(2*N, true); requestAnimationFrame(()=> setIndex(2*N - 1, false)); } else setIndex(index - 1); } track.addEventListener('transitionend', ()=>{ if(index >= N*2) setIndex(index - N, true); else if(index { if(e.key === 'ArrowRight') next(); if(e.key === 'ArrowLeft') prev(); }); function onStart(x){ dragging = true; startX = currentX = x; viewport.classList.add('dragging'); } function onMove(x){ if(!dragging) return; currentX = x; const dx = currentX - startX; const base = baseOffset() - index * stepSize(); track.style.transform = `translateX(${base + dx}px)`; } function onEnd(){ if(!dragging) return; dragging = false; viewport.classList.remove('dragging'); const dx = currentX - startX; const threshold = viewport.clientWidth * 0.15; if(dx > threshold) prev(); else if(dx onStart(e.clientX)); window.addEventListener('pointermove', e => onMove(e.clientX)); window.addEventListener('pointerup', onEnd); viewport.addEventListener('touchstart', e => onStart(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchmove', e => onMove(e.touches[0].clientX), {passive:true}); viewport.addEventListener('touchend', onEnd); window.addEventListener('resize', ()=> applyTransform(true)); setIndex(N, true); })(); /* ===== LIGHTBOX JS ===== */ (function(){ const galleries = Array.from(document.querySelectorAll('.slider')); if(!galleries.length) return; const lb = document.getElementById('lightbox'); const lbImg = document.getElementById('lightboxImg'); const btnPrev = document.getElementById('lbPrev'); const btnNext = document.getElementById('lbNext'); const btnClose = document.getElementById('lbClose'); let currentList = []; let idx = 0; function openLightbox(list, startIndex){ currentList = list; idx = startIndex; updateImg(); lb.classList.add('open'); lb.setAttribute('aria-hidden', 'false'); } function closeLightbox(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden', 'true'); } function updateImg(){ const el = currentList[idx]; const src = el.dataset.full || el.src; lbImg.src = src; lbImg.alt = el.alt || ''; } function prev(){ idx = (idx - 1 + currentList.length) % currentList.length; updateImg(); } function next(){ idx = (idx + 1) % currentList.length; updateImg(); } galleries.forEach(slider=>{ const images = Array.from(slider.querySelectorAll('.slide img')); images.forEach((img, i)=>{ img.style.cursor = 'zoom-in'; img.addEventListener('click', ()=> openLightbox(images, i), {passive:true}); }); }); btnPrev.addEventListener('click', prev); btnNext.addEventListener('click', next); btnClose.addEventListener('click', closeLightbox); lb.addEventListener('click', (e)=> { if(e.target === lb) closeLightbox(); }); document.addEventListener('keydown', (e)=>{ if(!lb.classList.contains('open')) return; if(e.key === 'Escape') closeLightbox(); if(e.key === 'ArrowLeft') prev(); if(e.key === 'ArrowRight') next(); }); let startX = 0, moving = false; lb.addEventListener('touchstart', e=>{ moving=true; startX = e.touches[0].clientX; }, {passive:true}); lb.addEventListener('touchmove', e=>{ if(!moving) return; const dx = e.touches[0].clientX - startX; if(Math.abs(dx) > 50){ moving = false; dx > 0 ? prev() : next(); } }, {passive:true}); lb.addEventListener('touchend', ()=> moving=false); })();