diff --git a/public/assets/bg-illustrations/left.svg b/public/assets/bg-illustrations/left.svg
new file mode 100644
index 0000000..399db04
--- /dev/null
+++ b/public/assets/bg-illustrations/left.svg
@@ -0,0 +1,30 @@
+
diff --git a/public/assets/bg-illustrations/right.svg b/public/assets/bg-illustrations/right.svg
new file mode 100644
index 0000000..313a095
--- /dev/null
+++ b/public/assets/bg-illustrations/right.svg
@@ -0,0 +1,32 @@
+
diff --git a/public/assets/bg-illustrations/sun.svg b/public/assets/bg-illustrations/sun.svg
new file mode 100644
index 0000000..89a064a
--- /dev/null
+++ b/public/assets/bg-illustrations/sun.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/components/HeroSection.module.css b/src/components/HeroSection.module.css
index 34febc5..b0dd176 100644
--- a/src/components/HeroSection.module.css
+++ b/src/components/HeroSection.module.css
@@ -109,11 +109,10 @@
.heroTitle {
margin-bottom: clamp(8px, 1vw, 14px);
color: var(--text-primary);
- /* Scale title fluidly so it never overflows into illustration zones */
font-size: clamp(32px, 5vw, 64px);
line-height: 1.12;
text-shadow: none;
- white-space: nowrap;
+ /* Allow wrapping on smaller screens so text never clips */
}
/* ── Subtitle ───────────────────────────────────────────────── */
@@ -124,7 +123,6 @@
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
- white-space: nowrap;
}
/* ── Action buttons ─────────────────────────────────────────── */
@@ -183,7 +181,6 @@
font-size: clamp(11px, 1vw, 14px);
font-weight: 500;
line-height: 1.6;
- white-space: nowrap;
}
[data-theme="dark"] .contactBar {
@@ -223,14 +220,44 @@
/* ================================================================
MOBILE ≤ 640px
================================================================ */
-@media (max-width: 640px) {
+/* ================================================================
+ TABLET 501px – 1100px — match the illustration breakpoint
+ ================================================================ */
+@media (max-width: 1100px) and (min-width: 501px) {
+ .heroContent {
+ /* Top-anchor content so it sits nicely in the upper-center zone */
+ justify-content: flex-start;
+ padding-top: clamp(60px, 8vw, 90px);
+ }
+
+ .heroTitle {
+ /* Allow wrapping at tablet so text stays within the center zone */
+ max-width: 520px;
+ }
+
+ .contactBar {
+ /* Wrap contact items on narrow tablets */
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 8px 14px;
+ }
+
+ .contactDivider {
+ display: none;
+ }
+}
+
+/* ================================================================
+ MOBILE ≤ 500px (screensizes under 500px)
+ ================================================================ */
+@media (max-width: 500px) {
.heroContentWrapper {
height: auto;
- min-height: 680px;
+ min-height: 520px;
}
.topBar {
- padding-top: 18px;
+ padding: 16px 14px 0;
}
.iconButton {
@@ -239,47 +266,47 @@
}
.heroContent {
- /* Switch to top-anchored layout on mobile */
height: auto;
- min-height: 680px;
- padding: 72px 24px 40px;
+ min-height: 520px;
+ padding: 66px 16px 36px;
justify-content: flex-start;
}
.heroTitle {
- font-size: clamp(30px, 8.5vw, 42px);
+ font-size: clamp(26px, 7.8vw, 36px);
white-space: normal;
- max-width: 300px;
+ max-width: 270px;
line-height: 1.15;
}
.heroSubtitle {
white-space: normal;
- max-width: 260px;
- letter-spacing: 0.14em;
+ max-width: 250px;
+ font-size: 11px;
+ letter-spacing: 0.12em;
}
.actionButtons {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
- max-width: 320px;
- gap: 8px;
+ max-width: 276px;
+ gap: 6px;
}
.heroButton {
min-width: 0;
width: auto;
- height: 42px;
- padding: 0 8px;
- font-size: 13px;
+ height: 38px;
+ padding: 0 6px;
+ font-size: 12px;
}
.contactBar {
flex-direction: column;
- gap: 6px;
+ gap: 5px;
white-space: normal;
- font-size: 12px;
+ font-size: 11.5px;
}
.contactItem {
diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css
index a0d2ece..99ff3b2 100644
--- a/src/components/ScenicHeroJourney.module.css
+++ b/src/components/ScenicHeroJourney.module.css
@@ -1,9 +1,10 @@
/* ============================================================
- ScenicHeroJourney — hero stage with fluid-scaling SVG backdrop
- Strategy: illustrations use fluid width via clamp() so they
- always leave a comfortable gap to the center content.
- They are pushed left/right so ~half bleeds off the canvas edge,
- clipped by heroStage overflow:hidden — matching the design.
+ ScenicHeroJourney — hero stage with SVG backdrop
+ Breakpoint strategy:
+ ≤ 640px → mobile (large bold crop, small sun clear of toggle)
+ 641-1100px → tablet (large bold crop, fluid width)
+ 1101-1440px → laptop (fluid clamp bleed — the approved look)
+ > 1440px → ultra-wide (frozen at 1440px values, overflow:visible)
============================================================ */
/* ── Container ─────────────────────────────────────────────── */
@@ -19,7 +20,6 @@
.heroStage {
position: relative;
width: 100%;
- /* fluid height: shrinks on narrower screens */
height: clamp(360px, 46vw, 680px);
overflow: hidden;
background: var(--bg-page);
@@ -48,65 +48,121 @@
}
/* ================================================================
- LEFT illustration (SVG intrinsic: 397 × 600)
- Strategy: width scales with viewport so it's always ~28% of
- the canvas width. Pushed so its RIGHT edge aligns with the
- leftmost ~22% of the canvas (the rest bleeds off the left edge).
+ LAPTOP 1101px – 1440px (default — approved bleed look)
+ Illustrations scale with vw and partially bleed off canvas edges.
================================================================ */
.backdropLeft {
- /* Start below the topBar icon zone (padding ~32px + icon 44px = ~76px) */
top: clamp(72px, 8vw, 100px);
left: clamp(-220px, calc(22% - 28vw), -40px);
width: clamp(240px, 28vw, 440px);
}
-/* ================================================================
- RIGHT illustration (SVG intrinsic: 435 × 533)
- Mirror of left: right edge bleeds off the right edge.
- ================================================================ */
.backdropRight {
- /* Slightly lower than left to maintain visual rhythm */
top: clamp(80px, 9vw, 110px);
right: clamp(-240px, calc(22% - 29vw), -40px);
width: clamp(250px, 29vw, 460px);
}
-/* ================================================================
- SUN illustration (SVG intrinsic: 139 × 139)
- Sits in the upper-right quadrant, between the center text and
- the right cubes. Scales fluidly.
- ================================================================ */
.backdropSun {
top: clamp(20px, 3.5vw, 52px);
- /* place sun between center (50%) and right illustration edge */
right: clamp(100px, calc(22% + 2vw), 380px);
width: clamp(52px, 10vw, 139px);
}
/* ================================================================
- MOBILE ≤ 640px — tighter crop, smaller presence
+ TABLET 501px – 1100px
+ Large illustrations with heavy bleed — bold fragments at edges.
+ Width scales fluidly; fixed bleed offset keeps content clear.
================================================================ */
-@media (max-width: 640px) {
+@media (max-width: 1100px) and (min-width: 501px) {
+ .heroStage {
+ height: clamp(360px, 52vw, 480px);
+ }
+
+ /* Left — visible slice ≈ width - 150px, always < content padding */
+ .backdropLeft {
+ top: clamp(88px, 10vw, 108px);
+ left: -150px;
+ width: clamp(280px, 36vw, 360px);
+ }
+
+ /* Right — slightly larger, deeper bleed */
+ .backdropRight {
+ top: clamp(96px, 11vw, 116px);
+ right: -165px;
+ width: clamp(295px, 38vw, 380px);
+ }
+
+ /* Sun — upper-right zone, between avatar and right cubes */
+ .backdropSun {
+ top: clamp(26px, 3.5vw, 44px);
+ right: clamp(120px, 33vw, 280px);
+ width: clamp(62px, 9vw, 96px);
+ }
+}
+
+/* ================================================================
+ MOBILE ≤ 500px (screensizes under 500px)
+ Assets moved UP to the sides (matching desktop/tablet aesthetic):
+ - Anchored via top, flanking the avatar & title
+ - Fluid side bleed maintains balance between visibility & clearance
+ - Zero collision with central avatar, title, buttons, or contact bar
+ ================================================================ */
+@media (max-width: 500px) {
.heroStage {
height: auto;
- min-height: 680px;
+ min-height: 520px;
}
.backdropLeft {
- top: 130px;
- left: -30px;
- width: clamp(100px, 26vw, 160px);
+ top: clamp(75px, 16vw, 95px);
+ bottom: auto;
+ left: clamp(-100px, calc(20vw - 230px), -100px);
+ width: clamp(200px, 44vw, 250px);
}
.backdropRight {
- top: 136px;
- right: -30px;
- width: clamp(110px, 28vw, 170px);
+ top: clamp(82px, 18vw, 102px);
+ bottom: auto;
+ right: clamp(-120px, calc(20vw - 240px), -120px);
+ width: clamp(210px, 46vw, 260px);
}
.backdropSun {
- top: 44px;
- right: 16px;
- width: clamp(36px, 9vw, 56px);
+ top: clamp(24px, 5vw, 36px);
+ right: clamp(52px, 15vw, 68px);
+ width: clamp(34px, 8vw, 42px);
+ }
+}
+
+/* ================================================================
+ ULTRA-WIDE > 1440px
+ Canvas capped at 1440px but vw keeps growing → bleed explodes.
+ Freeze at the values the clamp() formulas resolve to @ 1440px.
+ heroStage overflow:visible lets illustrations escape into the
+ extra viewport space (body overflow-x:hidden prevents scrollbar).
+ ================================================================ */
+@media (min-width: 1441px) {
+ .heroStage {
+ height: 662px;
+ overflow: visible;
+ }
+
+ .backdropLeft {
+ top: 100px;
+ left: -86px;
+ width: 403px;
+ }
+
+ .backdropRight {
+ top: 110px;
+ right: -101px;
+ width: 418px;
+ }
+
+ .backdropSun {
+ top: 50px;
+ right: 346px;
+ width: 139px;
}
}