This commit is contained in:
浅念
2026-09-02 14:24:54 +08:00
parent f4fb024e98
commit 9d9e57d7f4
16 changed files with 60 additions and 52 deletions
+2 -2
View File
@@ -33,7 +33,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -67,7 +67,7 @@
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+2 -2
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -66,7 +66,7 @@
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+3 -3
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
@@ -102,7 +102,7 @@
<h1 class="bp-hero__title" data-reveal>HESU</h1>
<p class="bp-hero__sub" data-reveal>After-Sales &amp; Modification</p>
<p class="bp-hero__tag" data-reveal>More Than Export, We Support Long-Term Operation</p>
<a class="btn btn-explore" href="#intro" data-reveal>Explore More</a>
<!--<a class="btn btn-explore" href="#intro" data-reveal>Explore More</a>-->
</div>
</section>
+2 -2
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+3 -3
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
@@ -101,7 +101,7 @@
<div class="bp-hero__copy container">
<h1 class="bp-hero__title" data-reveal>HESU PIPE</h1>
<p class="bp-hero__tag" data-reveal>Building Materials and Pipe Export for Global Projects</p>
<a class="btn btn-explore" target="_blank" href="https://axpipe.com/product/" data-reveal>Explore More</a>
<a class="btn btn-explore" target="_blank" href="https://axpipe.com" data-reveal>Explore More</a>
</div>
</section>
+2 -2
View File
@@ -31,7 +31,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -63,7 +63,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+4 -8
View File
@@ -219,7 +219,7 @@
3. SERVICE CONTENTS — centered title + 6 circular services (3 × 2)
============================================================ */
.as-services {
padding: 100px 0 120px;
/*padding: 100px 0 120px;*/
}
.as-services__head { text-align: center; margin-bottom: 76px; }
.as-services__grid {
@@ -440,11 +440,7 @@
/* ============================================================
1. HERO — staggered oversized orange wordmark
============================================================ */
.dh-hero .bp-hero__veil {
background:
linear-gradient(180deg, rgba(6,12,22,.40) 0%, rgba(6,12,22,.10) 38%, rgba(6,12,22,.52) 100%),
radial-gradient(72% 60% at 50% 50%, rgba(6,12,22,.28), transparent 70%);
}
/* override the shared hero's vertical centering: anchor the copy
from the TOP with an explicit offset (tweak margin-top to move it) */
.dh-hero { align-items: stretch; }
@@ -490,7 +486,7 @@
.dh-head__title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.4rem, 5vw, 4rem);
font-size: clamp(2.4rem, 5vw, 3rem);
line-height: 1.02;
letter-spacing: -0.01em;
color: var(--orange-700);
@@ -505,7 +501,7 @@
display: flex;
align-items: stretch;
}
.dh-rail--2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.dh-rail--2 { max-width: 860px; margin-left: auto; margin-right: auto; }
.dh-stage {
flex: 1 1 0;
+26 -13
View File
@@ -1,5 +1,5 @@
/* ============================================================
business.css — shared components for the 4 business sub-pages
business.css — shared components for the 4 business sub-pages
(auto-export / after-sales / building-materials / global-logistics)
Loaded AFTER style.css, BEFORE each page's own *.css.
Prefix: .bp-* | hooks: body.is-bp, main.bp
@@ -12,6 +12,10 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
/* ---------- scroll reveal (driven by each page's JS / main.js) ---------- */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
.bp-intro__text{
height: 100%;
position: relative;
}
.bp-intro__text [data-reveal]:nth-child(3),
.bp-intro__text [data-reveal]:nth-child(4) { transition-delay: .08s; }
@@ -42,9 +46,9 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
position: relative;
min-height: 70vh;
display: flex;
align-items: stretch; /* copy fills hero height — enables split layout */
align-items: stretch; /* copy fills hero height — enables split layout */
overflow: hidden;
margin-top: var(--header-h); /* banner starts BELOW the fixed nav — image not covered */
margin-top: var(--header-h); /* banner starts BELOW the fixed nav — image not covered */
}
.bp-hero__scene { position: absolute; inset: 0; z-index: 0; background: #060a12; overflow: hidden; }
.bp-hero__bg {
@@ -68,8 +72,8 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
position: relative; z-index: 3;
text-align: left;
display: flex; flex-direction: column; align-items: flex-start;
padding-top: 16vh; /* title block position — single knob (raise/lower the title) */
padding-bottom: 13vh; /* button's distance from the bottom — single knob */
padding-top: 16vh; /* title block position — single knob (raise/lower the title) */
padding-bottom: 13vh; /* button's distance from the bottom — single knob */
}
.bp-hero--center .bp-hero__copy { text-align: center; align-items: center; }
@@ -106,14 +110,14 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
.bp-hero .btn-explore { margin-top: auto; }
/* ============================================================
BUSINESS INTRODUCTION — 2-col text + image
BUSINESS INTRODUCTION — 2-col text + image
============================================================ */
.bp-intro { padding: 130px 0 110px; }
.bp-intro__grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 50px;
align-items: center;
/* align-items: center; */
}
.bp-intro__text .bp-h2 { margin-bottom: 34px; }
.bp-intro__text .bp-body + .bp-body { margin-top: 22px; }
@@ -130,14 +134,23 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
/* ---------- caps row (auto-export + after-sales): icon + label ---------- */
.bp-caps {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* display: grid; */
/* grid-template-columns: repeat(4, 1fr); */
gap: 14px;
margin-top: 50px;
/* margin-top: 50px; */
position: absolute;
bottom: 0;
width: 100%;
justify-content: space-between;
display: flex;
align-items: center;
}
.bp-cap {
display: flex; flex-direction: column; align-items: center; gap: 16px;
padding: 8px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
/* padding: 8px 12px; */
}
.bp-cap__label {
font-family: var(--font-display);
@@ -149,7 +162,7 @@ body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--fo
}
/* ============================================================
VIEW MORE — centered orange link
VIEW MORE — centered orange link
============================================================ */
.bp-viewmore { padding: 64px 0 130px; text-align: center; }
.bp-viewmore__link {
+2 -3
View File
@@ -184,16 +184,15 @@ body.is-contact { background: #ffffff; color: var(--text-dark); font-family: var
.ct-map__veil {
position: absolute; inset: 0;
pointer-events: none;
background: linear-gradient(179.91deg, rgba(0, 0, 0, 0.231) 0.08%, rgba(0, 0, 0, 0.7) 131.42%);
background: rgb(0 0 0 / 60%);
}
/* contact information, vertically centered over the veiled map */
.ct-map__info {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: center;
display: flex; flex-direction: column; justify-content: end;
padding: 40px 80px;
color: #fff;
pointer-events: none; /* keeps the map draggable outside the text */
text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.ct-map__info-title {
font-family: var(--font-display);
+1 -1
View File
@@ -117,7 +117,7 @@ img { max-width: 100%; display: block; }
font-size: 0.78rem;
border-radius: var(--radius);
cursor: pointer;
border: 1px solid transparent;
/* border: 1px solid transparent;*/
transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-contact {
+2 -2
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+3 -3
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
@@ -102,7 +102,7 @@
<h1 class="bp-hero__title" data-reveal>HESU</h1>
<p class="bp-hero__sub" data-reveal>Cross-border Logistics</p>
<p class="bp-hero__tag" data-reveal>Self-Built Cross-Border Logistics System</p>
<a class="btn btn-explore" href="#intro" data-reveal>Explore More</a>
<a class="btn btn-explore" href="https://siluex.com/" data-reveal>Explore More</a>
</div>
</section>
+2 -2
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -66,7 +66,7 @@
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+2 -2
View File
@@ -35,7 +35,7 @@
<ul class="nav-list">
<!-- Business mega menu (full-screen) -->
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -70,7 +70,7 @@
<!-- About Us mega menu (full-screen) -->
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+2 -2
View File
@@ -32,7 +32,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -64,7 +64,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">
+2 -2
View File
@@ -31,7 +31,7 @@
</a>
<ul class="nav-list">
<li class="nav-item has-mega">
<a href="auto-export.html">Business <span class="caret" aria-hidden="true"></span></a>
<a href="#">Business <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="Business">
<div class="mega-inner">
<div class="mega-left">
@@ -63,7 +63,7 @@
</li>
<li class="nav-item"><a href="global-presence.html">Global Presence</a></li>
<li class="nav-item has-mega">
<a href="about-us.html">About Us <span class="caret" aria-hidden="true"></span></a>
<a href="#">About Us <span class="caret" aria-hidden="true"></span></a>
<div class="mega" role="dialog" aria-label="About HESU">
<div class="mega-inner">
<div class="mega-left">