diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css index a9cb531..320a368 100644 --- a/src/components/HeroSection.module.css +++ b/src/components/HeroSection.module.css @@ -65,10 +65,16 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; - height: 100%; - /* Horizontal padding keeps text clear of illustration zones */ - padding: 0 clamp(160px, 22vw, 460px); + justify-content: flex-start; + width: 100%; + max-width: 920px; + margin: 0 auto; + height: auto; + min-height: 100%; + padding-top: clamp(64px, 6.5vw, 96px); + padding-bottom: clamp(28px, 3vw, 40px); + padding-left: 20px; + padding-right: 20px; text-align: center; } @@ -109,10 +115,10 @@ .heroTitle { margin-bottom: clamp(8px, 1vw, 14px); color: var(--text-primary); - font-size: clamp(32px, 5vw, 64px); - line-height: 1.12; + font-size: clamp(32px, 3.6vw, 54px); + line-height: 1.15; text-shadow: none; - /* Allow wrapping on smaller screens so text never clips */ + white-space: nowrap; } /* ── Subtitle ───────────────────────────────────────────────── */ @@ -174,6 +180,7 @@ .contactBar { display: inline-flex; align-items: center; + justify-content: center; gap: clamp(10px, 1.4vw, 18px); border: 0; background: transparent; @@ -181,6 +188,7 @@ font-size: clamp(11px, 1vw, 14px); font-weight: 500; line-height: 1.6; + white-space: nowrap; } [data-theme="dark"] .contactBar { @@ -192,6 +200,7 @@ align-items: center; gap: 6px; color: inherit; + white-space: nowrap; transition: opacity var(--motion-duration-fast) ease; } @@ -240,6 +249,7 @@ .heroTitle { /* Allow wrapping at tablet so text stays within the center zone */ max-width: 520px; + white-space: normal; } .contactBar { @@ -247,6 +257,7 @@ flex-wrap: wrap; justify-content: center; gap: 8px 14px; + white-space: normal; } .contactDivider { diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css index 6f97c24..7b4450e 100644 --- a/src/components/ScenicHeroJourney.module.css +++ b/src/components/ScenicHeroJourney.module.css @@ -21,7 +21,7 @@ position: relative; width: 100%; height: auto; - min-height: clamp(520px, 46vw, 680px); + min-height: clamp(580px, 48vw, 700px); overflow: hidden; background: var(--bg-page); } @@ -190,7 +190,8 @@ ================================================================ */ @media (min-width: 1441px) { .heroStage { - height: 662px; + height: auto; + min-height: 680px; overflow: visible; }