diff --git a/layouts/index.html b/layouts/index.html index 64f2935..4781dcf 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,10 +2,7 @@
- -
+

P'titsPas

{{ .Title }}

{{ with .Params.hero_tagline }} @@ -15,6 +12,9 @@ {{ .Params.cta_primary | default "Demander une démonstration" }}

+
diff --git a/static/css/style.css b/static/css/style.css index 4b6e088..22cf492 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -25,7 +25,7 @@ --font-body: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-ui: "Segoe UI", "Helvetica Neue", sans-serif; --header-h: 3.75rem; - --max: 68rem; + --max: 72rem; --ease: cubic-bezier(0.22, 1, 0.36, 1); } @@ -161,9 +161,15 @@ body { .site-main { min-height: 60vh; } .page-shell { - max-width: 44rem; + max-width: min(52rem, 92vw); margin: 0 auto; - padding: 2.5rem 1.25rem 4rem; + padding: 2.5rem 1.5rem 4rem; +} +@media (min-width: 64rem) { + .page-shell { + max-width: min(58rem, 88vw); + padding: 3rem 2rem 5rem; + } } .page-shell .content { background: var(--surface); @@ -223,31 +229,40 @@ body { text-decoration: underline; } -/* Hero */ +/* Hero — desktop large (2 colonnes), mobile compact */ .hero { position: relative; min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: flex; + flex-direction: column; align-items: center; justify-content: center; overflow: hidden; - padding: 2rem 1.25rem 4rem; + padding: 2rem 1.25rem 5rem; } .hero__bg { position: absolute; inset: 0; - background: linear-gradient(180deg, rgba(247,241,232,0.55) 0%, rgba(247,241,232,0.2) 40%, rgba(174,225,205,0.25) 100%); + background: linear-gradient(180deg, rgba(247,241,232,0.55) 0%, rgba(247,241,232,0.15) 45%, rgba(174,225,205,0.28) 100%); pointer-events: none; } +.hero__copy { + position: relative; + z-index: 1; + text-align: center; + width: min(52rem, 92vw); + animation: heroIn 0.8s var(--ease) both; +} .hero__river { position: absolute; left: 50%; - bottom: -2%; - width: min(110vw, 56rem); + bottom: -4%; + width: min(120vw, 72rem); transform: translateX(-50%); - opacity: 0.92; + opacity: 0.95; pointer-events: none; + z-index: 0; animation: riverIn 1.1s var(--ease) both; } .hero__river img { @@ -258,14 +273,7 @@ body { } @keyframes riverIn { from { opacity: 0; transform: translateX(-50%) translateY(1.5rem); } - to { opacity: 0.92; transform: translateX(-50%) translateY(0); } -} -.hero__inner { - position: relative; - z-index: 1; - text-align: center; - max-width: 36rem; - animation: heroIn 0.8s var(--ease) both; + to { opacity: 0.95; transform: translateX(-50%) translateY(0); } } @keyframes heroIn { from { opacity: 0; transform: translateY(0.75rem); } @@ -273,47 +281,94 @@ body { } .hero__brand { font-family: var(--font-brand); - font-size: clamp(2.2rem, 1.6rem + 3vw, 3.5rem); + font-size: clamp(2.4rem, 1.5rem + 3.5vw, 4.25rem); font-weight: 700; - margin: 0 0 0.75rem; + margin: 0 0 0.85rem; letter-spacing: -0.03em; color: var(--ink); } .hero__title { font-family: var(--font-brand); - font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); + font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2.35rem); font-weight: 600; - line-height: 1.25; - margin: 0 0 0.75rem; + line-height: 1.22; + margin: 0 auto 0.85rem; + max-width: 28ch; } .hero__tagline { - margin: 0 0 1.5rem; + margin: 0 auto 1.75rem; color: var(--ink-soft); - font-size: 1.05rem; + font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.45; + max-width: 38rem; } .hero__actions { display: flex; flex-wrap: wrap; - gap: 0.75rem; + gap: 0.75rem 1rem; justify-content: center; margin: 0; } +@media (min-width: 64rem) { + .hero { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); + align-items: center; + column-gap: 3rem; + max-width: var(--max); + margin: 0 auto; + width: 100%; + padding: 3.5rem 2.5rem 4rem; + box-sizing: border-box; + } + .hero__bg { border-radius: 0; } + .hero__copy { + width: auto; + max-width: none; + text-align: left; + justify-self: stretch; + } + .hero__title { + margin: 0 0 0.85rem; + max-width: none; + font-size: clamp(2rem, 1.5rem + 1.2vw, 2.85rem); + } + .hero__tagline { + margin: 0 0 1.5rem; + max-width: 36rem; + } + .hero__actions { justify-content: flex-start; } + .hero__river { + position: relative; + left: auto; + bottom: auto; + width: 100%; + max-width: 34rem; + transform: none; + justify-self: end; + animation: riverInDesk 1.1s var(--ease) both; + } + @keyframes riverInDesk { + from { opacity: 0; transform: translateX(1.25rem); } + to { opacity: 0.95; transform: none; } + } +} + @media (max-width: 40rem) { .hero { min-height: auto; - padding: 1.75rem 1.1rem 3rem; + padding: 1.75rem 1.1rem 3.5rem; align-items: flex-start; - padding-top: 2rem; } + .hero__copy { width: 100%; } .hero__river { width: 130vw; bottom: -8%; opacity: 0.75; } .hero__brand { font-size: 2rem; } - .hero__title { font-size: 1.25rem; } + .hero__title { font-size: 1.25rem; max-width: none; } .hero__tagline { font-size: 0.98rem; margin-bottom: 1.25rem; } } @@ -346,11 +401,18 @@ body { padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); - gap: 1.25rem; + gap: 1.5rem; } @media (max-width: 52rem) { .exp-grid { grid-template-columns: 1fr; } } +@media (min-width: 64rem) { + .experiences .section__inner, + .confiance .section__inner { + max-width: var(--max); + } + .exp-card { padding: 1.75rem 1.6rem; min-height: 12rem; } +} .exp-card { background: var(--surface); border-radius: 1.25rem;