From 7c77ac6c19048e9aab0fac3d6204701cecc0fa4f Mon Sep 17 00:00:00 2001 From: ordinarthur <@arthurbarre.js@gmail.com> Date: Sat, 4 Apr 2026 11:15:58 +0200 Subject: [PATCH] =?UTF-8?q?styl=C3=A9=20de=20ouf=202?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/style.css | 540 ++++++++++++++++++++++++++++++++++-------- src/pages/index.astro | 8 +- src/scripts/main.js | 160 ++++++++++--- 3 files changed, 572 insertions(+), 136 deletions(-) diff --git a/public/style.css b/public/style.css index 2d9e5a5..4ff8f9c 100644 --- a/public/style.css +++ b/public/style.css @@ -7,19 +7,29 @@ --clr-black: #111; --clr-white: #dcdcdc; --clr-card-bg: #d0d0d0; - --clr-grid: rgba(0,0,0,0.10); + --clr-grid: rgba(0, 0, 0, 0.10); --clr-red: #e8a800; --font-mono: 'Space Mono', monospace; --border: 1px solid #111; --pad: 2rem; } -* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } -@media (hover: hover) and (pointer: fine) { - * { cursor: none !important; } +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; } -html { font-size: 13px; } +@media (hover: hover) and (pointer: fine) { + * { + cursor: none !important; + } +} + +html { + font-size: 13px; +} body { background: var(--clr-bg); @@ -30,10 +40,14 @@ body { } /* ---- LEGACY CURSOR (hidden) ---- */ -.cursor-dot, .cursor-outline { display: none; } +.cursor-dot, +.cursor-outline { + display: none; +} /* ---- CAD CROSSHAIR CURSOR ---- */ -.cad-h, .cad-v { +.cad-h, +.cad-v { position: fixed; pointer-events: none; z-index: 999998; @@ -41,19 +55,35 @@ body { background: var(--clr-black); transition: width 0.15s, height 0.15s, background 0.15s; } + .cad-h { - width: 40px; height: 2px; + width: 32px; + height: 2px; transform: translateY(-1px); } -.cad-h.cad-hover { width: 56px; margin-left: -8px; background: var(--clr-red); } + +.cad-h.cad-hover { + width: 44px; + margin-left: -6px; + background: var(--clr-red); +} + .cad-v { - width: 2px; height: 40px; + width: 2px; + height: 32px; transform: translateX(-1px); } -.cad-v.cad-hover { height: 56px; margin-top: -8px; background: var(--clr-red); } + +.cad-v.cad-hover { + height: 44px; + margin-top: -6px; + background: var(--clr-red); +} + .cad-center { position: fixed; - width: 6px; height: 6px; + width: 6px; + height: 6px; background: var(--clr-red); pointer-events: none; z-index: 999999; @@ -61,36 +91,46 @@ body { transform: translate(-3px, -3px); transition: width 0.15s, height 0.15s; } + .cad-center.cad-hover { - width: 9px; height: 9px; + width: 9px; + height: 9px; transform: translate(-4.5px, -4.5px); background: var(--clr-black); } + +.cad-center.cad-whatsapp { + background: #25D366; +} + .cad-coords { position: fixed; pointer-events: none; z-index: 999999; font-family: var(--font-mono); font-size: 0.55rem; - color: rgba(0,0,0,0.55); + color: rgba(0, 0, 0, 0.55); opacity: 0; letter-spacing: 0.05em; - background: rgba(200,200,200,0.7); + background: rgba(200, 200, 200, 0.7); padding: 1px 5px; - border: 1px solid rgba(0,0,0,0.08); + border: 1px solid rgba(0, 0, 0, 0.08); white-space: nowrap; } /* ---- INTERACTIVE GRID (derrière tout) ---- */ .interactive-grid { position: fixed; - top: 0; left: 0; - width: 100vw; height: 100vh; + top: 0; + left: 0; + width: 100vw; + height: 100vh; height: 100dvh; z-index: 0; pointer-events: auto; overflow: hidden; } + .grid-cell { border-right: 1px solid var(--clr-grid); border-bottom: 1px solid var(--clr-grid); @@ -102,12 +142,14 @@ body { .page-wrapper { position: relative; z-index: 1; - pointer-events: none; /* laisse passer vers la grid */ + pointer-events: none; + /* laisse passer vers la grid */ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } + /* Re-active pointer-events sur les éléments interactifs */ .page-wrapper a, .page-wrapper button, @@ -130,6 +172,7 @@ body { background: var(--clr-bg); pointer-events: auto; } + .logo-text { font-size: 1rem; font-weight: 700; @@ -137,26 +180,68 @@ body { text-decoration: none; color: var(--clr-black); } + .header-nav { display: flex; align-items: baseline; gap: 2.5rem; font-size: 0.82rem; } + .header-nav a { color: var(--clr-black); text-decoration: none; } -.header-nav a:hover { text-decoration: underline; } -.wip-tag { color: #555; font-size: 0.78rem; } + +.header-nav a:hover { + text-decoration: underline; +} + +.wip-tag { + color: #555; + font-size: 0.78rem; +} /* ---- UTILS ---- */ -.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; } } -hr { border: none; border-top: var(--border); margin: 0; } +.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; + } +} + +hr { + border: none; + border-top: var(--border); + margin: 0; +} /* ---- HERO ---- */ .hero { @@ -166,6 +251,7 @@ hr { border: none; border-top: var(--border); margin: 0; } height: calc(100dvh - var(--header-h, 44px)); pointer-events: none; } + .hero-left { padding: 5rem var(--pad) 3rem; border-right: var(--border); @@ -176,27 +262,46 @@ hr { border: none; border-top: var(--border); margin: 0; } position: relative; overflow: hidden; } + .hero-left h1 { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.02em; } -.hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; } + +.hero-sub { + font-size: 0.85rem; + line-height: 1.75; + max-width: 300px; +} -.hero-right { overflow: hidden; background: #1c1c1c; } +.hero-right { + overflow: hidden; + background: #1c1c1c; +} + .hero-img { - width: 100%; height: 100%; - object-fit: cover; display: block; + width: 100%; + height: 100%; + object-fit: cover; + display: block; filter: grayscale(10%); opacity: 0.92; transition: opacity 0.5s, filter 0.5s; } -.hero-right:hover .hero-img { opacity: 1; filter: grayscale(0%); } + +.hero-right:hover .hero-img { + opacity: 1; + filter: grayscale(0%); +} /* ---- COLLECTION ---- */ -.collection { pointer-events: none; } +.collection { + pointer-events: none; +} + .collection-header { display: flex; justify-content: space-between; @@ -224,6 +329,7 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.2s; position: relative; } + .product-card::before { content: ''; position: absolute; @@ -233,19 +339,24 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: border-color 0.15s; z-index: 2; } + .product-card:hover::before { border-color: var(--clr-red); } + .product-card:hover .card-name { color: var(--clr-red); } + .product-card:hover .card-index { color: var(--clr-black); } + .product-card:hover .card-arrow { opacity: 1; color: var(--clr-black); } + /* Image : objet centré sur fond neutre, comme Gufram */ .card-img-wrap { position: relative; @@ -259,20 +370,33 @@ hr { border: none; border-top: var(--border); margin: 0; } background: var(--clr-card-bg); transition: background 0.2s, border-color 0.15s; } + /* Fallback for Safari < 15 without aspect-ratio */ @supports not (aspect-ratio: 1 / 1) { - .card-img-wrap { padding-bottom: 100%; } - .card-img-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } + .card-img-wrap { + padding-bottom: 100%; + } + + .card-img-wrap img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } + .product-card:hover .card-img-wrap { border-bottom-color: var(--clr-red); } + .product-card::before { transition: border-color 0.2s ease; } + .product-card:hover .card-img-wrap { background: var(--clr-card-bg); } + .card-img-wrap img { width: 88%; height: 88%; @@ -289,17 +413,20 @@ hr { border: none; border-top: var(--border); margin: 0; } padding: 0.9rem 1.1rem; gap: 0.8rem; } + .card-index { font-size: 0.72rem; color: #555; flex-shrink: 0; } + .card-name { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; flex-grow: 1; } + .card-arrow { font-size: 1rem; opacity: 0.4; @@ -308,7 +435,10 @@ hr { border: none; border-top: var(--border); margin: 0; } /* ---- PRODUCT PANEL (overlay) ---- */ .product-panel { position: fixed; - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: 1000; background: var(--clr-bg); display: flex; @@ -321,6 +451,7 @@ hr { border: none; border-top: var(--border); margin: 0; } overflow: hidden; -webkit-overflow-scrolling: touch; } + .product-panel.is-open { transform: translateY(0); -webkit-transform: translateY(0); @@ -340,8 +471,14 @@ hr { border: none; border-top: var(--border); margin: 0; } pointer-events: auto; flex-shrink: 0; } -.panel-close:hover { background: var(--clr-white); } -.panel-close span { pointer-events: none; } + +.panel-close:hover { + background: var(--clr-white); +} + +.panel-close span { + pointer-events: none; +} .panel-inner { display: grid; @@ -360,6 +497,7 @@ hr { border: none; border-top: var(--border); margin: 0; } overflow: hidden; position: relative; } + #panel-img { width: 100%; height: 100%; @@ -398,14 +536,16 @@ hr { border: none; border-top: var(--border); margin: 0; } flex-direction: column; gap: 0; } + .panel-meta-row { display: flex; gap: 1.5rem; padding: 0.55rem 0; - border-bottom: 1px solid rgba(0,0,0,0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.8rem; align-items: baseline; } + .meta-key { color: #555; width: 7rem; @@ -423,6 +563,7 @@ hr { border: none; border-top: var(--border); margin: 0; } .accordion { border-bottom: var(--border); } + .accordion summary { display: flex; justify-content: space-between; @@ -435,12 +576,20 @@ hr { border: none; border-top: var(--border); margin: 0; } list-style: none; pointer-events: auto; } -.accordion summary::-webkit-details-marker { display: none; } + +.accordion summary::-webkit-details-marker { + display: none; +} + .accordion summary span { transition: transform 0.2s; display: inline-block; } -.accordion[open] summary span { transform: rotate(180deg); } + +.accordion[open] summary span { + transform: rotate(180deg); +} + .accordion-body { font-size: 0.78rem; line-height: 2; @@ -462,11 +611,13 @@ hr { border: none; border-top: var(--border); margin: 0; } gap: 1.2rem; margin-bottom: 1rem; } + .checkout-price { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; } + .checkout-edition { font-size: 0.72rem; color: #555; @@ -489,10 +640,12 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.15s, color 0.15s; pointer-events: auto; } + .checkout-btn:hover:not(:disabled) { background: var(--clr-black); color: #e8a800; } + .checkout-btn--disabled { background: #999; border-color: #999; @@ -507,11 +660,13 @@ hr { border: none; border-top: var(--border); margin: 0; } border-top: none; background: var(--clr-white); } + .checkout-form { display: flex; flex-direction: column; gap: 0; } + .checkout-form-field { display: flex; flex-direction: column; @@ -519,12 +674,14 @@ hr { border: none; border-top: var(--border); margin: 0; } padding: 1.1rem; border-bottom: var(--border); } + .checkout-form-field label { font-size: 0.68rem; font-weight: 700; color: #555; letter-spacing: 0.05em; } + .checkout-form-field input { border: none; background: transparent; @@ -536,8 +693,15 @@ hr { border: none; border-top: var(--border); margin: 0; } color: var(--clr-black); pointer-events: auto; } -.checkout-form-field input::placeholder { color: #bbb; } -.checkout-form-field input:focus { outline: none; } + +.checkout-form-field input::placeholder { + color: #bbb; +} + +.checkout-form-field input:focus { + outline: none; +} + .checkout-form-note { padding: 0.9rem 1.1rem; font-size: 0.72rem; @@ -545,6 +709,7 @@ hr { border: none; border-top: var(--border); margin: 0; } color: #555; border-bottom: var(--border); } + .checkout-submit { background: var(--clr-black); color: #e8a800; @@ -559,10 +724,12 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.15s, color 0.15s; pointer-events: auto; } + .checkout-submit:hover { background: #e8a800; color: var(--clr-black); } + .checkout-submit:disabled { opacity: 0.5; pointer-events: none; @@ -574,6 +741,7 @@ hr { border: none; border-top: var(--border); margin: 0; } grid-template-columns: 1fr 1fr; pointer-events: none; } + .nl-left { padding: 3rem var(--pad); border-right: var(--border); @@ -582,17 +750,20 @@ hr { border: none; border-top: var(--border); margin: 0; } justify-content: flex-end; gap: 1rem; } + .nl-left h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; } + .nl-right { padding: 3rem var(--pad); display: flex; align-items: flex-end; } + .nl-form { width: 100%; display: flex; @@ -600,12 +771,18 @@ hr { border: none; border-top: var(--border); margin: 0; } gap: 0.7rem; pointer-events: auto; } -.nl-form label { font-size: 0.75rem; font-weight: 700; } + +.nl-form label { + font-size: 0.75rem; + font-weight: 700; +} + .nl-row { display: flex; border: var(--border); background: var(--clr-white); } + .nl-row input { flex-grow: 1; border: none; @@ -616,8 +793,15 @@ hr { border: none; border-top: var(--border); margin: 0; } outline: none; cursor: none; } -.nl-row input::placeholder { color: #bbb; } -.nl-row input:focus { background: rgba(0,0,0,0.03); } + +.nl-row input::placeholder { + color: #bbb; +} + +.nl-row input:focus { + background: rgba(0, 0, 0, 0.03); +} + .nl-row button { border: none; border-left: var(--border); @@ -631,7 +815,11 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.15s; pointer-events: auto; } -.nl-row button:hover { background: var(--clr-red); color: var(--clr-black); } + +.nl-row button:hover { + background: var(--clr-red); + color: var(--clr-black); +} /* ---- WHATSAPP BUTTON ---- */ .whatsapp-btn { @@ -654,6 +842,7 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.2s, color 0.2s, border-color 0.2s; pointer-events: auto; } + .whatsapp-btn:hover { background: var(--clr-black); color: #25D366; @@ -672,27 +861,38 @@ hr { border: none; border-top: var(--border); margin: 0; } pointer-events: auto; background: var(--clr-bg); } -.footer a { color: var(--clr-black); text-decoration: none; } -.footer a:hover { text-decoration: underline; } + +.footer a { + color: var(--clr-black); + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} /* ---- (REMOVED) tech overlay + card CAD effects ---- */ /* Construction line under collection header — visible on hover only */ .cad-construction-line { position: absolute; - bottom: 0; left: 0; right: 0; + bottom: 0; + left: 0; + right: 0; height: 1px; background: linear-gradient(to right, - var(--clr-red), - var(--clr-red) 60%, - transparent); + var(--clr-red), + var(--clr-red) 60%, + transparent); transform-origin: left center; opacity: 0; transition: opacity 0.3s ease; } + .collection-header:hover .cad-construction-line { opacity: 1; } + .collection-header { position: relative; pointer-events: auto; @@ -704,7 +904,7 @@ hr { border: none; border-top: var(--border); margin: 0; } align-items: center; gap: 0.35rem; background: none; - border: 1px solid rgba(0,0,0,0.18); + border: 1px solid rgba(0, 0, 0, 0.18); font-family: var(--font-mono); font-size: 0.65rem; color: #555; @@ -713,37 +913,67 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: color 0.2s, border-color 0.2s; letter-spacing: 0.04em; } + .sound-toggle:hover { color: var(--clr-black); border-color: var(--clr-black); } + .sound-toggle.sound-active { color: var(--clr-red); border-color: var(--clr-red); } -.sound-icon { font-size: 0.7rem; line-height: 1; } + +.sound-icon { + font-size: 0.7rem; + line-height: 1; +} + .sound-bars { display: flex; align-items: flex-end; gap: 1px; height: 10px; } + .sound-bar { width: 2px; background: currentColor; transition: height 0.2s; } -.sound-bar:nth-child(1) { height: 3px; } -.sound-bar:nth-child(2) { height: 6px; } -.sound-bar:nth-child(3) { height: 4px; } + +.sound-bar:nth-child(1) { + height: 3px; +} + +.sound-bar:nth-child(2) { + height: 6px; +} + +.sound-bar:nth-child(3) { + height: 4px; +} + .sound-toggle.sound-active .sound-bar { animation: soundPulse 0.8s ease-in-out infinite alternate; } -.sound-toggle.sound-active .sound-bar:nth-child(2) { animation-delay: 0.15s; } -.sound-toggle.sound-active .sound-bar:nth-child(3) { animation-delay: 0.3s; } + +.sound-toggle.sound-active .sound-bar:nth-child(2) { + animation-delay: 0.15s; +} + +.sound-toggle.sound-active .sound-bar:nth-child(3) { + animation-delay: 0.3s; +} + @keyframes soundPulse { - 0% { height: 2px; } - 100% { height: 10px; } + 0% { + height: 2px; + } + + 100% { + height: 10px; + } } /* ---- CONTACT MODAL ---- */ @@ -755,22 +985,28 @@ hr { border: none; border-top: var(--border); margin: 0; } align-items: center; justify-content: center; opacity: 0; + visibility: hidden; pointer-events: none; - transition: opacity 0.3s ease; + transition: opacity 0.3s ease, visibility 0.3s ease; } + .contact-modal.is-open { opacity: 1; + visibility: visible; pointer-events: auto; } + .contact-modal-backdrop { position: absolute; inset: 0; - background: rgba(0,0,0,0.6); + background: rgba(0, 0, 0, 0.6); pointer-events: none; } + .contact-modal.is-open .contact-modal-backdrop { pointer-events: auto; } + .contact-modal-content { position: relative; background: var(--clr-bg); @@ -785,20 +1021,24 @@ hr { border: none; border-top: var(--border); margin: 0; } gap: 1.2rem; pointer-events: none; } + .contact-modal.is-open .contact-modal-content { pointer-events: auto; } + .contact-modal-header { display: flex; justify-content: space-between; align-items: center; } + .contact-modal-close { background: none; border: 1px solid var(--clr-black); font-family: var(--font-mono); font-size: 0.85rem; - width: 32px; height: 32px; + width: 32px; + height: 32px; display: flex; align-items: center; justify-content: center; @@ -806,34 +1046,40 @@ hr { border: none; border-top: var(--border); margin: 0; } pointer-events: auto; transition: background 0.15s, color 0.15s; } + .contact-modal-close:hover { background: var(--clr-black); color: var(--clr-white); } + .contact-modal-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: -0.01em; } + .contact-form { display: flex; flex-direction: column; gap: 0; } + .contact-field { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0; - border-bottom: 1px solid rgba(0,0,0,0.12); + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } + .contact-field label { font-size: 0.68rem; font-weight: 700; color: #555; letter-spacing: 0.05em; } + .contact-field input, .contact-field textarea { border: none; @@ -847,8 +1093,12 @@ hr { border: none; border-top: var(--border); margin: 0; } pointer-events: auto; resize: vertical; } + .contact-field input::placeholder, -.contact-field textarea::placeholder { color: #aaa; } +.contact-field textarea::placeholder { + color: #aaa; +} + .contact-submit { margin-top: 1rem; background: var(--clr-black); @@ -864,10 +1114,12 @@ hr { border: none; border-top: var(--border); margin: 0; } transition: background 0.15s, color 0.15s; pointer-events: auto; } + .contact-submit:hover { background: #e8a800; color: var(--clr-black); } + .contact-note { margin-top: 0.6rem; text-align: center; @@ -875,33 +1127,131 @@ hr { border: none; border-top: var(--border); margin: 0; } /* ---- RESPONSIVE ---- */ @media (max-width: 900px) { - .hero, .newsletter { grid-template-columns: 1fr; } - .hero-left { border-right: none; border-bottom: var(--border); min-height: 70vw; padding: 3rem var(--pad); order: -1; } - .hero-right { height: 55vw; } - .nl-left { border-right: none; border-bottom: var(--border); } - .product-grid { grid-template-columns: 1fr 1fr; } - .panel-inner { grid-template-columns: 1fr; } - .panel-img-col { height: 50vw; } - .panel-info-col { overflow-y: auto; -webkit-overflow-scrolling: touch; } - .contact-modal-content { width: 95%; max-width: none; padding: 1.5rem; } -} -@media (max-width: 600px) { - .product-grid { grid-template-columns: 1fr; margin: 0 1rem; border-left: none; } - .product-card { border-left: 2px solid #111; } - .header-nav { gap: 0.8rem; font-size: 0.72rem; } - .hero { height: auto; } - .hero-left { min-height: unset; padding: 2rem var(--pad); order: -1; } - .hero-right { height: 60vw; } - .newsletter { grid-template-columns: 1fr; } - .nl-left { border-right: none; border-bottom: var(--border); padding: 2rem var(--pad); } - .nl-right { padding: 2rem var(--pad); } - .whatsapp-btn { font-size: 0.72rem; padding: 1rem 1rem; } - .panel-img-col { height: 60vw; min-height: 200px; } - .panel-info-col { padding: 1.5rem var(--pad); } - .contact-modal-content { width: 95%; padding: 1.2rem; } - .contact-modal { align-items: flex-end; } - .cursor-dot, .cursor-outline, - .cad-h, .cad-v, .cad-center, .cad-coords { display: none !important; } - body, * { cursor: auto !important; } + .hero, + .newsletter { + grid-template-columns: 1fr; + } + + .hero-left { + border-right: none; + border-bottom: var(--border); + min-height: 70vw; + padding: 3rem var(--pad); + order: -1; + } + + .hero-right { + height: 55vw; + } + + .nl-left { + border-right: none; + border-bottom: var(--border); + } + + .product-grid { + grid-template-columns: 1fr 1fr; + } + + .panel-inner { + grid-template-columns: 1fr; + } + + .panel-img-col { + height: 50vw; + } + + .panel-info-col { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + .contact-modal-content { + width: 95%; + max-width: none; + padding: 1.5rem; + } } + +@media (max-width: 600px) { + .product-grid { + grid-template-columns: 1fr; + margin: 0 1rem; + border-left: none; + } + + .product-card { + border-left: 2px solid #111; + } + + .header-nav { + gap: 0.8rem; + font-size: 0.72rem; + } + + .hero { + height: auto; + } + + .hero-left { + min-height: unset; + padding: 2rem var(--pad); + order: -1; + } + + .hero-right { + height: 60vw; + } + + .newsletter { + grid-template-columns: 1fr; + } + + .nl-left { + border-right: none; + border-bottom: var(--border); + padding: 2rem var(--pad); + } + + .nl-right { + padding: 2rem var(--pad); + } + + .whatsapp-btn { + font-size: 0.72rem; + padding: 1rem 1rem; + } + + .panel-img-col { + height: 60vw; + min-height: 200px; + } + + .panel-info-col { + padding: 1.5rem var(--pad); + } + + .contact-modal-content { + width: 95%; + padding: 1.2rem; + } + + .contact-modal { + align-items: flex-end; + } + + .cursor-dot, + .cursor-outline, + .cad-h, + .cad-v, + .cad-center, + .cad-coords { + display: none !important; + } + + body, + * { + cursor: auto !important; + } +} \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 57b554a..c033d51 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -82,11 +82,11 @@ const schemaOrg = {

