correct dot
This commit is contained in:
ordinarthur
parent
82226b2313
commit
ad400fbd6e
@ -66,9 +66,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="cursor-dot"></div>
|
||||
<div class="cursor-outline"></div>
|
||||
|
||||
<!-- Grid background -->
|
||||
<div id="interactive-grid" class="interactive-grid"></div>
|
||||
|
||||
@ -168,11 +165,6 @@
|
||||
<!-- HERO -->
|
||||
<section class="hero" aria-label="Introduction">
|
||||
<div class="hero-left">
|
||||
<div class="hero-floats" aria-hidden="true">
|
||||
<img class="hero-float" src="/assets/lamp-violet.jpg" alt="">
|
||||
<img class="hero-float" src="/assets/table-terrazzo.jpg" alt="">
|
||||
<img class="hero-float" src="/assets/lampes-serie.jpg" alt="">
|
||||
</div>
|
||||
<p class="label">// ARCHIVE_001 — 2026</p>
|
||||
<h1>REBOURS<br>STUDIO</h1>
|
||||
<p class="hero-sub">Mobilier d'art contemporain.<br>Space Age × Memphis.</p>
|
||||
@ -180,8 +172,8 @@
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<img
|
||||
src="/assets/lamp-violet.jpg"
|
||||
alt="REBOURS — Lampe Orbitale, prototype béton laqué violet, Paris 2026"
|
||||
src="/assets/table-terrazzo.jpg"
|
||||
alt="REBOURS — Table Terrazzo, plateau terrazzo et acier tubulaire, Paris 2026"
|
||||
class="hero-img"
|
||||
width="1024" height="1024"
|
||||
fetchpriority="high">
|
||||
@ -308,6 +300,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="cursor-dot"></div>
|
||||
<div class="cursor-outline"></div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
100
public/style.css
100
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; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user