fix: Safari mobile compatibility

This commit is contained in:
ordinarthur 2026-03-30 18:22:37 +02:00
parent 209d222eb0
commit 4e2adf1afb

View File

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