diff --git a/package.json b/package.json index 8b6a48c..8594967 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "concurrently": "^9.0.0", "dotenv": "^17.3.1", "fastify": "^5.3.2", + "gsap": "^3.14.2", "stripe": "^20.3.1", "tslib": "^2.8.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1bd0606..21ad012 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,6 +63,9 @@ importers: fastify: specifier: ^5.3.2 version: 5.8.2 + gsap: + specifier: ^3.14.2 + version: 3.14.2 stripe: specifier: ^20.3.1 version: 20.4.1(@types/node@25.4.0) @@ -2549,6 +2552,9 @@ packages: resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} engines: {node: '>= 0.4'} + gsap@3.14.2: + resolution: {integrity: sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==} + gud@1.0.0: resolution: {integrity: sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==} @@ -6872,6 +6878,8 @@ snapshots: gopd@1.2.0: {} + gsap@3.14.2: {} + gud@1.0.0: {} h3@1.15.6: diff --git a/public/style.css b/public/style.css index b1345ef..635c77c 100644 --- a/public/style.css +++ b/public/style.css @@ -143,11 +143,11 @@ body { text-decoration: none; } .header-nav a:hover { text-decoration: underline; } -.wip-tag { color: #999; font-size: 0.78rem; } +.wip-tag { color: #555; font-size: 0.78rem; } /* ---- UTILS ---- */ -.label { font-size: 0.75rem; color: #888; letter-spacing: 0.04em; } -.mono-sm { font-size: 0.75rem; line-height: 1.9; color: #777; } +.label { font-size: 0.75rem; color: #555; letter-spacing: 0.04em; } +.mono-sm { font-size: 0.75rem; line-height: 1.9; color: #555; } .red { color: var(--clr-red); font-weight: 700; } .blink { animation: blink 1.4s step-end infinite; color: var(--clr-red); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @@ -242,6 +242,7 @@ hr { border: none; border-top: var(--border); margin: 0; } } /* Image : objet centré sur fond neutre, comme Gufram */ .card-img-wrap { + position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: flex; @@ -276,7 +277,7 @@ hr { border: none; border-top: var(--border); margin: 0; } } .card-index { font-size: 0.72rem; - color: #999; + color: #555; flex-shrink: 0; } .card-name { @@ -361,7 +362,7 @@ hr { border: none; border-top: var(--border); margin: 0; } .panel-index { font-size: 0.72rem; - color: #999; + color: #555; letter-spacing: 0.05em; } @@ -387,7 +388,7 @@ hr { border: none; border-top: var(--border); margin: 0; } align-items: baseline; } .meta-key { - color: #888; + color: #555; width: 7rem; flex-shrink: 0; font-size: 0.72rem; @@ -424,14 +425,14 @@ hr { border: none; border-top: var(--border); margin: 0; } .accordion-body { font-size: 0.78rem; line-height: 2; - color: #444; + color: #333; padding-bottom: 1rem; white-space: pre-line; } .panel-footer { font-size: 0.75rem; - color: #888; + color: #555; padding-top: 0.5rem; } @@ -449,7 +450,7 @@ hr { border: none; border-top: var(--border); margin: 0; } } .checkout-edition { font-size: 0.72rem; - color: #888; + color: #555; } /* Bouton jaune parking rectangulaire — aucun border-radius */ @@ -495,7 +496,7 @@ hr { border: none; border-top: var(--border); margin: 0; } .checkout-form-field label { font-size: 0.68rem; font-weight: 700; - color: #888; + color: #555; letter-spacing: 0.05em; } .checkout-form-field input { @@ -515,7 +516,7 @@ hr { border: none; border-top: var(--border); margin: 0; } padding: 0.9rem 1.1rem; font-size: 0.72rem; line-height: 1.8; - color: #777; + color: #555; border-bottom: var(--border); } .checkout-submit { @@ -821,7 +822,7 @@ hr { border: none; border-top: var(--border); margin: 0; } border: 1px solid rgba(0,0,0,0.18); font-family: var(--font-mono); font-size: 0.65rem; - color: #999; + color: #555; padding: 0.2rem 0.55rem; cursor: none; transition: color 0.2s, border-color 0.2s; diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index af4c609..cd314b7 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -57,12 +57,9 @@ const { - - - - + diff --git a/src/pages/collection/[slug].astro b/src/pages/collection/[slug].astro index e057f41..e5ede3d 100644 --- a/src/pages/collection/[slug].astro +++ b/src/pages/collection/[slug].astro @@ -263,6 +263,4 @@ const schemaBreadcrumb = {
- - diff --git a/src/pages/index.astro b/src/pages/index.astro index e0172ec..36f8f7b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -230,6 +230,4 @@ const schemaOrg = {
- - diff --git a/public/main.js b/src/scripts/main.js similarity index 99% rename from public/main.js rename to src/scripts/main.js index 1c06abd..e6598a7 100644 --- a/public/main.js +++ b/src/scripts/main.js @@ -3,14 +3,17 @@ * CAD/CAO-inspired interface · GSAP ScrollTrigger · Technical drawing overlays · Ambient sound */ +import gsap from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; + +gsap.registerPlugin(ScrollTrigger); + document.addEventListener('DOMContentLoaded', () => { // ---- CONFIG ---- const isMobile = window.innerWidth <= 600; const isTouch = 'ontouchstart' in window; - gsap.registerPlugin(ScrollTrigger); - // ---- HEADER HEIGHT → CSS VAR ---- const setHeaderHeight = () => { const h = document.querySelector('.header')?.offsetHeight || 44; @@ -146,7 +149,6 @@ document.addEventListener('DOMContentLoaded', () => { // ---- Collection header: construction line draw-in ---- const collectionHeader = document.querySelector('.collection-header'); if (collectionHeader) { - // Add a construction line element const line = document.createElement('div'); line.className = 'cad-construction-line'; collectionHeader.appendChild(line); @@ -176,7 +178,6 @@ document.addEventListener('DOMContentLoaded', () => { // Create a CAD scan line per card const scanLine = document.createElement('div'); scanLine.className = 'card-scanline'; - imgWrap.style.position = 'relative'; imgWrap.appendChild(scanLine); // Create corner marks per card