-
+
SPÉCIFICATIONS TECHNIQUES ↓
-
+
NOTES DE CONCEPTION ↓
@@ -211,7 +211,7 @@ const schemaOrg = {

Commandes sur mesure, questions techniques,
ou simplement dire bonjour.

- + @@ -265,7 +265,7 @@ const schemaOrg = { -

■ REDIRECTION VERS VOTRE CLIENT MAIL

+

■ REDIRECTION VERS WHATSAPP

diff --git a/src/scripts/main.js b/src/scripts/main.js index 950a18d..27fdec7 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -46,10 +46,10 @@ document.addEventListener('DOMContentLoaded', () => { const x = e.clientX; const y = e.clientY; - cursorH.style.left = (x - 20) + 'px'; + cursorH.style.left = (x - 16) + 'px'; cursorH.style.top = y + 'px'; cursorV.style.left = x + 'px'; - cursorV.style.top = (y - 20) + 'px'; + cursorV.style.top = (y - 16) + 'px'; cursorCenter.style.left = x + 'px'; cursorCenter.style.top = y + 'px'; cursorCoords.style.left = (x + 16) + 'px'; @@ -85,6 +85,12 @@ document.addEventListener('DOMContentLoaded', () => { attachCursorHover(document.querySelectorAll( 'a, button, input, .product-card, summary, .panel-close' )); + + // WhatsApp hover — green center dot + document.querySelectorAll('.whatsapp-btn').forEach(el => { + el.addEventListener('mouseenter', () => cursorCenter.classList.add('cad-whatsapp')); + el.addEventListener('mouseleave', () => cursorCenter.classList.remove('cad-whatsapp')); + }); } // ========================================================== @@ -131,8 +137,70 @@ document.addEventListener('DOMContentLoaded', () => { // 3. GSAP SCROLL ANIMATIONS — CAD REVEAL // ========================================================== - // ---- Hero parallax ---- + // ---- Header fade in ---- + const header = document.querySelector('.header'); + if (header) { + gsap.fromTo(header, + { opacity: 0, y: -10 }, + { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' } + ); + } + + // ---- Hero animations (scroll-triggered, replay in/out) ---- + const heroLabel = document.querySelector('.hero-left .label'); + const heroH1 = document.querySelector('.hero-left h1'); + const heroSubs = document.querySelectorAll('.hero-sub'); const heroImg = document.querySelector('.hero-img'); + const heroRight = document.querySelector('.hero-right'); + + const heroTl = gsap.timeline({ + defaults: { ease: 'power3.out' }, + scrollTrigger: { + trigger: '.hero', + start: 'top 95%', + end: 'bottom 5%', + toggleActions: 'play reverse play reverse', + }, + }); + + if (heroLabel) { + heroTl.fromTo(heroLabel, + { opacity: 0, x: -20 }, + { opacity: 1, x: 0, duration: 0.6 }, + 0.1 + ); + } + + if (heroH1) { + heroTl.fromTo(heroH1, + { opacity: 0, y: 40, clipPath: 'inset(0 0 100% 0)' }, + { opacity: 1, y: 0, clipPath: 'inset(0 0 0% 0)', duration: 1 }, + 0.2 + ); + } + + heroSubs.forEach((sub, i) => { + heroTl.fromTo(sub, + { opacity: 0, y: 20 }, + { opacity: 1, y: 0, duration: 0.6 }, + 0.5 + i * 0.15 + ); + }); + + if (heroImg && heroRight) { + heroTl.fromTo(heroRight, + { clipPath: 'inset(0 0 0 100%)' }, + { clipPath: 'inset(0 0 0 0%)', duration: 1.2, ease: 'power4.inOut' }, + 0.3 + ); + heroTl.fromTo(heroImg, + { scale: 1.15, opacity: 0 }, + { scale: 1, opacity: 0.92, duration: 1.4, ease: 'power2.out' }, + 0.4 + ); + } + + // Hero parallax on scroll if (heroImg) { gsap.to(heroImg, { yPercent: 15, @@ -153,22 +221,28 @@ document.addEventListener('DOMContentLoaded', () => { line.className = 'cad-construction-line'; collectionHeader.appendChild(line); - gsap.from(line, { - scaleX: 0, - transformOrigin: 'left center', - duration: 0.8, - ease: 'power2.out', - scrollTrigger: { - trigger: collectionHeader, - start: 'top 85%', - }, - }); + gsap.fromTo(line, + { scaleX: 0 }, + { + scaleX: 1, + transformOrigin: 'left center', + duration: 0.8, + ease: 'power2.out', + scrollTrigger: { + trigger: collectionHeader, + start: 'top 95%', + end: 'bottom 5%', + toggleActions: 'play reverse play reverse', + }, + } + ); } - // ---- Product cards: simple fade-in on scroll ---- + // ---- Product cards: scale + fade reveal on scroll (replays) ---- const cards = document.querySelectorAll('.product-card'); - cards.forEach((card) => { + cards.forEach((card, i) => { + const imgWrap = card.querySelector('.card-img-wrap'); const img = card.querySelector('.card-img-wrap img'); const meta = card.querySelector('.card-meta'); @@ -177,39 +251,52 @@ document.addEventListener('DOMContentLoaded', () => { const tl = gsap.timeline({ scrollTrigger: { trigger: card, - start: 'top 88%', - toggleActions: 'play none none none', + start: 'top 95%', + end: 'bottom 5%', + toggleActions: 'play reverse play reverse', }, }); - // Simple fade + slide up + // Clip-path reveal + scale + fade + tl.fromTo(imgWrap, + { clipPath: 'inset(8% 8% 8% 8%)' }, + { clipPath: 'inset(0% 0% 0% 0%)', duration: 0.8, ease: 'power3.out' }, + 0 + ); + tl.fromTo(img, - { opacity: 0, y: 20 }, - { opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' }, + { opacity: 0, scale: 1.12 }, + { opacity: 1, scale: 1, duration: 0.9, ease: 'power2.out' }, 0 ); if (meta) { tl.fromTo(meta, - { opacity: 0, y: 8 }, - { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' }, - 0.2 + { opacity: 0, y: 15 }, + { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' }, + 0.25 ); } }); - // ---- Newsletter section: slide in ---- + // ---- Newsletter section: slide in (replays) ---- const nlLeft = document.querySelector('.nl-left'); const nlRight = document.querySelector('.nl-right'); if (nlLeft && nlRight) { - gsap.from(nlLeft, { - opacity: 0, x: -30, duration: 0.7, ease: 'power2.out', - scrollTrigger: { trigger: '.newsletter', start: 'top 80%' }, - }); - gsap.from(nlRight, { - opacity: 0, x: 30, duration: 0.7, ease: 'power2.out', delay: 0.15, - scrollTrigger: { trigger: '.newsletter', start: 'top 80%' }, - }); + gsap.fromTo(nlLeft, + { opacity: 0, x: -40 }, + { + opacity: 1, x: 0, duration: 0.7, ease: 'power2.out', + scrollTrigger: { trigger: '.newsletter', start: 'top 95%', end: 'bottom 5%', toggleActions: 'play reverse play reverse' }, + } + ); + gsap.fromTo(nlRight, + { opacity: 0, x: 40 }, + { + opacity: 1, x: 0, duration: 0.7, ease: 'power2.out', delay: 0.15, + scrollTrigger: { trigger: '.newsletter', start: 'top 95%', end: 'bottom 5%', toggleActions: 'play reverse play reverse' }, + } + ); } // ========================================================== @@ -336,7 +423,7 @@ document.addEventListener('DOMContentLoaded', () => { checkoutSubmitBtn.textContent = 'PROCÉDER AU PAIEMENT →'; checkoutForm.reset(); - panel.querySelectorAll('details').forEach(d => d.removeAttribute('open')); + panel.querySelectorAll('details').forEach(d => d.setAttribute('open', '')); panel.classList.add('is-open'); panel.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; @@ -511,7 +598,7 @@ document.addEventListener('DOMContentLoaded', () => { } }); - // Form → mailto + // Form → WhatsApp if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); @@ -520,9 +607,8 @@ document.addEventListener('DOMContentLoaded', () => { const subject = document.getElementById('contact-subject').value.trim() || 'Contact depuis rebours.studio'; const message = document.getElementById('contact-message').value.trim(); - const body = `${message}\n\n— ${name}\n${email}`; - const mailto = `mailto:contact@rebours.fr?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; - window.location.href = mailto; + const text = `*${subject}*\n\n${message}\n\n— ${name}\n${email}`; + window.open(`https://wa.me/33651755191?text=${encodeURIComponent(text)}`, '_blank'); }); }