diff --git a/about-us-v3.html b/about-us-v3.html index 9af4cb1..22c6f62 100644 --- a/about-us-v3.html +++ b/about-us-v3.html @@ -44,19 +44,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/about-us.html b/about-us.html index 9672b6b..d110122 100644 --- a/about-us.html +++ b/about-us.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/after-sales.html b/after-sales.html index 7858346..30fc993 100644 --- a/after-sales.html +++ b/after-sales.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/auto-export.html b/auto-export.html index def5f9c..ce1aca1 100644 --- a/auto-export.html +++ b/auto-export.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
@@ -99,7 +99,7 @@
-

HESU AUTO

+

HESU AUTO

Serving Global Market Demand

Explore More
@@ -136,7 +136,7 @@
- HESU vehicle inventory + HESU vehicle inventory
diff --git a/building-materials.html b/building-materials.html index 2b94efd..aa90c78 100644 --- a/building-materials.html +++ b/building-materials.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/contact.html b/contact.html index c0e730b..9a3d5ba 100644 --- a/contact.html +++ b/contact.html @@ -42,19 +42,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/css/business.css b/css/business.css index 04542d3..0f31310 100644 --- a/css/business.css +++ b/css/business.css @@ -87,6 +87,22 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } +.bp-hero__titles { + font-family: var(--font-display); + font-size: clamp(2.5rem, 6vw, 4.5rem); + line-height: 0.96; + letter-spacing: 0.1em; + background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); + -webkit-background-clip: text; background-clip: text; + -webkit-text-fill-color: transparent; + display: flex; + align-items: center; + justify-content: center; +} +.bp-hero__titles img { + width: 350px; + margin-right: 20px; +} .bp-hero__sub { margin-top: 22px; font-family: var(--font-display); diff --git a/css/style.css b/css/style.css index 5dd5c4e..5a2c656 100644 --- a/css/style.css +++ b/css/style.css @@ -337,6 +337,9 @@ img { max-width: 100%; display: block; } background-size: cover; background-position: center; } +.hero-logo{ + width: 40%; +} .hero-bg::before { display: none; } /* star field placeholder removed */ .hero-content { @@ -465,13 +468,19 @@ img { max-width: 100%; display: block; } ============================================================ */ .presence { padding: 96px 0; } -/* bg image + SVG overlay share one box and the 1219 × 661 map coordinate space */ +/* bg image + SVG overlay share one box and the 1219 × 660 map coordinate space. + isolation + the JS-painted backdrop (an exact copy of .page-content's bg, + aligned pixel-for-pixel) give the blended img a LOCAL backdrop — Chrome + captures cross-element blend backdrops as the element enters the viewport, + and that capture lags a frame or two (the map flashes its intrinsic colors). + With the backdrop inside the group there is nothing to capture late. */ .map-wrap { position: relative; width: 100%; - aspect-ratio: 1219 / 661; + aspect-ratio: 1219 / 660; overflow: hidden; margin: 8px auto 24px; + isolation: isolate; } .map-bg { position: absolute; @@ -480,7 +489,25 @@ img { max-width: 100%; display: block; } width: 100%; height: 100%; object-fit: contain; + /* the SVG's internal color-dodge/multiply blends can't reach past the + boundary — blend the whole map against the section background instead so + the dots tint with it (Figma behaviour). Dark backgrounds only: on light + surfaces color-dodge washes the map out to white. */ + mix-blend-mode: color-dodge; + /* hidden until the blend backdrop (page bg image) has loaded — color-dodge + over an unloaded near-white backdrop washes the map out. Fading the img + itself keeps the blend correct (an ancestor opacity<1 would isolate the + group and pop the color in at animation end). main.js adds .ready. */ + opacity: 0; + transition: opacity .7s var(--ease); } +/* !important so it also overrides the inline no-FOUC guard (style="opacity:0") + and the JS fade's final inline value — the fade itself is JS-driven + (main.js) because CSS animations/transitions lose to !important in the + cascade and would snap instead of fading. */ +.map-bg.ready { opacity: 1 !important; } +/* keep the slide-up entrance but drop the fade — see .map-bg note above */ +.map-wrap.reveal { opacity: 1; transform: translateY(28px); } .map-overlay { position: absolute; inset: 0; @@ -550,6 +577,21 @@ img { max-width: 100%; display: block; } .map-wrap .location.active .halo { animation: pulse .9s .62s ease-out infinite; } .map-wrap .location.active .halo2 { animation-delay: 1.07s; } +/* minor markers (China domestic network) — same choreography, yellow & smaller */ +.map-wrap .location--minor .label { font-size: 11px; letter-spacing: .5px; } +.map-wrap .location--minor .line { stroke: #FFD100; stroke-width: 1.2; } +.map-wrap .location--minor .dot { fill: #FFD100; } +.map-wrap .location--minor .halo { stroke: #FFD100; stroke-width: 1; } +.map-wrap .location--minor.active .dot { + /* re-declared to swap the breathe keyframe for the smaller radius */ + animation: dotIn .32s .5s cubic-bezier(.2,1.5,.35,1) both, + breatheRy 3.4s 1s ease-in-out infinite; +} +@keyframes breatheRy { + 0%, 100% { r: 5px; } + 50% { r: 5.7px; } +} + @keyframes labelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } @@ -665,7 +707,7 @@ img { max-width: 100%; display: block; } .partner-dots { position: absolute; - right: 18px; bottom: 18px; + left: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; z-index: 3; } @@ -841,19 +883,23 @@ img { max-width: 100%; display: block; } .ph-warehouse2 { background: url(../image/home/Partner2.jpg) center/cover no-repeat; } .ph-warehouse3 { background: url(../image/home/Partner3.jpg) center/cover no-repeat; } .ph-logistics2 { background: url(../image/home/Global-Logistics.jpg) center/cover no-repeat; } -.ph-exportcars { background: url(../image/home/Auto-Export.jpg) center/cover no-repeat; } .ph-aboutlb1 { background: url(../image/about-us/lb1.jpg) center/cover no-repeat; } .ph-aboutlb2 { background: url(../image/about-us/lb2.jpg) center/cover no-repeat; } .ph-aboutlb3 { background: url(../image/about-us/lb3.jpg) center/cover no-repeat; } .ph-aboutlb4 { background: url(../image/about-us/lb4.jpg) center/cover no-repeat; } -.ph-fair { background: url(../image/home/new1.png) center/cover no-repeat; } -.ph-dubai { background: url(../image/home/new2.png) center/cover no-repeat; } -.ph-factory { background: url(../image/home/new3.png) center/cover no-repeat; } -.ph-visit { background: url(../image/home/new4.png) center/cover no-repeat; } +.ph-fair { background: url(../image/home/new1.jpg) center/cover no-repeat; } +.ph-dubai { background: url(../image/home/new2.jpg) center/cover no-repeat; } +.ph-factory { background: url(../image/home/new3.jpg) center/cover no-repeat; } +.ph-visit { background: url(../image/home/new4.jpg) center/cover no-repeat; } .ph-service1 { background: url(../image/home/Service1.jpg) center/cover no-repeat; } .ph-service2 { background: url(../image/home/Service2.jpg) center/cover no-repeat; } .ph-service3 { background: url(../image/home/Service3.jpg) center/cover no-repeat; } .ph-service4 { background: url(../image/home/Service4.jpg) center/cover no-repeat; } +.ph-select1{ background: url(../image/Select1.jpg) center/cover no-repeat; } +.ph-select2{ background: url(../image/Select2.jpg) center/cover no-repeat; } +.ph-select3{ background: url(../image/Select3.jpg) center/cover no-repeat; } +.ph-select4{ background: url(../image/Select4.jpg) center/cover no-repeat; } + /* ============================================================ SCROLL REVEAL ============================================================ */ diff --git a/development-history.html b/development-history.html index ea09929..e398259 100644 --- a/development-history.html +++ b/development-history.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/global-logistics.html b/global-logistics.html index cb7fce5..db5f616 100644 --- a/global-logistics.html +++ b/global-logistics.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/global-presence.html b/global-presence.html index b13a330..044dcdd 100644 --- a/global-presence.html +++ b/global-presence.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/image/Auto-Export.jpg b/image/Auto-Export.jpg deleted file mode 100644 index 7c969b4..0000000 Binary files a/image/Auto-Export.jpg and /dev/null differ diff --git a/image/about-us/hscomp.jpg b/image/about-us/hscomp.jpg index fed193e..ab0f1ab 100644 Binary files a/image/about-us/hscomp.jpg and b/image/about-us/hscomp.jpg differ diff --git a/image/carexport/Rectangle 124.jpg b/image/carexport/Rectangle 124.jpg deleted file mode 100644 index 0263c5a..0000000 Binary files a/image/carexport/Rectangle 124.jpg and /dev/null differ diff --git a/image/carexport/export-bg.jpg b/image/carexport/export-bg.jpg index dfee855..a9b11bb 100644 Binary files a/image/carexport/export-bg.jpg and b/image/carexport/export-bg.jpg differ diff --git a/image/home/Businesses1.jpg b/image/home/Businesses1.jpg index 275505c..05f940e 100644 Binary files a/image/home/Businesses1.jpg and b/image/home/Businesses1.jpg differ diff --git a/image/home/Businesses2.jpg b/image/home/Businesses2.jpg index 1223879..0da8262 100644 Binary files a/image/home/Businesses2.jpg and b/image/home/Businesses2.jpg differ diff --git a/image/home/Businesses3.jpg b/image/home/Businesses3.jpg index be4e4d7..c171566 100644 Binary files a/image/home/Businesses3.jpg and b/image/home/Businesses3.jpg differ diff --git a/image/home/Businesses4.jpg b/image/home/Businesses4.jpg index cfe5177..65de8e3 100644 Binary files a/image/home/Businesses4.jpg and b/image/home/Businesses4.jpg differ diff --git a/image/home/Partner.jpg b/image/home/Partner.jpg index e8486c9..4d6e078 100644 Binary files a/image/home/Partner.jpg and b/image/home/Partner.jpg differ diff --git a/image/home/Partner1.jpg b/image/home/Partner1.jpg index 8dc9470..8800828 100644 Binary files a/image/home/Partner1.jpg and b/image/home/Partner1.jpg differ diff --git a/image/home/Partner2.jpg b/image/home/Partner2.jpg index f5c6bde..b82d236 100644 Binary files a/image/home/Partner2.jpg and b/image/home/Partner2.jpg differ diff --git a/image/home/Partner3.jpg b/image/home/Partner3.jpg index db6e62f..7a775a1 100644 Binary files a/image/home/Partner3.jpg and b/image/home/Partner3.jpg differ diff --git a/image/home/Service1.jpg b/image/home/Service1.jpg index f1b2758..5c3ece7 100644 Binary files a/image/home/Service1.jpg and b/image/home/Service1.jpg differ diff --git a/image/home/Service2.jpg b/image/home/Service2.jpg index 1664f8c..f90c353 100644 Binary files a/image/home/Service2.jpg and b/image/home/Service2.jpg differ diff --git a/image/home/Service3.jpg b/image/home/Service3.jpg index a32db9e..c4304ae 100644 Binary files a/image/home/Service3.jpg and b/image/home/Service3.jpg differ diff --git a/image/home/Service4.jpg b/image/home/Service4.jpg index 4f8ad7c..d8d830d 100644 Binary files a/image/home/Service4.jpg and b/image/home/Service4.jpg differ diff --git a/image/home/banner.jpg b/image/home/banner.jpg index 3089d33..f4226df 100644 Binary files a/image/home/banner.jpg and b/image/home/banner.jpg differ diff --git a/image/home/new1.png b/image/home/new1.png deleted file mode 100644 index 1df1f19..0000000 Binary files a/image/home/new1.png and /dev/null differ diff --git a/image/home/new2.png b/image/home/new2.png deleted file mode 100644 index d619fd2..0000000 Binary files a/image/home/new2.png and /dev/null differ diff --git a/image/home/new3.png b/image/home/new3.png deleted file mode 100644 index a6637f4..0000000 Binary files a/image/home/new3.png and /dev/null differ diff --git a/image/home/new4.png b/image/home/new4.png deleted file mode 100644 index 51c85d8..0000000 Binary files a/image/home/new4.png and /dev/null differ diff --git a/index.html b/index.html index 6f3f4ff..fea012d 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@ - - + + @@ -46,19 +46,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
@@ -102,7 +102,8 @@
-

HESU

+ +

GLOBAL ONE-STOP TRADE PARTNER

Cross-border Supply Chain & Worldwide Distribution

Explore More @@ -184,49 +185,94 @@ Learn More - + @@ -385,6 +431,6 @@
- + diff --git a/js/main.js b/js/main.js index 968a02d..d7a3dd6 100644 --- a/js/main.js +++ b/js/main.js @@ -366,6 +366,65 @@ } var wrap = document.querySelector('.map-wrap'); + + // Paint the page's exact background onto the wrap: same image, stretched + // to .page-content's full size, offset by the wrap's position inside it — + // a pixel-perfect local copy. With .map-wrap { isolation: isolate } the + // blended img mixes against THIS instead of the page backdrop, so Chrome + // never has to capture a cross-element backdrop when the map scrolls into + // view (that capture lags a frame and flashes the map's intrinsic colors). + var pc = document.querySelector('.page-content'); + if (wrap && pc) { + var syncBackdrop = function () { + var wr = wrap.getBoundingClientRect(); + var pr = pc.getBoundingClientRect(); + wrap.style.backgroundImage = 'url(image/home-bgs.png)'; + wrap.style.backgroundSize = pr.width + 'px ' + pc.offsetHeight + 'px'; + wrap.style.backgroundPosition = (pr.left - wr.left) + 'px ' + (pr.top - wr.top) + 'px'; + wrap.style.backgroundRepeat = 'no-repeat'; + }; + syncBackdrop(); + var rT2 = null; + window.addEventListener('resize', function () { + clearTimeout(rT2); rT2 = setTimeout(syncBackdrop, 150); + }); + } + + // Fade the map image in only after the page has fully loaded: the image + // color-dodges against the (locally copied) page background image, and + // over an unloaded near-white backdrop the map washes out — showing it + // early would flash a colorless map before the glow pops in. + var mapImg = wrap ? wrap.querySelector('.map-bg') : null; + if (mapImg) { + // Reveal needs BOTH: the lazy image decoded (it paints a frame or two + // before its mix-blend-mode composite kicks in) AND the page fully + // loaded (color-dodge over an unloaded white backdrop washes out). + // The fade is JS-driven because CSS animations/transitions lose to the + // !important reveal rule in the cascade — this way the un-blended + // first frames stay at near-zero opacity no matter what. + var imgLoaded = mapImg.complete && mapImg.naturalWidth > 0; + var pageLoaded = document.readyState === 'complete'; + var tryReveal = function () { + if (!imgLoaded || !pageLoaded) return; + requestAnimationFrame(function () { + requestAnimationFrame(function () { + var t0 = null; + var step = function (t) { + if (t0 === null) t0 = t; + var p = Math.min((t - t0) / 700, 1); + mapImg.style.opacity = p.toFixed(3); + if (p < 1) requestAnimationFrame(step); + else mapImg.classList.add('ready'); // !important locks the final state + }; + requestAnimationFrame(step); + }); + }); + }; + if (!imgLoaded) mapImg.addEventListener('load', function () { imgLoaded = true; tryReveal(); }, { once: true }); + if (!pageLoaded) window.addEventListener('load', function () { pageLoaded = true; tryReveal(); }, { once: true }); + tryReveal(); + } + if ('IntersectionObserver' in window && wrap) { var mo = new IntersectionObserver(function (entries) { entries[0].isIntersecting ? start() : stop(); diff --git a/news-detail.html b/news-detail.html index 5d2bfc8..87d72a5 100644 --- a/news-detail.html +++ b/news-detail.html @@ -43,19 +43,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales
diff --git a/news.html b/news.html index c0f9251..de78d85 100644 --- a/news.html +++ b/news.html @@ -42,19 +42,19 @@
-
+

Auto Export

 -
+

HESU PIPE

 -
+

Global Logistics

 -
+

After-sales