From 582023b91e052c4a0a9b18d9bafec0b42831b32e Mon Sep 17 00:00:00 2001 From: deploy Date: Thu, 8 Oct 2026 13:01:24 +0200 Subject: [PATCH] fix(vitrine): resserrer le hero pour laisser voir le contenu dessous. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Retire le min-height plein viewport et réduit paddings / taille image. --- static/css/style.css | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 6925d30..5cf0161 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -274,14 +274,14 @@ body { */ .hero { position: relative; - min-height: calc(100vh - var(--header-h)); - min-height: calc(100dvh - var(--header-h)); + /* Pas de plein écran : le contenu suivant doit pointer sous le fold */ + min-height: 0; display: grid; grid-template-columns: 1fr; align-items: center; - gap: 1.5rem; + gap: 1rem; overflow: hidden; - padding: 1.5rem 1.25rem 2.5rem; + padding: 1rem 1.25rem 1.25rem; max-width: var(--max); margin: 0 auto; width: 100%; @@ -296,7 +296,7 @@ body { display: block; width: 100%; height: auto; - max-height: min(72vh, 38rem); + max-height: min(52vh, 28rem); object-fit: contain; object-position: left center; } @@ -336,9 +336,10 @@ body { @media (min-width: 64rem) { .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); - column-gap: 2rem; - padding: 2rem 2.5rem 3rem; + column-gap: 1.75rem; + padding: 1rem 2.5rem 1.25rem; align-items: center; + min-height: 0; } .hero__visual { align-self: stretch; @@ -346,7 +347,7 @@ body { align-items: center; } .hero__brand-img { - max-height: calc(100vh - var(--header-h) - 4rem); + max-height: min(58vh, 30rem); width: 100%; } .hero__copy { @@ -355,10 +356,10 @@ body { } .hero__title { font-size: clamp(1.85rem, 1.4rem + 1.1vw, 2.6rem); - margin-bottom: 1rem; + margin-bottom: 0.75rem; } .hero__tagline { - margin-bottom: 1.75rem; + margin-bottom: 1.25rem; max-width: 28rem; } .hero__actions { justify-content: flex-start; } @@ -367,20 +368,23 @@ body { @media (max-width: 40rem) { .hero { min-height: auto; - padding: 1rem 1rem 2rem; - gap: 1rem; + padding: 0.75rem 1rem 1.25rem; + gap: 0.75rem; } .hero__brand-img { - max-height: 48vh; + max-height: 40vh; margin: 0 auto; } .hero__title { font-size: 1.3rem; } - .hero__tagline { font-size: 0.98rem; margin-bottom: 1.2rem; } + .hero__tagline { font-size: 0.98rem; margin-bottom: 1rem; } } /* Sections */ .section { - padding: clamp(2.5rem, 5vw, 4.5rem) 1.25rem; + padding: clamp(2rem, 4vw, 3.5rem) 1.25rem; +} +.home > .section:first-of-type { + padding-top: clamp(1.25rem, 2.5vw, 2rem); } .section__inner { max-width: var(--max);