/* ── ELEMENTOR FULLWIDTH ESCAPE ──────────────────────────────
Forces this section to break out of Elementor's content-width
container and stretch edge-to-edge across the viewport.
Works with Elementor Free & Pro, Twenty-Twenty-X themes, Astra, etc.
─────────────────────────────────────────────────────────── */
.fb-hero,
.elementor-widget-html .fb-hero,
.elementor-widget-container .fb-hero {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
.fb-hero {
position: relative;
width: 100%;
max-width: 100%;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
font-family: 'Mulish', sans-serif;
background: #1B3A4B;
}
/* ── Video Background ── */
.fb-hero__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.fb-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* ── Overlay — 较浅，让视频能透出来 ── */
.fb-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(15, 32, 48, 0.62) 0%,
rgba(15, 32, 48, 0.35) 50%,
rgba(15, 32, 48, 0.12) 100%
);
z-index: 1;
}
.fb-hero__texture {
position: absolute;
inset: 0;
z-index: 2;
background-image: repeating-linear-gradient(
-55deg,
transparent,
transparent 3px,
rgba(255,255,255,0.008) 3px,
rgba(255,255,255,0.008) 4px
);
pointer-events: none;
}
.fb-hero__accent-bar {
position: absolute;
left: 0;
top: 15%;
bottom: 15%;
width: 4px;
background: linear-gradient(to bottom, transparent, #C8922A 30%, #C8922A 70%, transparent);
z-index: 3;
}
/* ── Content ── */
.fb-hero__content {
position: relative;
z-index: 4;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 5% 100px calc(5% + 24px);
}
.fb-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 20px;
opacity: 0;
animation: fb-fade-up 0.7s 0.2s ease forwards;
}
.fb-hero__eyebrow::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: #C8922A;
}
.fb-hero__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.2rem, 4.5vw, 3.8rem);
font-weight: 700;
line-height: 1.12;
color: #fff;
margin: 0 0 20px;
max-width: 720px;
opacity: 0;
animation: fb-fade-up 0.8s 0.4s ease forwards;
/* 文字阴影在浅遮罩下保证可读性 */
text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.fb-hero__title em {
font-style: normal;
color: #C8922A;
}
.fb-hero__subtitle {
font-size: clamp(0.92rem, 1.5vw, 1.05rem);
font-weight: 400;
color: rgba(255,255,255,0.88);
line-height: 1.72;
max-width: 500px;
margin: 0 0 40px;
opacity: 0;
animation: fb-fade-up 0.8s 0.6s ease forwards;
text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.fb-hero__buttons {
display: flex;
gap: 14px;
flex-wrap: wrap;
opacity: 0;
animation: fb-fade-up 0.8s 0.8s ease forwards;
}
.fb-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: #C8922A;
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #C8922A;
transition: background 0.25s, border-color 0.25s, transform 0.2s;
cursor: pointer;
}
.fb-btn-primary:hover {
background: #1B3A4B;
border-color: #1B3A4B;
transform: translateY(-2px);
}
.fb-btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: rgba(255,255,255,0.14);
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid rgba(255,255,255,0.55);
backdrop-filter: blur(4px);
transition: background 0.25s, border-color 0.25s, transform 0.2s;
cursor: pointer;
}
.fb-btn-ghost:hover {
background: rgba(255,255,255,0.24);
border-color: rgba(255,255,255,0.9);
transform: translateY(-2px);
}
/* ── 静音/声音 控制按钮 ── */
.fb-hero__video-ctrl {
position: absolute;
bottom: 76px;
right: 5%;
z-index: 4;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.22);
padding: 8px 16px;
color: rgba(255,255,255,0.9);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s;
font-family: 'Mulish', sans-serif;
opacity: 0;
animation: fb-fade-up 0.8s 1.1s ease forwards;
}
.fb-hero__video-ctrl:hover {
background: rgba(255,255,255,0.22);
}
/* ── Trust Bar ── */
.fb-hero__trust-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
background: rgba(12, 26, 38, 0.65);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(200,146,42,0.3);
padding: 14px 5%;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 4vw, 56px);
flex-wrap: wrap;
opacity: 0;
animation: fb-fade-up 0.8s 1.1s ease forwards;
}
.fb-trust-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.8);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
white-space: nowrap;
}
.fb-trust-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #C8922A;
flex-shrink: 0;
}
/* ── Scroll indicator ── */
.fb-hero__scroll {
position: absolute;
bottom: 52px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 0;
animation: fb-fade-up 0.8s 1.4s ease forwards;
}
.fb-hero__scroll-label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
font-weight: 600;
}
.fb-hero__scroll-line {
width: 1px;
height: 32px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: fb-scroll-pulse 2s ease-in-out infinite;
}
@keyframes fb-scroll-pulse {
0%, 100% { opacity: 0.35; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(0.65); }
}
@keyframes fb-fade-up {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Responsive ── */
@media (max-width: 768px) {
.fb-hero { min-height: 100svh; }
.fb-hero__content { padding: 80px 5% 130px calc(5% + 14px); }
.fb-hero__trust-bar { gap: 12px; padding: 12px 4%; }
.fb-trust-item { font-size: 10.5px; }
.fb-hero__buttons { flex-direction: column; align-items: flex-start; }
.fb-btn-primary, .fb-btn-ghost { width: 100%; justify-content: center; }
.fb-hero__scroll { display: none; }
.fb-hero__video-ctrl { bottom: 84px; right: 4%; }
}
@media (max-width: 480px) {
.fb-hero__trust-bar {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* Multi-banner hero carousel */
.fb-hero__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity .7s ease, visibility .7s ease;
pointer-events: none;
}
.fb-hero__slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fb-hero__pagination {
position: absolute;
z-index: 5;
right: 5%;
bottom: 32px;
display: flex;
align-items: center;
gap: 9px;
}
.fb-hero__dot {
width: 28px;
height: 28px;
padding: 0;
display: grid;
place-items: center;
border: 0;
background: transparent;
cursor: pointer;
}
.fb-hero__dot::before {
content: '';
display: block;
width: 8px;
height: 8px;
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 50%;
background: transparent;
transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.fb-hero__dot.is-active::before {
width: 24px;
border-radius: 5px;
border-color: #C8922A;
background: #C8922A;
}
.fb-hero__dot:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (max-width: 768px) {
.fb-hero__pagination { right: 5%; bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.fb-hero__slide,
.fb-hero__dot::before { transition-duration: .01ms; }
}
.fb8l {
font-family:'Mulish',sans-serif;
padding:72px 52px 72px 60px;
min-height:680px;
display:flex; flex-direction:column; justify-content:center;
position:relative;
margin:-20px;
}
.fb8l::before {
content:''; position:absolute;
left:0; top:10%; bottom:10%; width:3px;
background:linear-gradient(to bottom,transparent,#C8922A 25%,#C8922A 75%,transparent);
opacity:.5;
}
.fb8l-tag {
display:inline-flex; align-items:center; gap:8px;
background:rgba(200,146,42,.14);
border:1px solid rgba(200,146,42,.38);
color:#e8b84b; padding:6px 15px; border-radius:2px;
font-size:.72rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
margin-bottom:26px; width:fit-content;
}
.fb8l-dot {
width:6px; height:6px; background:#C8922A;
border-radius:50%; animation:fb8ldot 2s infinite;
}
@keyframes fb8ldot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.8)} }
.fb8l h2 {
font-family:'Playfair Display',serif;
font-size:clamp(1.8rem,2.4vw,2.6rem);
font-weight:700; color:#fff;
line-height:1.15; margin:0 0 12px;
}
.fb8l h2 em { font-style:normal; color:#C8922A; }
.fb8l-sub {
font-size:.95rem; color:rgba(255,255,255,.5);
line-height:1.75; margin:0 0 30px;
font-weight:300; max-width:380px;
}
.fb8l-rule { width:36px; height:2px; background:#C8922A; margin-bottom:28px; opacity:.6; }
.fb8l-trust {
list-style:none; padding:0; margin:0 0 40px;
display:flex; flex-direction:column; gap:12px;
}
.fb8l-trust li {
display:flex; align-items:flex-start; gap:11px;
color:rgba(255,255,255,.72);
font-size:.875rem; line-height:1.5;
}
.fb8l-chk {
width:20px; height:20px;
background:rgba(200,146,42,.12);
border:1px solid rgba(200,146,42,.35);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
flex-shrink:0; color:#C8922A;
font-size:.6rem; font-weight:800; margin-top:2px;
}
.fb8l-stats {
display:flex; padding-top:26px;
border-top:1px solid rgba(255,255,255,.08);
margin-bottom:30px;
}
.fb8l-stat { flex:1; padding-right:18px; border-right:1px solid rgba(255,255,255,.07); margin-right:18px; }
.fb8l-stat:last-child { border-right:none; margin-right:0; padding-right:0; }
.fb8l-stat-num { font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:700; color:#C8922A; line-height:1; margin-bottom:4px; }
.fb8l-stat-lbl { font-size:.7rem; color:rgba(255,255,255,.34); line-height:1.4; }
.fb8l-loc {
display:inline-flex; align-items:center; gap:12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
padding:12px 17px; border-radius:5px; width:fit-content;
}
.fb8l-loc-flag { font-size:1.3rem; line-height:1; }
.fb8l-loc-name { font-size:.86rem; font-weight:700; color:#fff; display:block; margin-bottom:2px; }
.fb8l-loc-sub { font-size:.71rem; color:rgba(255,255,255,.34); }
@media (max-width:900px) {
.fb8l { min-height:auto; padding:56px 32px; margin:-10px; }
.fb8l-stats { flex-wrap:wrap; gap:16px; }
.fb8l-stat { flex:1 1 40%; border-right:none; margin-right:0; }
}
.fb-type {
padding: 90px 5%;
background: #F7F5F2;
font-family: 'Mulish', sans-serif;
}
.fb-type__inner {
max-width: 1200px;
margin: 0 auto;
}
.fb-type__header {
text-align: center;
margin-bottom: 52px;
}
.fb-section-eyebrow-c {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 12px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.fb-section-eyebrow-c::before,
.fb-section-eyebrow-c::after {
content: '';
width: 24px; height: 2px;
background: #C8922A;
display: block;
}
.fb-section-title-c {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
color: #0F2030;
line-height: 1.18;
margin: 0 0 14px;
}
.fb-type__header-desc {
font-size: 15px;
color: #5C5C5C;
line-height: 1.75;
max-width: 560px;
margin: 0 auto;
}
/* 2-col grid */
.fb-type__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Card */
.fb-type-card {
position: relative;
overflow: hidden;
border-radius: 2px;
text-decoration: none;
display: block;
background: #1B3A4B;
min-height: 440px;
}
.fb-type-card__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
/* Placeholder bg */
.fb-type-card:nth-child(1) .fb-type-card__img { background-color: #243d4f; }
.fb-type-card:nth-child(2) .fb-type-card__img { background-color: #1d3041; }
.fb-type-card:hover .fb-type-card__img { transform: scale(1.05); }
/* Overlay — diagonal gradient for visual interest */
.fb-type-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
130deg,
rgba(15,32,48,0.85) 0%,
rgba(15,32,48,0.50) 50%,
rgba(15,32,48,0.15) 100%
);
z-index: 1;
transition: opacity 0.35s;
}
.fb-type-card:hover .fb-type-card__overlay { opacity: 0.9; }
/* Decorative large type letter in background */
.fb-type-card__bg-letter {
position: absolute;
right: -20px;
bottom: -30px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 22vw;
font-weight: 700;
color: rgba(255,255,255,0.03);
z-index: 1;
line-height: 1;
pointer-events: none;
user-select: none;
}
/* Gold bar — left side */
.fb-type-card__bar {
position: absolute;
left: 0; top: 15%; bottom: 15%;
width: 3px;
background: linear-gradient(to bottom, transparent, #C8922A 30%, #C8922A 70%, transparent);
z-index: 2;
opacity: 0;
transition: opacity 0.4s;
}
.fb-type-card:hover .fb-type-card__bar { opacity: 1; }
/* Content */
.fb-type-card__content {
position: relative;
z-index: 2;
padding: 52px 48px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.fb-type-card__tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 12px;
}
.fb-type-card__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
margin-bottom: 16px;
}
.fb-type-card__desc {
font-size: 14px;
color: rgba(255,255,255,0.68);
line-height: 1.72;
max-width: 380px;
margin-bottom: 32px;
}
/* Feature tags */
.fb-type-card__features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
.fb-type-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: rgba(255,255,255,0.75);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
padding: 4px 12px;
border-radius: 1px;
}
/* CTA button */
.fb-type-card__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: #C8922A;
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #C8922A;
transition: background 0.25s, border-color 0.25s, transform 0.2s;
align-self: flex-start;
}
.fb-type-card__btn:hover {
background: #0F2030;
border-color: #0F2030;
transform: translateX(4px);
}
/* Placeholder */
.fb-type-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-image:
repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.055) 8px 9px),
repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.035) 8px 9px);
z-index: 0;
}
/* ─── Responsive ─── */
@media (max-width: 900px) {
.fb-type__grid { grid-template-columns: 1fr; }
.fb-type-card { min-height: 380px; }
.fb-type-card__content { padding: 36px 32px; }
.fb-type-card__bg-letter { font-size: 35vw; }
}
@media (max-width: 768px) {
.fb-type { padding: 64px 5%; }
.fb-type-card__content { padding: 28px 24px; }
.fb-type-card { min-height: 340px; }
.fb-type-card__bar { opacity: 1; }
}
.fb-app {
padding: 90px 5%;
background: #fff;
font-family: 'Mulish', sans-serif;
}
.fb-app__inner {
max-width: 1200px;
margin: 0 auto;
}
/* Section header */
.fb-app__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
gap: 32px;
flex-wrap: wrap;
}
.fb-app__header-left {}
.fb-section-eyebrow-b {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.fb-section-eyebrow-b::before {
content: '';
width: 24px; height: 2px;
background: #C8922A;
display: block;
}
.fb-section-title-b {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
font-weight: 700;
color: #0F2030;
line-height: 1.18;
margin: 0;
}
.fb-app__header-desc {
font-size: 14.5px;
color: #5C5C5C;
line-height: 1.75;
max-width: 360px;
text-align: right;
}
/* 4-column grid */
.fb-app__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
/* Card */
.fb-app-card {
position: relative;
overflow: hidden;
border-radius: 2px;
aspect-ratio: 3 / 4;
background: #1B3A4B;
display: block;
text-decoration: none;
cursor: pointer;
}
/* The image */
.fb-app-card__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
/* Placeholder color per card */
.fb-app-card:nth-child(1) .fb-app-card__img { background-color: #315261; }
.fb-app-card:nth-child(2) .fb-app-card__img { background-color: #705c45; }
.fb-app-card:nth-child(3) .fb-app-card__img { background-color: #496557; }
.fb-app-card:nth-child(4) .fb-app-card__img { background-color: #765347; }
.fb-app-card__img {
background-image:
repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.05) 9px 10px),
repeating-linear-gradient(90deg, transparent 0 9px, rgba(255,255,255,.035) 9px 10px);
}
.fb-app-card:hover .fb-app-card__img {
transform: scale(1.06);
}
/* Gradient overlay */
.fb-app-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(15,32,48,0.90) 0%,
rgba(15,32,48,0.40) 45%,
rgba(15,32,48,0.0) 75%
);
z-index: 1;
transition: opacity 0.35s;
}
.fb-app-card:hover .fb-app-card__overlay {
opacity: 0.95;
}
/* Gold top accent line — animates in on hover */
.fb-app-card__top-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #C8922A;
z-index: 3;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.fb-app-card:hover .fb-app-card__top-line {
transform: scaleX(1);
}
/* Content */
.fb-app-card__content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 28px 24px;
z-index: 2;
}
.fb-app-card__tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 7px;
}
.fb-app-card__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.45rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin-bottom: 8px;
}
.fb-app-card__sub {
font-size: 12px;
color: rgba(255,255,255,0.6);
line-height: 1.55;
margin-bottom: 20px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s, transform 0.35s;
}
.fb-app-card:hover .fb-app-card__sub {
opacity: 1;
transform: translateY(0);
}
/* Card CTA button */
.fb-app-card__btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 20px;
background: #C8922A;
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: none;
transition: background 0.25s;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s 0.05s, transform 0.35s 0.05s, background 0.25s;
}
.fb-app-card:hover .fb-app-card__btn {
opacity: 1;
transform: translateY(0);
}
.fb-app-card__btn:hover {
background: #0F2030;
}
/* Placeholder icon (remove when adding real image) */
.fb-app-card__placeholder {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 8px;
color: rgba(255,255,255,0.2);
font-size: 12px;
text-align: center;
padding: 20px;
}
.fb-app-card__placeholder svg { opacity: 0.25; }
/* ─── Responsive ─── */
@media (max-width: 1024px) {
.fb-app__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fb-app-card { aspect-ratio: 4/5; }
/* Show sub + btn always on touch */
.fb-app-card__sub { opacity: 1; transform: none; }
.fb-app-card__btn { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
.fb-app { padding: 64px 5%; }
.fb-app__header { flex-direction: column; align-items: flex-start; }
.fb-app__header-desc { text-align: left; max-width: 100%; }
.fb-app__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.fb-app-card { aspect-ratio: 3/4; }
}
@media (max-width: 480px) {
.fb-app__grid { grid-template-columns: 1fr; }
.fb-app-card { aspect-ratio: 4/3; }
}
.hp-sustain,
.elementor-widget-html .hp-sustain,
.elementor-widget-container .hp-sustain {
position: relative; width: 100vw; max-width: 100vw;
left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.hp-sustain {
font-family: 'Mulish', sans-serif;
background: #0F2030;
padding: 96px 5.5%;
position: relative; overflow: hidden;
}
/* Grid texture */
.hp-sustain::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 68px 68px; pointer-events: none;
}
/* Radial gold glow from left */
.hp-sustain::after {
content: '';
position: absolute; top: 50%; left: -100px;
transform: translateY(-50%);
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200,146,42,0.06) 0%, transparent 65%);
pointer-events: none;
}
.hp-sustain__border {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, transparent, #C8922A 25%, #C8922A 75%, transparent);
}
.hp-sustain__inner {
max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
}
/* ── 2-col layout ── */
.hp-sustain__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px; align-items: start;
}
/* ── LEFT: text + image ── */
.hp-sustain__left {}
.hp-sust-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.26em; text-transform: uppercase;
color: #C8922A; margin-bottom: 14px;
}
.hp-sust-eyebrow::before { content: ''; width: 22px; height: 1px; background: rgba(200,146,42,0.7); display: block; }
.hp-sust-h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 700;
color: #fff; line-height: 1.15; margin: 0 0 16px;
}
.hp-sust-h2 em { font-style: italic; color: #C8922A; }
.hp-sust-desc {
font-size: 15px; color: rgba(255,255,255,0.58);
line-height: 1.82; margin-bottom: 40px; max-width: 480px;
}
.hp-sust-desc strong { color: rgba(255,255,255,0.85); font-weight: 600; }
/* Big image with caption */
.hp-sust-img-wrap {
position: relative; overflow: hidden;
aspect-ratio: 16/9;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 24px;
}
.hp-sust-img-wrap img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.6s ease;
/* 添加以下三行 */
mix-blend-mode: screen; /* 将白色背景变为透明 */
opacity: 0.8; /* 稍微降低透明度，让白色不过于刺眼 */
filter: contrast(1.1); /* 增强对比度，让证书文字更清晰 */
}
.hp-sust-img-wrap:hover img { transform: scale(1.04); }
/* Gold bracket corners */
.hp-sust-img-wrap::before {
content: '';
position: absolute; top: 14px; left: 14px;
width: 24px; height: 24px; z-index: 2;
border-top: 2px solid #C8922A; border-left: 2px solid #C8922A;
}
.hp-sust-img-wrap::after {
content: '';
position: absolute; bottom: 14px; right: 14px;
width: 24px; height: 24px; z-index: 2;
border-bottom: 2px solid #C8922A; border-right: 2px solid #C8922A;
}
.hp-sust-img-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; color: rgba(255,255,255,0.15);
font-size: 11px; text-align: center; padding: 20px; box-sizing: border-box;
}
.hp-sust-img-placeholder svg { opacity: 0.2; }
.hp-sust-img-caption {
font-size: 11.5px; color: rgba(255,255,255,0.35);
line-height: 1.6; font-style: italic;
}
/* Commitment pills */
.hp-sust-pills {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.hp-sust-pill {
display: flex; align-items: center; gap: 6px;
padding: 7px 14px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65);
transition: background 0.25s, border-color 0.25s;
}
.hp-sust-pill:hover { background: rgba(200,146,42,0.1); border-color: rgba(200,146,42,0.3); color: rgba(255,255,255,0.85); }
.hp-sust-pill svg { color: #C8922A; flex-shrink: 0; }
/* ── RIGHT: cert cards ── */
.hp-sustain__right {}
.hp-sust-certs-label {
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(255,255,255,0.35);
display: flex; align-items: center; gap: 10px;
margin-bottom: 20px;
}
.hp-sust-certs-label::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08);
}
/* Cert card */
.hp-sust-certs { display: flex; flex-direction: column; gap: 2px; }
.hp-cert-card {
display: grid;
grid-template-columns: 72px 1fr;
gap: 0;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden;
position: relative;
transition: background 0.3s, border-color 0.3s;
}
.hp-cert-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(200,146,42,0.3); }
/* Left color strip */
.hp-cert-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: #C8922A; opacity: 0; transition: opacity 0.3s;
}
.hp-cert-card:hover::before { opacity: 1; }
/* Badge column */
.hp-cert-card__badge {
background: rgba(200,146,42,0.1);
display: flex; align-items: center; justify-content: center;
padding: 20px 12px;
border-right: 1px solid rgba(255,255,255,0.06);
}
.hp-cert-card__badge-inner {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(200,146,42,0.15);
border: 1px solid rgba(200,146,42,0.3);
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', Georgia, serif;
font-size: 0.72rem; font-weight: 700; color: #C8922A;
text-align: center; line-height: 1.2; letter-spacing: 0.02em;
/* Replace inner text with 
for real logos */
}
/* Text column */
.hp-cert-card__body { padding: 20px 22px; }
.hp-cert-card__name {
font-size: 13.5px; font-weight: 700;
color: rgba(255,255,255,0.9); margin-bottom: 4px; line-height: 1.3;
}
.hp-cert-card__desc {
font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.6;
}
.hp-cert-card__tag {
display: inline-block; margin-top: 8px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: #C8922A;
border: 1px solid rgba(200,146,42,0.3); padding: 2px 8px;
}
/* Quick stat row */
.hp-sust-quick-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 2px; margin-top: 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-sust-qstat {
padding: 20px 18px;
background: rgba(255,255,255,0.025);
transition: background 0.3s;
}
.hp-sust-qstat:hover { background: rgba(255,255,255,0.05); }
.hp-sust-qstat__num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px;
}
.hp-sust-qstat__num span { color: #C8922A; font-size: 0.9rem; }
.hp-sust-qstat__label {
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: rgba(255,255,255,0.35);
}
/* Download CTA */
.hp-sust-download {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; margin-top: 16px;
background: rgba(200,146,42,0.08); border: 1px solid rgba(200,146,42,0.25);
text-decoration: none; transition: background 0.3s;
}
.hp-sust-download:hover { background: rgba(200,146,42,0.15); }
.hp-sust-download__icon {
width: 36px; height: 36px; background: rgba(200,146,42,0.15);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #C8922A; flex-shrink: 0;
}
.hp-sust-download__text {}
.hp-sust-download__title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 2px; }
.hp-sust-download__sub { font-size: 11px; color: rgba(255,255,255,0.4); }
.hp-sust-download__arrow { margin-left: auto; color: #C8922A; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.hp-sustain__layout { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 768px) {
.hp-sustain { padding: 64px 5%; }
.hp-sust-quick-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 480px) {
.hp-cert-card { grid-template-columns: 60px 1fr; }
.hp-sust-quick-stats { grid-template-columns: 1fr; }
}
.au-vi,
.elementor-widget-html .au-vi,
.elementor-widget-container .au-vi {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
margin-left: -50vw;
box-sizing: border-box;
}
.au-vi {
font-family: 'Mulish', sans-serif;
background: #F7F5F2;
padding: 100px 6%;
position: relative;
overflow: hidden;
}
/* Subtle right-side texture */
.au-vi::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 40%;
background: linear-gradient(to left, rgba(27,58,75,0.03), transparent);
pointer-events: none;
}
.au-vi__inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* 2-col layout: left text, right process */
.au-vi__layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
/* LEFT */
.au-vi__left {}
.au-vi__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 16px;
}
.au-vi__eyebrow::before {
content: '';
width: 24px; height: 2px;
background: #C8922A;
display: block;
}
.au-vi__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.9rem, 3.2vw, 3rem);
font-weight: 700;
color: #0F2030;
line-height: 1.15;
margin: 0 0 22px;
}
.au-vi__title em {
font-style: italic;
color: #C8922A;
}
.au-vi__desc {
font-size: 15px;
color: #4A5A65;
line-height: 1.8;
margin-bottom: 32px;
}
/* Advantage bullets */
.au-vi__advantages {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 36px;
}
.au-vi-adv {
display: flex;
align-items: flex-start;
gap: 14px;
}
.au-vi-adv__icon {
width: 32px; height: 32px;
background: rgba(200,146,42,0.12);
border: 1px solid rgba(200,146,42,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #C8922A;
flex-shrink: 0;
margin-top: 2px;
}
.au-vi-adv__text {}
.au-vi-adv__label {
font-size: 13px;
font-weight: 700;
color: #0F2030;
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.au-vi-adv__sub {
font-size: 12.5px;
color: #6B7B85;
line-height: 1.6;
}
/* Quote block */
.au-vi__quote {
padding: 20px 24px;
border-left: 3px solid #C8922A;
background: rgba(27,58,75,0.04);
}
.au-vi__quote p {
font-size: 13.5px;
color: #4A5A65;
line-height: 1.75;
font-style: italic;
margin: 0;
}
/* RIGHT — Process Flow */
.au-vi__left,
.au-vi__right,
.au-vi-step__body {
min-width: 0;
}
.au-vi-step__name,
.au-vi-step__detail {
overflow-wrap: anywhere;
word-break: normal;
}
.au-vi__process-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 28px;
text-align: center;
}
.au-vi__flow {
display: flex;
flex-direction: column;
gap: 0;
}
.au-vi-step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0;
position: relative;
}
/* Vertical connector line */
.au-vi-step:not(:last-child)::after {
content: '';
position: absolute;
left: 27px;
top: 56px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #C8922A, rgba(200,146,42,0.15));
}
.au-vi-step__left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
}
.au-vi-step__circle {
width: 56px; height: 56px;
border-radius: 50%;
background: #1B3A4B;
border: 2px solid rgba(200,146,42,0.3);
display: flex;
align-items: center;
justify-content: center;
color: #C8922A;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.au-vi-step:hover .au-vi-step__circle {
background: #C8922A;
border-color: #C8922A;
color: #fff;
transform: scale(1.08);
}
.au-vi-step__body {
padding: 12px 0 28px 20px;
}
.au-vi-step__num {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
color: rgba(200,146,42,0.6);
text-transform: uppercase;
margin-bottom: 4px;
}
.au-vi-step__name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
font-weight: 600;
color: #0F2030;
margin-bottom: 6px;
}
.au-vi-step__detail {
font-size: 13px;
color: #6B7B85;
line-height: 1.65;
max-width: 52ch;
}
/* Tags */
.au-vi-step__tags {
display: none;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.au-vi-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
color: #1B3A4B;
background: rgba(27,58,75,0.07);
border: 1px solid rgba(27,58,75,0.15);
padding: 3px 10px;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.au-vi__layout { grid-template-columns: 1fr; gap: 56px; }
.au-vi__flow { max-width: 580px; }
}
@media (max-width: 768px) {
.au-vi { padding: 64px 5%; }
}
/* 基础容器 */
.fb-factory {
padding: 80px 5%;
background: #fff;
font-family: 'Mulish', sans-serif;
}
.fb-factory__inner {
max-width: 1200px;
margin: 0 auto;
}
/* 文字与数据布局 */
.fb-factory__top {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: end;
margin-bottom: 40px;
}
.fb-factory__title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
color: #0F2030;
line-height: 1.1;
margin: 15px 0;
}
.fb-factory__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.fb-stat {
border-top: 2px solid #E0DCD6;
padding-top: 15px;
}
.fb-stat__num {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: #0F2030;
}
.fb-stat__label {
font-size: 10px;
text-transform: uppercase;
color: #888;
}
/* ── 核心修复：图库部分 ── */
.fb-factory__gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
/* 解决 WP 插件可能引入的行高间隙 */
line-height: 0;
}
.fb-factory-img {
position: relative;
overflow: hidden;
/* 修复关键 1：将背景色设为透明，彻底消除“漏色”视觉感 */
background: transparent !important;
border-radius: 2px;
width: 100%;
}
/* 比例控制 */
.fb-factory-img--large { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
.fb-factory-img--small { aspect-ratio: 4 / 3; }
.fb-factory-img__photo {
/* 修复关键 2：强制覆盖 WP 可能存在的各种限制 */
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
/* 修复关键 3：使用 scale(1.01) 稍微溢出容器边缘，彻底消除 1px 的缝隙 */
transform: scale(1.01);
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.6s ease;
}
/* 悬停放大效果 */
.fb-factory-img:hover .fb-factory-img__photo {
transform: scale(1.08);
}
/* 文字遮罩 */
.fb-factory-img__caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 40px 15px 15px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
z-index: 2;
pointer-events: none;
}
.fb-factory-img__caption span {
font-size: 11px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* ── 底部 CTA ── */
.fb-factory__cta-strip {
margin-top: 30px;
padding: 25px;
background: #F9F8F6;
display: flex;
justify-content: space-between;
align-items: center;
}
.fb-factory-btn {
padding: 12px 25px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.fb-factory-btn--primary { background: #1B3A4B; color: #fff; }
.fb-factory-btn--ghost { border: 1px solid #C0BBB3; color: #1B3A4B; margin-left: 10px; }
/* 响应式适配 */
@media (max-width: 1024px) {
.fb-factory__top { grid-template-columns: 1fr; }
.fb-factory__gallery { grid-template-columns: repeat(2, 1fr); }
.fb-factory-img--large { aspect-ratio: 16 / 7; }
}
@media (max-width: 600px) {
.fb-factory__stats { grid-template-columns: repeat(2, 1fr); }
.fb-factory__gallery { grid-template-columns: 1fr; }
/* 手机端统一比例，消除不规则漏底 */
.fb-factory-img, .fb-factory-img--large, .fb-factory-img--small {
aspect-ratio: 16 / 9 !important;
}
.fb-factory__cta-strip { flex-direction: column; gap: 15px; text-align: center; }
}
.hp-shipping,
.elementor-widget-html .hp-shipping,
.elementor-widget-container .hp-shipping {
position: relative; width: 100vw; max-width: 100vw;
left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.hp-shipping {
font-family: 'Mulish', sans-serif;
background: #0F2030;
padding: 96px 5.5%;
position: relative; overflow: hidden;
}
/* Grid texture */
.hp-shipping::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 68px 68px;
}
/* Gold radial glow */
.hp-shipping::after {
content: '';
position: absolute; top: 50%; right: -100px;
transform: translateY(-50%);
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200,146,42,0.06) 0%, transparent 65%);
pointer-events: none;
}
.hp-shipping__border {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, transparent, #C8922A 25%, #C8922A 75%, transparent);
}
.hp-shipping__inner {
max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
}
/* ── Header ── */
.hp-shipping__header {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px; align-items: flex-end;
margin-bottom: 56px;
}
.hp-ship-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.26em; text-transform: uppercase;
color: #C8922A; margin-bottom: 14px;
}
.hp-ship-eyebrow::before {
content: ''; width: 22px; height: 1px; background: rgba(200,146,42,0.7); display: block;
}
.hp-ship-h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 700;
color: #fff; line-height: 1.15; margin: 0 0 12px;
}
.hp-ship-h2 em { font-style: italic; color: #C8922A; }
.hp-ship-sub {
font-size: 15px; color: rgba(255,255,255,0.52);
line-height: 1.8; max-width: 520px;
}
/* Header right: quick stat */
.hp-ship-header-stat {
text-align: right; flex-shrink: 0;
}
.hp-ship-header-stat__num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 3.8rem; font-weight: 700; color: #fff; line-height: 1;
}
.hp-ship-header-stat__num span { color: #C8922A; font-size: 1.6rem; }
.hp-ship-header-stat__label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.35);
margin-top: 4px;
}
/* ── Main layout: regions left + methods right ── */
.hp-shipping__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px; align-items: start;
margin-bottom: 32px;
}
/* ── LEFT: region grid ── */
.hp-ship-regions-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.hp-ship-regions-label::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.hp-ship-regions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-ship-region {
background: rgba(255,255,255,0.02);
padding: 22px 20px;
position: relative; overflow: hidden;
transition: background 0.3s;
cursor: default;
}
.hp-ship-region:hover { background: rgba(255,255,255,0.06); }
/* Gold top line on hover */
.hp-ship-region::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: #C8922A;
transform: scaleX(0); transform-origin: left;
transition: transform 0.35s;
}
.hp-ship-region:hover::before { transform: scaleX(1); }
.hp-ship-region__flag {
font-size: 1.6rem; line-height: 1; margin-bottom: 10px; display: block;
}
.hp-ship-region__name {
font-size: 13px; font-weight: 700;
color: rgba(255,255,255,0.85); margin-bottom: 5px;
}
.hp-ship-region__countries {
font-size: 11.5px; color: rgba(255,255,255,0.38); line-height: 1.6;
}
.hp-ship-region__transit {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 10px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: #C8922A;
}
.hp-ship-region__transit::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #C8922A; flex-shrink: 0;
}
/* ── RIGHT: shipping methods ── */
.hp-ship-methods-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.hp-ship-methods-label::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.hp-ship-methods { display: flex; flex-direction: column; gap: 2px; }
.hp-ship-method {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 18px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
transition: background 0.3s, border-color 0.3s;
position: relative;
}
.hp-ship-method:hover {
background: rgba(255,255,255,0.06); border-color: rgba(200,146,42,0.3);
}
.hp-ship-method::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: #C8922A; opacity: 0; transition: opacity 0.3s;
}
.hp-ship-method:hover::before { opacity: 1; }
.hp-ship-method__icon {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(200,146,42,0.1); border: 1px solid rgba(200,146,42,0.28);
display: flex; align-items: center; justify-content: center;
color: #C8922A; flex-shrink: 0;
}
.hp-ship-method__body {}
.hp-ship-method__name {
font-size: 13.5px; font-weight: 700;
color: rgba(255,255,255,0.88); margin-bottom: 3px;
}
.hp-ship-method__desc {
font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.55;
}
.hp-ship-method__tag {
display: inline-block; margin-top: 7px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: #C8922A;
border: 1px solid rgba(200,146,42,0.3); padding: 2px 8px;
}
/* ── Bottom: incoterms + docs strip ── */
.hp-shipping__bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-ship-bottom-cell {
background: rgba(255,255,255,0.02); padding: 28px 28px;
transition: background 0.3s;
}
.hp-ship-bottom-cell:hover { background: rgba(255,255,255,0.05); }
.hp-ship-bottom-cell__title {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.hp-ship-bottom-cell__title::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.hp-ship-incoterms {
display: flex; flex-wrap: wrap; gap: 8px;
}
.hp-incoterm {
padding: 8px 16px;
background: rgba(200,146,42,0.1); border: 1px solid rgba(200,146,42,0.25);
font-size: 13px; font-weight: 700; color: #C8922A;
letter-spacing: 0.06em;
transition: background 0.25s;
}
.hp-incoterm:hover { background: rgba(200,146,42,0.2); }
.hp-ship-docs { display: flex; flex-direction: column; gap: 8px; }
.hp-ship-doc {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,0.55);
}
.hp-ship-doc::before {
content: '';
width: 14px; height: 1px; background: #C8922A; flex-shrink: 0;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.hp-shipping__layout { grid-template-columns: 1fr; }
.hp-ship-header-stat { display: none; }
}
@media (max-width: 860px) {
.hp-ship-regions { grid-template-columns: repeat(2, 1fr); }
.hp-shipping__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hp-shipping { padding: 64px 5%; }
.hp-shipping__header { grid-template-columns: 1fr; }
.hp-ship-regions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.hp-ship-regions { grid-template-columns: 1fr 1fr; }
}
/* ── ELEMENTOR FULLWIDTH ESCAPE ──────────────────────────────
Forces this section to break out of Elementor's content-width
container and stretch edge-to-edge across the viewport.
Works with Elementor Free & Pro, Twenty-Twenty-X themes, Astra, etc.
─────────────────────────────────────────────────────────── */
.fb-cta,
.elementor-widget-html .fb-cta,
.elementor-widget-container .fb-cta {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
.fb-cta {
padding: 100px 5%;
/* 浅色背景 — 用暖灰+深蓝双色渐变取代纯深色 */
background: linear-gradient(135deg, #f0ece6 0%, #e8e2d8 40%, #dde4eb 100%);
font-family: 'Mulish', sans-serif;
position: relative;
overflow: hidden;
text-align: center;
}
/* 右上角深色晕染 — 提供对比但不压迫 */
.fb-cta::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(27,58,75,0.10) 0%, transparent 65%);
pointer-events: none;
}
/* 左下角金色晕 */
.fb-cta::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(200,146,42,0.09) 0%, transparent 65%);
pointer-events: none;
}
/* 顶部金色细线 */
.fb-cta__top-border {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, transparent 0%, #C8922A 30%, #C8922A 70%, transparent 100%);
}
.fb-cta__inner {
max-width: 760px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* 装饰菱形线 */
.fb-cta__ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 28px;
}
.fb-cta__ornament-line {
width: 60px;
height: 1px;
}
.fb-cta__ornament-line:first-child {
background: linear-gradient(to right, transparent, #C8922A);
}
.fb-cta__ornament-line:last-child {
background: linear-gradient(to left, transparent, #C8922A);
}
.fb-cta__ornament-diamond {
width: 8px; height: 8px;
background: #C8922A;
transform: rotate(45deg);
}
/* Eyebrow */
.fb-cta__eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 18px;
}
/* Headline */
.fb-cta__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
/* 深蓝色标题 在浅背景上 */
color: #0F2030;
line-height: 1.15;
margin: 0 0 18px;
}
/* Sub */
.fb-cta__sub {
font-size: 15.5px;
color: #5C6E7A;
line-height: 1.75;
margin-bottom: 44px;
}
/* Button group */
.fb-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
/* Primary */
.fb-cta-btn-main {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 40px;
background: #1B3A4B;
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #1B3A4B;
transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
cursor: pointer;
}
.fb-cta-btn-main:hover {
background: #C8922A;
border-color: #C8922A;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(200,146,42,0.28);
}
/* Secondary */
.fb-cta-btn-sec {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
background: transparent;
color: #1B3A4B;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #B0BBBF;
transition: border-color 0.25s, background 0.25s, transform 0.2s;
cursor: pointer;
}
.fb-cta-btn-sec:hover {
border-color: #1B3A4B;
background: rgba(27,58,75,0.06);
transform: translateY(-2px);
}
/* Trust 指标条 */
.fb-cta__trust {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 4vw, 40px);
flex-wrap: wrap;
padding-top: 36px;
border-top: 1px solid rgba(27,58,75,0.12);
}
.fb-cta-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
color: #6E7E89;
white-space: nowrap;
}
.fb-cta-trust-item svg {
color: #C8922A;
flex-shrink: 0;
}
/* 背景纹理（极细横纹，增加触感） */
.fb-cta__bg-pattern {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(27,58,75,0.025) 28px,
rgba(27,58,75,0.025) 29px
);
pointer-events: none;
z-index: 0;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.fb-cta { padding: 72px 5%; }
.fb-cta__buttons { flex-direction: column; align-items: center; }
.fb-cta-btn-main, .fb-cta-btn-sec {
width: 100%;
max-width: 360px;
justify-content: center;
}
.fb-cta__trust { gap: 12px; }
.fb-cta-trust-item { font-size: 11px; }
}
/* Tianyi renders outside Elementor; reset the legacy full-width escape offsets. */
.fb-hero,
.hp-sustain,
.au-vi,
.hp-shipping,
.fb-cta {
width: 100%;
max-width: 100%;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
}
for real logos */
}
/* Text column */
.hp-cert-card__body { padding: 20px 22px; }
.hp-cert-card__name {
font-size: 13.5px; font-weight: 700;
color: rgba(255,255,255,0.9); margin-bottom: 4px; line-height: 1.3;
}
.hp-cert-card__desc {
font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.6;
}
.hp-cert-card__tag {
display: inline-block; margin-top: 8px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: #C8922A;
border: 1px solid rgba(200,146,42,0.3); padding: 2px 8px;
}
/* Quick stat row */
.hp-sust-quick-stats {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 2px; margin-top: 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-sust-qstat {
padding: 20px 18px;
background: rgba(255,255,255,0.025);
transition: background 0.3s;
}
.hp-sust-qstat:hover { background: rgba(255,255,255,0.05); }
.hp-sust-qstat__num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 4px;
}
.hp-sust-qstat__num span { color: #C8922A; font-size: 0.9rem; }
.hp-sust-qstat__label {
font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: rgba(255,255,255,0.35);
}
/* Download CTA */
.hp-sust-download {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; margin-top: 16px;
background: rgba(200,146,42,0.08); border: 1px solid rgba(200,146,42,0.25);
text-decoration: none; transition: background 0.3s;
}
.hp-sust-download:hover { background: rgba(200,146,42,0.15); }
.hp-sust-download__icon {
width: 36px; height: 36px; background: rgba(200,146,42,0.15);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #C8922A; flex-shrink: 0;
}
.hp-sust-download__text {}
.hp-sust-download__title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 2px; }
.hp-sust-download__sub { font-size: 11px; color: rgba(255,255,255,0.4); }
.hp-sust-download__arrow { margin-left: auto; color: #C8922A; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.hp-sustain__layout { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 768px) {
.hp-sustain { padding: 64px 5%; }
.hp-sust-quick-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 480px) {
.hp-cert-card { grid-template-columns: 60px 1fr; }
.hp-sust-quick-stats { grid-template-columns: 1fr; }
}
.au-vi,
.elementor-widget-html .au-vi,
.elementor-widget-container .au-vi {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
margin-left: -50vw;
box-sizing: border-box;
}
.au-vi {
font-family: 'Mulish', sans-serif;
background: #F7F5F2;
padding: 100px 6%;
position: relative;
overflow: hidden;
}
/* Subtle right-side texture */
.au-vi::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 40%;
background: linear-gradient(to left, rgba(27,58,75,0.03), transparent);
pointer-events: none;
}
.au-vi__inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* 2-col layout: left text, right process */
.au-vi__layout {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
/* LEFT */
.au-vi__left {}
.au-vi__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 16px;
}
.au-vi__eyebrow::before {
content: '';
width: 24px; height: 2px;
background: #C8922A;
display: block;
}
.au-vi__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.9rem, 3.2vw, 3rem);
font-weight: 700;
color: #0F2030;
line-height: 1.15;
margin: 0 0 22px;
}
.au-vi__title em {
font-style: italic;
color: #C8922A;
}
.au-vi__desc {
font-size: 15px;
color: #4A5A65;
line-height: 1.8;
margin-bottom: 32px;
}
/* Advantage bullets */
.au-vi__advantages {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 36px;
}
.au-vi-adv {
display: flex;
align-items: flex-start;
gap: 14px;
}
.au-vi-adv__icon {
width: 32px; height: 32px;
background: rgba(200,146,42,0.12);
border: 1px solid rgba(200,146,42,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #C8922A;
flex-shrink: 0;
margin-top: 2px;
}
.au-vi-adv__text {}
.au-vi-adv__label {
font-size: 13px;
font-weight: 700;
color: #0F2030;
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.au-vi-adv__sub {
font-size: 12.5px;
color: #6B7B85;
line-height: 1.6;
}
/* Quote block */
.au-vi__quote {
padding: 20px 24px;
border-left: 3px solid #C8922A;
background: rgba(27,58,75,0.04);
}
.au-vi__quote p {
font-size: 13.5px;
color: #4A5A65;
line-height: 1.75;
font-style: italic;
margin: 0;
}
/* RIGHT — Process Flow */
.au-vi__left,
.au-vi__right,
.au-vi-step__body {
min-width: 0;
}
.au-vi-step__name,
.au-vi-step__detail {
overflow-wrap: anywhere;
word-break: normal;
}
.au-vi__process-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 28px;
text-align: center;
}
.au-vi__flow {
display: flex;
flex-direction: column;
gap: 0;
}
.au-vi-step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0;
position: relative;
}
/* Vertical connector line */
.au-vi-step:not(:last-child)::after {
content: '';
position: absolute;
left: 27px;
top: 56px;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, #C8922A, rgba(200,146,42,0.15));
}
.au-vi-step__left {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
}
.au-vi-step__circle {
width: 56px; height: 56px;
border-radius: 50%;
background: #1B3A4B;
border: 2px solid rgba(200,146,42,0.3);
display: flex;
align-items: center;
justify-content: center;
color: #C8922A;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.au-vi-step:hover .au-vi-step__circle {
background: #C8922A;
border-color: #C8922A;
color: #fff;
transform: scale(1.08);
}
.au-vi-step__body {
padding: 12px 0 28px 20px;
}
.au-vi-step__num {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
color: rgba(200,146,42,0.6);
text-transform: uppercase;
margin-bottom: 4px;
}
.au-vi-step__name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
font-weight: 600;
color: #0F2030;
margin-bottom: 6px;
}
.au-vi-step__detail {
font-size: 13px;
color: #6B7B85;
line-height: 1.65;
max-width: 52ch;
}
/* Tags */
.au-vi-step__tags {
display: none;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.au-vi-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
color: #1B3A4B;
background: rgba(27,58,75,0.07);
border: 1px solid rgba(27,58,75,0.15);
padding: 3px 10px;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.au-vi__layout { grid-template-columns: 1fr; gap: 56px; }
.au-vi__flow { max-width: 580px; }
}
@media (max-width: 768px) {
.au-vi { padding: 64px 5%; }
}
/* 基础容器 */
.fb-factory {
padding: 80px 5%;
background: #fff;
font-family: 'Mulish', sans-serif;
}
.fb-factory__inner {
max-width: 1200px;
margin: 0 auto;
}
/* 文字与数据布局 */
.fb-factory__top {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
align-items: end;
margin-bottom: 40px;
}
.fb-factory__title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
color: #0F2030;
line-height: 1.1;
margin: 15px 0;
}
.fb-factory__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.fb-stat {
border-top: 2px solid #E0DCD6;
padding-top: 15px;
}
.fb-stat__num {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: #0F2030;
}
.fb-stat__label {
font-size: 10px;
text-transform: uppercase;
color: #888;
}
/* ── 核心修复：图库部分 ── */
.fb-factory__gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
/* 解决 WP 插件可能引入的行高间隙 */
line-height: 0;
}
.fb-factory-img {
position: relative;
overflow: hidden;
/* 修复关键 1：将背景色设为透明，彻底消除“漏色”视觉感 */
background: transparent !important;
border-radius: 2px;
width: 100%;
}
/* 比例控制 */
.fb-factory-img--large { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
.fb-factory-img--small { aspect-ratio: 4 / 3; }
.fb-factory-img__photo {
/* 修复关键 2：强制覆盖 WP 可能存在的各种限制 */
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
/* 修复关键 3：使用 scale(1.01) 稍微溢出容器边缘，彻底消除 1px 的缝隙 */
transform: scale(1.01);
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.6s ease;
}
/* 悬停放大效果 */
.fb-factory-img:hover .fb-factory-img__photo {
transform: scale(1.08);
}
/* 文字遮罩 */
.fb-factory-img__caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 40px 15px 15px;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
z-index: 2;
pointer-events: none;
}
.fb-factory-img__caption span {
font-size: 11px;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* ── 底部 CTA ── */
.fb-factory__cta-strip {
margin-top: 30px;
padding: 25px;
background: #F9F8F6;
display: flex;
justify-content: space-between;
align-items: center;
}
.fb-factory-btn {
padding: 12px 25px;
font-size: 11px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.fb-factory-btn--primary { background: #1B3A4B; color: #fff; }
.fb-factory-btn--ghost { border: 1px solid #C0BBB3; color: #1B3A4B; margin-left: 10px; }
/* 响应式适配 */
@media (max-width: 1024px) {
.fb-factory__top { grid-template-columns: 1fr; }
.fb-factory__gallery { grid-template-columns: repeat(2, 1fr); }
.fb-factory-img--large { aspect-ratio: 16 / 7; }
}
@media (max-width: 600px) {
.fb-factory__stats { grid-template-columns: repeat(2, 1fr); }
.fb-factory__gallery { grid-template-columns: 1fr; }
/* 手机端统一比例，消除不规则漏底 */
.fb-factory-img, .fb-factory-img--large, .fb-factory-img--small {
aspect-ratio: 16 / 9 !important;
}
.fb-factory__cta-strip { flex-direction: column; gap: 15px; text-align: center; }
}
.hp-shipping,
.elementor-widget-html .hp-shipping,
.elementor-widget-container .hp-shipping {
position: relative; width: 100vw; max-width: 100vw;
left: 50%; margin-left: -50vw; box-sizing: border-box;
}
.hp-shipping {
font-family: 'Mulish', sans-serif;
background: #0F2030;
padding: 96px 5.5%;
position: relative; overflow: hidden;
}
/* Grid texture */
.hp-shipping::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
background-size: 68px 68px;
}
/* Gold radial glow */
.hp-shipping::after {
content: '';
position: absolute; top: 50%; right: -100px;
transform: translateY(-50%);
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200,146,42,0.06) 0%, transparent 65%);
pointer-events: none;
}
.hp-shipping__border {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, transparent, #C8922A 25%, #C8922A 75%, transparent);
}
.hp-shipping__inner {
max-width: 1300px; margin: 0 auto; position: relative; z-index: 1;
}
/* ── Header ── */
.hp-shipping__header {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px; align-items: flex-end;
margin-bottom: 56px;
}
.hp-ship-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.26em; text-transform: uppercase;
color: #C8922A; margin-bottom: 14px;
}
.hp-ship-eyebrow::before {
content: ''; width: 22px; height: 1px; background: rgba(200,146,42,0.7); display: block;
}
.hp-ship-h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 700;
color: #fff; line-height: 1.15; margin: 0 0 12px;
}
.hp-ship-h2 em { font-style: italic; color: #C8922A; }
.hp-ship-sub {
font-size: 15px; color: rgba(255,255,255,0.52);
line-height: 1.8; max-width: 520px;
}
/* Header right: quick stat */
.hp-ship-header-stat {
text-align: right; flex-shrink: 0;
}
.hp-ship-header-stat__num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 3.8rem; font-weight: 700; color: #fff; line-height: 1;
}
.hp-ship-header-stat__num span { color: #C8922A; font-size: 1.6rem; }
.hp-ship-header-stat__label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.35);
margin-top: 4px;
}
/* ── Main layout: regions left + methods right ── */
.hp-shipping__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px; align-items: start;
margin-bottom: 32px;
}
/* ── LEFT: region grid ── */
.hp-ship-regions-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.hp-ship-regions-label::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.hp-ship-regions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-ship-region {
background: rgba(255,255,255,0.02);
padding: 22px 20px;
position: relative; overflow: hidden;
transition: background 0.3s;
cursor: default;
}
.hp-ship-region:hover { background: rgba(255,255,255,0.06); }
/* Gold top line on hover */
.hp-ship-region::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: #C8922A;
transform: scaleX(0); transform-origin: left;
transition: transform 0.35s;
}
.hp-ship-region:hover::before { transform: scaleX(1); }
.hp-ship-region__flag {
font-size: 1.6rem; line-height: 1; margin-bottom: 10px; display: block;
}
.hp-ship-region__name {
font-size: 13px; font-weight: 700;
color: rgba(255,255,255,0.85); margin-bottom: 5px;
}
.hp-ship-region__countries {
font-size: 11.5px; color: rgba(255,255,255,0.38); line-height: 1.6;
}
.hp-ship-region__transit {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 10px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; color: #C8922A;
}
.hp-ship-region__transit::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: #C8922A; flex-shrink: 0;
}
/* ── RIGHT: shipping methods ── */
.hp-ship-methods-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.hp-ship-methods-label::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.07);
}
.hp-ship-methods { display: flex; flex-direction: column; gap: 2px; }
.hp-ship-method {
display: flex; align-items: flex-start; gap: 16px;
padding: 20px 18px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
transition: background 0.3s, border-color 0.3s;
position: relative;
}
.hp-ship-method:hover {
background: rgba(255,255,255,0.06); border-color: rgba(200,146,42,0.3);
}
.hp-ship-method::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: #C8922A; opacity: 0; transition: opacity 0.3s;
}
.hp-ship-method:hover::before { opacity: 1; }
.hp-ship-method__icon {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(200,146,42,0.1); border: 1px solid rgba(200,146,42,0.28);
display: flex; align-items: center; justify-content: center;
color: #C8922A; flex-shrink: 0;
}
.hp-ship-method__body {}
.hp-ship-method__name {
font-size: 13.5px; font-weight: 700;
color: rgba(255,255,255,0.88); margin-bottom: 3px;
}
.hp-ship-method__desc {
font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.55;
}
.hp-ship-method__tag {
display: inline-block; margin-top: 7px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: #C8922A;
border: 1px solid rgba(200,146,42,0.3); padding: 2px 8px;
}
/* ── Bottom: incoterms + docs strip ── */
.hp-shipping__bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.07);
}
.hp-ship-bottom-cell {
background: rgba(255,255,255,0.02); padding: 28px 28px;
transition: background 0.3s;
}
.hp-ship-bottom-cell:hover { background: rgba(255,255,255,0.05); }
.hp-ship-bottom-cell__title {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(255,255,255,0.3);
margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.hp-ship-bottom-cell__title::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.hp-ship-incoterms {
display: flex; flex-wrap: wrap; gap: 8px;
}
.hp-incoterm {
padding: 8px 16px;
background: rgba(200,146,42,0.1); border: 1px solid rgba(200,146,42,0.25);
font-size: 13px; font-weight: 700; color: #C8922A;
letter-spacing: 0.06em;
transition: background 0.25s;
}
.hp-incoterm:hover { background: rgba(200,146,42,0.2); }
.hp-ship-docs { display: flex; flex-direction: column; gap: 8px; }
.hp-ship-doc {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(255,255,255,0.55);
}
.hp-ship-doc::before {
content: '';
width: 14px; height: 1px; background: #C8922A; flex-shrink: 0;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
.hp-shipping__layout { grid-template-columns: 1fr; }
.hp-ship-header-stat { display: none; }
}
@media (max-width: 860px) {
.hp-ship-regions { grid-template-columns: repeat(2, 1fr); }
.hp-shipping__bottom { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.hp-shipping { padding: 64px 5%; }
.hp-shipping__header { grid-template-columns: 1fr; }
.hp-ship-regions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.hp-ship-regions { grid-template-columns: 1fr 1fr; }
}
/* ── ELEMENTOR FULLWIDTH ESCAPE ──────────────────────────────
Forces this section to break out of Elementor's content-width
container and stretch edge-to-edge across the viewport.
Works with Elementor Free & Pro, Twenty-Twenty-X themes, Astra, etc.
─────────────────────────────────────────────────────────── */
.fb-cta,
.elementor-widget-html .fb-cta,
.elementor-widget-container .fb-cta {
position: relative;
width: 100vw;
max-width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
.fb-cta {
padding: 100px 5%;
/* 浅色背景 — 用暖灰+深蓝双色渐变取代纯深色 */
background: linear-gradient(135deg, #f0ece6 0%, #e8e2d8 40%, #dde4eb 100%);
font-family: 'Mulish', sans-serif;
position: relative;
overflow: hidden;
text-align: center;
}
/* 右上角深色晕染 — 提供对比但不压迫 */
.fb-cta::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(27,58,75,0.10) 0%, transparent 65%);
pointer-events: none;
}
/* 左下角金色晕 */
.fb-cta::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(200,146,42,0.09) 0%, transparent 65%);
pointer-events: none;
}
/* 顶部金色细线 */
.fb-cta__top-border {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, transparent 0%, #C8922A 30%, #C8922A 70%, transparent 100%);
}
.fb-cta__inner {
max-width: 760px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* 装饰菱形线 */
.fb-cta__ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 28px;
}
.fb-cta__ornament-line {
width: 60px;
height: 1px;
}
.fb-cta__ornament-line:first-child {
background: linear-gradient(to right, transparent, #C8922A);
}
.fb-cta__ornament-line:last-child {
background: linear-gradient(to left, transparent, #C8922A);
}
.fb-cta__ornament-diamond {
width: 8px; height: 8px;
background: #C8922A;
transform: rotate(45deg);
}
/* Eyebrow */
.fb-cta__eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C8922A;
margin-bottom: 18px;
}
/* Headline */
.fb-cta__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 700;
/* 深蓝色标题 在浅背景上 */
color: #0F2030;
line-height: 1.15;
margin: 0 0 18px;
}
/* Sub */
.fb-cta__sub {
font-size: 15.5px;
color: #5C6E7A;
line-height: 1.75;
margin-bottom: 44px;
}
/* Button group */
.fb-cta__buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
/* Primary */
.fb-cta-btn-main {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 40px;
background: #1B3A4B;
color: #fff;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #1B3A4B;
transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
cursor: pointer;
}
.fb-cta-btn-main:hover {
background: #C8922A;
border-color: #C8922A;
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(200,146,42,0.28);
}
/* Secondary */
.fb-cta-btn-sec {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 36px;
background: transparent;
color: #1B3A4B;
font-family: 'Mulish', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid #B0BBBF;
transition: border-color 0.25s, background 0.25s, transform 0.2s;
cursor: pointer;
}
.fb-cta-btn-sec:hover {
border-color: #1B3A4B;
background: rgba(27,58,75,0.06);
transform: translateY(-2px);
}
/* Trust 指标条 */
.fb-cta__trust {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 4vw, 40px);
flex-wrap: wrap;
padding-top: 36px;
border-top: 1px solid rgba(27,58,75,0.12);
}
.fb-cta-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
color: #6E7E89;
white-space: nowrap;
}
.fb-cta-trust-item svg {
color: #C8922A;
flex-shrink: 0;
}
/* 背景纹理（极细横纹，增加触感） */
.fb-cta__bg-pattern {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(27,58,75,0.025) 28px,
rgba(27,58,75,0.025) 29px
);
pointer-events: none;
z-index: 0;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.fb-cta { padding: 72px 5%; }
.fb-cta__buttons { flex-direction: column; align-items: center; }
.fb-cta-btn-main, .fb-cta-btn-sec {
width: 100%;
max-width: 360px;
justify-content: center;
}
.fb-cta__trust { gap: 12px; }
.fb-cta-trust-item { font-size: 11px; }
}
/* Tianyi renders outside Elementor; reset the legacy full-width escape offsets. */
.fb-hero,
.hp-sustain,
.au-vi,
.hp-shipping,
.fb-cta {
width: 100%;
max-width: 100%;
left: auto;
right: auto;
margin-left: 0;
margin-right: 0;
}