网址提交
This commit is contained in:
浅念
@@ -0,0 +1,235 @@
|
||||
/* ============================================================
|
||||
About Us V3 — NIO-style trigger animations
|
||||
内容与 about-us.html 完全一致。
|
||||
动效:滚动到达阈值 → JS 加 .play → CSS transition 自动播完。
|
||||
============================================================ */
|
||||
|
||||
/* ---------- 钉屏(与 about-us.css 相同) ---------- */
|
||||
.au-main { position: relative; z-index: 1; }
|
||||
.site-footer { position: relative; z-index: 3; }
|
||||
.au-pin { position: relative; height: 300vh; }
|
||||
.au-screen { position: sticky; top: 0; height: 100vh; overflow: hidden; }
|
||||
#au-1 { z-index: 1; }
|
||||
#au-3 { z-index: 2; }
|
||||
|
||||
/* ---------- au-1 元素 ---------- */
|
||||
.au-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
|
||||
.au-bg::after { content: ""; position: absolute; inset: 0; background: rgba(1,15,30,0.30); }
|
||||
.au-corner-img { position: absolute; right: 0; bottom: 0; z-index: 2; height: auto; pointer-events: none; }
|
||||
.au-inner {
|
||||
position: relative; z-index: 1; width: 100%; max-width: var(--container);
|
||||
margin: 60px auto 0; padding: var(--header-h) 32px; text-align: left; color: #fff;
|
||||
}
|
||||
.au-text { margin-left: 0; margin-right: auto; }
|
||||
.au-title {
|
||||
font-family: var(--font-display); font-weight: 900;
|
||||
font-size: clamp(2rem, 5vw, 2.4rem); line-height: 1.1;
|
||||
color: #fff; margin-bottom: 26px; text-shadow: 0 2px 20px rgba(0,0,0,0.45);
|
||||
}
|
||||
.au-text {
|
||||
font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.85;
|
||||
color: rgba(255,255,255,0.92); max-width: 820px; text-shadow: 0 1px 12px rgba(0,0,0,0.4);
|
||||
}
|
||||
.au-mask { position: absolute; inset: 0; z-index: 3; background: rgba(1,15,30,0.55); opacity: 0; }
|
||||
.au-slogan-layer {
|
||||
position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; padding: var(--header-h) 32px; padding-top: 16vh;
|
||||
text-align: center; color: #fff;
|
||||
}
|
||||
.au-slogan {
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: clamp(2.2rem, 6vw, 2.6rem); line-height: 1.1;
|
||||
color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.5); margin-bottom: 24px;
|
||||
}
|
||||
.au-slogan-cn {
|
||||
font-size: clamp(1.2rem, 2.4vw, 2rem); letter-spacing: 0.3em;
|
||||
color: var(--orange-300); text-shadow: 0 1px 12px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* ---------- au-3 元素 ---------- */
|
||||
.au-zoom-img {
|
||||
position: absolute; left: 50%; top: 68%; width: min(711px, 82vw); height: min(560px, 58vh);
|
||||
transform: translate(-50%, -50%) scale(1); transform-origin: center;
|
||||
background-size: cover; background-position: center; z-index: 1;
|
||||
box-shadow: 0 24px 70px rgba(0,0,0,0.45);
|
||||
}
|
||||
.au-zoom-mask { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; }
|
||||
.au-sec-head {
|
||||
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
|
||||
padding: calc(var(--header-h) + 56px) 32px 0; text-align: center; color: #fff;
|
||||
}
|
||||
.au-sec-title {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: clamp(1.8rem, 4vw, 2rem); line-height: 1.1;
|
||||
color: #202020; margin-bottom: 18px;
|
||||
}
|
||||
.au-sec-text {
|
||||
font-size: clamp(0.95rem, 1.3vw, 1rem); line-height: 1.8;
|
||||
color: #202020; max-width: 760px; margin: 0 auto;
|
||||
}
|
||||
.au-reveal {
|
||||
position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; padding: 32px; text-align: center; color: #fff; opacity: 0;
|
||||
}
|
||||
.au-logo-big { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
|
||||
.au-logo-big .logo-img { height: clamp(44px, 6vw, 76px); }
|
||||
.au-reveal-text {
|
||||
font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.85;
|
||||
color: rgba(255,255,255,0.92); max-width: 720px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
V3 核心:触发式动画(NIO 同款)
|
||||
初始态 → .play 加上后 → CSS transition 自动过渡到目标态
|
||||
============================================================ */
|
||||
|
||||
/* ---- 初始态 = 反向时序(快速、无延迟) ---- */
|
||||
.au-inner, .au-corner-img {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.au-slogan {
|
||||
opacity: 0; transform: translate3d(0, 30px, 0);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.au-slogan-cn {
|
||||
opacity: 0; transform: translate3d(0, 30px, 0);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.au-mask { opacity: 0; will-change: opacity; }
|
||||
.au-bg { transform: scale(1.04); will-change: transform; }
|
||||
.au-sec-head {
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.au-zoom-mask { opacity: 0; will-change: opacity; }
|
||||
.au-zoom-img {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
|
||||
}
|
||||
.au-logo-big {
|
||||
opacity: 0; transform: translate3d(0, 24px, 0);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.au-reveal-text {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.au-reveal {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
/* ---- .play 触发态 = 正向时序(慢、有延迟、错峰) ---- */
|
||||
#au-1.play .au-inner,
|
||||
#au-1.play .au-corner-img {
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1);
|
||||
}
|
||||
#au-1.play .au-slogan {
|
||||
opacity: 1; transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s,
|
||||
transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s;
|
||||
}
|
||||
#au-1.play .au-slogan-cn {
|
||||
opacity: 1; transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1) 0.45s,
|
||||
transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.45s;
|
||||
}
|
||||
|
||||
#au-3.play .au-sec-head {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1);
|
||||
}
|
||||
#au-3.play .au-zoom-img {
|
||||
transform: translate(-50%, -50%) scale(3.5);
|
||||
transition: transform 1s cubic-bezier(0.65,0,0.35,1);
|
||||
}
|
||||
#au-3.play .au-logo-big {
|
||||
opacity: 1; transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0.7s,
|
||||
transform 0.7s cubic-bezier(0.22,1,0.36,1) 0.7s;
|
||||
}
|
||||
#au-3.play .au-reveal-text {
|
||||
opacity: 1;
|
||||
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1) 0.85s;
|
||||
}
|
||||
#au-3.play .au-reveal {
|
||||
opacity: 1;
|
||||
transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1) 0.6s;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
GPS 区块(与 about-us.html 相同的视觉)
|
||||
============================================================ */
|
||||
.au-gps { background: #ffffff; padding: 120px 0; }
|
||||
.au-gps__inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
|
||||
.au-gps__title {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: clamp(2rem,4vw,3rem); line-height: 1.1; color: #111;
|
||||
margin-bottom: 24px; text-align: center;
|
||||
}
|
||||
.au-gps__text {
|
||||
font-size: clamp(1rem,1.3vw,1.1rem); line-height: 1.8; color: #333;
|
||||
max-width: 900px; margin: 0 auto 60px; text-align: center;
|
||||
}
|
||||
.au-gps__cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
|
||||
.au-gps__card-img { width: 100%; object-fit: cover; display: block; }
|
||||
.au-gps__wide { max-width: 1000px; margin: 100px auto 0; padding: 0 40px; }
|
||||
.au-gps__wide-img { width: 100%; display: block; }
|
||||
.au-gps__wide-img:hover { transform: scale(1.04); transition: transform .5s var(--ease); }
|
||||
.au-gps__split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; max-width: 1000px; margin: 100px auto 0; padding: 0 40px; }
|
||||
.au-gps__data { display: flex; flex-direction: column; }
|
||||
.au-gps__viewport { overflow: hidden; border-radius: 8px; cursor: grab; touch-action: pan-y; }
|
||||
.au-gps__viewport.dragging { cursor: grabbing; }
|
||||
.au-gps__track { display: flex; transition: transform .55s cubic-bezier(.22,1,.36,1); will-change: transform; }
|
||||
.au-gps__data-card { flex: 0 0 100%; }
|
||||
.au-gps__data-img { width: 100%; aspect-ratio: 16/10; border-radius: 8px; background-size: cover; background-position: center; }
|
||||
.au-gps__data-body { padding: 16px 4px 0; }
|
||||
.au-gps__data-body h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #111; margin-bottom: 8px; }
|
||||
.au-gps__data-body p { font-size: .92rem; color: #555; line-height: 1.6; }
|
||||
.au-gps__dots { display: flex; justify-content: flex-start; gap: 10px; margin-top: 20px; }
|
||||
.au-gps__dots button { width: 28px; height: 3px; border: 0; border-radius: 2px; background: #d9dee6; cursor: pointer; padding: 0; transition: background .3s, width .3s; }
|
||||
.au-gps__dots button.active { background: var(--orange-500); width: 44px; }
|
||||
.au-gps__feature { position: relative; border-radius: 8px; overflow: hidden; min-height: 400px; }
|
||||
.au-gps__feature-img { position: absolute; inset: 0; background: url(../image/about-us/right.jpg) center/cover no-repeat; display: flex; align-items: center; padding: 40px 44px; }
|
||||
.au-gps__feature-title {
|
||||
font-family: var(--font-display); font-weight: 800;
|
||||
font-size: clamp(1.6rem,2.6vw,2.2rem);
|
||||
background: linear-gradient(88.61deg,#FF6000 7.43%,#FFA557 98.82%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent; margin-bottom: 18px;
|
||||
}
|
||||
.au-gps__feature-list { position: relative; border-left: 1px solid #fff; padding-left: 26px; }
|
||||
.au-gps__feature-list p {
|
||||
font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
|
||||
color: #fff; line-height: 3.5; padding: 0; text-shadow: 0 1px 10px rgba(0,0,0,.45);
|
||||
}
|
||||
.au-gps__feature-list p + p { margin-top: 12px; }
|
||||
|
||||
/* ============================================================
|
||||
reduced-motion:解除钉屏,内容静态
|
||||
============================================================ */
|
||||
html.rm .au-pin { height: auto; }
|
||||
html.rm .au-screen { position: relative; height: auto; min-height: 100vh; }
|
||||
html.rm .au-bg, html.rm .au-inner, html.rm .au-corner-img, html.rm .au-mask,
|
||||
html.rm .au-slogan, html.rm .au-slogan-cn, html.rm .au-sec-head,
|
||||
html.rm .au-zoom-img, html.rm .au-zoom-mask, html.rm .au-reveal,
|
||||
html.rm .au-logo-big, html.rm .au-reveal-text { transition: none !important; opacity: 1 !important; transform: none !important; }
|
||||
html.rm .au-mask { opacity: .55 !important; }
|
||||
html.rm .au-zoom-mask { opacity: 0 !important; }
|
||||
html.rm .au-slogan-layer { position: relative; padding: 14vh 32px 10vh; }
|
||||
html.rm .au-reveal { position: relative; padding: 12vh 32px 10vh; }
|
||||
|
||||
/* ============================================================
|
||||
响应式
|
||||
============================================================ */
|
||||
@media (max-width: 760px) {
|
||||
.au-gps { padding: 80px 0; }
|
||||
.au-gps__cards { grid-template-columns: 1fr 1fr; }
|
||||
.au-gps__split { grid-template-columns: 1fr; }
|
||||
.au-gps__wide, .au-gps__split { margin-top: 60px; }
|
||||
/* grid/flex children must shrink below content min-width, else the carousel
|
||||
track stretches the 1fr column past the viewport (same fix as about-us.css) */
|
||||
.au-gps__split > *, .au-gps__data, .au-gps__viewport { min-width: 0; max-width: 100%; }
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
/* ============================================================
|
||||
About Us — pinned sections with scroll-linked transitions
|
||||
#au-1 : mask darkens + intro/corner hide + slogan rises in
|
||||
#au-3 : photo zooms to fullscreen + fades, then logo/text reveal
|
||||
============================================================ */
|
||||
|
||||
.au-main { position: relative; z-index: 1; }
|
||||
.site-footer { position: relative; z-index: 3; }
|
||||
|
||||
/* CSS sticky pin (native GPU compositing — smoother than JS pin) */
|
||||
.au-pin { position: relative; height: 300vh; }
|
||||
.au-screen {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
#au-1 { z-index: 1; }
|
||||
#au-3 { z-index: 2; }
|
||||
|
||||
/* full-bleed photo + base veil */
|
||||
.au-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
|
||||
.au-bg::after { content: ""; position: absolute; inset: 0; background: rgba(1,15,30,0.30); }
|
||||
|
||||
.au-corner-img { position: absolute; right: 0; bottom: 0; z-index: 2; height: auto; pointer-events: none; }
|
||||
|
||||
.au-inner {
|
||||
position: relative; z-index: 1;
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 60px auto 0;
|
||||
padding: var(--header-h) 32px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
}
|
||||
.au-text { margin-left: 0; margin-right: auto; }
|
||||
|
||||
/* mask overlay — fades in (clear -> dark), scroll-linked */
|
||||
.au-mask {
|
||||
position: absolute; inset: 0; z-index: 3;
|
||||
background: rgba(1,15,30,0.55);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* slogan overlay — center-lower; slogan rises in (NIO-style) via .is-current */
|
||||
.au-slogan-layer {
|
||||
position: absolute; inset: 0; z-index: 4;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: var(--header-h) 32px;
|
||||
padding-top: 16vh;
|
||||
text-align: center; color: #fff;
|
||||
}
|
||||
|
||||
.au-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(2rem, 5vw, 2.4rem);
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
margin-bottom: 26px;
|
||||
text-shadow: 0 2px 20px rgba(0,0,0,0.45);
|
||||
}
|
||||
.au-text {
|
||||
font-size: clamp(1rem, 1.4vw, 1.1rem);
|
||||
line-height: 1.85;
|
||||
color: rgba(255,255,255,0.92);
|
||||
max-width: 820px;
|
||||
text-shadow: 0 1px 12px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.au-slogan {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: clamp(2.2rem, 6vw, 2.6rem);
|
||||
line-height: 1.1;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 24px rgba(0,0,0,0.5);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.au-slogan-cn {
|
||||
font-size: clamp(1.2rem, 2.4vw, 2rem);
|
||||
letter-spacing: 0.3em;
|
||||
color: var(--orange-300);
|
||||
text-shadow: 0 1px 12px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* slogan entry/exit is driven by the GSAP timeline in about-us.js */
|
||||
|
||||
/* ============================================================
|
||||
Section #au-3 — Strong Resources: image zoom-fade -> logo reveal
|
||||
============================================================ */
|
||||
|
||||
.au-zoom-img {
|
||||
position: absolute; left: 50%; top: 68%;
|
||||
width: min(711px, 82vw); height: min(560px, 58vh);
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
transform-origin: center;
|
||||
background-size: cover; background-position: center;
|
||||
z-index: 1;
|
||||
box-shadow: 0 24px 70px rgba(0,0,0,0.45);
|
||||
}
|
||||
|
||||
/* black veil over the zooming photo — fades IN instead of fading the photo out */
|
||||
.au-zoom-mask {
|
||||
position: absolute; inset: 0; z-index: 2;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* title + intro (top, centered, not vertically centered) */
|
||||
.au-sec-head {
|
||||
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
|
||||
padding: calc(var(--header-h) + 56px) 32px 0;
|
||||
text-align: center; color: #fff;
|
||||
}
|
||||
.au-sec-title {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: clamp(1.8rem, 4vw, 2rem); line-height: 1.1;
|
||||
color: #202020; margin-bottom: 18px;
|
||||
}
|
||||
.au-sec-text {
|
||||
font-size: clamp(0.95rem, 1.3vw, 1rem); line-height: 1.8;
|
||||
color: #202020; max-width: 760px; margin: 0 auto;
|
||||
}
|
||||
|
||||
/* centered logo + text reveal */
|
||||
.au-reveal {
|
||||
position: absolute; inset: 0; z-index: 4;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
padding: 32px; text-align: center; color: #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
.au-logo-big { display: flex; align-items: center; justify-content: center; margin-bottom: 28px; }
|
||||
.au-logo-big .logo-img { height: clamp(44px, 6vw, 76px); }
|
||||
.au-reveal-text {
|
||||
font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.85;
|
||||
color: rgba(255,255,255,0.92); max-width: 720px;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.au-inner { text-align: left; }
|
||||
.au-gps__cards { grid-template-columns: 1fr 1fr; }
|
||||
.au-gps__split { grid-template-columns: 1fr; }
|
||||
.au-gps { padding: 80px 0; }
|
||||
.au-gps__wide, .au-gps__split { margin-top: 60px; }
|
||||
/* grid/flex children must shrink below content min-width, else the carousel
|
||||
track stretches the 1fr column to 393px and overflows the viewport */
|
||||
.au-gps__split > *, .au-gps__data, .au-gps__viewport { min-width: 0; max-width: 100%; }
|
||||
}
|
||||
|
||||
/* initial states + GPU compositing for smooth scroll */
|
||||
.au-bg { transform: scale(1.04); }
|
||||
.au-bg, .au-inner, .au-corner-img, .au-mask,
|
||||
.au-zoom-img, .au-zoom-mask, .au-sec-head, .au-reveal { will-change: transform, opacity; }
|
||||
|
||||
/* ============================================================
|
||||
Global Presence, Local Service — white background section
|
||||
============================================================ */
|
||||
.au-gps {
|
||||
background: #ffffff;
|
||||
padding: 120px 0;
|
||||
}
|
||||
.au-gps__inner {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 40px;
|
||||
}
|
||||
.au-gps__title {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
|
||||
letter-spacing: -0.01em; color: #111; margin-bottom: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.au-gps__text {
|
||||
font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.8;
|
||||
color: #333; max-width: 900px; margin-bottom: 60px;
|
||||
text-align: center; margin-inline: auto;
|
||||
}
|
||||
|
||||
/* 4 images in a row (plain, no labels) */
|
||||
.au-gps__cards {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
|
||||
}
|
||||
.au-gps__card-img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* wide image */
|
||||
.au-gps__wide {
|
||||
max-width: 1000px; margin: 100px auto 0; padding: 0 40px;
|
||||
}
|
||||
.au-gps__wide-img {
|
||||
width: 100%; display: block;
|
||||
}
|
||||
.au-gps__wide-img:hover {
|
||||
transform: scale(1.04);
|
||||
transition: transform .5s var(--ease);
|
||||
}
|
||||
|
||||
.au-gps__split {
|
||||
display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px;
|
||||
max-width: 1000px; margin: 100px auto 0; padding: 0 40px;
|
||||
}
|
||||
.au-gps__data { display: flex; flex-direction: column; }
|
||||
.au-gps__viewport { overflow: hidden; border-radius: 8px; }
|
||||
.au-gps__track {
|
||||
display: flex;
|
||||
transition: transform .55s cubic-bezier(.22,1,.36,1);
|
||||
will-change: transform;
|
||||
}
|
||||
.au-gps__data-card { flex: 0 0 100%; }
|
||||
.au-gps__data-img {
|
||||
width: 100%; aspect-ratio: 16 / 10; border-radius: 8px;
|
||||
background-size: cover; background-position: center;
|
||||
}
|
||||
.au-gps__data-body { padding: 16px 4px 0; }
|
||||
.au-gps__data-body h4 {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: 1.15rem; color: #111; margin-bottom: 8px;
|
||||
}
|
||||
.au-gps__data-body p { font-size: 0.92rem; color: #555; line-height: 1.6; }
|
||||
/* carousel pager — horizontal bars, left-aligned */
|
||||
.au-gps__dots {
|
||||
display: flex; justify-content: flex-start; gap: 10px; margin-top: 20px;
|
||||
}
|
||||
.au-gps__dots button {
|
||||
width: 28px; height: 3px;
|
||||
border: 0; border-radius: 2px;
|
||||
background: #d9dee6;
|
||||
cursor: pointer; padding: 0;
|
||||
transition: background .3s, width .3s;
|
||||
}
|
||||
.au-gps__dots button.active { background: var(--orange-500); width: 44px; }
|
||||
.au-gps__feature {
|
||||
position: relative; border-radius: 8px; overflow: hidden;
|
||||
min-height: 400px;
|
||||
}
|
||||
.au-gps__feature-img {
|
||||
position: absolute; inset: 0;
|
||||
background: url(../image/about-us/right.jpg) center / cover no-repeat;
|
||||
display: flex; align-items: center;
|
||||
padding: 40px 44px;
|
||||
}
|
||||
/* title sits outside the vertical line; the line spans only the list below it */
|
||||
.au-gps__feature-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.6rem, 2vw, 1.5rem);
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.01em;
|
||||
background: linear-gradient(88.61deg, #FF6000 7.43%, #FFA557 98.82%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.au-gps__feature-list {
|
||||
position: relative;
|
||||
padding-left: 26px;
|
||||
}
|
||||
/* vertical line drawn as a pseudo element so it stops exactly at the
|
||||
first / last text line instead of spanning the whole padded box */
|
||||
.au-gps__feature-list::before {
|
||||
content: ""; position: absolute; left: 0;
|
||||
top: 17px; bottom: 17px; /* ≈ one half-leading (line-height 3) */
|
||||
width: 1px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.au-gps__feature-list p {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1.05rem;
|
||||
color: #ffffff;
|
||||
line-height: 3.5;
|
||||
padding: 0;
|
||||
text-shadow: 0 1px 10px rgba(0,0,0,0.45);
|
||||
}
|
||||
.au-gps__feature-list p + p { margin-top: 12px; }
|
||||
|
||||
.au-slogan, .au-slogan-cn {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 50px, 0);
|
||||
transition: opacity .3s linear, transform .3s linear;
|
||||
}
|
||||
.au-slogan-layer.is-current .au-slogan {
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
transition: opacity .6s linear .3s, transform .6s linear .3s;
|
||||
}
|
||||
.au-slogan-layer.is-current .au-slogan-cn {
|
||||
opacity: 1;
|
||||
transform: translateZ(0);
|
||||
transition: opacity .6s linear .5s, transform .6s linear .5s;
|
||||
}
|
||||
@@ -0,0 +1,630 @@
|
||||
/* ============================================================
|
||||
business-pages.css — page-specific styles for the 5 business
|
||||
sub-pages (loaded AFTER business.css, which owns all shared
|
||||
components: hero, intro, caps, view-more, reveal, typography).
|
||||
Page hooks on <body>:
|
||||
.is-ae auto-export .is-bm building-materials
|
||||
.is-as after-sales .is-gl global-logistics
|
||||
.is-dh development-history
|
||||
============================================================ */
|
||||
|
||||
.bp-cap__ico { width: 52px; height: 52px; object-fit: contain; display: block; }
|
||||
.bp-cap__label { font-size: 0.82rem; letter-spacing: 0.01em; line-height: 1.35; }
|
||||
|
||||
/* ---------- per-page hero overrides ---------- */
|
||||
.is-ae .bp-hero__bg { object-position: center 36%; }
|
||||
/* .is-ae .bp-hero .btn-explore { background: #000; color: #fff; } */
|
||||
/* .is-ae .bp-hero .btn-explore:hover { background: #ffe6c8; color: #0b141d; border-color: #ffe6c8; } */
|
||||
|
||||
.is-as .bp-hero__sub {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: clamp(1.2rem, 2.6vw, 2rem);
|
||||
letter-spacing: 0.06em;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 18px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.is-bm .bp-hero__bg { object-position: center right; }
|
||||
|
||||
|
||||
.is-gl .bp-cap__label { line-height: 0.35; }
|
||||
|
||||
|
||||
/* ############################################################
|
||||
AUTO EXPORT
|
||||
############################################################ */
|
||||
|
||||
/* 3. VEHICLE SHOWCASE — centered title + wide image
|
||||
============================================================ */
|
||||
.ae-showcase { padding: 30px 0 60px; }
|
||||
.ae-showcase__head { margin-bottom: 56px; }
|
||||
|
||||
.ae-showcase__img { width: 100%; object-fit: cover; display: block; }
|
||||
|
||||
/* ============================================================
|
||||
4. BRANDS — 4-column logo wall
|
||||
============================================================ */
|
||||
.ae-brands { padding: 40px 0 120px; }
|
||||
.ae-brands__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.ae-brand { display: flex; flex-direction: column; align-items: center; }
|
||||
.ae-brand__card {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
|
||||
}
|
||||
.ae-brand:hover .ae-brand__card {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
.ae-brand__logo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.ae-brand__name {
|
||||
margin-top: 22px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: clamp(1.2rem, 4vw, 2rem);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: #2a3340;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
5. AUTHORIZED VEHICLE MODELS — text + tag pills
|
||||
============================================================ */
|
||||
.ae-models {
|
||||
padding: 0px 0 110px;
|
||||
}
|
||||
/* .ae-models__inner { max-width: 920px; } */
|
||||
.ae-models__body {margin-top: 8px; }
|
||||
|
||||
/* ============================================================
|
||||
6 + 7. REGIONAL SUPPORT → WORLD MAP
|
||||
============================================================ */
|
||||
.ae-region { padding: 120px 0 60px; }
|
||||
.ae-region__head { text-align: center; margin-bottom: 72px; }
|
||||
|
||||
.ae-map {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
aspect-ratio: 1135 / 647;
|
||||
}
|
||||
.ae-map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* SVG markers overlay — cycles one active marker at a time (main.js) */
|
||||
.ae-map__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* markers — entrance pops in with a staggered double ripple; exit reverses into
|
||||
the base states (dot shrinks, label slides away, ripples decay). Children own
|
||||
their hidden base states; the group itself never toggles opacity. */
|
||||
.ae-map .marker .label {
|
||||
fill: #000;
|
||||
font-weight: 700;
|
||||
paint-order: stroke;
|
||||
stroke: rgba(255, 255, 255, .08);
|
||||
stroke-width: 1px;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
transition: opacity .3s ease, transform .3s ease;
|
||||
}
|
||||
.ae-map .marker .dot {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
transform: scale(.55);
|
||||
transition: opacity .28s ease, transform .28s ease;
|
||||
}
|
||||
.ae-map .marker .pulse {
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
vector-effect: non-scaling-stroke;
|
||||
opacity: 0;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
transition: opacity .4s ease;
|
||||
}
|
||||
.ae-map .marker.orange .dot { fill: #ff8738; }
|
||||
.ae-map .marker.orange .pulse { stroke: #ff8738; }
|
||||
.ae-map .marker.yellow .dot { fill: #ffd21c; }
|
||||
.ae-map .marker.yellow .pulse { stroke: #ffd21c; }
|
||||
/* exit choreography — .out is added by main.js on deactivate */
|
||||
.ae-map .marker.out .dot { animation: ae-dotOut .28s ease both; }
|
||||
.ae-map .marker.out .label { animation: ae-labelOut .3s ease both; }
|
||||
.ae-map .marker.out .pulse { animation: ae-haloOut .45s ease-out both; }
|
||||
|
||||
.ae-map .marker.active .dot {
|
||||
animation: ae-dotIn .3s cubic-bezier(.2,1.5,.35,1) both,
|
||||
ae-breatheS 3.2s .8s ease-in-out infinite;
|
||||
}
|
||||
.ae-map .marker.yellow.active .dot { animation-name: ae-dotIn, ae-breatheL; }
|
||||
.ae-map .marker.active .label { animation: ae-textIn .28s .06s ease both; }
|
||||
.ae-map .marker.active .pulse { animation: ae-mapPulse .9s .15s ease-out infinite; }
|
||||
.ae-map .marker.active .pulse.p2 { animation-delay: .6s; }
|
||||
|
||||
@keyframes ae-dotIn {
|
||||
from { opacity: 0; transform: scale(.2); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes ae-textIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes ae-mapPulse {
|
||||
0% { opacity: .65; transform: scale(.45); }
|
||||
75% { opacity: 0; transform: scale(2.25); }
|
||||
100% { opacity: 0; transform: scale(2.25); }
|
||||
}
|
||||
@keyframes ae-breatheS {
|
||||
0%, 100% { r: 5.5px; }
|
||||
50% { r: 6.3px; }
|
||||
}
|
||||
@keyframes ae-breatheL {
|
||||
0%, 100% { r: 6px; }
|
||||
50% { r: 6.9px; }
|
||||
}
|
||||
@keyframes ae-dotOut {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(.55); }
|
||||
}
|
||||
@keyframes ae-labelOut {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(5px); }
|
||||
}
|
||||
@keyframes ae-haloOut {
|
||||
from { opacity: .5; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes ae-pulse {
|
||||
0%,100% { box-shadow: 0 0 0 5px rgba(255,138,30,.2), 0 0 16px rgba(255,138,30,.7); }
|
||||
50% { box-shadow: 0 0 0 11px rgba(255,138,30,.05), 0 0 24px rgba(255,138,30,.95); }
|
||||
}
|
||||
/* ---------- page-specific responsive ---------- */
|
||||
@media (max-width: 1024px) {
|
||||
.ae-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.ae-showcase { padding: 10px 0 90px; }
|
||||
.ae-brands { padding: 30px 0 90px; }
|
||||
.ae-models { padding: 90px 0; }
|
||||
.ae-region { padding: 90px 0 40px; }
|
||||
.ae-region__head { margin-bottom: 48px; }
|
||||
/* on narrow screens the floating labels crowd the map — show a legend instead */
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.ae-brands__grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ############################################################
|
||||
AFTER-SALES
|
||||
############################################################ */
|
||||
|
||||
/* ============================================================
|
||||
3. SERVICE CONTENTS — centered title + 6 circular services (3 × 2)
|
||||
============================================================ */
|
||||
.as-services {
|
||||
padding: 100px 0 120px;
|
||||
}
|
||||
.as-services__head { text-align: center; margin-bottom: 76px; }
|
||||
.as-services__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 64px 44px;
|
||||
justify-items: center;
|
||||
}
|
||||
.as-svc {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 24px;
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
}
|
||||
.as-svc__ring img { width: 100%; height: auto; display: block; transition: transform .45s var(--ease); }
|
||||
/* decorative dashed orbit ring */
|
||||
.as-svc:hover .as-svc__ring img { transform: scale(1.08); }
|
||||
.as-svc__name {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.01em;
|
||||
text-align: center;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
4. REGIONAL SUPPORT — centered title + 3 location cards
|
||||
============================================================ */
|
||||
.as-region { padding: 120px 0 120px; }
|
||||
.as-region__head { text-align: center; margin-bottom: 72px; }
|
||||
.as-region__head .bp-body { margin-top: 8px; margin-inline: auto; max-width: 1000px; }
|
||||
|
||||
.as-region__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
.as-loc {
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
|
||||
}
|
||||
.as-loc__media { aspect-ratio: 16 / 10; overflow: hidden; }
|
||||
.as-loc__media img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform .6s var(--ease);
|
||||
}
|
||||
.as-loc:hover .as-loc__media img { transform: scale(1.06); }
|
||||
/* location card title — city on line 1, country on line 2, identical type */
|
||||
.as-loc__title {
|
||||
padding: 22px 20px 26px;
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.02em;
|
||||
color: #404040;
|
||||
}
|
||||
|
||||
/* ---------- page-specific responsive ---------- */
|
||||
@media (max-width: 1024px) {
|
||||
.as-region__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.as-services { padding: 80px 0 90px; }
|
||||
.as-services__head { margin-bottom: 52px; }
|
||||
.as-region { padding: 90px 0 100px; }
|
||||
.as-region__head { margin-bottom: 48px; }
|
||||
.as-services__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 20px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.as-services__grid { grid-template-columns: 1fr; margin-inline: auto; }
|
||||
}
|
||||
|
||||
/* ---------- reduced motion ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.as-loc__media img { animation: none !important; }
|
||||
}
|
||||
|
||||
/* ############################################################
|
||||
BUILDING MATERIALS
|
||||
############################################################ */
|
||||
|
||||
/* ============================================================
|
||||
5. LARGE INVENTORY IMAGE — stacked corrugated pipe stock
|
||||
============================================================ */
|
||||
.bm-stock { padding: 10px 0 0; }
|
||||
.bm-stock__frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.bm-stock__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
6 + 7. PRODUCT CATEGORIES — centered title + 5-col cards
|
||||
============================================================ */
|
||||
.bm-products { padding: 120px 0 40px; }
|
||||
.bm-products__head { text-align: center; margin-bottom: 64px; }
|
||||
|
||||
.bm-products__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.bm-card { display: flex; flex-direction: column; }
|
||||
|
||||
.bm-card__img img {
|
||||
width: 100%; height: 100%; object-fit: contain; display: block;
|
||||
transition: transform .5s var(--ease);
|
||||
}
|
||||
.bm-card:hover .bm-card__img img { transform: scale(1.06); }
|
||||
.bm-card__name {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-mid);
|
||||
transition: color .25s;
|
||||
}
|
||||
.bm-card:hover .bm-card__name { color: var(--orange-700); }
|
||||
|
||||
/* ---------- page-specific responsive ---------- */
|
||||
@media (max-width: 1024px) {
|
||||
.bm-products__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.bm-products { padding: 90px 0 30px; }
|
||||
.bm-products__head { margin-bottom: 44px; }
|
||||
.bm-stock__frame { padding: 0 18px; }
|
||||
.bm-products__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.bm-products__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
}
|
||||
|
||||
/* ############################################################
|
||||
GLOBAL LOGISTICS
|
||||
############################################################ */
|
||||
|
||||
/* ============================================================
|
||||
PORT IMAGE — full-width port / cargo-ship photo
|
||||
============================================================ */
|
||||
.gl-port { padding: 10px 0 0; }
|
||||
.gl-port__frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.gl-port__img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: 0 30px 70px rgba(16,24,40,0.18);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SERVICE CONTENTS — centered title + 2×3 round cards
|
||||
============================================================ */
|
||||
.gl-services { padding: 120px 0 40px; }
|
||||
.gl-services__head { text-align: center; margin-bottom: 64px; }
|
||||
|
||||
.gl-services__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 48px 40px;
|
||||
}
|
||||
.gl-svc { display: flex; flex-direction: column; align-items: center; }
|
||||
/* service icon = self-contained round artwork (image/global-logistics/Service*.png),
|
||||
shown bare like after-sales — no extra CSS circle around it */
|
||||
.gl-svc__ico {
|
||||
width: clamp(140px, 13vw, 190px);
|
||||
transition: transform .4s var(--ease);
|
||||
}
|
||||
.gl-svc__ico img { width: 100%; height: auto; display: block; }
|
||||
.gl-svc:hover .gl-svc__ico { transform: translateY(-6px); }
|
||||
.gl-svc__name {
|
||||
margin-top: 22px;
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-dark);
|
||||
transition: color .25s;
|
||||
}
|
||||
.gl-svc:hover .gl-svc__name { color: var(--orange-700); }
|
||||
|
||||
/* ---------- page-specific responsive ---------- */
|
||||
@media (max-width: 760px) {
|
||||
.gl-services { padding: 90px 0 30px; }
|
||||
.gl-services__head { margin-bottom: 44px; }
|
||||
.gl-port__frame { padding: 0 18px; }
|
||||
.gl-services__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
|
||||
.gl-svc__ico { width: 140px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.gl-services__grid { grid-template-columns: 1fr; gap: 36px; }
|
||||
}
|
||||
|
||||
/* ############################################################
|
||||
DEVELOPMENT HISTORY
|
||||
############################################################ */
|
||||
|
||||
/* ============================================================
|
||||
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; }
|
||||
.dh-hero .bp-hero__copy { align-items: stretch; } /* spacing now comes from business.css split layout */
|
||||
.dh-hero__title {
|
||||
-webkit-text-fill-color: var(--orange-500);
|
||||
color: var(--orange-500);
|
||||
background: none;
|
||||
width: 100%;
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 0.95;
|
||||
text-shadow: 0 8px 44px rgba(0,0,0,.5);
|
||||
}
|
||||
.dh-hero__title .dh-plus { color: var(--orange-300); }
|
||||
|
||||
.dh-line { display: block; }
|
||||
.dh-line--lg {
|
||||
font-size: clamp(2.75rem, 11vw, 9rem);
|
||||
text-align: left;
|
||||
margin-bottom: 2rem; /* let the two lines interlock slightly */
|
||||
}
|
||||
.dh-line--sm {
|
||||
font-size: clamp(1.8rem, 7vw, 6rem);
|
||||
text-align: right;
|
||||
margin-top: -0.06em; /* let the two lines interlock slightly */
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
2. DEVELOPMENT HISTORY — title + folded two-row timeline
|
||||
Each row = blocks separated by a date node. A node is
|
||||
CALENDAR ICON → vertical line → DOT (top to bottom).
|
||||
Row 1 and row 2 are joined by one such dividing node.
|
||||
============================================================ */
|
||||
.dh-timeline-section { padding: 110px 0 130px; }
|
||||
|
||||
.dh-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
.dh-head__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: clamp(2.4rem, 5vw, 4rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--orange-700);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ---------- folded route ---------- */
|
||||
.dh-route { position: relative; }
|
||||
|
||||
.dh-rail {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.dh-rail--2 { max-width: 760px; margin-left: auto; margin-right: auto; }
|
||||
|
||||
.dh-stage {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
}
|
||||
.dh-stage__card {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.dh-stage__img {
|
||||
flex-shrink: 0;
|
||||
/* width: 116px; */
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 14px 30px rgba(16,24,40,.14);
|
||||
}
|
||||
.dh-stage__body { padding-top: 2px; }
|
||||
.dh-stage__year {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--text-dark);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.dh-stage__text {
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-mid);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dh-node {
|
||||
flex: 0 0 auto;
|
||||
width: 56px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -60px;
|
||||
margin-bottom: -60px;
|
||||
}
|
||||
/* mirror the two rows around the timeline axis:
|
||||
row 1 (above the axis) reads bottom→top so the CALENDAR hugs the axis below it;
|
||||
row 2 (below the axis) reads top→bottom so the CALENDAR hugs the axis above it */
|
||||
.dh-rail--1 .dh-node { flex-direction: column-reverse; }
|
||||
.dh-node__cal {
|
||||
flex: 0 0 auto;
|
||||
width: 34px; height: 34px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.dh-node__cal svg { width: 17px; height: 17px; }
|
||||
.dh-node__line {
|
||||
flex: 1 1 auto;
|
||||
width: 1px;
|
||||
margin: 10px 0;
|
||||
background: #000;
|
||||
}
|
||||
.dh-node__dot {
|
||||
flex: 0 0 auto;
|
||||
width: 12px; height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-dark);
|
||||
}
|
||||
|
||||
.dh-fold {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
.dh-fold__line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.dh-timeline-section { padding: 90px 0 100px; }
|
||||
.dh-head { margin-bottom: 64px; }
|
||||
.dh-stage__img { width: 96px; }
|
||||
.dh-node { width: 44px; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
/* stack blocks; each node becomes a centered horizontal divider */
|
||||
.dh-rail { flex-direction: column; }
|
||||
.dh-rail--2 { max-width: none; }
|
||||
.dh-stage { flex: none; }
|
||||
.dh-node,
|
||||
.dh-rail--1 .dh-node {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.dh-node__cal { position: relative; z-index: 1; }
|
||||
.dh-node__line {
|
||||
position: absolute;
|
||||
top: 50%; left: 0; right: 0;
|
||||
width: auto; height: 2px;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.dh-node__dot { display: none; }
|
||||
.dh-fold { height: 56px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.dh-stage__card { flex-direction: column; gap: 12px; }
|
||||
.dh-stage__img { width: 100%; }
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
/* ============================================================
|
||||
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
|
||||
============================================================ */
|
||||
|
||||
/* ---------- page base (light theme for these sub-pages) ---------- */
|
||||
body.is-bp { background: #ffffff; color: var(--text-dark); font-family: var(--font-body); }
|
||||
.is-bp .bp { background: #ffffff; }
|
||||
|
||||
/* ---------- 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 [data-reveal]:nth-child(3),
|
||||
.bp-intro__text [data-reveal]:nth-child(4) { transition-delay: .08s; }
|
||||
|
||||
/* ---------- section typography ---------- */
|
||||
.bp-h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.bp-center { text-align: center; }
|
||||
.bp-body {
|
||||
font-size: clamp(1rem, 1.1vw, 1.08rem);
|
||||
line-height: 1.85;
|
||||
color: var(--text-mid);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HERO BANNER
|
||||
Default: copy left-aligned + vertically centered.
|
||||
Add `.bp-hero--center` on the <section> to center the copy (auto-export).
|
||||
Background is always a child <img class="bp-hero__bg">.
|
||||
============================================================ */
|
||||
.bp-hero {
|
||||
position: relative;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
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 */
|
||||
}
|
||||
.bp-hero__scene { position: absolute; inset: 0; z-index: 0; background: #060a12; overflow: hidden; }
|
||||
.bp-hero__bg {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transform: scale(1.04);
|
||||
animation: bp-hero-zoom 16s var(--ease) forwards;
|
||||
}
|
||||
@keyframes bp-hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }
|
||||
|
||||
/* readability veil (default 2-layer; pages may override) */
|
||||
.bp-hero__veil {
|
||||
position: absolute; inset: 0; z-index: 2;
|
||||
/* background:
|
||||
linear-gradient(180deg, rgba(6,12,22,.62) 0%, rgba(6,12,22,.2) 30%, rgba(6,12,22,.32) 62%, rgba(6,12,22,.7) 100%),
|
||||
radial-gradient(72% 60% at 50% 46%, rgba(6,12,22,.42), transparent 70%); */
|
||||
}
|
||||
|
||||
.bp-hero__copy {
|
||||
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 */
|
||||
}
|
||||
.bp-hero--center .bp-hero__copy { text-align: center; align-items: center; }
|
||||
|
||||
.bp-hero__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
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;
|
||||
}
|
||||
.bp-hero__sub {
|
||||
margin-top: 22px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: clamp(1.05rem, 2.6vw, 2rem);
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.02em;
|
||||
color: rgba(255,255,255,.94);
|
||||
text-shadow: 0 2px 18px rgba(0,0,0,.55);
|
||||
}
|
||||
.bp-hero__tag {
|
||||
margin-top: 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 400;
|
||||
font-size: clamp(0.98rem, 1.4vw, 1.18rem);
|
||||
letter-spacing: 0.02em;
|
||||
color: rgba(255,255,255,.86);
|
||||
/* text-shadow: 0 2px 14px rgba(0,0,0,.55); */
|
||||
/* max-width: 620px; */
|
||||
}
|
||||
.bp-hero .btn-explore { margin-top: auto; }
|
||||
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
.bp-intro__text .bp-h2 { margin-bottom: 34px; }
|
||||
.bp-intro__text .bp-body + .bp-body { margin-top: 22px; }
|
||||
.bp-intro__media { position: relative; }
|
||||
/* works for both a real <img> and a .ph placeholder div */
|
||||
.bp-intro__img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 30px 60px rgba(16,24,40,.16);
|
||||
}
|
||||
|
||||
/* ---------- caps row (auto-export + after-sales): icon + label ---------- */
|
||||
.bp-caps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.bp-cap {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 16px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.bp-cap__label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 0.86rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
VIEW MORE — centered orange link
|
||||
============================================================ */
|
||||
.bp-viewmore { padding: 64px 0 130px; text-align: center; }
|
||||
.bp-viewmore__link {
|
||||
display: inline-flex; align-items: baseline; gap: 6px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 1.25rem;
|
||||
color: var(--orange-700);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--orange-700);
|
||||
transition: color .25s, letter-spacing .25s;
|
||||
}
|
||||
.bp-viewmore__link .plus { font-weight: 800; }
|
||||
.bp-viewmore__link:hover { color: var(--orange-900); letter-spacing: 0.1em; }
|
||||
|
||||
/* ============================================================
|
||||
SHARED RESPONSIVE (page-specific rules live in each page's CSS)
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.bp-intro__grid { grid-template-columns: 1fr; gap: 64px; }
|
||||
.bp-intro__media { max-width: 560px; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.bp-intro { padding: 90px 0 80px; }
|
||||
.bp-hero { min-height: 84vh; }
|
||||
.bp-caps { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.bp-caps { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ---------- reduced motion ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-reveal] { opacity: 1 !important; transform: none !important; }
|
||||
.bp-hero__bg { transform: none !important; animation: none !important; }
|
||||
}
|
||||
+253
@@ -0,0 +1,253 @@
|
||||
/* ============================================================
|
||||
contact.css — Contact Us page
|
||||
Loaded AFTER style.css. Prefix: .ct-* | hooks: body.is-contact, main.ct
|
||||
Sections: page base · hero · inquiry form · map · responsive
|
||||
============================================================ */
|
||||
|
||||
/* ---------- page base (light theme for this page) ---------- */
|
||||
body.is-contact { background: #ffffff; color: var(--text-dark); font-family: var(--font-body); }
|
||||
.is-contact .ct { background: #ffffff; }
|
||||
|
||||
/* ---------- scroll reveal (driven by contact.js) ---------- */
|
||||
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
|
||||
[data-reveal].in { opacity: 1; transform: none; }
|
||||
|
||||
/* ============================================================
|
||||
HERO BANNER — full-bleed office photo + left-aligned title
|
||||
============================================================ */
|
||||
.ct-hero {
|
||||
position: relative;
|
||||
min-height: 66vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
margin-top: var(--header-h); /* banner starts BELOW the fixed nav */
|
||||
}
|
||||
.ct-hero__scene { position: absolute; inset: 0; z-index: 0; background: #060a12; overflow: hidden; }
|
||||
.ct-hero__bg {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 40%;
|
||||
transform: scale(1.04);
|
||||
animation: ct-hero-zoom 16s var(--ease) forwards;
|
||||
}
|
||||
@keyframes ct-hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }
|
||||
|
||||
/* readability veil */
|
||||
.ct-hero__veil {
|
||||
position: absolute; inset: 0; z-index: 2;
|
||||
/* background:
|
||||
linear-gradient(90deg, rgba(6,12,22,.78) 0%, rgba(6,12,22,.42) 42%, rgba(6,12,22,.18) 100%),
|
||||
linear-gradient(180deg, rgba(6,12,22,.5) 0%, rgba(6,12,22,.05) 35%, rgba(6,12,22,.55) 100%); */
|
||||
}
|
||||
|
||||
.ct-hero__copy {
|
||||
position: relative; z-index: 3;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
}
|
||||
.ct-hero__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(2.8rem, 8.5vw, 5rem);
|
||||
line-height: 0.96;
|
||||
letter-spacing: 0.1em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
INQUIRY FORM
|
||||
============================================================ */
|
||||
.ct-form-section { padding: 90px 0 110px; }
|
||||
|
||||
.ct-form { max-width: 980px; margin: 0 auto; }
|
||||
|
||||
.ct-form__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 26px 30px;
|
||||
}
|
||||
|
||||
.ct-field { display: flex; flex-direction: column; }
|
||||
.ct-field--full { grid-column: 1 / -1; }
|
||||
|
||||
.ct-label {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.ct-label::after { content: " *"; color: var(--orange-700); }
|
||||
|
||||
.ct-input,
|
||||
.ct-selectwrap select {
|
||||
width: 100%;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-dark);
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 13px 16px;
|
||||
outline: none;
|
||||
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
|
||||
}
|
||||
.ct-input::placeholder { color: #9aa6b5; }
|
||||
.ct-input:hover,
|
||||
.ct-selectwrap select:hover { border-color: #c9d2de; }
|
||||
.ct-input:focus,
|
||||
.ct-selectwrap select:focus {
|
||||
border-color: var(--orange-500);
|
||||
box-shadow: 0 0 0 4px rgba(255,138,30,.14);
|
||||
}
|
||||
|
||||
.ct-selectwrap { position: relative; }
|
||||
.ct-selectwrap select {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
padding-right: 44px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ct-selectwrap::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 18px; top: 50%;
|
||||
width: 9px; height: 9px;
|
||||
border-right: 2px solid var(--text-mid);
|
||||
border-bottom: 2px solid var(--text-mid);
|
||||
transform: translateY(-70%) rotate(45deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ct-textarea { resize: vertical; min-height: 130px; }
|
||||
|
||||
/* invalid state (after attempted submit) */
|
||||
.ct-form.was-validated .ct-input:invalid,
|
||||
.ct-form.was-validated .ct-selectwrap select:invalid {
|
||||
border-color: #e5484d;
|
||||
box-shadow: 0 0 0 4px rgba(229,72,77,.1);
|
||||
}
|
||||
|
||||
/* submit — orange gradient button (site style) */
|
||||
.ct-submit {
|
||||
margin-top: 36px;
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
background: var(--grad-orange);
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
padding: 15px 34px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 6px 18px rgba(255,106,0,.28);
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
|
||||
}
|
||||
.ct-submit .arrow { transition: transform .25s var(--ease); }
|
||||
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,106,0,.38); }
|
||||
.ct-submit:hover .arrow { transform: translateX(4px); }
|
||||
|
||||
/* success / error note */
|
||||
.ct-note {
|
||||
margin-top: 18px;
|
||||
font-size: 0.92rem;
|
||||
min-height: 1.4em;
|
||||
}
|
||||
.ct-note.is-ok { color: #18794e; }
|
||||
.ct-note.is-err { color: #e5484d; }
|
||||
|
||||
/* ============================================================
|
||||
MAP — map-bg background, framed map in the safe area,
|
||||
dark veil + contact information on top
|
||||
============================================================ */
|
||||
.ct-map {
|
||||
position: relative;
|
||||
background: url(../image/map-bg.png) center / cover no-repeat;
|
||||
padding: 0px 0 90px;
|
||||
}
|
||||
.ct-map__box {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.ct-map__frame {
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
border: 0;
|
||||
display: block;
|
||||
filter: saturate(0.82) contrast(0.98);
|
||||
}
|
||||
/* dark veil over the map */
|
||||
.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%);
|
||||
}
|
||||
/* contact information, vertically centered over the veiled map */
|
||||
.ct-map__info {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
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);
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||||
line-height: 1.15;
|
||||
color: #000;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.ct-map__item {
|
||||
display: flex; align-items: flex-start; gap: 14px; /* icon top-aligns with the label line */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ct-map__item:last-child { margin-bottom: 0; }
|
||||
.ct-map__ico {
|
||||
width: 22px; height: auto;
|
||||
flex-shrink: 0; display: block;
|
||||
margin-top: 1px; /* optical alignment against the small-caps label */
|
||||
}
|
||||
.ct-map__item dt {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.72);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.ct-map__item dd {
|
||||
font-size: clamp(1rem, 1.3vw, 1.15rem);
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.ct-hero { min-height: 58vh; }
|
||||
.ct-form-section { padding: 72px 0 90px; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.ct-form__grid { grid-template-columns: 1fr; gap: 22px; }
|
||||
.ct-hero { min-height: 54vh; }
|
||||
.ct-form-section { padding: 56px 0 72px; }
|
||||
.ct-submit { width: 100%; justify-content: center; }
|
||||
.ct-map { padding: 48px 0 64px; }
|
||||
.ct-map__frame { height: 420px; }
|
||||
.ct-map__info { padding: 28px 24px; }
|
||||
}
|
||||
|
||||
/* ---------- reduced motion ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-reveal] { opacity: 1 !important; transform: none !important; }
|
||||
.ct-hero__bg { transform: none !important; animation: none !important; }
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/* Self-hosted fonts (served locally — no external/Google dependency).
|
||||
Inter (400–700) for body, Archivo (500–900) for display. */
|
||||
|
||||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700.woff2) format('woff2'); }
|
||||
|
||||
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/archivo-latin-500.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/archivo-latin-600.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/archivo-latin-700.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/archivo-latin-800.woff2) format('woff2'); }
|
||||
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/archivo-latin-900.woff2) format('woff2'); }
|
||||
@@ -0,0 +1,100 @@
|
||||
/* ============================================================
|
||||
Global Presence — full-page scroll-snap page
|
||||
(linked after style.css; reuses its tokens + .ph-* gradients)
|
||||
============================================================ */
|
||||
|
||||
/* fullpage behaviour is driven by JS (css/global-presence.js) */
|
||||
|
||||
.gp-main { background: transparent; position: relative; z-index: 1; }
|
||||
/* lift footer + header above the fixed background */
|
||||
.site-footer { position: relative; z-index: 2; }
|
||||
|
||||
/* one fixed background shared by the whole page */
|
||||
.gp-pagebg {
|
||||
position: fixed; inset: 0; z-index: 0;
|
||||
background-image: url(../image/presence-bg.jpg);
|
||||
background-size: cover; background-position: center;
|
||||
}
|
||||
|
||||
/* ---------- each screen = one viewport ---------- */
|
||||
.gp-screen {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gp-screen:not(.gp-overview) { align-items: flex-start; }
|
||||
|
||||
/* per-screen overlay tint over the shared background (region screens) */
|
||||
.gp-overlay {
|
||||
position: absolute; inset: 0; z-index: 1;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(14,39,64,0.6) 99.99%);
|
||||
}
|
||||
|
||||
.gp-inner {
|
||||
position: relative; z-index: 2;
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 40px auto;
|
||||
padding: var(--header-h) 32px 0;
|
||||
}
|
||||
.gp-panel { width: 100%; }
|
||||
|
||||
/* decorative corner image (e.g. region map) */
|
||||
.gp-corner-img {
|
||||
position: absolute;
|
||||
right: 48px; bottom: 48px;
|
||||
z-index: 2;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
.gp-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(2.4rem, 6vw, 3.5rem);
|
||||
line-height: 1.02;
|
||||
color: #0b141d;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.gp-title1 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(2.4rem, 6vw, 2.5rem);
|
||||
line-height: 1.02;
|
||||
color: #0b141d;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.gp-lead {
|
||||
color: #1f2d3d;
|
||||
font-size: clamp(1rem, 1.4vw, 1.15rem);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.gp-overview-inner {
|
||||
display: flex; flex-direction: column; align-items: flex-end; text-align: right;
|
||||
}
|
||||
.gp-nav-list { width: min(340px, 60%); margin-top: 8px; }
|
||||
.gp-nav-list li { margin: 0; }
|
||||
.gp-nav-list a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: clamp(1.05rem, 1.8vw, 1.5rem);
|
||||
color: #0b141d;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid rgba(11,20,29,0.25);
|
||||
text-shadow: 0 1px 10px rgba(255,255,255,0.35);
|
||||
transition: color .2s, border-color .2s;
|
||||
}
|
||||
.gp-nav-list a:hover { color: var(--orange-500); border-color: var(--orange-500); }
|
||||
@keyframes gp-wheel { 0% { opacity: 0; top: 6px; } 40% { opacity: 1; } 80% { opacity: 0; top: 16px; } 100% { opacity: 0; } }
|
||||
|
||||
/* ---------- responsive ---------- */
|
||||
@media (max-width: 760px) {
|
||||
.gp-overview-inner { align-items: flex-end; }
|
||||
.gp-corner-img { width: 55vw; right: 12px; bottom: 12px; opacity: .45; }
|
||||
}
|
||||
+434
@@ -0,0 +1,434 @@
|
||||
/* ============================================================
|
||||
mobile.css — 全站移动端适配增强(最后加载,覆盖所有页面)
|
||||
断点:≤768px(手机) · ≤1024px(平板)
|
||||
============================================================ */
|
||||
|
||||
/* ============================================================
|
||||
平板(≤1024px)
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
:root { --header-h: 64px; --container: 100%; }
|
||||
.container { padding-inline: 20px; }
|
||||
|
||||
/* 按钮:触屏最小点击区 */
|
||||
.btn { min-height: 44px; padding-inline: 22px; }
|
||||
|
||||
/* 表单:触摸友好 */
|
||||
.ct-input, .ct-selectwrap select { min-height: 48px; font-size: 16px; }
|
||||
.ct-textarea { font-size: 16px; }
|
||||
|
||||
/* 卡片 hover 效果关闭(触屏无 hover) */
|
||||
.bm-card__img, .ae-brand__card, .news-card { transition: none; }
|
||||
.bm-card:hover .bm-card__img { transform: none; }
|
||||
.ae-brand:hover .ae-brand__card { transform: none; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
手机(≤768px)
|
||||
============================================================ */
|
||||
@media (max-width: 768px) {
|
||||
:root { --header-h: 56px; }
|
||||
|
||||
.container { padding-inline: 16px; }
|
||||
.main-nav{
|
||||
padding: 30px 26px 32px;
|
||||
}
|
||||
|
||||
/* ---------- 首页 hero ---------- */
|
||||
.hero { min-height: auto; padding-top: var(--header-h); }
|
||||
.hero-content { padding-top: 20px; padding-bottom: 30px; }
|
||||
.hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
|
||||
.hero-sub { font-size: 0.85rem; margin-top: 12px; }
|
||||
.hero-tag { font-size: 0.8rem; }
|
||||
.btn-explore { margin-top: 24px; }
|
||||
|
||||
.hero-stats { padding: 20px 0; }
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
|
||||
.stat-num { font-size: clamp(1.3rem, 5vw, 1.8rem); }
|
||||
.stat-label { font-size: 0.62rem; }
|
||||
|
||||
/* ---------- bento 业务格 ---------- */
|
||||
.bento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.cell-banner {
|
||||
grid-column: auto; grid-row: auto;
|
||||
min-height: 120px; padding: 20px;
|
||||
}
|
||||
.banner-title { font-size: 1.3rem; }
|
||||
.cell-media { min-height: 200px; }
|
||||
.cell-title { font-size: 1rem; }
|
||||
.cell-auto { min-height: 200px; }
|
||||
|
||||
/* ---------- 地图 ---------- */
|
||||
.map-wrap { margin: 4px auto 16px; }
|
||||
|
||||
/* ---------- 卡片轮播 ---------- */
|
||||
.network-card { flex: 0 0 82vw; height: 260px; }
|
||||
|
||||
/* ---------- 合作伙伴 ---------- */
|
||||
.partner { padding: 56px 0; }
|
||||
.partner-overlay {
|
||||
padding: 24px 20px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.partner-title { font-size: 1.1rem; }
|
||||
.partner-features { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; margin-top: 20px; }
|
||||
.pf-ico img { width: 40px; height: 40px; }
|
||||
.partner-features strong { font-size: 0.62rem; }
|
||||
|
||||
/* ---------- 新闻 ---------- */
|
||||
.news { padding: 56px 0; }
|
||||
.news-head { margin-bottom: 24px; gap: 12px; }
|
||||
.news-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.news-img { aspect-ratio: 16/9; }
|
||||
.news-title { font-size: 1rem; }
|
||||
.news-meta { font-size: 0.7rem; }
|
||||
|
||||
/* ---------- 页脚 ---------- */
|
||||
.site-footer { padding-top: 36px; }
|
||||
.footer-top {
|
||||
align-items: center; gap: 16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.footer-social { gap: 10px; }
|
||||
.social { width: 38px; height: 38px; }
|
||||
.social svg { width: 15px; height: 15px; }
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 28px 16px;
|
||||
padding: 28px 0;
|
||||
}
|
||||
.footer-intro { grid-column: 1 / -1; }
|
||||
.footer-slogan { font-size: 0.85rem; }
|
||||
.footer-contact { font-size: 0.8rem; }
|
||||
.footer-col h4 { font-size: 0.88rem; margin-bottom: 12px; }
|
||||
.footer-col ul { gap: 8px; font-size: 0.82rem; }
|
||||
.footer-bottom { padding: 16px 0; font-size: 0.75rem; }
|
||||
.footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }
|
||||
|
||||
/* ---------- 业务页 hero(business.css 共享) ---------- */
|
||||
.bp-hero { min-height: 155px; padding-bottom: 30px; }
|
||||
.bp-hero__copy { padding-top: 20px; }
|
||||
.bp-hero__title { font-size: clamp(2rem, 8vw, 3rem); letter-spacing: 0.06em; }
|
||||
.bp-hero__sub { font-size: 0.95rem; margin-top: 12px; }
|
||||
.bp-hero__tag { font-size: 0.82rem; margin-top: 8px; }
|
||||
.bp-hero .btn-explore { margin-top: 22px; }
|
||||
|
||||
/* ---------- development-history 专属(完全覆盖桌面布局) ---------- */
|
||||
.dh-hero { min-height: 155px; }
|
||||
.dh-hero .bp-hero__copy { padding-top: calc(var(--header-h) + 16px); padding-bottom: 20px; }
|
||||
.dh-line--lg { font-size: clamp(2rem, 8vw, 3.2rem); margin-bottom: 0.6rem; }
|
||||
.dh-line--sm { font-size: clamp(1.3rem, 5.5vw, 2.2rem); }
|
||||
.dh-timeline-section { padding: 40px 0 64px; }
|
||||
.dh-head {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 12px; margin-bottom: 36px;
|
||||
}
|
||||
.dh-head__title { font-size: 1.5rem; }
|
||||
.dh-head__arrow { width: 48px; height: 48px; }
|
||||
|
||||
/* 时间线 → Grid 单列(每元素独占一行,彻底解决 flex 重叠) */
|
||||
.dh-route { display: block !important; overflow: visible; }
|
||||
.dh-rail, .dh-rail--1, .dh-rail--2 {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr !important;
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
gap: 0 !important;
|
||||
}
|
||||
.dh-stage {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
flex: none !important;
|
||||
min-width: 0 !important;
|
||||
position: static !important;
|
||||
padding: 12px 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
grid-row: auto !important;
|
||||
clear: both !important;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
/* 节点 → 隐藏原元素,用 stage 的伪元素画分隔线 */
|
||||
.dh-node { display: none !important; }
|
||||
.dh-stage:not(:last-child)::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #d9dee6;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.dh-stage:not(:last-child)::before {
|
||||
content: "📅";
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--surface-light);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
margin-inline: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -19px;
|
||||
box-shadow: 0 0 0 4px var(--surface-light);
|
||||
}
|
||||
.dh-node__cal {
|
||||
position: relative; z-index: 1;
|
||||
width: 32px; height: 32px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--surface-light);
|
||||
border-radius: 50%;
|
||||
padding: 7px;
|
||||
}
|
||||
.dh-node__cal svg { width: 100%; height: 100%; color: var(--orange-700); }
|
||||
.dh-node__line {
|
||||
position: absolute;
|
||||
top: 50%; left: 0; right: 0;
|
||||
width: auto; height: 2px;
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
background: #d9dee6;
|
||||
}
|
||||
.dh-node__dot { display: none !important; }
|
||||
.dh-fold { height: 0 !important; overflow: hidden !important; display: none !important; }
|
||||
.dh-fold__line, .dh-fold__cal { display: none !important; }
|
||||
|
||||
/* 阶段卡片 → 图左文右 */
|
||||
.dh-stage__card {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
gap: 16px;
|
||||
align-items: flex-start !important;
|
||||
width: 100%;
|
||||
}
|
||||
.dh-stage__img {
|
||||
width: 90px !important;
|
||||
height: 90px !important;
|
||||
aspect-ratio: 1 !important;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 6px 18px rgba(16,24,40,.12);
|
||||
}
|
||||
.dh-stage__body { padding-top: 0; flex: 1; min-width: 0; }
|
||||
.dh-stage__year { font-size: 0.95rem; margin-bottom: 6px; }
|
||||
.dh-stage__text { font-size: 0.82rem; line-height: 1.6; }
|
||||
|
||||
/* ---------- 业务页 intro(business.css 共享) ---------- */
|
||||
.bp-intro { padding: 56px 0 48px; }
|
||||
.bp-intro__grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.bp-intro__text .bp-h2 { font-size: 1.6rem; margin-bottom: 20px; }
|
||||
.bp-body { font-size: 0.95rem; }
|
||||
.bp-caps { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; margin-top: 32px; }
|
||||
.bp-cap__ico { width: 42px; height: 42px; }
|
||||
.bp-cap__label { font-size: 0.78rem; }
|
||||
.bp-intro__img { aspect-ratio: 4/3; }
|
||||
|
||||
/* ---------- auto-export 专属 ---------- */
|
||||
.ae-showcase__head { margin-bottom: 32px; }
|
||||
.ae-showcase { padding: 20px 0 64px; }
|
||||
.ae-showcase__img { height: 220px; }
|
||||
.ae-brands { padding: 32px 0 64px; }
|
||||
.ae-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
||||
.ae-brand__name { font-size: 0.82rem; margin-top: 14px; }
|
||||
.ae-models { padding: 64px 0; }
|
||||
.ae-models__tags { gap: 8px; margin-top: 28px; }
|
||||
.ae-models__tags li { font-size: 0.75rem; padding: 7px 12px; }
|
||||
.ae-region { padding: 64px 0 40px; }
|
||||
.ae-region__head { margin-bottom: 32px; }
|
||||
.ae-map { aspect-ratio: 1135 / 647; height: auto; }
|
||||
.ae-marker__label { display: none; }
|
||||
.ae-map__legend { display: flex; margin-top: 16px; }
|
||||
|
||||
/* ---------- building-materials 专属 ---------- */
|
||||
.bm-stock__frame { padding: 0 16px; }
|
||||
.bm-products { padding: 56px 0 24px; }
|
||||
.bm-products__head { margin-bottom: 32px; }
|
||||
.bm-products__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.bm-card__name { font-size: 0.78rem; margin-top: 12px; }
|
||||
.bm-viewmore, .ae-viewmore { padding: 32px 0 72px; }
|
||||
|
||||
/* ---------- after-sales 专属 ---------- */
|
||||
.as-services { padding: 56px 0 64px; }
|
||||
.as-services__head { margin-bottom: 36px; }
|
||||
.as-services__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
|
||||
.as-svc__ring { width: 120px; }
|
||||
.as-svc__name { font-size: 0.85rem; }
|
||||
.as-region { padding: 64px 0 72px; }
|
||||
.as-region__head { margin-bottom: 32px; }
|
||||
.as-region__grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
|
||||
.as-loc__body { padding: 20px 20px 24px; }
|
||||
.as-loc__city { font-size: 1.2rem; }
|
||||
.as-loc__desc { font-size: 0.85rem; }
|
||||
|
||||
/* ---------- global-logistics 专属 ---------- */
|
||||
.gl-services { padding: 56px 0 24px; }
|
||||
.gl-services__head { margin-bottom: 32px; }
|
||||
.gl-services__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
|
||||
.gl-svc__ico { width: 90px; height: 90px; }
|
||||
.gl-svc__name { font-size: 0.85rem; }
|
||||
.gl-port__frame { padding: 0 16px; }
|
||||
|
||||
/* ---------- about-us 专属 ---------- */
|
||||
.au-gps { padding: 56px 0; }
|
||||
.au-gps__title { font-size: 1.5rem; }
|
||||
.au-gps__text { font-size: 0.9rem; margin-bottom: 36px; }
|
||||
.au-gps__cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
||||
.au-gps__wide { margin-top: 48px; padding: 0 16px; }
|
||||
.au-gps__split {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px; margin-top: 48px; padding: 0 16px;
|
||||
}
|
||||
.au-gps__feature-img { padding: 28px 24px; min-height: 300px; }
|
||||
.au-gps__feature-list p { line-height: 2.5; }
|
||||
|
||||
/* ---------- news 专属 ---------- */
|
||||
.nw-hero { min-height: 35vh; }
|
||||
.nw-hero__title { font-size: clamp(2.5rem, 14vw, 5rem); }
|
||||
.nw-listing { padding: 0px 0 72px; }
|
||||
.nw-tabs { margin-bottom: 32px; gap: 0; }
|
||||
.nw-tab { padding: 12px 18px; font-size: 0.88rem; }
|
||||
.nw-row {
|
||||
grid-template-columns: 1fr;
|
||||
height: auto;
|
||||
}
|
||||
.nw-row__body { padding: 24px 20px; }
|
||||
.nw-row__title { font-size: 1.05rem; -webkit-line-clamp: 3; }
|
||||
.nw-row__excerpt { font-size: 0.88rem; -webkit-line-clamp: 3; }
|
||||
.nw-row__more { padding: 9px 20px; font-size: 0.72rem; }
|
||||
.nw-row__media { height: 220px; min-height: 0; }
|
||||
.nw-pagination { gap: 6px; margin-top: 40px; }
|
||||
.nw-page { min-width: 38px; height: 38px; font-size: 0.85rem; }
|
||||
|
||||
/* ---------- news-detail 专属 ---------- */
|
||||
.nd-body { padding: 0 16px 72px; }
|
||||
.nd-back { margin-bottom: 28px; padding-top: 24px; font-size: 0.82rem; }
|
||||
.nd-title { font-size: 1.4rem; margin-bottom: 28px; }
|
||||
.nd-meta { gap: 12px; margin-bottom: 18px; }
|
||||
.nd-meta__cat { font-size: 0.68rem; padding: 3px 10px; }
|
||||
.nd-article p { font-size: 0.95rem; line-height: 1.85; margin-bottom: 20px; }
|
||||
.nd-figure { margin: 4px 0 24px; }
|
||||
.nd-figure img { border-radius: var(--radius); }
|
||||
.nd-nav { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
|
||||
.nd-nav__item { padding: 14px 18px; }
|
||||
.nd-nav__title { font-size: 0.88rem; }
|
||||
|
||||
/* ---------- contact 专属 ---------- */
|
||||
.ct-hero { min-height: 40vh; }
|
||||
.ct-hero__title { font-size: clamp(2rem, 8vw, 3.2rem); }
|
||||
.ct-form-section { padding: 48px 0 64px; }
|
||||
.ct-form__grid { grid-template-columns: 1fr; gap: 18px; }
|
||||
.ct-label { font-size: 0.82rem; margin-bottom: 6px; }
|
||||
.ct-input, .ct-selectwrap select {
|
||||
padding: 12px 14px;
|
||||
font-size: 16px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.ct-textarea { min-height: 110px; }
|
||||
.ct-submit {
|
||||
width: 100%; justify-content: center;
|
||||
padding: 15px 28px; margin-top: 24px;
|
||||
}
|
||||
.ct-map { padding: 36px 0 48px; }
|
||||
.ct-map__frame { height: 300px; }
|
||||
.ct-map__info { padding: 24px 20px; }
|
||||
.ct-map__info-title { font-size: 1.3rem; margin-bottom: 20px; }
|
||||
.ct-map__item { margin-bottom: 14px; }
|
||||
.ct-map__item dt { font-size: 0.68rem; }
|
||||
.ct-map__item dd { font-size: 0.9rem; }
|
||||
.ct-map__item img { width: 18px; height: 18px; }
|
||||
|
||||
/* ---------- global-presence 专属 ---------- */
|
||||
.gp-main { padding-top: var(--header-h); }
|
||||
.au-slogan-layer{
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.au-inner {
|
||||
margin: 60px auto 0;
|
||||
padding: 10px 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
小屏手机(≤480px)
|
||||
============================================================ */
|
||||
@media (max-width: 480px) {
|
||||
.container { padding-inline: 12px; }
|
||||
|
||||
.hero-title { letter-spacing: 0.2em; }
|
||||
.hero-tag { display: none; }
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; gap: 16px 8px; }
|
||||
.stat-num { font-size: 1.2rem; }
|
||||
|
||||
.bento-grid { gap: 10px; }
|
||||
.cell-banner { padding: 16px; }
|
||||
.banner-title { font-size: 1.1rem; }
|
||||
.cell-media { min-height: 170px; }
|
||||
|
||||
.partner-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
|
||||
.pf-ico img { width: 36px; height: 36px; }
|
||||
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
|
||||
.bp-hero__title { letter-spacing: 0.04em; }
|
||||
.bp-caps { grid-template-columns: 1fr 1fr; gap: 12px 8px; }
|
||||
|
||||
.ae-brands__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.bm-products__grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.as-services__grid { grid-template-columns: repeat(2, 1fr); margin-inline: auto; }
|
||||
.gl-services__grid { grid-template-columns: repeat(2, 1fr); margin-inline: auto; }
|
||||
|
||||
.nw-tabs { flex-direction: column; border-bottom: none; }
|
||||
.nw-tab { border-bottom: 1px solid var(--line); }
|
||||
.nw-tab.is-active::after { display: none; }
|
||||
.nw-tab.is-active { color: var(--orange-700); font-weight: 700; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
触屏优化(指针粗 = 触屏设备)
|
||||
============================================================ */
|
||||
@media (pointer: coarse) {
|
||||
/* 去掉 hover 态(触屏无 hover,避免粘滞) */
|
||||
.btn:hover { transform: none; }
|
||||
.social:hover { transform: none; background: transparent; }
|
||||
.bm-card:hover .bm-card__name { color: inherit; }
|
||||
|
||||
/* 滚动条:不显示(触屏原生滑动) */
|
||||
::-webkit-scrollbar { display: none; }
|
||||
* { scrollbar-width: none; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
安全区适配(刘海屏/底部横条)
|
||||
============================================================ */
|
||||
@supports (padding: max(0px)) {
|
||||
.site-header {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
height: calc(var(--header-h) + env(safe-area-inset-top));
|
||||
}
|
||||
.footer-bottom {
|
||||
padding-bottom: calc(16px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
移动端性能:禁用重效果
|
||||
============================================================ */
|
||||
@media (max-width: 768px) {
|
||||
* { will-change: auto !important; }
|
||||
.bp-hero__bg { animation: none; }
|
||||
.nw-hero__bg { animation: none; }
|
||||
.ct-hero__bg { animation: none; }
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/* ============================================================
|
||||
News Detail — article page (light theme)
|
||||
============================================================ */
|
||||
|
||||
.nd-main {
|
||||
background: #ffffff;
|
||||
/* banner = .nw-hero (same as news.html, loads from news.css) — it handles the top spacing */
|
||||
}
|
||||
|
||||
/* ---- body ---- */
|
||||
.nd-body {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px 120px;
|
||||
}
|
||||
|
||||
.nd-back {
|
||||
display: inline-block;
|
||||
font-family: var(--font-display); font-weight: 600;
|
||||
font-size: 0.88rem; letter-spacing: 0.04em;
|
||||
color: var(--text-mid);
|
||||
margin-bottom: 48px;
|
||||
padding-top: 40px;
|
||||
transition: color .2s;
|
||||
}
|
||||
.nd-back:hover { color: var(--orange-500); }
|
||||
|
||||
/* meta */
|
||||
.nd-meta {
|
||||
display: flex; align-items: center; gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.nd-meta__cat {
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--orange-500);
|
||||
border: 1px solid rgba(255,138,30,0.4);
|
||||
padding: 4px 12px; border-radius: 4px;
|
||||
}
|
||||
|
||||
/* title */
|
||||
.nd-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
/* article */
|
||||
.nd-article p {
|
||||
font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.9;
|
||||
color: var(--text-mid);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
/* inline article images (text-image alternating) */
|
||||
.nd-figure {
|
||||
margin: 8px 0 36px;
|
||||
}
|
||||
.nd-figure img {
|
||||
display: block;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.nd-article blockquote {
|
||||
border-left: 3px solid var(--orange-500);
|
||||
padding: 16px 24px; margin: 40px 0;
|
||||
background: #f6f8fb;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.nd-article blockquote p {
|
||||
font-size: 1.05rem; font-style: italic;
|
||||
color: var(--text-mid); margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* prev / next */
|
||||
.nd-nav {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
|
||||
margin-top: 80px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.nd-nav__item {
|
||||
display: flex; flex-direction: column; gap: 8px;
|
||||
padding: 20px 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
transition: border-color .25s, background .25s;
|
||||
}
|
||||
.nd-nav__item:hover { border-color: rgba(255,138,30,0.5); background: rgba(255,138,30,0.05); }
|
||||
.nd-nav__next { text-align: right; }
|
||||
.nd-nav__label {
|
||||
font-family: var(--font-display); font-weight: 600;
|
||||
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color: #9aa4b0;
|
||||
}
|
||||
.nd-nav__title {
|
||||
font-family: var(--font-display); font-weight: 600;
|
||||
font-size: 0.98rem; color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 680px) {
|
||||
.nd-body { padding: 0 20px 80px; }
|
||||
.nd-nav { grid-template-columns: 1fr; }
|
||||
.nd-nav__next { text-align: left; }
|
||||
}
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
/* ============================================================
|
||||
news.css — News & Insights listing page
|
||||
Loaded AFTER style.css. Prefix: .nw-* | hooks: body.is-news, main.nw
|
||||
Sections: page base · hero · category tabs · news list (left-text / right-image rows) ·
|
||||
pagination · scroll reveal · responsive
|
||||
============================================================ */
|
||||
|
||||
/* ---------- page base (light theme for this page) ---------- */
|
||||
body.is-news { background: #ffffff; color: var(--text-dark); font-family: var(--font-body); }
|
||||
.is-news .nw { background: #ffffff; }
|
||||
|
||||
/* ---------- scroll reveal (driven by news.js) ---------- */
|
||||
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
|
||||
[data-reveal].in { opacity: 1; transform: none; }
|
||||
|
||||
/* ============================================================
|
||||
HERO BANNER — full-bleed cargo photo + left-aligned "NEWS"
|
||||
============================================================ */
|
||||
.nw-hero {
|
||||
position: relative;
|
||||
min-height: 78vh;
|
||||
display: flex;
|
||||
align-items: flex-start; /* top-aligned… */
|
||||
padding-top: 15vh; /* …copy offset from the banner top — single knob */
|
||||
overflow: hidden;
|
||||
}
|
||||
.nw-hero__scene { position: absolute; inset: 0; z-index: 0; background: #060a12; overflow: hidden; }
|
||||
.nw-hero__bg {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center 40%;
|
||||
transform: scale(1.04);
|
||||
animation: nw-hero-zoom 16s var(--ease) forwards;
|
||||
}
|
||||
@keyframes nw-hero-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }
|
||||
|
||||
/* readability veil */
|
||||
.nw-hero__veil {
|
||||
position: absolute; inset: 0; z-index: 2;
|
||||
}
|
||||
|
||||
.nw-hero__copy {
|
||||
position: relative; z-index: 3;
|
||||
display: flex; flex-direction: column; align-items: flex-start;
|
||||
}
|
||||
.nw-hero__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(3.5rem, 11vw, 9rem);
|
||||
line-height: 0.92;
|
||||
letter-spacing: 0.14em;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LISTING — category tabs
|
||||
============================================================ */
|
||||
.nw-listing { padding: 72px 0 110px; background: var(--surface-light); }
|
||||
|
||||
.nw-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-bottom: 48px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.nw-tab {
|
||||
position: relative;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-mid);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 16px 26px;
|
||||
cursor: pointer;
|
||||
transition: color .2s var(--ease);
|
||||
}
|
||||
.nw-tab:hover { color: var(--text-dark); }
|
||||
.nw-tab.is-active { color: var(--orange-700); }
|
||||
.nw-tab.is-active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 26px; right: 26px; bottom: -1px;
|
||||
height: 3px;
|
||||
background: var(--orange-700);
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
NEWS LIST — one row per item, text left + image right
|
||||
============================================================ */
|
||||
.nw-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.nw-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
/* scroll reveal */
|
||||
opacity: 0;
|
||||
transform: translateY(26px);
|
||||
transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s var(--ease), border-color .4s;
|
||||
}
|
||||
.nw-row.in { opacity: 1; transform: none; }
|
||||
.nw-row:hover {
|
||||
border-color: rgba(255,138,30,.45);
|
||||
box-shadow: 0 20px 44px rgba(20,40,80,.1);
|
||||
}
|
||||
|
||||
.nw-row__body {
|
||||
padding: 34px 42px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
.nw-row__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
|
||||
line-height: 1.3;
|
||||
color: var(--text-dark);
|
||||
transition: color .2s;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nw-row:hover .nw-row__title { color: var(--orange-700); }
|
||||
.nw-row__excerpt {
|
||||
margin-top: 12px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.75;
|
||||
color: var(--text-mid);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nw-row__more {
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.12em;
|
||||
color: #fff;
|
||||
background: var(--grad-orange);
|
||||
padding: 11px 24px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 6px 18px rgba(255,106,0,.28);
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
|
||||
}
|
||||
.nw-row__more .arrow { transition: transform .25s var(--ease); }
|
||||
.nw-row__more:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,106,0,.38); }
|
||||
.nw-row__more:hover .arrow { transform: translateX(4px); }
|
||||
|
||||
.nw-row__media {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--ink-700);
|
||||
}
|
||||
.nw-row__media img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 250px;
|
||||
object-fit: cover;
|
||||
transition: transform .6s var(--ease);
|
||||
}
|
||||
.nw-row:hover .nw-row__media img { transform: scale(1.05); }
|
||||
|
||||
/* ============================================================
|
||||
PAGINATION — numbered buttons + prev/next arrows
|
||||
============================================================ */
|
||||
.nw-pagination {
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.nw-page {
|
||||
min-width: 44px; height: 44px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-dark);
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: color .2s, background .2s, border-color .2s, transform .2s;
|
||||
}
|
||||
.nw-page:hover:not(:disabled):not(.is-active) {
|
||||
color: var(--orange-700);
|
||||
border-color: rgba(255,138,30,.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.nw-page.is-active {
|
||||
color: #fff;
|
||||
background: var(--grad-orange);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 8px 18px rgba(255,106,0,.32);
|
||||
cursor: default;
|
||||
}
|
||||
.nw-page:disabled { opacity: .4; cursor: not-allowed; }
|
||||
.nw-page .arrow { display: inline-block; font-size: 1rem; line-height: 1; }
|
||||
.nw-page--nav { font-size: 1.05rem; }
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
.nw-row { grid-template-columns: 1fr 1fr; height: 280px; }
|
||||
.nw-row__body { padding: 28px 30px; }
|
||||
.nw-hero { min-height: 70vh; }
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.nw-listing { padding: 56px 0 90px; }
|
||||
.nw-tabs { margin-bottom: 36px; gap: 0; }
|
||||
.nw-tab { padding: 14px 16px; font-size: 0.92rem; }
|
||||
.nw-list { gap: 22px; }
|
||||
.nw-row { grid-template-columns: 1fr; height: auto; min-height: 0; }
|
||||
.nw-row__media { order: -1; }
|
||||
.nw-row__media img { min-height: 0; aspect-ratio: 16 / 9; }
|
||||
.nw-row__body { padding: 24px 22px 28px; }
|
||||
.nw-hero { min-height: 64vh; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.nw-tab { padding: 13px 12px; font-size: 0.86rem; }
|
||||
.nw-page { min-width: 40px; height: 40px; }
|
||||
.nw-pagination { gap: 8px; margin-top: 48px; }
|
||||
}
|
||||
|
||||
/* ---------- reduced motion ---------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
[data-reveal], .nw-row { opacity: 1 !important; transform: none !important; }
|
||||
.nw-hero__bg { transform: none !important; animation: none !important; }
|
||||
}
|
||||
|
||||
/* empty-category state (categories with no articles yet) */
|
||||
.nw-empty {
|
||||
padding: 90px 20px;
|
||||
text-align: center;
|
||||
color: #9aa4b0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
+984
@@ -0,0 +1,984 @@
|
||||
/* ============================================================
|
||||
HESU — Homepage styles (hand-written CSS)
|
||||
Sections: tokens · base · layout · header/nav · hero ·
|
||||
business · presence · partner · news · footer ·
|
||||
placeholders · animations · responsive
|
||||
============================================================ */
|
||||
|
||||
/* ---------- Design tokens ---------- */
|
||||
:root {
|
||||
/* Ink / dark surfaces */
|
||||
--ink-950: #060d1a;
|
||||
--ink-900: #0a1424;
|
||||
--ink-800: #0e1c30;
|
||||
--ink-700: #13233c;
|
||||
--ink-600: #1b2f4d;
|
||||
--ink-500: #274063;
|
||||
--bg-solid: #010F1E; /* header + footer */
|
||||
|
||||
/* Orange (deep → light) */
|
||||
--orange-900: #c44400;
|
||||
--orange-700: #ff6a00;
|
||||
--orange-500: #ff8a1e;
|
||||
--orange-300: #ffb15c;
|
||||
--orange-100: #ffd9b0;
|
||||
--grad-orange: linear-gradient(135deg, var(--orange-700), var(--orange-300));
|
||||
--grad-orange-soft: linear-gradient(135deg, rgba(255,106,0,0.95), rgba(255,177,92,0.95));
|
||||
|
||||
/* Light surfaces */
|
||||
--surface-light: #f4f6f9;
|
||||
--surface-light-2: #ffffff;
|
||||
--line: #e3e7ee;
|
||||
|
||||
/* Text */
|
||||
--text-dark: #18222f;
|
||||
--text-mid: #404040;
|
||||
--text-light: #ffffff;
|
||||
--text-light-80: rgba(255, 255, 255, 0.8);
|
||||
--text-light-60: rgba(255, 255, 255, 0.6);
|
||||
--text-light-40: rgba(255, 255, 255, 0.4);
|
||||
|
||||
/* Type */
|
||||
/* --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif; */
|
||||
--font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
||||
|
||||
/* Layout */
|
||||
--container: min(92vw, 1440px);
|
||||
--radius: 10px;
|
||||
--radius-lg: 16px;
|
||||
--header-h: 80px;
|
||||
--ease: cubic-bezier(.2, .7, .2, 1);
|
||||
}
|
||||
|
||||
/* ---------- Reset / base ---------- */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--text-light);
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
ul { list-style: none; }
|
||||
img { max-width: 100%; display: block; }
|
||||
|
||||
/* ---------- Layout helpers ---------- */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: 32px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: url(../image/home-bgs.png) no-repeat;
|
||||
color: var(--text-light);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.page-content > section { background: transparent; }
|
||||
|
||||
.section-head { margin-bottom: 48px; }
|
||||
.section-head.center { text-align: center; }
|
||||
.section-head.center .section-lead { max-width: 850px; margin: 18px auto 28px; }
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-display);
|
||||
/* font-weight: 800; */
|
||||
font-size: clamp(1.8rem, 3vw, 2.6rem);
|
||||
letter-spacing: 0.01em;
|
||||
line-height: 1.15;
|
||||
text-transform: uppercase;
|
||||
|
||||
}
|
||||
.section-title-d{
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.section-lead { color: var(--text-light-60); font-size: 1.02rem; }
|
||||
.section-lead strong { color: var(--orange-500); }
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
font-size: 0.78rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
|
||||
}
|
||||
.btn-contact {
|
||||
background: linear-gradient(88.61deg, #FF6000 7.43%, #FFA557 98.82%);
|
||||
padding: 8px 22px;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-contact:hover { transform: translateY(-2px);background: linear-gradient(88.61deg, rgba(255, 132, 17, 0.8) 7.43%, rgba(255, 207, 87, 0.8) 98.82%);
|
||||
}
|
||||
|
||||
.btn-explore {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
padding: 13px 30px;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.btn-explore:hover { background: rgba(8, 16, 30, 0.8); border-color: #fff; transform: translateY(-2px); }
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid var(--orange-500);
|
||||
padding: 12px 28px;
|
||||
}
|
||||
.btn-outline:hover { background: var(--orange-500); color: #1a0f00; }
|
||||
|
||||
/* ============================================================
|
||||
HEADER
|
||||
============================================================ */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto 0;
|
||||
z-index: 50;
|
||||
height: var(--header-h);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--bg-solid);
|
||||
transition: box-shadow .35s var(--ease), height .35s var(--ease);
|
||||
}
|
||||
.site-header.scrolled {
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.45);
|
||||
}
|
||||
.header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Logo (image/logo.png — light artwork, for the dark header/footer bars) */
|
||||
.logo { display: inline-flex; align-items: center; }
|
||||
.logo-img { display: block; height: 32px; width: auto; }
|
||||
|
||||
/* Nav */
|
||||
.main-nav { display: flex; }
|
||||
.nav-list { display: flex; align-items: center; gap: 36px; }
|
||||
.nav-item { position: relative; }
|
||||
.nav-item > a {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-light-80);
|
||||
padding: 8px 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color .2s var(--ease);
|
||||
}
|
||||
.nav-item > a:hover { color: var(--orange-500); }
|
||||
/* active page marker (orange underline) */
|
||||
.nav-item > a.active { color: var(--orange-500); position: relative; }
|
||||
.nav-item > a.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: 0;
|
||||
height: 2px;
|
||||
background: var(--orange-700);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.caret {
|
||||
width: 6px; height: 6px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FULL-SCREEN MEGA MENU (desktop hover)
|
||||
============================================================ */
|
||||
.nav-item.mega-on > a { color: var(--orange-500); }
|
||||
/* Contact Us lives in the header button on desktop; inside the drawer on mobile */
|
||||
.nav-item.nav-contact { display: none; }
|
||||
/* drawer logo is mobile-only (desktop keeps the header logo) */
|
||||
.drawer-logo { display: none; }
|
||||
|
||||
.mega {
|
||||
position: fixed;
|
||||
top: var(--header-h);
|
||||
left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(180deg, rgb(123 123 123 / 80%) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.01) 115.88%);
|
||||
/* background: linear-gradient(180deg, rgb(255 255 255 / 80%) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.01) 115.88%); */
|
||||
-webkit-backdrop-filter: blur(14px) saturate(120%);
|
||||
backdrop-filter: blur(14px) saturate(120%);
|
||||
z-index: 45;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity .3s var(--ease), visibility .3s;
|
||||
}
|
||||
.mega.open { opacity: 1; visibility: visible; pointer-events: auto; }
|
||||
|
||||
.mega-inner {
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
padding: 44px 32px 36px;
|
||||
}
|
||||
.mega-left { flex: 0 0 280px; padding-top: 4px; }
|
||||
.mega-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: clamp(1.3rem, 2vw, 1.85rem);
|
||||
line-height: 1.15;
|
||||
color: #fff;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* right cards grid — 4 per row, multiple rows, scrolls on overflow */
|
||||
.mega-right {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
@media (max-width: 1180px) {
|
||||
.mega-left { flex-basis: 230px; }
|
||||
.mega-right { grid-template-columns: repeat(3, 1fr); }
|
||||
}
|
||||
@media (max-width: 980px) {
|
||||
.mega-right { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
.mega-card {
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: transform .3s var(--ease), border-color .3s, background .3s, opacity .3s;
|
||||
}
|
||||
.mega.open .mega-card { opacity: 1; transform: none; }
|
||||
.mega.open .mega-card:nth-child(1) { transition-delay: .05s; }
|
||||
.mega.open .mega-card:nth-child(2) { transition-delay: .10s; }
|
||||
.mega.open .mega-card:nth-child(3) { transition-delay: .15s; }
|
||||
.mega.open .mega-card:nth-child(4) { transition-delay: .20s; }
|
||||
.mega-card:hover {
|
||||
transform: translateY(-6px);
|
||||
border-color: rgba(255,138,30,0.6);
|
||||
background: rgba(255,138,30,0.06);
|
||||
}
|
||||
.mega-card-img { width: 100%; aspect-ratio: 4 / 3; position: relative; }
|
||||
.mega-card-text { padding: 14px 12px 16px; text-align: center; }
|
||||
.mega-card-text h4 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.mega-card-text p { display: none; }
|
||||
|
||||
.header-right { display: flex; align-items: center; gap: 16px; }
|
||||
|
||||
/* Mobile toggle */
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 40px; height: 40px;
|
||||
background: transparent; border: 0; cursor: pointer;
|
||||
}
|
||||
.menu-toggle span {
|
||||
display: block; width: 24px; height: 2px; background: #fff;
|
||||
transition: transform .3s var(--ease), opacity .3s;
|
||||
}
|
||||
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
.menu-toggle.open span:nth-child(2) { opacity: 0; }
|
||||
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
|
||||
/* ============================================================
|
||||
HERO
|
||||
============================================================ */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin-top: var(--header-h); /* banner starts BELOW the fixed nav */
|
||||
}
|
||||
.hero-bg {
|
||||
position: absolute; inset: 0;
|
||||
z-index: 0;
|
||||
background-image: url(../image/home/banner.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.hero-bg::before { display: none; } /* star field placeholder removed */
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.hero-title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(3.5rem, 10vw, 7rem);
|
||||
letter-spacing: 0.3em;
|
||||
line-height: 1;
|
||||
margin-right: -0.3em; /* compensate trailing letterspacing for centering */
|
||||
background: linear-gradient(180deg, #fff, #fff);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-sub {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: clamp(0.95rem, 2vw, 2.35rem);
|
||||
color: #fff;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.hero-tag {
|
||||
color: var(--text-light-80);
|
||||
font-size: 0.95rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.btn-explore { margin-top: 34px; }
|
||||
|
||||
/* Stats bar */
|
||||
.hero-stats {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.stat { display: flex; flex-direction: column; gap: 6px; }
|
||||
.stat-num {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 900;
|
||||
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||||
line-height: 1;
|
||||
background: linear-gradient(88.61deg, #E68735 7.43%, rgba(255, 96, 0, 0.98) 98.82%);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.stat-label {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
BUSINESS (bento grid)
|
||||
============================================================ */
|
||||
.business { padding: 96px 0; }
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
/* row 1 = orange banner (short) · row 2 = Auto Export (tall) · row 3 = aftermarket/logistics */
|
||||
grid-template-rows: 170px 340px 320px;
|
||||
grid-auto-rows: 270px;
|
||||
gap: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.cell { position: relative; overflow: hidden; }
|
||||
|
||||
/* orange banner */
|
||||
.cell-banner {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1;
|
||||
background: url(../image/home/Mask1.jpg) center/cover no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 36px;
|
||||
}
|
||||
.banner-title {
|
||||
font-family: var(--font-display); font-weight: 900;
|
||||
font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.04em; line-height: 1;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* media cells */
|
||||
.cell-media { box-shadow: 0 10px 30px rgba(16,24,40,0.08); }
|
||||
.cell-media .cell-ph { position: absolute; inset: 0; }
|
||||
.cell-media::after { /* dark veil for title legibility */
|
||||
content: ""; position: absolute; inset: 0; z-index: 1;
|
||||
transition: background .35s var(--ease);
|
||||
}
|
||||
.cell-media:hover::after { background: rgba(6,13,28,0.55); }
|
||||
.cell-title {
|
||||
position: absolute; left: 22px; bottom: 18px; z-index: 2;
|
||||
font-family: var(--font-display); font-weight: 700;
|
||||
font-size: 1.15rem; color: #fff;
|
||||
}
|
||||
.cell-materials { grid-column: 3; grid-row: 1 / 3; }
|
||||
.cell-auto { grid-column: 1 / 3; grid-row: 2; }
|
||||
.cell-aftermarket{ grid-column: 1; grid-row: 3; }
|
||||
.cell-logistics { grid-column: 2 / 4; grid-row: 3; }
|
||||
|
||||
/* staggered scroll-in for bento cells */
|
||||
.bento-grid .cell.reveal:nth-child(1) { transition-delay: 0s; }
|
||||
.bento-grid .cell.reveal:nth-child(2) { transition-delay: .24s; }
|
||||
.bento-grid .cell.reveal:nth-child(3) { transition-delay: .48s; }
|
||||
.bento-grid .cell.reveal:nth-child(4) { transition-delay: .72s; }
|
||||
.bento-grid .cell.reveal:nth-child(5) { transition-delay: .96s; }
|
||||
|
||||
/* ============================================================
|
||||
GLOBAL PRESENCE
|
||||
============================================================ */
|
||||
.presence { padding: 96px 0; }
|
||||
|
||||
/* bg image + SVG overlay share one box and the 1219 × 661 map coordinate space */
|
||||
.map-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1219 / 661;
|
||||
overflow: hidden;
|
||||
margin: 8px auto 24px;
|
||||
}
|
||||
.map-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* location highlights — accumulating window cycled by main.js.
|
||||
Entrance: overlapping sequence (label → curve draw → dot pop → double ripple).
|
||||
Exit: elements reverse into their base states (line un-draws, dot shrinks,
|
||||
label slides away) so leaving mirrors entering. Children own their hidden
|
||||
base states; the group itself never toggles opacity. */
|
||||
.map-wrap .location .label {
|
||||
fill: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .7px;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
transition: opacity .3s ease, transform .3s ease;
|
||||
}
|
||||
.map-wrap .location .line {
|
||||
fill: none;
|
||||
stroke: var(--orange-700);
|
||||
stroke-width: 1.4;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
vector-effect: non-scaling-stroke;
|
||||
/* non-active lines stay fully undrawn from frame one (no first-flash on large screens) */
|
||||
stroke-dasharray: 1;
|
||||
stroke-dashoffset: 1;
|
||||
opacity: 0;
|
||||
transition: stroke-dashoffset .55s ease-in .05s, opacity .25s ease .25s;
|
||||
}
|
||||
.map-wrap .location .dot {
|
||||
fill: var(--orange-700);
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
opacity: 0;
|
||||
transform: scale(.55);
|
||||
transition: opacity .28s ease, transform .28s ease;
|
||||
}
|
||||
.map-wrap .location .halo {
|
||||
fill: none;
|
||||
stroke: var(--orange-700);
|
||||
stroke-width: 1.2;
|
||||
opacity: 0;
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
vector-effect: non-scaling-stroke;
|
||||
transition: opacity .4s ease;
|
||||
}
|
||||
/* exit choreography — .out is added by main.js on deactivate; animations reverse
|
||||
into the hidden base (transitions can't fire off animation removal) */
|
||||
.map-wrap .location.out .label { animation: labelOut .3s ease both; }
|
||||
.map-wrap .location.out .line { animation: lineOut .5s ease-in both; }
|
||||
.map-wrap .location.out .dot { animation: dotOut .28s ease both; }
|
||||
.map-wrap .location.out .halo { animation: haloOut .45s ease-out both; }
|
||||
|
||||
.map-wrap .location.active .label { animation: labelIn .28s .02s ease-out both; }
|
||||
.map-wrap .location.active .line { animation: drawLine .55s .12s cubic-bezier(.3,.7,.2,1) both; }
|
||||
.map-wrap .location.active .dot {
|
||||
animation: dotIn .32s .5s cubic-bezier(.2,1.5,.35,1) both,
|
||||
breatheR 3.4s 1s ease-in-out infinite;
|
||||
}
|
||||
.map-wrap .location.active .halo { animation: pulse .9s .62s ease-out infinite; }
|
||||
.map-wrap .location.active .halo2 { animation-delay: 1.07s; }
|
||||
|
||||
@keyframes labelIn {
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes drawLine {
|
||||
from { stroke-dashoffset: 1; opacity: 0; }
|
||||
1% { opacity: 1; }
|
||||
to { stroke-dashoffset: 0; opacity: 1; }
|
||||
}
|
||||
@keyframes dotIn {
|
||||
from { opacity: 0; transform: scale(.25); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: .7; transform: scale(.5); }
|
||||
70% { opacity: 0; transform: scale(2.2); }
|
||||
100% { opacity: 0; transform: scale(2.2); }
|
||||
}
|
||||
@keyframes breatheR {
|
||||
0%, 100% { r: 7.5px; }
|
||||
50% { r: 8.3px; }
|
||||
}
|
||||
@keyframes labelOut {
|
||||
from { opacity: 1; transform: translateY(0); }
|
||||
to { opacity: 0; transform: translateY(5px); }
|
||||
}
|
||||
@keyframes lineOut {
|
||||
from { stroke-dashoffset: 0; opacity: 1; }
|
||||
to { stroke-dashoffset: 1; opacity: 0; }
|
||||
}
|
||||
@keyframes dotOut {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(.55); }
|
||||
}
|
||||
@keyframes haloOut {
|
||||
from { opacity: .5; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HESU GLOBAL NETWORK & LOCAL SERVICE — peek strip
|
||||
Middle 2 cards fully visible; outer 2 ~3/4 with edge fade.
|
||||
============================================================ */
|
||||
.network { padding: 96px 0; background: var(--ink-900); }
|
||||
|
||||
.network-stage { position: relative; }
|
||||
.network-strip {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
|
||||
mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
|
||||
}
|
||||
.network-track {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: 18px; /* must match GAP in main.js — card-step math depends on it */
|
||||
padding: 6px 0;
|
||||
transform: translateX(-120px); /* JS positions precisely (centered pair) */
|
||||
transition: transform .5s var(--ease);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
touch-action: pan-y;
|
||||
will-change: transform;
|
||||
}
|
||||
.network-track:active { cursor: grabbing; }
|
||||
.network-track.dragging { transition: none; }
|
||||
.network-card {
|
||||
position: relative;
|
||||
flex: 0 0 400px; /* fallback; JS sizes precisely per viewport */
|
||||
height: 320px;
|
||||
overflow: hidden;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.network-card .cell-ph { position: absolute; inset: 0; transition: transform .6s var(--ease); }
|
||||
.network-card:hover .cell-ph { transform: scale(1.06); }
|
||||
.network-card::after {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: linear-gradient(180deg, transparent 45%, rgba(6,13,28,0.88) 100%);
|
||||
}
|
||||
.hub-label {
|
||||
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PARTNER
|
||||
============================================================ */
|
||||
.partner { padding: 110px 0 96px; background: var(--ink-900); }
|
||||
.partner-inner { position: relative; display: flex; flex-direction: row; }
|
||||
|
||||
.partner-carousel {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-top: 100px;
|
||||
aspect-ratio: 2 / 1;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
.partner-carousel .slide {
|
||||
position: absolute; inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .7s var(--ease);
|
||||
}
|
||||
.partner-carousel .slide.is-active { opacity: 1; }
|
||||
|
||||
.partner-dots {
|
||||
position: absolute;
|
||||
right: 18px; bottom: 18px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
.partner-dots button {
|
||||
border: 0; cursor: pointer; padding: 0;
|
||||
width: 9px; height: 9px; border-radius: 999px;
|
||||
background: rgba(255,255,255,0.55);
|
||||
transition: width .35s var(--ease), background .35s;
|
||||
}
|
||||
.partner-dots button.active {
|
||||
width: 30px;
|
||||
background: var(--orange-500);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* orange overlay block */
|
||||
.partner-overlay {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 50%;
|
||||
background: linear-gradient(283.27deg, rgba(255, 174, 0, 0.32) 1.97%, #FF6000 100%);
|
||||
color: #fff;
|
||||
padding: 60px 38px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px rgba(255,106,0,0.3);
|
||||
z-index: 4;
|
||||
}
|
||||
.partner-title {
|
||||
font-family: var(--font-display);
|
||||
/* font-weight: 900; */
|
||||
font-size: clamp(1.3rem, 2.4vw, 1.9rem);
|
||||
line-height: 1.18;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.partner-features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px 10px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.partner-features li {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.pf-ico {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.pf-ico img { width: 80px; height: 80px; object-fit: contain; display: block; }
|
||||
.partner-features strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; }
|
||||
.partner-features em { display: none; }
|
||||
|
||||
/* ============================================================
|
||||
NEWS
|
||||
============================================================ */
|
||||
.news { padding: 96px 0; }
|
||||
.news-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.view-more {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 0.85rem;
|
||||
background: linear-gradient(88.61deg, #FF6000 7.43%, #FFA557 98.82%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
transition: color .2s;
|
||||
}
|
||||
.view-more .plus { color: var(--orange-700); margin-left: 4px; }
|
||||
.view-more:hover { color: var(--orange-700); }
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 22px;
|
||||
}
|
||||
.news-card .news-img {
|
||||
aspect-ratio: 4 / 3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.news-img .cell-ph { position: absolute; inset: 0; transition: transform .5s var(--ease); }
|
||||
.news-card:hover .news-img .cell-ph { transform: scale(1.06); }
|
||||
.news-title {
|
||||
font-family: var(--font-display);
|
||||
/* font-weight: 700; */
|
||||
font-size: 1rem;
|
||||
line-height: 1.35;
|
||||
color: #fff;
|
||||
transition: color .2s;
|
||||
}
|
||||
.news-card:hover .news-title { color: var(--orange-500); }
|
||||
|
||||
/* ============================================================
|
||||
FOOTER
|
||||
============================================================ */
|
||||
.site-footer { position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -25px;background: var(--bg-solid);color: var(--text-light-60);padding-top: 56px;border-radius: 30px 30px 0 0;}
|
||||
|
||||
.footer-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.footer-social { display: flex; gap: 12px; }
|
||||
.social { display: inline-flex; transition: transform .2s, opacity .2s; }
|
||||
.social img { width: 28px; height: 28px; display: block; }
|
||||
.social:hover { transform: translateY(-2px); opacity: .8; }
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 35% 1fr 1fr 1fr 1fr;
|
||||
gap: 36px;
|
||||
padding: 48px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.footer-intro .footer-slogan { font-size: 1rem; line-height: 1.7; margin-bottom: 16px; font-weight: bold; color: #fff; }
|
||||
.footer-intro .footer-contact { font-size: 0.85rem; line-height: 1.8; color: var(--text-light-60); }
|
||||
.footer-col h4 {
|
||||
color: #fff;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 18px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.footer-col ul { display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; }
|
||||
.footer-col a { transition: color .2s; }
|
||||
.footer-col a:hover { color: var(--orange-500); }
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #9F9F9F;
|
||||
padding: 22px 0;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.footer-bottom .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
display:none;
|
||||
}
|
||||
.footer-links { display: flex; gap: 18px; }
|
||||
.footer-links a:hover { color: var(--orange-500); }
|
||||
|
||||
/* ============================================================
|
||||
PLACEHOLDER IMAGE TREATMENTS
|
||||
(distinct gradients so each photo slot reads as a unique image.
|
||||
Swap .cell-ph / .slide / .news-img backgrounds for real photos.)
|
||||
============================================================ */
|
||||
.ph {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex; align-items: flex-start; justify-content: flex-end;
|
||||
}
|
||||
/* themed gradients */
|
||||
.ph-materials { background: url(../image/home/Businesses2.jpg) center/cover no-repeat; }
|
||||
.ph-auto { background: url(../image/home/Businesses1.jpg) center/cover no-repeat; }
|
||||
.ph-aftermarket { background: url(../image/home/Businesses3.jpg) center/cover no-repeat; }
|
||||
.ph-logistics { background: url(../image/home/Businesses4.jpg) center/cover no-repeat; }
|
||||
.ph-middleeast { background: url(../image/Company-History.jpg) center/cover no-repeat; }
|
||||
.ph-easterneurope { background: url(../image/Company-Overview.jpg) center/cover no-repeat; }
|
||||
.ph-africa { background: url(../image/home/Service4.jpg) center/cover no-repeat; }
|
||||
.ph-warehouse { background: url(../image/home/Partner.jpg) center/cover no-repeat; }
|
||||
.ph-warehouse1 { background: url(../image/home/Partner1.jpg) center/cover no-repeat; }
|
||||
.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-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; }
|
||||
/* ============================================================
|
||||
SCROLL REVEAL
|
||||
============================================================ */
|
||||
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
|
||||
.reveal.in { opacity: 1; transform: none; }
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 1024px) {
|
||||
:root { --header-h: 68px; }
|
||||
.container { padding-inline: 24px; }
|
||||
.logo-img { height: 27px; }
|
||||
|
||||
.partner-carousel { width: 100%; margin-top: 0; }
|
||||
.partner-overlay {
|
||||
position: relative; top: 0;
|
||||
width: 100%; margin-bottom: 18px;
|
||||
padding: 30px 28px;
|
||||
}
|
||||
.partner-inner { display: flex; flex-direction: column; }
|
||||
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||||
.footer-intro { grid-column: 1 / -1; }
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
/* mobile nav */
|
||||
.menu-toggle { display: flex; }
|
||||
.header-right .btn-contact { display: none; }
|
||||
.nav-item.nav-contact { display: block; }
|
||||
/* company logo pinned at the top of the drawer, links home */
|
||||
.drawer-logo {
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.drawer-logo .logo-img { height: 30px; }
|
||||
|
||||
.main-nav {
|
||||
position: fixed;
|
||||
flex-direction: column;
|
||||
inset: 0 0 0 auto;
|
||||
width: min(82vw, 360px);
|
||||
background: var(--ink-900);
|
||||
border-left: 1px solid rgba(255,255,255,0.08);
|
||||
padding: calc(var(--header-h) + 16px) 26px 32px;
|
||||
transform: translateX(100%);
|
||||
transition: transform .35s var(--ease);
|
||||
z-index: 49;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.main-nav.open { transform: translateX(0); box-shadow: -30px 0 60px rgba(0,0,0,0.5); }
|
||||
.nav-list { flex-direction: column; align-items: stretch; gap: 6px; }
|
||||
.nav-item > a { padding: 14px 6px; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
|
||||
|
||||
/* mega -> inline collapsible list on mobile */
|
||||
.mega {
|
||||
position: static; background: transparent;
|
||||
opacity: 1; visibility: visible; pointer-events: auto;
|
||||
display: none; overflow: visible; z-index: auto;
|
||||
}
|
||||
.nav-item.has-mega.open .mega { display: block; }
|
||||
.mega-inner { display: block; min-height: 0; padding: 4px 0 2px 12px; gap: 0; }
|
||||
.mega-left { display: none; }
|
||||
.mega-right { display: block; }
|
||||
.mega-card {
|
||||
display: flex; flex-direction: row; align-items: center;
|
||||
aspect-ratio: auto;
|
||||
padding: 12px 4px;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
.mega-card:hover { transform: none; background: transparent; }
|
||||
.mega-card-img { display: none; }
|
||||
.mega-card-text {
|
||||
position: static; display: block; text-align: left;
|
||||
background: none; padding: 0;
|
||||
}
|
||||
.mega-card-text p { display: none; }
|
||||
.mega-card-text h4 { font-size: 0.98rem; color: var(--text-light-80); font-weight: 600; text-align: left; }
|
||||
|
||||
.nav-backdrop {
|
||||
position: fixed; inset: 0; z-index: 48;
|
||||
background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
|
||||
transition: opacity .3s, visibility .3s;
|
||||
}
|
||||
.nav-backdrop.show { opacity: 1; visibility: visible; }
|
||||
|
||||
/* hero */
|
||||
.stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
|
||||
.hero { min-height: 82vh; }
|
||||
|
||||
/* business bento -> 2-col friendly */
|
||||
.bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
|
||||
.cell-banner { grid-column: 1 / 3; grid-row: auto; }
|
||||
.cell-materials { grid-column: auto; grid-row: span 1; }
|
||||
.cell-auto { grid-column: 1 / 3; grid-row: auto; }
|
||||
.cell-aftermarket { grid-column: auto; grid-row: auto; }
|
||||
.cell-logistics { grid-column: 1 / 3; grid-row: auto; }
|
||||
|
||||
.news-grid { grid-template-columns: 1fr 1fr; }
|
||||
/* network carousel — same drag/loop system as desktop, mobile sizing */
|
||||
.network { padding: 0px 0 70px; }
|
||||
.network-track { gap: 12px; }
|
||||
.network-card { height: 340px; }
|
||||
|
||||
.section-head { margin-bottom: 36px; }
|
||||
.business, .presence, .news, .partner { padding: 72px 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.container { padding-inline: 18px; }
|
||||
.bento-grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
|
||||
.cell-banner, .cell-auto, .cell-logistics { grid-column: auto; }
|
||||
.news-grid { grid-template-columns: 1fr; }
|
||||
.network-card { flex: 0 0 84vw; height: 280px; }
|
||||
.partner-features { grid-template-columns: repeat(2, 1fr);}
|
||||
.pf-ico img { width: 50px; height: 50px; }
|
||||
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
|
||||
.reveal { opacity: 1; transform: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user