diff --git a/public/index.html b/public/index.html index 244c21f..755bcf5 100644 --- a/public/index.html +++ b/public/index.html @@ -66,9 +66,6 @@ -
-
-
@@ -168,11 +165,6 @@
-

// ARCHIVE_001 — 2026

REBOURS
STUDIO

Mobilier d'art contemporain.
Space Age × Memphis.

@@ -180,8 +172,8 @@
REBOURS — Lampe Orbitale, prototype béton laqué violet, Paris 2026 @@ -308,6 +300,9 @@
+
+
+ diff --git a/public/main.js b/public/main.js index f8d2a35..7c95997 100644 --- a/public/main.js +++ b/public/main.js @@ -4,6 +4,14 @@ document.addEventListener('DOMContentLoaded', () => { + // ---- HEADER HEIGHT → CSS VAR ---- + const setHeaderHeight = () => { + const h = document.querySelector('.header')?.offsetHeight || 44; + document.documentElement.style.setProperty('--header-h', h + 'px'); + }; + setHeaderHeight(); + window.addEventListener('resize', setHeaderHeight); + // ---- CUSTOM CURSOR ---- const cursorDot = document.querySelector('.cursor-dot'); const cursorOutline = document.querySelector('.cursor-outline'); @@ -36,17 +44,17 @@ document.addEventListener('DOMContentLoaded', () => { } } + let hoverCount = 0; + function attachCursorHover(elements) { elements.forEach(el => { el.addEventListener('mouseenter', () => { cursorOutline.style.width = '38px'; cursorOutline.style.height = '38px'; - cursorDot.style.opacity = '0'; }); el.addEventListener('mouseleave', () => { cursorOutline.style.width = '26px'; cursorOutline.style.height = '26px'; - cursorDot.style.opacity = '1'; }); }); } diff --git a/public/style.css b/public/style.css index 4c5dfd3..b0b3af1 100644 --- a/public/style.css +++ b/public/style.css @@ -3,11 +3,11 @@ ========================================================================== */ :root { - --clr-bg: #d8d8d4; + --clr-bg: #c8c8c8; --clr-black: #111; - --clr-white: #e8e8e4; - --clr-card-bg: #dcdcd8; - --clr-grid: rgba(0,0,0,0.055); + --clr-white: #dcdcdc; + --clr-card-bg: #d0d0d0; + --clr-grid: rgba(0,0,0,0.10); --clr-red: #e8a800; --font-mono: 'Space Mono', monospace; --border: 1px solid #111; @@ -33,7 +33,7 @@ body { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); pointer-events: none; - z-index: 99999; + z-index: 999999; opacity: 0; will-change: transform; } @@ -43,7 +43,7 @@ body { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); pointer-events: none; - z-index: 99998; + z-index: 999998; opacity: 0; transition: width 0.15s, height 0.15s, opacity 0.15s; will-change: transform; @@ -128,7 +128,7 @@ hr { border: none; border-top: var(--border); margin: 0; } .hero { display: grid; grid-template-columns: 1fr 1fr; - min-height: 88vh; + height: calc(100vh - var(--header-h, 44px)); pointer-events: none; } .hero-left { @@ -141,10 +141,6 @@ hr { border: none; border-top: var(--border); margin: 0; } position: relative; overflow: hidden; } -.hero-left > *:not(.hero-floats) { - position: relative; - z-index: 3; -} .hero-left h1 { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 700; @@ -153,53 +149,6 @@ hr { border: none; border-top: var(--border); margin: 0; } } .hero-sub { font-size: 0.85rem; line-height: 1.75; max-width: 300px; } -/* ---- FLOATING ASSETS in hero-left ---- */ -.hero-floats { - position: absolute; - inset: 0; - pointer-events: none; - z-index: 2; -} -.hero-float { - position: absolute; - object-fit: contain; - filter: grayscale(20%); - opacity: 1; -} -.hero-float:nth-child(1) { - width: clamp(100px, 18vw, 180px); - top: 8%; - left: 10%; - animation: float-a 9s ease-in-out infinite; -} -.hero-float:nth-child(2) { - width: clamp(80px, 14vw, 140px); - top: 30%; - right: 8%; - animation: float-b 13s ease-in-out infinite; -} -.hero-float:nth-child(3) { - width: clamp(130px, 22vw, 220px); - bottom: 10%; - right: 5%; - animation: float-c 7s ease-in-out infinite; -} -@keyframes float-a { - 0% { transform: translateY(0px) rotate(0deg); } - 40% { transform: translateY(-18px) rotate(-1deg); } - 100% { transform: translateY(0px) rotate(0deg); } -} -@keyframes float-b { - 0% { transform: translateY(0px) rotate(0deg); } - 55% { transform: translateY(-10px) rotate(1.5deg); } - 100% { transform: translateY(0px) rotate(0deg); } -} -@keyframes float-c { - 0% { transform: translateY(0px) rotate(0deg); } - 30% { transform: translateY(-22px) rotate(-2deg); } - 65% { transform: translateY(-6px) rotate(1deg); } - 100% { transform: translateY(0px) rotate(0deg); } -} .hero-right { overflow: hidden; background: #1c1c1c; } .hero-img { @@ -239,7 +188,6 @@ hr { border: none; border-top: var(--border); margin: 0; } flex-direction: column; transition: background 0.2s; position: relative; - z-index: 0; } .product-card::before { content: ''; @@ -655,44 +603,14 @@ hr { border: none; border-top: var(--border); margin: 0; } .panel-img-col { height: 50vw; } .panel-info-col { overflow-y: auto; } - /* Floats : repositionnés pour la colonne pleine largeur */ - .hero-float:nth-child(1) { - width: clamp(80px, 22vw, 140px); - top: 6%; - left: 5%; - } - .hero-float:nth-child(2) { - width: clamp(70px, 18vw, 110px); - top: 10%; - right: 5%; - } - .hero-float:nth-child(3) { - width: clamp(90px, 24vw, 150px); - bottom: 5%; - right: 8%; - } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; } .header-nav { gap: 1rem; } .hero-left { min-height: 85vw; } - /* Floats : plus petits sur mobile, repositionnés pour ne pas couvrir le texte */ - .hero-float:nth-child(1) { - width: clamp(60px, 18vw, 90px); - top: 4%; - left: 4%; - } - .hero-float:nth-child(2) { - width: clamp(55px, 16vw, 80px); - top: 8%; - right: 4%; - } - .hero-float:nth-child(3) { - width: clamp(70px, 20vw, 100px); - bottom: 4%; - right: 6%; - } + .cursor-dot, .cursor-outline { display: none; } + body { cursor: auto; } } @media (max-width: 600px) { .product-grid { grid-template-columns: 1fr; }