diff --git a/public/style.css b/public/style.css index 28da787..500299f 100644 --- a/public/style.css +++ b/public/style.css @@ -659,181 +659,7 @@ hr { border: none; border-top: var(--border); margin: 0; } .footer a { color: var(--clr-black); text-decoration: none; } .footer a:hover { text-decoration: underline; } -/* ---- TECHNICAL DRAWING OVERLAY (panel image) ---- */ -.tech-overlay { - position: absolute; - inset: 0; - pointer-events: none; - z-index: 10; - overflow: hidden; -} -.tech-corner { - position: absolute; - width: 28px; height: 28px; - border-color: rgba(232,168,0,0); - border-style: solid; - border-width: 0; - transition: border-color 0.6s ease, width 0.5s ease, height 0.5s ease; -} -.tech-visible .tech-corner { - border-color: rgba(232,168,0,0.6); -} -.tech-corner--tl { top: 7%; left: 5%; border-top-width: 1px; border-left-width: 1px; } -.tech-corner--tr { top: 7%; right: 5%; border-top-width: 1px; border-right-width: 1px; } -.tech-corner--br { bottom: 7%; right: 5%; border-bottom-width: 1px; border-right-width: 1px; } -.tech-corner--bl { bottom: 7%; left: 5%; border-bottom-width: 1px; border-left-width: 1px; } - -.tech-center-h, .tech-center-v { - position: absolute; - background: rgba(232,168,0,0); - transition: background 0.5s ease 0.15s; -} -.tech-visible .tech-center-h, .tech-visible .tech-center-v { - background: rgba(232,168,0,0.2); -} -.tech-center-h { - top: 50%; left: 38%; right: 38%; - height: 1px; transform: translateY(-0.5px); -} -.tech-center-v { - left: 50%; top: 38%; bottom: 38%; - width: 1px; transform: translateX(-0.5px); -} - -/* Dimension lines */ -.tech-dim { - position: absolute; - display: flex; - align-items: center; - gap: 6px; - opacity: 0; - transition: opacity 0.5s ease 0.3s; -} -.tech-visible .tech-dim { opacity: 1; } -.tech-dim--h { - bottom: 4%; left: 5%; right: 5%; -} -.tech-dim--v { - right: 2.5%; top: 7%; bottom: 7%; - flex-direction: column; - writing-mode: vertical-lr; -} -.tech-dim-line { - flex: 1; -} -.tech-dim--h .tech-dim-line { height: 1px; background: rgba(232,168,0,0.35); } -.tech-dim--v .tech-dim-line { width: 1px; background: rgba(232,168,0,0.35); } -.tech-dim-text { - font-family: var(--font-mono); - font-size: 0.5rem; - color: rgba(232,168,0,0.65); - letter-spacing: 0.06em; -} -/* Dimension arrows */ -.tech-dim-arrow { - font-size: 0.5rem; - color: rgba(232,168,0,0.5); - line-height: 1; -} - -/* Reference text */ -.tech-ref { - position: absolute; - bottom: 1.5%; left: 5%; - font-family: var(--font-mono); - font-size: 0.45rem; - color: rgba(232,168,0,0); - letter-spacing: 0.06em; - transition: color 0.5s ease 0.5s; -} -.tech-visible .tech-ref { color: rgba(232,168,0,0.45); } - -/* Blueprint grid */ -.tech-grid { - position: absolute; - inset: 7% 5%; - background-image: - linear-gradient(rgba(232,168,0,0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(232,168,0,0.04) 1px, transparent 1px); - background-size: 40px 40px; - opacity: 0; - transition: opacity 0.8s ease 0.05s; -} -.tech-visible .tech-grid { opacity: 1; } - -/* Scan line effect */ -.tech-scanline { - position: absolute; - left: 0; right: 0; - height: 1px; - background: linear-gradient(to bottom, - transparent, - rgba(232,168,0,0.3), - rgba(232,168,0,0.5), - rgba(232,168,0,0.3), - transparent); - box-shadow: 0 0 4px rgba(232,168,0,0.15); - z-index: 11; - pointer-events: none; - opacity: 0; - top: 0; -} -.tech-visible .tech-scanline { - /* disabled — scan effect removed for cleaner look */ - opacity: 0; -} -@keyframes techScanLine { - 0% { top: 0%; opacity: 1; } - 90% { opacity: 0.8; } - 100% { top: 100%; opacity: 0; } -} - -/* ---- CARD CAD ELEMENTS (scroll-triggered via GSAP) ---- */ -.card-scanline { - position: absolute; - left: 0; right: 0; - height: 1px; - background: linear-gradient(to bottom, - transparent, - rgba(232,168,0,0.3), - rgba(232,168,0,0.5), - rgba(232,168,0,0.3), - transparent); - box-shadow: 0 0 6px rgba(232,168,0,0.15); - z-index: 5; - pointer-events: none; - top: 100%; -} -.card-corners { - position: absolute; - inset: 8%; - pointer-events: none; - z-index: 4; -} -.cc { - position: absolute; - width: 16px; height: 16px; - border-color: rgba(232,168,0,0.55); - border-style: solid; - border-width: 0; -} -.cc-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } -.cc-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; } -.cc-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } -.cc-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; } - -.card-coord-tag { - position: absolute; - bottom: 8px; left: 10px; - font-family: var(--font-mono); - font-size: 0.58rem; - color: rgba(232,168,0,0.9); - letter-spacing: 0.05em; - z-index: 5; - pointer-events: none; - background: #111; - padding: 2px 7px; -} +/* ---- (REMOVED) tech overlay + card CAD effects ---- */ /* Construction line under collection header — visible on hover only */ .cad-construction-line { diff --git a/src/scripts/main.js b/src/scripts/main.js index 130292a..950a18d 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -165,38 +165,15 @@ document.addEventListener('DOMContentLoaded', () => { }); } - // ---- Product cards: staggered CAD reveal ---- + // ---- Product cards: simple fade-in on scroll ---- const cards = document.querySelectorAll('.product-card'); - cards.forEach((card, i) => { + cards.forEach((card) => { const img = card.querySelector('.card-img-wrap img'); const meta = card.querySelector('.card-meta'); - const imgWrap = card.querySelector('.card-img-wrap'); if (!img) return; - // Create a CAD scan line per card - const scanLine = document.createElement('div'); - scanLine.className = 'card-scanline'; - imgWrap.appendChild(scanLine); - - // Create corner marks per card - const cornerOverlay = document.createElement('div'); - cornerOverlay.className = 'card-corners'; - cornerOverlay.innerHTML = - '' + - '' + - '' + - ''; - imgWrap.appendChild(cornerOverlay); - - // Create coordinate annotation per card - const coordTag = document.createElement('div'); - coordTag.className = 'card-coord-tag'; - coordTag.textContent = `[${String(i + 1).padStart(3, '0')}] — ${img.naturalWidth || '1024'} × ${img.naturalHeight || '1024'} px`; - imgWrap.appendChild(coordTag); - - // GSAP timeline triggered on scroll const tl = gsap.timeline({ scrollTrigger: { trigger: card, @@ -205,41 +182,18 @@ document.addEventListener('DOMContentLoaded', () => { }, }); - // 1. Image clip-path reveal (bottom → top scan) — subtle + // Simple fade + slide up tl.fromTo(img, - { clipPath: 'inset(100% 0 0 0)', filter: 'brightness(1.1) grayscale(40%)' }, - { clipPath: 'inset(0% 0 0 0)', filter: 'brightness(1) grayscale(15%)', - duration: 0.9, ease: 'power3.out' }, + { opacity: 0, y: 20 }, + { opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' }, 0 ); - // 2. Scan line sweeps up - tl.fromTo(scanLine, - { top: '100%', opacity: 1 }, - { top: '-2%', opacity: 0, duration: 0.9, ease: 'power3.out' }, - 0 - ); - - // 3. Corner brackets appear - tl.fromTo(cornerOverlay.querySelectorAll('.cc'), - { opacity: 0, scale: 0.5 }, - { opacity: 1, scale: 1, duration: 0.4, stagger: 0.06, ease: 'back.out(2)' }, - 0.3 - ); - - // 4. Coordinate tag types in - tl.fromTo(coordTag, - { opacity: 0, x: -10 }, - { opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' }, - 0.5 - ); - - // 5. Meta bar slides in if (meta) { tl.fromTo(meta, { opacity: 0, y: 8 }, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' }, - 0.4 + 0.2 ); } }); @@ -259,169 +213,9 @@ document.addEventListener('DOMContentLoaded', () => { } // ========================================================== - // 4. TECHNICAL DRAWING OVERLAY (panel) + // 4. (REMOVED) — no overlay effects on panel image // ========================================================== - const panelImgCol = document.querySelector('.panel-img-col'); - let techOverlay = null; - let techTimeline = null; - - function createTechOverlay(card) { - if (techOverlay) techOverlay.remove(); - - techOverlay = document.createElement('div'); - techOverlay.className = 'tech-overlay'; - - // Corner brackets - ['tl', 'tr', 'br', 'bl'].forEach(pos => { - const corner = document.createElement('div'); - corner.className = `tech-corner tech-corner--${pos}`; - techOverlay.appendChild(corner); - }); - - // Center crosshair - const centerH = document.createElement('div'); - centerH.className = 'tech-center-h'; - const centerV = document.createElement('div'); - centerV.className = 'tech-center-v'; - techOverlay.appendChild(centerH); - techOverlay.appendChild(centerV); - - // Horizontal dimension line - const dimH = document.createElement('div'); - dimH.className = 'tech-dim tech-dim--h'; - dimH.innerHTML = - '◂' + - '' + - '840' + - '' + - '▸'; - techOverlay.appendChild(dimH); - - // Vertical dimension line - const dimV = document.createElement('div'); - dimV.className = 'tech-dim tech-dim--v'; - dimV.innerHTML = - '▴' + - '' + - '420' + - '' + - '▾'; - techOverlay.appendChild(dimV); - - // Reference text - const ref = document.createElement('div'); - ref.className = 'tech-ref'; - const idx = card ? card.dataset.index : '001'; - ref.textContent = `REF: ${idx} — SCALE 1:5 — UNIT: mm`; - techOverlay.appendChild(ref); - - // Blueprint grid - const grid = document.createElement('div'); - grid.className = 'tech-grid'; - techOverlay.appendChild(grid); - - // Scan line - const scanline = document.createElement('div'); - scanline.className = 'tech-scanline'; - techOverlay.appendChild(scanline); - - if (panelImgCol) panelImgCol.appendChild(techOverlay); - } - - function animateTechOverlay() { - if (!techOverlay) return; - - // Kill previous timeline - if (techTimeline) techTimeline.kill(); - - const corners = techOverlay.querySelectorAll('.tech-corner'); - const centerH = techOverlay.querySelector('.tech-center-h'); - const centerV = techOverlay.querySelector('.tech-center-v'); - const dimH = techOverlay.querySelector('.tech-dim--h'); - const dimV = techOverlay.querySelector('.tech-dim--v'); - const ref = techOverlay.querySelector('.tech-ref'); - const grid = techOverlay.querySelector('.tech-grid'); - const scanline = techOverlay.querySelector('.tech-scanline'); - - techTimeline = gsap.timeline(); - - // 1. Blueprint grid fades in - techTimeline.fromTo(grid, - { opacity: 0 }, - { opacity: 1, duration: 0.6, ease: 'power1.in' }, - 0 - ); - - // 2. Scan line — disabled for cleaner look - gsap.set(scanline, { opacity: 0 }); - - // 3. Corner brackets draw in (scale from corner) - corners.forEach((c, i) => { - const origins = ['top left', 'top right', 'bottom right', 'bottom left']; - techTimeline.fromTo(c, - { opacity: 0, scale: 0, borderColor: 'rgba(232,168,0,0)' }, - { opacity: 1, scale: 1, borderColor: 'rgba(232,168,0,0.6)', - transformOrigin: origins[i], - duration: 0.4, ease: 'back.out(1.5)' }, - 0.15 + i * 0.08 - ); - }); - - // 4. Center crosshair extends - techTimeline.fromTo(centerH, - { scaleX: 0, opacity: 0 }, - { scaleX: 1, opacity: 1, duration: 0.5, ease: 'power2.out' }, - 0.3 - ); - techTimeline.fromTo(centerV, - { scaleY: 0, opacity: 0 }, - { scaleY: 1, opacity: 1, duration: 0.5, ease: 'power2.out' }, - 0.35 - ); - - // 5. Dimension lines extend - techTimeline.fromTo(dimH, - { opacity: 0, scaleX: 0 }, - { opacity: 1, scaleX: 1, transformOrigin: 'center center', - duration: 0.6, ease: 'power2.out' }, - 0.4 - ); - techTimeline.fromTo(dimV, - { opacity: 0, scaleY: 0 }, - { opacity: 1, scaleY: 1, transformOrigin: 'center center', - duration: 0.6, ease: 'power2.out' }, - 0.45 - ); - - // 6. Reference text types in - techTimeline.fromTo(ref, - { opacity: 0, x: -15 }, - { opacity: 1, x: 0, duration: 0.4, ease: 'power2.out' }, - 0.6 - ); - - // 7. Panel image — smooth zoom reveal - const panelImg = document.getElementById('panel-img'); - if (panelImg) { - techTimeline.fromTo(panelImg, - { opacity: 0, scale: 1.06 }, - { opacity: 0.92, scale: 1, duration: 1.2, ease: 'power2.out' }, - 0 - ); - } - } - - function hideTechOverlay() { - if (techTimeline) techTimeline.kill(); - if (techOverlay) { - gsap.to(techOverlay, { opacity: 0, duration: 0.3, onComplete: () => { - if (techOverlay) techOverlay.remove(); - techOverlay = null; - }}); - } - } - // ========================================================== // 5. PRODUCT PANEL // ========================================================== @@ -551,10 +345,6 @@ document.addEventListener('DOMContentLoaded', () => { 'summary, .panel-close, .checkout-btn, .checkout-submit' )); - // Technical drawing overlay (delayed for panel slide-in) - createTechOverlay(card); - setTimeout(() => animateTechOverlay(), 350); - if (pushState) { const cardSlug = card.dataset.slug || toSlug(card.dataset.name); history.pushState({ slug: cardSlug }, '', `/collection/${cardSlug}`); @@ -562,7 +352,6 @@ document.addEventListener('DOMContentLoaded', () => { } function closePanel(pushState = true) { - hideTechOverlay(); panel.classList.remove('is-open'); panel.setAttribute('aria-hidden', 'true'); document.body.style.overflow = '';