/* ============================================================
ECOAIOT — Global Stylesheet v2.2
Primary (科技蓝): #004884 · Deep: #001f3d · Light: #6BA3C7
Secondary (新能源绿): #00A86B
Body text: #101820 · Nav: fixed white bar + blue menu type (#004884)
============================================================ */
/* Inter — self-hosted under /fonts/ (no Google Fonts CDN at runtime) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/inter-300.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/inter-400.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/inter-500.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/inter-600.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/inter-700.ttf') format('truetype');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/inter-800.ttf') format('truetype');
}
/* ── Variables ──────────────────────────────────────────── */
:root {
--blue: #004884;
/* 顶栏菜单、汉堡、移动抽屉、顶栏 AIOT 字色（与品牌科技蓝一致） */
--nav-text: #004884;
--blue-dark: #001f3d;
--blue-light: #6BA3C7;
/* CTA 按钮：更亮的主色；悬停仅提亮、不提暗 */
--cta-blue: #2F62FF;
--cta-blue-hover: #5C82FF;
/* 大字 AIOT：与首页 Banner「Explore Products」主按钮同色 */
--aiot: var(--cta-blue);
--cta-green: #00DC82;
--cta-green-hover: #45FFB8;
/* 产品列表/详情推荐卡文字区：比 CTA 蓝略深，避免过亮 */
--prod-info-bg: #1A42B4;
--prod-info-bg-hover: #2A54CC;
--blue-pale: #E6EEF5;
--green: #00A86B;
--green-dark: #008058;
--green-pale: #E1F5EE;
--navy: #101820;
--navy-mid: #1B2838;
--slate: #3D4257;
--muted: #686C7D;
--border: #D8DAE0;
--bg: #F5F6F8;
--white: #FFFFFF;
/* Inter + system stack (B2B / reference-site style) */
--font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--nav-height: 66px;
/* 顶栏字标/CTA 对齐高度：默认与移动顶栏 logo 图 22px 一致 */
--nav-mark-h: 22px;
/* 白底行底缘立体带高度：≈2.5mm + 轻微 vw，各断点统一一条“起晕线”，线之上无渐变 */
--nav-shade-band: clamp(8px, 2.5mm + 0.35vw, 11px);
--radius: 4px;
--radius-lg: 6px;
--shadow-sm: 0 2px 8px rgba(0, 50, 92, 0.07);
--shadow: 0 8px 28px rgba(0, 50, 92, 0.1);
--shadow-lg: 0 20px 50px rgba(0, 50, 92, 0.12);
/* Product catalog cards (products grid + detail “related”) */
--radius-product-card: 8px;
--shadow-product-card: 0 2px 10px rgba(16, 24, 32, 0.06), 0 1px 3px rgba(16, 24, 32, 0.04);
--transition: all .25s cubic-bezier(.4,0,.2,1);
/* Product detail — spacing (tune / rollback: see block above PRODUCT DETAIL PAGE) */
--pd-layout-pad-top: 28px;
--pd-layout-pad-bottom: 25px;
--pd-layout-gap: 3.5rem;
--pd-tabs-below: 14px;
--pd-related-block-y: 10px;
}
/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--nav-height);
font-size: 16px;
overflow-x: hidden;
width: 100%;
}
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--navy);
line-height: 1.6;
overflow-x: hidden;
width: 100%;
padding-top: var(--nav-height);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; }
/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: var(--font-head); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 600; letter-spacing: -.015em; }
h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
p { color: var(--slate); line-height: 1.65; font-weight: 400; }
/* ── Layout ─────────────────────────────────────────────── */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }
.section { padding: 40px 0; }
.section-sm { padding: 26px 0; }
/* ── Utility ────────────────────────────────────────────── */
.text-center { text-align: center; }
.badge {
display: inline-block;
font-family: var(--font-head);
font-size: .72rem; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase;
padding: .26em .85em;
border-radius: 2px;
background: var(--green-pale); color: var(--green-dark);
margin-bottom: .9rem;
}
.badge.blue { background: var(--blue-pale); color: var(--blue); }
/* ── Buttons ────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: .45rem;
padding: .72rem 1.65rem;
border-radius: 2px;
font-family: var(--font-head);
font-size: .9rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase;
border: 2px solid transparent;
transition: var(--transition);
cursor: pointer;
}
.btn-primary { background: var(--cta-blue); color: var(--white); box-shadow: 0 2px 14px rgba(47, 98, 255, 0.35); }
.btn-primary:hover { background: var(--cta-blue-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47, 98, 255, 0.4); }
.btn-outline { background: transparent; color: var(--cta-blue); border-color: var(--cta-blue); }
.btn-outline:hover { background: var(--cta-blue); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47, 98, 255, 0.3); }
.btn-green { background: var(--cta-green); color: var(--white); box-shadow: 0 2px 14px rgba(0, 220, 130, 0.35); }
.btn-green:hover { background: var(--cta-green-hover); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 220, 130, 0.4); }
.btn-white { background: var(--white); color: var(--cta-blue); }
.btn-white:hover { background: var(--blue-pale); color: var(--cta-blue-hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
/* ── Section Headers ────────────────────────────────────── */
.section-header { margin-bottom: 2.1rem; }
.section-header h2 { margin-bottom: .9rem; }
.section-header p { max-width: 560px; font-size: .97rem; }
.section-header.center { text-align: center; }
.section-header.center p { margin: 0 auto; }
.divider { display: none; }
.divider.center { margin: .65rem auto 1rem; }
/* ── Navigation ─────────────────────────────────────────── */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9000;
background: var(--white);
border-bottom: none;
/* 仅底边 1px 内刻线（无向上晕染）；立体由 ::after 窄带渐变承担 */
box-shadow: inset 0 -1px 0 rgba(16, 24, 32, 0.062);
}
/* 底缘窄带：起晕线与顶栏底边距离 = --nav-shade-band，带之上不铺色；带内顶侧微高光 + 向下略加深 */
.navbar::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(var(--nav-height) - var(--nav-shade-band));
height: var(--nav-shade-band);
pointer-events: none;
z-index: 1;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.42) 0,
rgba(255, 255, 255, 0) min(12%, 0.11rem)
),
linear-gradient(
180deg,
rgba(16, 24, 32, 0) 0%,
rgba(16, 24, 32, 0.045) 38%,
rgba(16, 24, 32, 0.095) 72%,
rgba(16, 24, 32, 0.128) 100%
);
}
.navbar .container {
position: relative;
display: flex;
align-items: center;
gap: 1.25rem;
height: var(--nav-height);
min-width: 0;
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
align-self: center;
gap: .5rem;
min-width: 0;
flex-shrink: 1;
}
.navbar .nav-logo {
gap: 0.22rem;
}
.navbar .nav-logo img {
flex-shrink: 0;
align-self: center;
display: block;
}
.navbar .nav-logo .logo-text {
line-height: 1;
align-self: center;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--nav-mark-h);
box-sizing: border-box;
}
.nav-logo > div {
min-width: 0;
}
.navbar .nav-logo > div {
align-self: center;
}
.logo-mark {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--blue), var(--green));
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
/* ─── TO USE YOUR REAL LOGO IMAGE ───────────────────────
Replace this entire .logo-mark div in HTML with:
────────────────────────────────────────────────────── */
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 7px; }
.logo-mark-text {
font-family: var(--font-head); font-weight: 700; font-size: .95rem;
color: #fff; letter-spacing: -.01em;
}
.logo-text {
font-family: var(--font-head);
font-size: 1.25rem; font-weight: 700;
color: var(--navy); letter-spacing: .04em;
}
.nav-logo .logo-text { letter-spacing: .02em; }
/* ECOAIOT 品牌字：大字 ECO=绿、AIOT=科技蓝（长段落 p 内除外，见 p .eco/.aiot） */
.logo-text .eco { color: var(--green); }
.logo-text .aiot { color: var(--aiot); }
.navbar .logo-text .eco,
.footer .logo-text .eco { color: var(--green); }
.footer .logo-text .aiot { color: var(--aiot); }
/* 顶栏字标 AIOT 与右侧菜单同色（--nav-text） */
.navbar .logo-text .aiot { color: var(--nav-text); }
/* 全局类名（标题、导航外大字等） */
.eco { color: var(--green); }
.aiot { color: var(--aiot); }
p .eco,
p .aiot { color: inherit; }
.logo-sub {
font-size: .6rem; font-family: var(--font-head);
color: var(--muted); letter-spacing: .12em;
text-transform: uppercase; display: block;
line-height: 1.52;
}
/* 顶栏不展示 slogan（全断点）；页脚等处的 .logo-sub 不受影响 */
.navbar .nav-logo .logo-sub {
display: none;
}
/* Nav links — 白底顶栏 */
.nav-links {
display: flex;
align-items: center;
margin-left: auto;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
gap: 0.58rem;
flex-shrink: 0;
}
.nav-links li {
display: flex;
align-items: center;
}
.nav-links a {
font-family: var(--font-head);
font-size: .86rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase;
color: var(--nav-text);
padding: 0.45rem 0.75rem;
border-radius: 2px;
transition: color var(--transition), box-shadow var(--transition);
position: relative;
background: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0.35rem;
right: 0.35rem;
bottom: 0.1rem;
height: 2.8px;
border-radius: 1px;
background: var(--green);
opacity: 0;
transform: scaleX(0.35);
transition: opacity .22s ease, transform .22s ease;
}
.nav-links a:hover {
color: var(--blue-dark);
background: transparent;
}
/* 当前页：字色与常态一致，仅用绿色下划线标识 */
.nav-links a.active,
.nav-links a.active:hover {
color: var(--nav-text);
background: transparent;
}
.nav-links a:hover::after,
.nav-links a.active::after {
opacity: 1;
transform: scaleX(1);
}
/* Hamburger */
.hamburger {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: .5rem;
align-self: center;
line-height: 0;
}
.hamburger span {
display: block; width: 22px; height: 2px;
background: var(--nav-text); border-radius: 2px; transition: var(--transition);
}
/* Mobile menu — 科技蓝底、白字 */
.mobile-menu {
display: none;
background: var(--blue);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 0;
position: relative;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.mobile-menu.open { display: block; }
/* Dim page below nav when mobile menu open; tap to close (navbar stays above at z-index 9000) */
.mobile-nav-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: var(--nav-height);
z-index: 8990;
background: rgba(16, 24, 32, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.mobile-nav-backdrop.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.mobile-menu a {
display: flex;
align-items: center;
min-height: 2.85rem;
box-sizing: border-box;
font-family: var(--font-head); font-size: .88rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: #fff;
padding: 0 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background var(--transition), color var(--transition);
}
/* 最后一项（Contact）下无菜单，去掉底部分隔线与多余留白 */
.mobile-menu > a:last-of-type {
border-bottom: none;
}
.mobile-menu a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* 当前页：白字 + 左侧绿条 + 略亮底 */
.mobile-menu a.active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 3px 0 0 var(--green);
}
/* ── Breadcrumb Bar (below page hero) ───────────────────── */
.breadcrumb-bar {
background: transparent;
border-bottom: 1px solid var(--border);
padding: .6rem 0;
display: flex;
align-items: center;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 0.35rem;
column-gap: 0;
font-family: var(--font-body);
font-size: .82rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--muted);
}
.breadcrumb a {
color: var(--slate);
transition: var(--transition);
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep {
color: var(--muted);
font-weight: 400;
font-size: .82rem;
margin: 0 .45rem;
opacity: .6;
}
.breadcrumb .current {
color: var(--cta-blue);
font-weight: 600;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ── Page Hero ──────────────────────────────────────────── */
.page-hero {
background: var(--blue);
padding: 40px 0 34px;
position: relative; overflow: hidden;
/* ─── TO USE A BANNER IMAGE ──────────────────────────────
Add this to the element's style attribute:
style="background: url('images/banner/products-banner.jpg') center/cover no-repeat;"
Or set it in each page's inline style.
────────────────────────────────────────────────────── */
}
.page-hero-grid {
display: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero h1 .eco { color: var(--green); }
.page-hero h1 .aiot { color: var(--aiot); }
.page-hero p { color: rgba(255,255,255,.88); margin-top: .45rem; font-size: 1rem; max-width: 52rem; }
/* ── Footer ─────────────────────────────────────────────── */
.footer {
background: var(--blue);
color: rgba(255,255,255,.7);
padding: 48px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2.5rem;
padding-bottom: 2.75rem;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-logo { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.footer-logo .logo-mark { width: 38px; height: 38px; }
.footer-brand p { color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.7; margin-bottom: 1.1rem; }
.footer h5 {
font-family: var(--font-head); font-size: .7rem;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.38); margin-bottom: 1.1rem;
}
.footer-links a {
display: block; color: rgba(255,255,255,.6);
font-size: .88rem; padding: .28rem 0;
transition: var(--transition);
}
.footer-links a:hover { color: var(--green); padding-left: .4rem; }
.footer-contact p {
display: flex; gap: .5rem; align-items: flex-start;
font-size: .87rem; color: rgba(255,255,255,.6);
margin-bottom: .55rem;
}
/* 页脚邮箱/WhatsApp：显式链接，去掉 Chrome/iPad 等默认下划线 */
.footer-cta-link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none !important;
-webkit-text-decoration: none !important;
border-bottom: none !important;
font-weight: inherit;
transition: color var(--transition);
}
.footer-cta-link:visited {
color: rgba(255, 255, 255, 0.6);
}
.footer-cta-link:hover {
color: var(--green);
}
.footer-contact .ic { color: var(--green); flex-shrink: 0; }
.footer-contact .ic img.footer-ic {
display: block; width: 18px; height: 18px; object-fit: contain;
flex-shrink: 0; margin-top: .12rem; opacity: .92;
filter: brightness(0) saturate(100%) invert(72%) sepia(31%) saturate(950%) hue-rotate(93deg) brightness(98%);
}
.footer-certs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cert-tag {
padding: .18rem .6rem; border-radius: 4px;
border: 1px solid rgba(255,255,255,.14);
font-size: .68rem; font-family: var(--font-head);
letter-spacing: .06em; color: rgba(255,255,255,.45);
}
.footer-bottom {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: .65rem;
padding: 1.1rem 0;
}
.footer-bottom p { font-size: .8rem; color: rgba(255,255,255,.35); }
.footer-bottom a { color: rgba(255,255,255,.5); transition: var(--transition); }
.footer-bottom a:hover { color: var(--green); }
/* ── Scroll-to-top ──────────────────────────────────────── */
.scroll-top {
position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 999;
width: 42px; height: 42px; border-radius: 2px;
background: var(--cta-blue); color: #fff;
font-size: 1.1rem; display: none; align-items: center;
justify-content: center; box-shadow: 0 4px 18px rgba(47, 98, 255, 0.35);
transition: var(--transition);
}
.scroll-top.visible { display: flex; }
.scroll-top:hover { background: var(--cta-blue-hover); transform: translateY(-3px); }
/* ── WhatsApp float (anchor injected by main.js; stacks above .scroll-top) ── */
/* Horizontal: vertical axis through both buttons (scroll is 42px wide, right: 1.75rem). */
.wa-float {
position: fixed;
bottom: calc(1.75rem + 42px + 1.25rem);
/* scroll center from viewport right = 1.75rem + 21px; WA half-width = 27px */
right: calc(1.75rem + 21px - 27px);
z-index: 998;
width: 54px;
height: 54px;
border-radius: 50%;
background: #25d366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.42);
transition: transform var(--transition), box-shadow var(--transition);
}
.wa-float:hover {
transform: scale(1.06);
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
.wa-float svg {
width: 28px;
height: 28px;
flex-shrink: 0;
}
@media (max-width: 600px) {
.wa-float {
width: 50px;
height: 50px;
/* 50px WA → half 25px; align to scroll center */
right: calc(1.75rem + 21px - 25px);
bottom: calc(1.75rem + 42px + 1.25rem);
}
.wa-float svg {
width: 26px;
height: 26px;
}
}
@media (prefers-reduced-motion: reduce) {
.wa-float { transition: none; }
.wa-float:hover { transform: none; }
}
.wa-float.wa-float--solo {
bottom: 1.75rem;
right: calc(1.75rem + 21px - 27px);
}
@media (max-width: 600px) {
.wa-float.wa-float--solo {
bottom: 1.75rem;
right: calc(1.75rem + 21px - 25px);
}
}
/* ── Fade animations ────────────────────────────────────── */
.fade-up {
opacity: 0; transform: translateY(24px);
transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* ══════════════════════════════════════════════════════════
HOME PAGE
══════════════════════════════════════════════════════════ */
/* Hero */
.hero {
position: relative; overflow: hidden;
background: var(--blue);
min-height: 88vh;
display: flex; align-items: center;
/* ─── BANNER IMAGE SLOT ──────────────────────────────────
To use a real photo, add to the .hero element:
style="background: url('images/banner/home-banner.jpg') center/cover no-repeat;"
The overlays below will sit on top of it.
────────────────────────────────────────────────────── */
}
.hero-overlay {
position: absolute; inset: 0; pointer-events: none;
}
.hero-grid {
display: none;
}
.hero-glow-r {
position: absolute; top: -15%; right: -8%;
width: 560px; height: 560px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,72,132,.14) 0%, transparent 72%);
}
.hero-glow-l {
position: absolute; bottom: -15%; left: -5%;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,168,107,.08) 0%, transparent 72%);
}
.hero .container {
position: relative; z-index: 2;
display: grid; grid-template-columns: 1fr 1fr;
gap: 3.5rem; align-items: center;
padding-top: 5rem; padding-bottom: 2rem;
}
.hero-content { max-width: 580px; margin: 0; }
/* 首页：仅标题 + 说明下移；CTA / 数据 / 认证条用等量负 margin 拉回，避免整列被顶得过低 */
body.is-home {
--hero-lede-nudge: clamp(1.25rem, 3vw, 2.5rem);
}
body.is-home .hero .hero-lede {
margin-top: var(--hero-lede-nudge);
}
body.is-home .hero .hero-actions {
margin-top: calc(-1 * var(--hero-lede-nudge));
}
.hero-eyebrow {
display: flex; align-items: center; gap: .65rem; margin-bottom: 1.25rem;
}
.eyebrow-line {
width: 28px; height: 2px;
background: var(--green);
border-radius: 99px;
}
.eyebrow-text {
font-family: var(--font-head); font-size: .7rem;
letter-spacing: .2em; text-transform: uppercase; color: var(--green);
}
.hero h1 {
color: #fff; margin-bottom: 0; font-size: clamp(1.75rem, 3.8vw, 2.8rem);
letter-spacing: normal;
line-height: 1.14;
}
.hero h1 .hero-slogan-line1 {
display: block;
color: var(--cta-green);
}
@media (min-width: 560px) {
.hero h1 .hero-slogan-line1 {
white-space: nowrap;
}
}
.hero h1 .accent {
color: var(--cta-green);
display: block;
margin-top: -0.05em;
}
.hero h1 .hero-slogan-line2 {
display: block;
}
.hero-actions .btn-primary { padding-left: 1.2rem; padding-right: 1.2rem; }
.hero-desc {
color: #fff; font-size: 1.05rem;
max-width: 480px;
/* 与上一行 slogan 间距：在原有约 0.75rem 基础上增大 60% */
margin-top: calc(0.75rem * 1.6);
margin-bottom: 4.45rem; line-height: 1.5;
}
.hero-desc-line1,
.hero-desc-line2 {
display: block;
}
.hero-desc-line2 {
margin-top: calc((1.5 - 1) * 1em * 1.5);
}
.hero-actions { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.hero-stats {
display: flex; gap: 2rem; flex-wrap: wrap;
padding-top: 0;
border-top: none;
}
.stat-item .num {
font-family: var(--font-head); font-size: 1.75rem; font-weight: 700;
color: #fff; line-height: 1;
}
.stat-item .num em { color: var(--green); font-style: normal; }
.stat-item .lbl { font-size: .78rem; color: rgba(255,255,255,.45); margin-top: .15rem; }
/* Hero visual */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-ring {
width: 320px; height: 320px; border-radius: 50%;
background: linear-gradient(135deg, rgba(0,72,132,.18), rgba(0,168,107,.08));
border: 1px solid rgba(0,72,132,.28);
display: flex; align-items: center; justify-content: center;
position: relative; flex-shrink: 0;
animation: ring-pulse 5s ease-in-out infinite;
}
@keyframes ring-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(0,72,132,.25); }
50% { box-shadow: 0 0 0 24px rgba(0,72,132,.06); }
}
.hero-ring-inner {
width: 220px; height: 220px; border-radius: 50%;
background: linear-gradient(135deg, rgba(0,72,132,.3), rgba(0,168,107,.15));
border: 1px solid rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center;
/* ─── PRODUCT/LOGO IMAGE SLOT ────────────────────────────
To show your logo or product image here, replace the
.hero-icon span with:
────────────────────────────────────────────────────── */
}
.hero-icon { font-size: 4.5rem; }
.orbit-dot {
position: absolute; width: 9px; height: 9px; border-radius: 50%;
background: var(--green); box-shadow: 0 0 10px var(--green);
}
.orbit-dot:nth-child(1) { top: 6%; left: 54%; animation: od1 6s ease-in-out infinite; }
.orbit-dot:nth-child(2) { top: 53%; right: 2%; background: var(--blue-light); box-shadow: 0 0 10px var(--blue-light); animation: od2 8s ease-in-out infinite; }
.orbit-dot:nth-child(3) { bottom: 9%; left: 38%; animation: od3 7s ease-in-out infinite; }
@keyframes od1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-7px,10px)} }
@keyframes od2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(9px,-7px)} }
@keyframes od3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(7px,-9px)} }
.tech-pill {
position: absolute;
background: rgba(255,255,255,.06);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.1);
border-radius: 99px; padding: .38rem .85rem;
font-family: var(--font-head); font-size: .68rem;
color: rgba(255,255,255,.78); letter-spacing: .05em;
white-space: nowrap;
}
.tech-pill .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); margin-right: .4rem; vertical-align: middle; }
.tech-pill.p1 { top: 10%; left: -10%; }
.tech-pill.p2 { top: 16%; right: -8%; }
.tech-pill.p3 { bottom: 16%; left: -8%; }
/* Hero certification trust bar */
.hero-cert-bar {
display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
margin-top: 1.25rem; padding-top: 0;
border-top: none;
}
.hcb-label {
font-family: var(--font-head); font-size: .65rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.32); margin-right: .2rem;
}
.hcb-tag {
font-family: var(--font-head); font-size: .68rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.15);
padding: .22em .62em; border-radius: 2px;
transition: var(--transition);
}
.hcb-tag:hover { color: var(--green); border-color: rgba(0,168,107,.4); }
/* ── Region strip — REMOVED */
/* Why Choose section */
.section-why { padding-top: 28px; padding-bottom: 28px; }
.section-why .section-header { margin-bottom: 1.25rem; }
/* 标题内 ECOAIOT 与顶栏 .logo-text 一致：ECO 绿、AIOT --nav-text */
.section-why .section-header h2 .eco { color: var(--green); }
.section-why .section-header h2 .aiot { color: var(--nav-text); }
.why-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem;
}
.why-card {
background: var(--white); border-radius: var(--radius-lg);
padding: 1.4rem 1.35rem; border: 1px solid var(--border);
box-shadow: 0 2px 12px rgba(0,72,132,.06);
transition: var(--transition); position: relative; overflow: hidden;
text-align: center;
}
.why-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--cta-blue);
opacity: 1; transition: var(--transition);
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.why-card:hover::before { background: var(--cta-blue-hover); }
.why-icon {
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, var(--blue-pale) 0%, rgba(0,168,107,.14) 100%);
display: flex; align-items: center; justify-content: center;
font-size: 1.75rem; margin: 0 auto 1rem; transition: var(--transition);
}
.why-icon img.ico-svg {
width: 30px; height: 30px; object-fit: contain;
transition: var(--transition);
}
.why-card:hover .why-icon { background: var(--cta-blue); }
.why-card:hover .why-icon img.ico-svg { filter: brightness(0) invert(1); }
.why-card h4 { margin-bottom: .5rem; }
.why-card p { font-size: .88rem; text-align: left; }
/* Product showcase (home) */
.showcase-dark {
background: var(--blue);
position: relative; overflow: hidden;
}
.showcase-dark-grid {
display: none;
}
.showcase-dark .section-header h2 { color: #fff; }
.showcase-dark .section-header p { color: rgba(255,255,255,.5); }
/* Home — 浅底大标题用科技蓝，科技蓝底大标题用白 */
body.is-home .section-header h2 { color: var(--blue); }
body.is-home .showcase-dark .section-header h2 { color: #fff; }
body.is-home .showcase-dark .section-header p { color: rgba(255, 255, 255, 0.72); }
body.is-home .reach-grid > div:first-child > h2 { color: var(--blue); }
.showcase-tabs {
display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.tab-pill {
font-family: var(--font-head); font-size: .76rem; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
padding: .5rem 1.1rem; border-radius: var(--radius);
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.55); transition: var(--transition);
}
.tab-pill.active, .tab-pill:hover {
background: var(--white);
border-color: var(--white);
color: var(--cta-blue);
}
.product-cards-grid {
display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem;
}
.product-card-dark {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.07);
border-radius: var(--radius-lg); padding: 1.6rem;
transition: var(--transition); cursor: pointer; display: block;
}
.product-card-dark:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-4px);
}
.pcd-thumb {
width: 100%; height: 148px;
background: linear-gradient(135deg, rgba(0,72,132,.18), rgba(0,168,107,.08));
border-radius: var(--radius); border: 1px solid rgba(255,255,255,.05);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1.1rem;
/* ─── PRODUCT IMAGE SLOT ─────────────────────────────────
Replace font-size emoji with:
────────────────────────────────────────────────────── */
}
.pcd-thumb-icon { font-size: 2.8rem; display: flex; align-items: center; justify-content: center; }
.pcd-thumb-icon img.ico-svg { width: 44px; height: 44px; object-fit: contain; opacity: .95; }
/* Home showcase — Software (icon-only): light plate on blue so icon + block read clearly */
.pcd-thumb--icon {
height: 158px;
background: linear-gradient(165deg, #f2f6fb 0%, #e4ecf6 42%, #d5e4f2 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
0 6px 22px rgba(0, 24, 56, 0.18);
}
.pcd-thumb--icon .pcd-thumb-icon img.ico-svg {
width: 54px;
height: 54px;
opacity: 1;
filter: drop-shadow(0 2px 6px rgba(0, 72, 132, 0.22));
}
.product-card-dark--icon:hover .pcd-thumb--icon {
border-color: rgba(255, 255, 255, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 10px 28px rgba(0, 24, 56, 0.22);
}
.product-card-dark--icon .pcd-desc {
color: rgba(255, 255, 255, 0.66);
}
.pcd-cat { font-family: var(--font-head); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: .3rem; }
.pcd-name { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .4rem; }
.pcd-desc { font-size: .83rem; color: rgba(255,255,255,.48); }
.pcd-link { margin-top: .9rem; font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: .35rem; transition: var(--transition); }
.product-card-dark:hover .pcd-link { color: var(--green); gap: .6rem; }
/* Solutions grid (home) */
.solutions-grid-2 {
display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem;
}
.sol-item {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 1.6rem;
display: flex; gap: 1.1rem; align-items: flex-start;
transition: var(--transition);
}
.sol-item:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--blue-pale); }
.sol-icon {
width: 46px; height: 46px; flex-shrink: 0;
background: var(--blue-pale); border-radius: var(--radius);
display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.sol-icon img.ico-svg { width: 24px; height: 24px; object-fit: contain; }
.sol-item h4 { margin-bottom: .35rem; font-size: .97rem; }
.sol-item p { font-size: .86rem; }
/* Partners */
.partners-bar {
background: var(--white);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 2.25rem 0;
}
.partners-label {
font-family: var(--font-head); font-size: .68rem; letter-spacing: .15em;
text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 1.35rem;
}
.partners-logos {
display: flex; justify-content: center; align-items: center;
flex-wrap: wrap; gap: 1.5rem;
}
.partner-logo {
font-family: var(--font-head); font-size: .82rem; font-weight: 600;
letter-spacing: .07em; color: var(--muted);
padding: .45rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
transition: var(--transition);
}
.partner-logo:hover { color: var(--blue); border-color: var(--blue); }
/* CTA Banner */
.cta-banner {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 50%, #006b4a 100%);
position: relative; overflow: hidden;
}
.cta-banner::after {
display: none;
}
.cta-banner .container {
position: relative; z-index: 2;
display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: 1.75rem;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,.6); max-width: 440px; margin-top: .4rem; }
body.is-home .cta-banner h2 {
font-size: clamp(1.12rem, 2.1vw, 1.42rem);
font-weight: 700;
line-height: 1.32;
letter-spacing: -.01em;
}
.cta-banner .cta-banner-lead {
color: rgba(255,255,255,.6);
max-width: 440px;
margin-top: .4rem;
margin-bottom: 0;
}
.cta-banner .cta-banner-subline {
color: rgba(255,255,255,.6);
max-width: 440px;
margin-top: .35rem;
}
body.is-home .cta-banner .cta-banner-lead,
body.is-home .cta-banner .cta-banner-subline {
max-width: min(100%, 38rem);
}
@media (min-width: 720px) {
body.is-home .cta-banner .cta-banner-lead {
white-space: nowrap;
}
}
.cta-actions { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; }
/* Global reach */
.reach-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 4.5rem;
align-items: center;
}
.reach-grid > * {
min-width: 0;
}
.reach-list { display: flex; flex-direction: column; gap: .65rem; }
.reach-item {
display: flex; gap: .85rem; align-items: center;
padding: .75rem 1rem;
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); font-size: .9rem;
transition: var(--transition);
}
.reach-item:hover { border-color: var(--blue-pale); box-shadow: var(--shadow-sm); }
.reach-flag { font-size: 1.3rem; }
.reach-flag-abbr {
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.35rem; height: 2.35rem; padding: 0 .45rem;
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
letter-spacing: .06em; color: var(--blue);
background: var(--blue-pale); border-radius: var(--radius);
border: 1px solid rgba(0,72,132,.12);
}
.reach-item strong { color: var(--navy); font-size: .9rem; }
.reach-item span { color: var(--muted); font-size: .82rem; }
.metrics-card {
background: linear-gradient(135deg, var(--blue-dark), var(--blue));
border-radius: var(--radius-lg); padding: 2.25rem;
position: relative;
overflow: hidden;
min-width: 0;
}
.metrics-card::before {
display: none;
}
.metrics-grid {
position: relative; z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.metric-item {
text-align: center; padding: 1.2rem;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
min-width: 0;
}
.metric-num {
font-family: var(--font-head);
font-size: clamp(1.2rem, 3.2vw + 0.65rem, 1.9rem);
font-weight: 700;
color: #fff;
line-height: 1.1;
overflow-wrap: anywhere;
}
.metric-num em { color: var(--green); font-style: normal; }
.metric-lbl {
font-size: .78rem;
color: rgba(255,255,255,.45);
margin-top: .2rem;
overflow-wrap: break-word;
}
/* ══════════════════════════════════════════════════════════
PRODUCTS PAGE
══════════════════════════════════════════════════════════ */
.products-layout {
display: grid; grid-template-columns: 230px 1fr;
gap: 2rem; align-items: flex-start;
padding: 14px 0 60px;
}
.category-sidebar {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden;
position: sticky; top: calc(var(--nav-height) + 16px);
}
.sidebar-head {
background: var(--blue); padding: .9rem 1.15rem;
font-family: var(--font-head); font-size: .68rem;
font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.45);
}
.cat-btn {
width: 100%; text-align: left; background: none;
padding: .9rem 1.15rem;
font-family: var(--font-head); font-size: .86rem; font-weight: 500;
letter-spacing: .03em; color: var(--slate);
border-bottom: 1px solid var(--border);
transition: var(--transition);
display: flex; align-items: center; gap: .6rem;
}
.cat-btn:last-child { border-bottom: none; }
.cat-btn .ci {
font-size: 1.05rem; width: 22px; text-align: center;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cat-btn .ci img { width: 18px; height: 18px; object-fit: contain; }
.cat-btn.active .ci img { filter: brightness(0) invert(1); }
.cat-btn:hover { background: #EEF2FF; color: var(--cta-blue); }
.cat-btn.active { background: var(--cta-blue); color: #fff; }
.cat-btn .cnt {
margin-left: auto; font-size: .68rem; font-weight: 600;
padding: .1rem .42rem; border-radius: 99px;
background: rgba(255,255,255,.15);
}
.cat-btn:not(.active) .cnt { background: #E8ECF5; color: var(--slate); }
.products-content {}
.products-toolbar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 1rem; margin-bottom: 1.35rem;
}
.cat-title { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.prod-search {
display: flex; gap: .4rem; align-items: center;
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius); padding: .42rem .85rem;
}
.prod-search input {
border: none; outline: none; font-family: var(--font-body);
font-size: .86rem; background: transparent; width: 195px; color: var(--navy);
}
.prod-search input::placeholder { color: var(--muted); }
.product-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 1.15rem;
}
.prod-card {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-product-card); overflow: hidden;
box-shadow: var(--shadow-product-card);
transition: var(--transition); display: flex; flex-direction: column;
}
.prod-card:hover {
box-shadow: var(--shadow);
transform: translateY(-4px);
border-color: rgba(0,72,132,.18);
}
.prod-img {
width: 100%; aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--blue-pale), var(--green-pale));
display: flex; align-items: center; justify-content: center;
font-size: 2.6rem; border-bottom: 1px solid var(--border);
overflow: hidden;
transition: var(--transition);
/* ─── PRODUCT IMAGE SLOT ─────────────────────────────────
In products.html JS, the prod-img div is rendered dynamically.
To use real images, add an ![]()
inside or set background-image.
Example in the JS template literal:
────────────────────────────────────────────────────── */
}
.prod-card:hover .prod-img { background: linear-gradient(135deg, rgba(0,72,132,.08), rgba(0,168,107,.08)); }
/* Catalog cards without product photo (e.g. Software): hero-style block + large inverted icon */
.prod-img--icon {
background: linear-gradient(145deg, #001f3d 0%, #002948 42%, #004884 100%) !important;
padding: clamp(1rem, 4vw, 1.5rem);
}
.prod-img--icon.prod-img--icon-green {
background: linear-gradient(145deg, #004530 0%, #006b4a 48%, #00A86B 100%) !important;
}
.prod-img-icon-graphic {
width: min(48%, 7.5rem);
min-width: 4.5rem;
height: auto;
max-height: 78%;
object-fit: contain;
margin: auto;
filter: brightness(0) invert(1);
opacity: .94;
transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.prod-card:hover .prod-img--icon {
background: linear-gradient(145deg, #2a58d4 0%, #3d6ef0 42%, #5C82FF 100%) !important;
}
.prod-card:hover .prod-img--icon.prod-img--icon-green {
background: linear-gradient(145deg, #0a9a62 0%, #12c47f 48%, #2EE89A 100%) !important;
}
.prod-card:hover .prod-img--icon .prod-img-icon-graphic {
opacity: 1;
transform: scale(1.06);
}
/* Text block — same palette as home .product-card-dark (showcase-dark portfolio) */
.prod-info {
padding: 1.15rem 1.1rem 1.05rem;
flex: 1;
display: flex;
flex-direction: column;
background: var(--prod-info-bg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
}
.prod-cat {
font-family: var(--font-head);
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--green);
margin-bottom: .3rem;
}
.prod-info h4 {
font-family: var(--font-head);
font-size: 1rem;
font-weight: 600;
margin-bottom: .4rem;
color: #fff;
}
.prod-info p {
font-size: .83rem;
flex: 1;
color: rgba(255, 255, 255, 0.48);
line-height: 1.55;
}
.prod-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: .9rem;
padding-top: .8rem;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.prod-link {
font-family: var(--font-head);
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: rgba(255,255,255,.78);
display: flex;
align-items: center;
gap: .35rem;
transition: var(--transition);
}
.prod-card:hover .prod-link { color: var(--green); gap: .6rem; }
.prod-badge {
font-size: .6rem;
font-family: var(--font-head);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
padding: .18rem .5rem;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* 悬停仅提亮文字区，不提暗 */
.prod-card:hover .prod-info {
background: var(--prod-info-bg-hover);
border-top-color: rgba(255, 255, 255, 0.28);
}
/* ══════════════════════════════════════════════════════════
PRODUCT DETAIL PAGE
Spacing tokens: --pd-* on :root. Mobile overrides in @media (max-width:900px).
ROLLBACK — restore literals; delete --pd-* from :root and the :root { } inside @media (max-width:900px):
.detail-layout { gap:3.5rem; padding:28px 0 25px; }
@media (max-width:900px) { .detail-layout { grid-template-columns:1fr; padding:28px 0 43px; gap:1.75rem; } }
.product-tabs-section { padding:0 0 14px; }
product *.html related : padding:10px 0 (not var)
══════════════════════════════════════════════════════════ */
.detail-layout {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--pd-layout-gap);
padding: var(--pd-layout-pad-top) 0 var(--pd-layout-pad-bottom);
}
/* Grid min-width:auto would let wide thumb rows / tables blow out the viewport on phones */
.detail-layout > * {
min-width: 0;
}
/* Gallery */
.gallery-main {
width: 100%; aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--blue-pale), var(--green-pale));
border-radius: var(--radius-lg); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 5.5rem; margin-bottom: .85rem; overflow: hidden;
touch-action: pan-y;
/* ─── MAIN PRODUCT IMAGE SLOT ────────────────────────────
Replace the emoji span with:
────────────────────────────────────────────────────── */
}
.gallery-thumbs {
display: flex;
gap: .65rem;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
}
.gallery-thumb {
width: 68px; height: 68px; border-radius: var(--radius);
background: var(--white); border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 1.45rem; cursor: pointer; transition: var(--transition);
/* ─── THUMBNAIL IMAGE SLOT ───────────────────────────────
Replace emoji content with 
inside each thumb
────────────────────────────────────────────────────── */
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--cta-blue); }
/* Bottom-centre prev / next arrow bar */
.gallery-nav-bar {
position: absolute;
bottom: .85rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.9rem;
z-index: 10;
}
/* Before main.js runs: HTML still has prev/next as direct children of the wrapper (inline left/right).
Keep bottom-centre layout on first paint to avoid a “flash” at mid-height. Uses :has() (baseline 2023+). */
.detail-layout .fade-up > div:has(#galleryMain):has(#galleryPrev) > #galleryPrev,
.detail-layout .fade-up > div:has(#galleryMain):has(#galleryNext) > #galleryNext {
position: absolute !important;
top: auto !important;
bottom: 0.85rem !important;
}
.detail-layout .fade-up > div:has(#galleryMain):has(#galleryPrev) > #galleryPrev {
left: 50% !important;
right: auto !important;
transform: translateX(calc(-100% - 0.45rem)) !important;
}
.detail-layout .fade-up > div:has(#galleryMain):has(#galleryNext) > #galleryNext {
left: 50% !important;
right: auto !important;
transform: translateX(0.45rem) !important;
}
/* Prev/next on product gallery — overrides inline sizes; lighter bg so main photo stays readable */
.gallery-nav-bar button,
.about-carousel .gallery-nav-bar button,
#galleryPrev,
#galleryNext {
touch-action: manipulation;
width: 53px !important;
height: 53px !important;
min-width: 53px;
min-height: 53px;
font-size: 1.71rem !important;
line-height: 1;
border-radius: 50% !important;
color: #fff !important;
border: none !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0 !important;
background: rgba(16, 24, 32, 0.38) !important;
box-shadow:
0 1px 5px rgba(0, 0, 0, 0.14),
inset 0 0 0 1px rgba(255, 255, 255, 0.16);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.gallery-nav-bar button:hover,
.gallery-nav-bar button:focus-visible,
#galleryPrev:hover,
#galleryPrev:focus-visible,
#galleryNext:hover,
#galleryNext:focus-visible {
background: rgba(47, 98, 255, 0.5) !important;
box-shadow:
0 2px 14px rgba(47, 98, 255, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.28);
outline: none;
}
/* Info */
.detail-info {}
.detail-cat {
font-family: var(--font-head); font-size: .68rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--green); margin-bottom: .4rem;
}
.detail-info h1 { font-size: clamp(1.45rem,3vw,2.1rem); margin-bottom: .65rem; line-height: 1.22; }
/* Spec / chip line under product title — not relative to h1 (avoids oversized .7em) */
.detail-info h1 .detail-tagline {
display: block;
margin-top: .4rem;
font-size: clamp(0.75rem, 1.15vw, 0.875rem);
font-weight: 500;
color: var(--cta-blue);
line-height: 1.5;
letter-spacing: 0.02em;
max-width: 40rem;
}
.detail-short { font-size: .97rem; margin-bottom: 1.4rem; }
.spec-highlights {
display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin-bottom: 1.5rem;
}
.sh-item {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius); padding: .68rem .9rem;
}
.sh-label { font-size: .68rem; font-family: var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.sh-value { font-weight: 600; font-size: .88rem; }
.detail-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
@media (min-width: 901px) {
.detail-actions { gap: 2rem; }
}
.detail-perks {
display: flex; flex-wrap: wrap; gap: .75rem;
padding-top: 1.1rem; border-top: 1px solid var(--border);
}
.perk {
display: flex; gap: .4rem; align-items: center;
font-size: .8rem; color: var(--slate);
}
.perk .tick { color: var(--green); font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.perk .tick img { display: block; flex-shrink: 0; }
/* Product detail — local SVG feature / scene icons (brand palette) */
.prod-feat-ic,
.prod-scene-ic {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
flex-shrink: 0;
}
.prod-feat-ic img,
.prod-scene-ic img { display: block; }
h4 .prod-feat-ic { margin-right: .28rem; }
.prod-scene-ic--lg img { width: 44px; height: 44px; object-fit: contain; }
.gallery-main[style*="linear-gradient"] .prod-scene-ic img,
.prod-img[style*="linear-gradient(135deg,#001f3d"] .prod-scene-ic img,
.prod-img[style*="linear-gradient(135deg,#00325C"] .prod-scene-ic img,
.prod-img[style*="linear-gradient(135deg,#0a1628"] .prod-scene-ic img,
div[style*="linear-gradient(90deg,#0ea5e9"] .prod-scene-ic img {
filter: brightness(0) invert(1);
opacity: .95;
}
div[style*="background:var(--blue)"] .prod-scene-ic img,
div[style*="background:var(--green)"] .prod-scene-ic img,
div[style*="#7c3aed"] .prod-scene-ic img {
filter: brightness(0) invert(1);
opacity: .95;
}
.cert-row {
display: flex; gap: .4rem; flex-wrap: wrap;
margin-top: 1rem; padding: 1rem 1.1rem;
background: var(--bg); border-radius: var(--radius);
border: 1px solid var(--border);
}
.cert-chip {
font-size: .68rem; font-family: var(--font-head); letter-spacing: .06em;
padding: .2rem .6rem; border-radius: 4px;
border: 1px solid var(--border); color: var(--slate);
}
/* Product pages — 4-col card grids (replaces inline repeat(4,1fr); responsive) */
.pd-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.15rem;
}
.pd-card-grid.pd-card-grid--gap-sm { gap: 1rem; }
.pd-card-grid.pd-card-grid--gap-xs { gap: 0.85rem; }
.pd-card-grid.pd-card-grid--mb { margin-bottom: 1.8rem; }
@media (max-width: 900px) {
.pd-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.pd-card-grid { grid-template-columns: 1fr; }
}
/* Product tabs */
.product-tabs-section { padding: 0 0 var(--pd-tabs-below); }
.ptab-nav {
display: flex; border-bottom: 2px solid var(--border);
margin-bottom: 2rem; gap: .1rem;
}
.ptab-btn {
font-family: var(--font-head); font-size: .8rem; font-weight: 600;
letter-spacing: .05em; text-transform: uppercase;
padding: .7rem 1.2rem; background: none;
color: var(--muted); border-bottom: 3px solid transparent;
margin-bottom: -2px; transition: var(--transition);
}
.ptab-btn.active, .ptab-btn:hover { color: var(--cta-blue); border-bottom-color: var(--cta-blue); }
.ptab-panel {
display: none;
max-width: 100%;
}
.ptab-panel.active { display: block; }
/* Product tabs — unify heading colour below tab nav (h3, feature h4, application titles) */
.product-tabs-section .ptab-panel > h3 {
color: var(--blue-dark);
}
.product-tabs-section .ptab-panel h4 {
color: var(--blue-dark);
}
.product-tabs-section .ptab-panel#panel-applications strong {
color: var(--blue-dark);
font-weight: 700;
}
/* Spec / comparison tables: keep row styling; don’t force tab heading colour on in cells */
.product-tabs-section .ptab-panel .spec-table strong {
color: inherit;
font-weight: 700;
}
/* Avoid overflow-x on whole panel — it draws a grey scrollbar track under copy on narrow screens */
.spec-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.spec-table td:last-child {
overflow-wrap: anywhere;
word-break: break-word;
}
.spec-table thead th {
overflow-wrap: anywhere;
word-break: break-word;
}
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table td { padding: .82rem 1rem; font-size: .9rem; }
.spec-table tbody td {
text-align: left;
}
.spec-table td:first-child { font-weight: 600; color: var(--navy); width: 38%; background: var(--bg); }
/* Hover only data rows — avoids turning coloured header rows into pale blue */
.spec-table tbody tr:hover td {
background: var(--blue-pale);
}
/* Multi-column comparison thead (Hybrid UHF/NFC, NFC chip matrix, …): white + CTA blue + --border only */
.spec-table.spec-table--dual-tech thead th {
padding: .88rem 1.25rem;
font-size: .82rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
text-align: left;
color: var(--cta-blue);
background: var(--white);
border-right: 2px solid var(--border);
vertical-align: middle;
}
.spec-table.spec-table--dual-tech thead th:last-child {
border-right: none;
}
.spec-table.spec-table--dual-tech thead th:first-child {
width: 38%;
}
.spec-table.spec-table--dual-tech thead th:not(:last-child) {
padding-right: 1.85rem;
}
/* ══════════════════════════════════════════════════════════
SOLUTIONS PAGE
══════════════════════════════════════════════════════════ */
/* Solutions — “Serving Your Markets, Your Standards” market cards */
.sol-markets-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.15rem;
}
.sol-markets-grid > * {
min-width: 0;
}
@media (max-width: 1024px) {
.sol-markets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.sol-markets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.sol-markets-grid { grid-template-columns: 1fr; }
}
.sol-cards-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}
.sol-card {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition);
}
.sol-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: transparent; }
.sol-card-header {
width: 100%; height: 170px;
background: linear-gradient(135deg, var(--blue-dark), var(--blue));
display: flex; align-items: center; justify-content: center;
font-size: 3.2rem; position: relative; overflow: hidden;
}
.sol-card-header::after {
display: none;
}
.sol-card-header img.sol-card-ic {
position: relative; z-index: 1;
width: 72px; height: 72px; object-fit: contain;
filter: brightness(0) invert(1); opacity: .92;
}
.sol-card-body { padding: 1.45rem; }
.sol-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.sol-card p { font-size: .86rem; margin-bottom: .9rem; }
.sol-card .more {
display: inline-flex; align-items: center; gap: .5rem;
margin-top: .55rem;
padding: .58rem 1.1rem;
background: var(--blue-pale);
color: var(--cta-blue);
border: 1px solid rgba(47, 98, 255, 0.28);
border-radius: var(--radius);
font-family: var(--font-head); font-size: .8rem; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
transition: var(--transition);
}
.sol-card:hover .more {
background: rgba(47, 98, 255, 0.12); color: var(--cta-blue);
border-color: var(--cta-blue); gap: .75rem;
}
/* Solutions page — titles use site bright accent (--cta-blue, same as primary CTAs / AIOT mark) */
.page-solutions .section-header h2 { color: var(--cta-blue); }
.page-solutions .sol-card h3,
.page-solutions .ps-item h4,
.page-solutions .sol-markets-grid h4 { color: var(--cta-blue); }
.process-steps {
display: grid; grid-template-columns: repeat(4,1fr);
gap: 1.5rem; position: relative;
}
.process-steps::before {
content: ''; position: absolute; top: 30px;
left: 12.5%; right: 12.5%; height: 2px;
background: var(--border); z-index: 0;
}
.ps-item { text-align: center; position: relative; z-index: 1; }
.ps-num {
width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1rem;
background: var(--white); border: 2px solid var(--blue);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--blue);
}
.ps-item h4 { margin-bottom: .35rem; font-size: .95rem; }
.ps-item p { font-size: .84rem; }
/* ══════════════════════════════════════════════════════════
ABOUT PAGE
══════════════════════════════════════════════════════════ */
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
/* About carousel — dots overlay top-centre inside frame; arrows bottom (see about.html inline) */
.about-carousel .ac-dots {
position: absolute;
top: 1.45rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.4rem;
z-index: 11;
margin: 0;
pointer-events: auto;
}
.about-carousel { touch-action: pan-y; }
/* About — Key Numbers (inline grid was 4×1 on all breakpoints; caused clipped labels on narrow screens) */
.about-key-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.35rem;
}
/* About — Milestones + Core Values two-column block */
.about-milestones-values {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: flex-start;
}
.about-milestones-values > * {
min-width: 0;
}
.about-milestones-values h4,
.about-milestones-values p {
overflow-wrap: break-word;
}
/* Our Story: title row mirrors list row (bullet gutter) so h2 left edge aligns with body text, not the · column */
.about-story-col .about-story-title-row {
display: flex;
gap: 0.65rem;
align-items: flex-start;
margin-bottom: 1.2rem;
}
.about-story-col .about-story-title-gutter {
flex-shrink: 0;
margin-top: 0.1rem;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.65;
color: transparent;
user-select: none;
}
.about-story-col .about-story-title {
margin: 0;
font-size: clamp(1.28rem, 2.1vw, 1.65rem);
font-weight: 700;
line-height: 1.5;
color: var(--cta-blue);
}
.about-visual-frame {
width: 100%; height: 380px;
background: linear-gradient(135deg, var(--blue-dark), var(--blue));
border-radius: var(--radius-lg); border: 1px solid rgba(0, 48, 91, 0.35);
display: flex; align-items: center; justify-content: center;
font-size: 4.5rem; position: relative; overflow: hidden;
/* ─── COMPANY/FACTORY IMAGE SLOT ─────────────────────────
style="background: url('images/about/factory.jpg') center/cover;"
────────────────────────────────────────────────────── */
}
.about-visual-frame::before {
display: none;
}
.about-float-card {
position: absolute; right: -20px; bottom: 28px;
background: var(--white); border-radius: var(--radius); padding: .9rem 1.1rem;
box-shadow: var(--shadow); border: 1px solid var(--border);
max-width: calc(100% - 0.5rem);
}
.about-float-card .big { font-family: var(--font-head); font-size: 1.85rem; font-weight: 700; color: var(--blue); line-height: 1; }
.about-float-card .sm { font-size: .78rem; color: var(--muted); }
.value-list { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.35rem; }
.vl-item { display: flex; gap: .8rem; align-items: flex-start; }
.vl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: .58rem; }
.vl-item h4 { margin-bottom: .18rem; font-size: .93rem; }
.vl-item p { font-size: .84rem; }
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 0; width: 2px; background: var(--blue); }
.tl-item { position: relative; margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.tl-item:last-child { margin-bottom: 0; padding-bottom: 0; border: none; }
.tl-item::before { content: ''; position: absolute; left: -1.85rem; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--blue); box-shadow: 0 0 7px var(--green); }
.tl-year { font-family: var(--font-head); font-size: .7rem; font-weight: 600; letter-spacing: .12em; color: var(--green); margin-bottom: .2rem; }
.tl-item h4 { color: #fff; margin-bottom: .2rem; font-size: .93rem; }
.tl-item p { color: rgba(255,255,255,.48); font-size: .84rem; }
.certs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.35rem; }
.cert-card {
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 1.85rem 1.4rem; text-align: center;
transition: var(--transition);
}
.cert-card:hover { box-shadow: var(--shadow); border-color: var(--blue-pale); transform: translateY(-3px); }
.cert-icon-box {
width: 60px; height: 60px; border-radius: 50%;
background: var(--blue-pale); display: flex; align-items: center;
justify-content: center; font-size: 1.65rem; margin: 0 auto .9rem;
/* ─── CERT LOGO IMAGE SLOT ───────────────────────────────
Replace emoji with: 
────────────────────────────────────────────────────── */
}
.cert-icon-box img { width: 30px; height: 30px; object-fit: contain; }
.cert-abbr {
font-family: var(--font-head); font-size: .78rem; font-weight: 700;
letter-spacing: .08em; color: var(--blue);
}
.cert-card h4 { font-size: .93rem; margin-bottom: .35rem; }
.cert-card p { font-size: .8rem; }
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.35rem; }
.team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); text-align: center; }
.team-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.team-avatar {
width: 100%; height: 170px;
background: linear-gradient(135deg, var(--blue-pale), var(--green-pale));
display: flex; align-items: center; justify-content: center; font-size: 3.2rem;
/* ─── TEAM PHOTO SLOT ────────────────────────────────────
style="background: url('images/team/team-1.jpg') center/cover;"
────────────────────────────────────────────────────── */
}
.team-info { padding: 1.1rem; }
.team-info h4 { margin-bottom: .18rem; }
.team-role { font-size: .78rem; color: var(--blue); font-weight: 500; margin-bottom: .35rem; }
.team-info p { font-size: .8rem; }
/* ══════════════════════════════════════════════════════════
CONTACT PAGE
══════════════════════════════════════════════════════════ */
.contact-layout {
display: grid; grid-template-columns: 1fr 1.12fr;
gap: 4rem 4.75rem;
padding: 28px 0 40px; align-items: flex-start;
}
.contact-item {
display: flex; gap: .95rem; align-items: flex-start;
padding: .95rem 1.15rem;
background: var(--white); border: 1px solid var(--border);
border-radius: var(--radius-lg); transition: var(--transition);
}
.contact-item:hover { border-color: rgba(0,72,132,.22); box-shadow: var(--shadow-sm); transform: translateX(3px); }
.ci-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); background: var(--blue-pale); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ci-icon img.ci-ic-img { width: 22px; height: 22px; object-fit: contain; }
.ci-icon--whatsapp { background: #dcfce7; }
.ci-icon--whatsapp svg,
.ci-icon--whatsapp img { display: block; width: 22px; height: 22px; }
.ci-label { font-family: var(--font-head); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .18rem; }
.ci-value { font-size: .92rem; font-weight: 600; color: var(--navy); }
.ci-value a {
color: var(--navy);
text-decoration: none !important;
-webkit-text-decoration: none !important;
transition: var(--transition);
}
.ci-value a:hover { color: var(--blue); }
.hours-card { padding: 1.2rem 1.35rem; background: var(--blue-dark); border-radius: var(--radius-lg); }
.hours-label { font-family: var(--font-head); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: .8rem; }
.hours-row { display: flex; justify-content: space-between; font-size: .86rem; margin-bottom: .4rem; }
.hours-row .day { color: rgba(255,255,255,.55); }
.hours-row .time { color: #fff; font-weight: 500; }
.hours-row .closed { color: var(--muted); }
/* Simple form card */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.35rem; box-shadow: var(--shadow-sm); }
.form-card h3 { margin-bottom: .35rem; }
/* Contact: left/right card titles same size */
.contact-layout .form-card > h2,
.contact-layout .form-card > h3 {
font-size: clamp(1.6rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -.02em;
color: var(--cta-blue);
}
.contact-layout .form-card > h2 { margin-bottom: .65rem; }
.form-card > p { font-size: .88rem; color: var(--slate); margin-bottom: 1.25rem; }
.fg { margin-bottom: .95rem; }
.fg label { display: block; font-family: var(--font-head); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); font-weight: 600; margin-bottom: .4rem; }
.fg input, .fg textarea {
width: 100%; padding: .76rem .95rem;
border: 1.5px solid var(--border); border-radius: var(--radius);
font-family: var(--font-body); font-size: .92rem; color: var(--navy);
background: var(--bg); transition: var(--transition); outline: none;
}
.fg input:focus, .fg textarea:focus { border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(0,72,132,.08); }
.fg textarea { resize: vertical; min-height: 125px; }
/* Contact form: compact height for placeholder (~9 lines) + vertical padding */
#message {
min-height: calc(0.92rem * 1.55 * 9 + 1.52rem);
line-height: 1.55;
}
#message::placeholder {
color: #94a3b8;
opacity: 1;
}
.fg input.err, .fg textarea.err { border-color: #e53e3e; }
.form-privacy { font-size: .76rem; color: var(--muted); margin: .85rem 0 1.1rem; }
.form-privacy a { color: var(--blue); }
.btn-full { width: 100%; padding: .92rem; font-size: .93rem; }
.form-success { display: none; text-align: center; padding: 2.5rem 1rem; }
.success-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1.1rem; }
.form-success h3 { color: var(--green-dark); margin-bottom: .45rem; }
.form-success p { font-size: .88rem; }
.setup-note { background: var(--blue-pale); border: 1px dashed var(--blue); border-radius: var(--radius); padding: .8rem 1rem; font-size: .78rem; color: var(--blue); margin-bottom: 1.35rem; }
.setup-note strong { display: block; margin-bottom: .25rem; }
.setup-note code { background: rgba(0,72,132,.12); padding: .08rem .38rem; border-radius: 3px; font-family: monospace; font-size: .76rem; }
/* ══════════════════════════════════════════════════════════
GLOBAL SEARCH
══════════════════════════════════════════════════════════ */
/* Magnifier按钮：由 JS 插入 CTA 区；桌面端在 @media (min-width:1101px) 与字标/CTA 同高对齐 */
.nav-search-btn {
background: none; border: none; cursor: pointer;
color: var(--nav-text);
padding: 0.42rem 0.52rem;
border-radius: var(--radius); transition: var(--transition);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
line-height: 0;
}
.nav-search-btn:hover { color: var(--blue-dark); background: var(--blue-pale); }
/* Full-width overlay panel drops below fixed navbar */
.search-overlay {
position: fixed; top: var(--nav-height); left: 0; right: 0;
z-index: 8990;
background: rgba(16,24,32,.97);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,.07);
padding: 1.5rem 1rem 1.8rem;
display: none;
}
.search-overlay.open {
display: block;
z-index: 9050;
animation: srchSlide .17s ease;
}
/* 电脑端：搜索浮层背景为品牌科技蓝 */
@media (min-width: 1101px) {
.search-overlay {
background: #004884;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
}
@keyframes srchSlide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.search-overlay-inner { max-width: 660px; margin: 0 auto; }
/* Input row */
.search-input-wrap {
display: flex; align-items: center; gap: .7rem;
background: rgba(255,255,255,.06);
border: 1.5px solid rgba(255,255,255,.12);
border-radius: var(--radius-lg); padding: .75rem 1.1rem;
transition: border-color .18s;
}
.search-input-wrap:focus-within { border-color: var(--green); }
.search-input-wrap svg { flex-shrink: 0; color: var(--aiot); }
.search-input-wrap input {
flex: 1; background: none; border: none; outline: none;
font-family: var(--font-body); font-size: .95rem;
color: #fff; min-width: 0;
}
.search-input-wrap input::placeholder { color: rgba(255,255,255,.28); font-size: .85rem; }
.search-close-btn {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,.36); font-size: 1.1rem; line-height: 1;
padding: 0 .12rem; flex-shrink: 0; transition: color .15s;
}
.search-close-btn:hover { color: #fff; }
/* Quick result list */
.search-quick-results { margin-top: .85rem; display: flex; flex-direction: column; gap: .28rem; }
.search-result-item {
display: flex; align-items: flex-start; gap: .8rem;
padding: .62rem .9rem; border-radius: var(--radius);
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.055);
text-decoration: none; color: #fff;
transition: background .14s, border-color .14s;
}
.search-result-item:hover {
background: rgba(255,255,255,.09);
border-color: rgba(0,72,132,.3);
color: #fff;
}
.search-result-cat {
font-size: .62rem; font-family: var(--font-head);
text-transform: uppercase; letter-spacing: .09em;
color: var(--green); flex-shrink: 0;
min-width: 90px; padding-top: .18rem;
}
.search-result-body { min-width: 0; }
.search-result-name { font-size: .86rem; font-weight: 600; display: block; line-height: 1.3; }
.search-result-desc {
font-size: .73rem; color: rgba(255,255,255,.42);
display: block; margin-top: .14rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-hint { font-size: .74rem; color: rgba(255,255,255,.24); margin-top: 1rem; text-align: center; }
.search-see-all {
display: block; text-align: center; margin-top: .55rem;
padding: .48rem; font-size: .78rem; font-family: var(--font-head);
letter-spacing: .04em; color: var(--green);
border-top: 1px solid rgba(255,255,255,.055);
text-decoration: none; transition: opacity .15s;
}
.search-see-all:hover { opacity: 1; color: var(--cta-green-hover); }
/* Mobile menu search input（蓝底抽屉上的浅色搜索槽） */
.mob-search-wrap {
padding: .75rem 1.2rem .65rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mob-search-inner {
display: flex; align-items: center; gap: .6rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius); padding: .52rem .82rem;
cursor: text;
transition: border-color .18s;
}
.mob-search-inner:focus-within {
border-color: var(--green);
}
.mob-search-inner svg { color: #fff; flex-shrink: 0; pointer-events: none; }
.mob-search-inner input {
background: none; border: none; outline: none; flex: 1;
font-family: var(--font-body); font-size: .87rem; color: #fff;
min-width: 0;
}
.mob-search-inner input::placeholder { color: rgba(255, 255, 255, 0.45); }
.mob-search-icon-btn {
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
padding: 0; margin: 0; border: none; background: none; cursor: pointer;
color: #fff;
line-height: 0;
-webkit-tap-highlight-color: transparent;
}
.mob-search-icon-btn svg { pointer-events: none; }
/* ── Search Results Page (search.html) ─────────────────── */
.search-page-hero {
background: var(--blue); padding: 2.4rem 0 1.9rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.search-page-input-wrap {
display: flex; align-items: center; gap: .7rem;
background: rgba(255,255,255,.07);
border: 1.5px solid rgba(255,255,255,.14);
border-radius: var(--radius-lg); padding: .78rem 1.2rem;
max-width: 600px; transition: border-color .18s;
}
.search-page-input-wrap:focus-within { border-color: var(--green); }
.search-page-input-wrap svg { color: var(--aiot); flex-shrink: 0; }
.search-page-input-wrap input {
flex: 1; background: none; border: none; outline: none;
font-family: var(--font-body); font-size: .98rem;
color: #fff; min-width: 0;
}
.search-page-input-wrap input::placeholder { color: rgba(255,255,255,.3); }
.search-results-count { font-size: .8rem; color: var(--muted); margin-top: .9rem; }
.search-section-label {
font-family: var(--font-head); font-size: .72rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
margin: 2rem 0 .8rem; padding-bottom: .48rem;
border-bottom: 1px solid var(--border);
}
.search-card {
display: flex; align-items: flex-start; gap: 1rem;
padding: 1.05rem 1.2rem; border-radius: var(--radius-lg);
background: var(--white); border: 1px solid var(--border);
text-decoration: none; color: var(--text);
transition: box-shadow .18s, border-color .18s;
margin-bottom: .6rem;
}
.search-card:hover { box-shadow: var(--shadow); border-color: rgba(0,72,132,.2); }
.search-card-badge {
font-size: .61rem; font-family: var(--font-head); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: #fff; background: var(--cta-blue); border-radius: 4px;
padding: .2rem .5rem; white-space: nowrap;
flex-shrink: 0; margin-top: .2rem;
}
.search-card-badge.sol { background: var(--green); }
.search-card-body { min-width: 0; flex: 1; }
.search-card-cat {
font-size: .7rem; color: var(--muted); font-family: var(--font-head);
text-transform: uppercase; letter-spacing: .07em; margin-bottom: .24rem;
}
.search-card-name {
font-family: var(--font-head); font-size: .98rem;
font-weight: 700; margin-bottom: .28rem; color: var(--text);
}
.search-card-desc { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.search-card-arrow { color: var(--blue); flex-shrink: 0; font-size: .88rem; padding-top: .22rem; }
.search-empty { text-align: center; padding: 3.5rem 0; }
.search-empty-icon {
margin-bottom: 1rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.search-empty-icon img { width: 56px; height: 56px; object-fit: contain; opacity: .88; }
.search-empty h3 { margin-bottom: .5rem; }
.search-empty p { color: var(--muted); margin-bottom: 1.75rem; }
/* 电脑端：主菜单在顶栏视觉居中；左右保留 logo 与 CTA */
@media (min-width: 1101px) {
:root {
--nav-height: 54px;
/* 与 .navbar .nav-logo img 高度 28px 一致（整行视觉以图标为准） */
--nav-mark-h: 28px;
}
/* 顶栏内容区略窄于全站 .container */
.navbar .container {
position: relative;
justify-content: flex-start;
max-width: 1100px;
width: 90%;
/* logo / 菜单 / CTA 共用同一垂直中线 */
align-items: center;
}
/* 略收窄宽度，高度保持 28px 不增高 */
.navbar .nav-logo img {
width: 25px !important;
height: 28px !important;
max-width: 25px;
object-fit: contain;
object-position: center;
}
.navbar .nav-logo .logo-text {
font-size: 1.42rem;
}
.nav-links {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-left: 0;
z-index: 2;
align-items: center;
gap: 0.72rem;
}
/* 较矮顶栏：略减上下留白，与 --nav-height 协调 */
.nav-links a {
padding: 0.36rem 0.72rem;
}
.nav-links a::after {
bottom: 0.09rem;
}
.nav-logo {
position: relative;
z-index: 3;
align-items: center;
}
.navbar .container .nav-links + div {
margin-left: auto;
position: relative;
z-index: 3;
display: flex;
align-items: center;
}
/* 顶栏 CTA：外框高度与字标行一致，字号更小避免抢戏 */
.navbar .container .nav-links + div .btn.btn-green {
box-sizing: border-box;
border: none;
height: var(--nav-mark-h);
min-height: var(--nav-mark-h);
max-height: var(--nav-mark-h);
padding: 0 0.52rem !important;
font-size: 0.7rem !important;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
align-self: center;
}
/* 搜索图标与字标/CTA 同高，保证顶栏同一水平中线 */
.navbar .nav-search-btn {
box-sizing: border-box;
width: var(--nav-mark-h);
height: var(--nav-mark-h);
min-width: var(--nav-mark-h);
padding: 0;
align-self: center;
}
.navbar .nav-search-btn svg {
display: block;
}
}
/* ══════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
:root {
--nav-height: 58px;
--nav-mark-h: 22px;
}
/* Nav: switch to hamburger at 1100px — covers Surface Pro 7 (912px) and iPad Pro (1024px) */
.nav-links, .nav-cta { display: none; }
.hamburger { display: flex; }
/* Links carried margin-left:auto; when hidden, push CTA + hamburger right */
.navbar .container .nav-links + div { margin-left: auto; }
/* 无顶栏 CTA、仅汉堡时（如 thank-you） */
.navbar .container .nav-links + .hamburger { margin-left: auto; }
/* Hide desktop search button on mobile — search available via mobile menu */
.nav-search-btn { display: none; }
/* 顶栏 CTA：与汉堡并列；略增高、阴影收小，仍与 logo/汉堡同一垂直中线对齐 */
.navbar .container .nav-links + div .btn.btn-green {
box-sizing: border-box;
border: none;
height: auto;
min-height: 29px;
max-height: none;
padding: 0 0.55rem !important;
font-size: 0.68rem !important;
font-weight: 800;
line-height: 1;
letter-spacing: 0.04em;
align-self: center;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.07),
0 1px 3px rgba(0, 150, 95, 0.22);
transform: none;
}
.navbar .container .nav-links + div .btn.btn-green:hover {
transform: none;
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 160, 100, 0.28);
}
/* CTA 与汉堡图标拉近（仅当二者相邻、中间无其它结构时） */
.navbar .container .nav-links + div + .hamburger {
margin-left: -0.42rem;
padding-left: 0.28rem;
}
.product-cards-grid{ grid-template-columns: repeat(2,1fr); }
.sol-cards-grid { grid-template-columns: repeat(2,1fr); }
.certs-grid { grid-template-columns: repeat(2,1fr); }
.team-grid { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
.footer-grid > div:last-child { grid-column: 1/-1; }
.reach-grid { gap: 2.5rem; }
}
@media (max-width: 900px) {
:root {
--pd-layout-pad-bottom: 43px;
--pd-layout-gap: clamp(1.15rem, 3.8vw, 1.75rem);
}
/* Hero: single column, LEFT-aligned — photo provides visual on right */
.hero .container { grid-template-columns: 1fr; text-align: left; }
.hero-content { max-width: 100%; margin: 0; }
.hero-visual { display: none; }
.hero-desc { max-width: 100%; }
.hero-stats { justify-content: flex-start; }
.hero-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 100%;
justify-content: flex-start;
}
.hero-actions .btn {
width: 100%;
max-width: 100%;
justify-content: center;
box-sizing: border-box;
}
.hero-cert-bar { justify-content: flex-start; }
/* Shift photo right so worker/RFID effect stays in frame on narrower screens */
.hero { min-height: 72vh; background-position: 70% center !important; }
.solutions-grid-2 { grid-template-columns: 1fr; }
.reach-grid { grid-template-columns: 1fr; }
.about-story-grid { grid-template-columns: 1fr; }
.about-float-card { right: 0.65rem; }
.about-key-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-milestones-values { grid-template-columns: 1fr; gap: 2.25rem; }
.about-visual-frame { display: none; }
.contact-layout { grid-template-columns: 1fr; row-gap: 2rem; }
.detail-layout { grid-template-columns: 1fr; }
/* Product detail CTAs: same width + aligned when stacked */
.detail-actions {
flex-direction: column;
align-items: stretch;
}
.detail-actions .btn {
width: 100%;
max-width: 100%;
justify-content: center;
box-sizing: border-box;
}
/* Tabs: grid layout — no horizontal scroll (third label always reachable), no stray grey bar */
.ptab-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem 0.55rem;
border-bottom: none;
margin-bottom: 1.5rem;
overflow: visible;
}
.ptab-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 0;
padding: 0.62rem 0.55rem;
font-size: 0.7rem;
letter-spacing: 0.04em;
line-height: 1.25;
text-align: center;
border: 1px solid var(--border);
border-radius: var(--radius);
border-bottom: 1px solid var(--border);
color: var(--muted);
background: var(--white);
flex-shrink: unset;
}
.ptab-btn.active,
.ptab-btn.active:hover {
color: var(--cta-blue);
border-color: var(--cta-blue);
background: #EEF2FF;
border-bottom-color: var(--cta-blue);
}
.ptab-btn:hover:not(.active) {
border-color: var(--border);
color: var(--slate);
background: var(--bg);
}
.products-layout { grid-template-columns: 1fr; }
.category-sidebar { position: static; }
.process-steps { grid-template-columns: repeat(2,1fr); }
.process-steps::before { display: none; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.cta-banner .container { flex-direction: column; align-items: stretch; }
.cta-banner .cta-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 100%;
gap: 0.65rem;
}
.cta-banner .cta-actions .btn {
width: 100%;
max-width: 100%;
justify-content: center;
box-sizing: border-box;
}
}
@media (max-width: 640px) {
.section { padding: 28px 0; }
.why-grid { grid-template-columns: 1fr; }
.product-cards-grid{ grid-template-columns: 1fr; }
.sol-cards-grid { grid-template-columns: 1fr; }
.product-grid { grid-template-columns: 1fr 1fr; }
.certs-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.spec-highlights { grid-template-columns: 1fr 1fr; }
.process-steps { grid-template-columns: 1fr; }
/* Product detail — Features tab: inline 2-col grids → single column */
.ptab-panel [style*="repeat(2,1fr)"] {
grid-template-columns: 1fr !important;
}
.footer-bottom { flex-direction: column; text-align: center; }
.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.metrics-card { padding: 1.35rem 1rem; }
.metric-item { padding: 0.85rem 0.5rem; }
.metric-lbl { font-size: 0.72rem; }
.about-key-metrics { grid-template-columns: 1fr; }
/* Phone: shift further right to keep worker visible, extra dark overlay */
.hero { min-height: 100vh; background-position: 80% center !important; }
.hero .hero-overlay > div {
background: linear-gradient(
to right,
rgba(0,72,132,0.9) 0%,
rgba(0,72,132,0.72) 55%,
rgba(0,72,132,0.38) 100%
) !important;
}
}
@media (max-width: 480px) {
.ptab-nav {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.product-grid { grid-template-columns: 1fr; }
}