diff --git a/public/style.css b/public/style.css index 500299f..2d9e5a5 100644 --- a/public/style.css +++ b/public/style.css @@ -14,7 +14,10 @@ --pad: 2rem; } -* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; } +* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } +@media (hover: hover) and (pointer: fine) { + * { cursor: none !important; } +} html { font-size: 13px; } @@ -23,7 +26,7 @@ body { color: var(--clr-black); font-family: var(--font-mono); overflow-x: hidden; - cursor: none; + -webkit-text-size-adjust: 100%; } /* ---- LEGACY CURSOR (hidden) ---- */ @@ -83,6 +86,7 @@ body { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; + height: 100dvh; z-index: 0; pointer-events: auto; overflow: hidden; @@ -100,6 +104,7 @@ body { z-index: 1; pointer-events: none; /* laisse passer vers la grid */ min-height: 100vh; + min-height: 100dvh; display: flex; flex-direction: column; } @@ -158,6 +163,7 @@ hr { border: none; border-top: var(--border); margin: 0; } display: grid; grid-template-columns: 1fr 1fr; height: calc(100vh - var(--header-h, 44px)); + height: calc(100dvh - var(--header-h, 44px)); pointer-events: none; } .hero-left { @@ -253,6 +259,11 @@ 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%); } +} .product-card:hover .card-img-wrap { border-bottom-color: var(--clr-red); } @@ -297,18 +308,22 @@ hr { border: none; border-top: var(--border); margin: 0; } /* ---- PRODUCT PANEL (overlay) ---- */ .product-panel { position: fixed; - inset: 0; + top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--clr-bg); display: flex; flex-direction: column; transform: translateY(100%); + -webkit-transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; overflow: hidden; + -webkit-overflow-scrolling: touch; } .product-panel.is-open { transform: translateY(0); + -webkit-transform: translateY(0); pointer-events: auto; } @@ -356,6 +371,7 @@ hr { border: none; border-top: var(--border); margin: 0; } /* Colonne infos : scrollable */ .panel-info-col { overflow-y: auto; + -webkit-overflow-scrolling: touch; padding: 2.5rem var(--pad); display: flex; flex-direction: column; @@ -866,17 +882,26 @@ hr { border: none; border-top: var(--border); margin: 0; } .product-grid { grid-template-columns: 1fr 1fr; } .panel-inner { grid-template-columns: 1fr; } .panel-img-col { height: 50vw; } - .panel-info-col { overflow-y: auto; } + .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: 1rem; } + .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; } - body { cursor: auto; } + .cad-h, .cad-v, .cad-center, .cad-coords { display: none !important; } + body, * { cursor: auto !important; } }