/* # 文件 前台样式入口(Tailwind CSS v4 + shadcn/ui 主题令牌)
* 配色保持原模板:品牌橙 #ed6c00 / 墨蓝 #1c2b3a / 分隔线 #e3e9f0 / 浅底 #f5f8fb。
* 刻意不引入 preflight(按需引入 theme + utilities),保留浏览器默认排版,
* 使数据库导入的 Elementor / 正文 HTML 视觉与迁移前完全一致。
* 末尾「内容兼容样式」仅服务于数据库导入的 HTML(ele-ban-* 等)与带状态
* 过渡的 Elementor 结构(轮播/ticker),React 组件一律使用 Tailwind 工具类。
*/
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
/* tw-animate-css:shadcn/ui 动画工具类(animate-in/fade-in/zoom-in 等),
* NavigationMenu 巨幕面板的 data-[motion=…] 切换动画依赖它 */
@import "tw-animate-css";
/* # 成员变量 Roboto(原站 Elementor kit 全局字体,自托管可变字重 latin 子集) **/
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/roboto-var-latin.woff2") format("woff2");
}
/* # 成员变量 Tailwind 主题令牌(与原 website.css 配色一一对应) **/
@theme {
--font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
--color-brand: #ed6c00;
--color-brand-dark: #c85600;
--color-ink: #1c2b3a;
--color-muted-foreground: #5f7183;
--color-line: #e3e9f0;
--color-soft: #f5f8fb;
--color-footer: #3e3e3f;
--color-footer-dark: #333334;
--color-primary: #ed6c00;
--color-primary-foreground: #ffffff;
--color-background: #ffffff;
--color-foreground: #1c2b3a;
--color-border: #e3e9f0;
--color-input: #e3e9f0;
--color-ring: #ed6c00;
--color-destructive: #b91c1c;
/* 原站 Max Mega Menu 主题色(megamenu 内联 CSS 实测值) */
--color-panel: #fcfbfa;
--color-panel-grey: #f4f5f8;
--color-panel-line: #f5b279;
--color-group-line: #fad3b3;
--color-subline: #e0e5f9;
--radius: 0.25rem;
}
/* # 成员变量 兼容变量:数据库 HTML 兼容样式与少量内联 style 仍引用旧变量名 **/
:root {
--brand: #ed6c00;
--brand-dark: #c85600;
--ink: #1c2b3a;
--muted: #5f7183;
--line: #e3e9f0;
--bg-soft: #f5f8fb;
--footer-bg: #0b1c2c;
}
@layer base {
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
/* 基准取原站实测(2026-10-31 headless):16px / #333;行高为无单位 1.5
* (原站 action 按钮 fs14 → 21px 随字号缩放,绝对 24px 会固定不变) */
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: #333333;
background: #fff;
}
img { max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
}
/* # 函数 站点容器(1200px 居中 + 两侧 16px) **/
@utility site-container {
margin-inline: auto;
max-width: 1200px;
padding-inline: 16px;
}
@layer components {
/* ===== 内容排版(Elementor / 正文 HTML,数据库导入内容) ===== */
/* kit 标题排版(post-15.css .elementor-kit-15 h1..h6):标题族一律 Roboto
* (h1/h3=primary Roboto 600、h2=Roboto 600 38px、h4~h6=accent Roboto 500);
* widget 标题(heading/image-box 等)的内联排版与 widget css 特异性更高,不受影响 */
.content-html h1 { font-family: "Roboto", sans-serif; font-weight: 600; }
.content-html h2 { font-family: "Roboto", sans-serif; font-size: 38px; font-weight: 600; }
.content-html h3 { font-family: "Roboto", sans-serif; font-weight: 600; }
.content-html h4, .content-html h5, .content-html h6 { font-family: "Roboto", sans-serif; font-weight: 500; }
.content-html img { max-width: 100%; height: auto; }
.content-html table { border-collapse: collapse; }
.content-html td, .content-html th { border: 1px solid var(--line); padding: 6px 10px; }
.content-html h1, .content-html h2, .content-html h3 { line-height: 1.35; }
/* ===== Elementor slides 轮播(首页 hero;全部数值取自原站实测)
* 取证链(1436px 视口 headless-Chrome 计算样式 + 原站 post-18.css):
* - 轮播高 560px(≤767px 为 340px,原站 per-widget 规则);背景图 cover 居中;
* - inner 为 flex 行容器:align-items:center(垂直居中实测 active slide
* contents y=169 = (560-439)/2)、左内边距 10%(实测 143.6px);
* - 内容块 max-width 720px + fit-content(SoM 实测 720 / 图标列实测 669);
* - 字号/行高:slide 描述基准 17px/1.4(实测继承值,标题/细节另有显式字号);
* - 箭头:40px eicon 实心 V、无底色、rgba(237,237,237,.9)、距边 10px、≤768 隐藏;
* - 圆点:12×12 圆、未激活黑 20% 透明度、激活 #ed6c00(e-global-color-primary)、
* 左右边距 6px、容器距底 5px(实测 pag y639..663,slide 底 668);
* - 切换:swiper transition=slide(水平推移 500ms)+ 内容 fadeInUp
* (data-animation=fadeInUp);自动播放 5000ms、悬停暂停(pause_on_hover)。
*/
.el-slides { position: relative; overflow: hidden; background: #bbbbbb; }
.el-slide {
position: absolute; inset: 0; transition: transform .5s ease;
background-size: cover; background-position: 50% 50%; pointer-events: none;
}
.el-slide.active { pointer-events: auto; }
.el-slide-inner {
position: relative; display: flex; align-items: center; height: 100%;
padding: 0 0 0 10%; text-align: start;
}
.el-slide-contents { width: fit-content; max-width: 720px; }
.el-slide-desc { font-size: 17px; line-height: 1.4; animation: el-fade-up 1s ease both; }
@keyframes el-fade-up {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: none; }
}
.el-slide-arrow {
position: absolute; top: 50%; transform: translateY(-50%); left: 10px; z-index: 3;
width: 40px; height: 40px; border: 0; background: transparent; color: rgba(237,237,237,.9);
display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.el-slide-arrow:hover { color: #fff; }
.el-slide-arrow.next { left: auto; right: 10px; }
.el-slide-arrow svg { width: 40px; height: 40px; fill: currentColor; }
.el-slide-dots {
position: absolute; bottom: 5px; left: 0; right: 0; display: flex; justify-content: center; z-index: 3;
}
.el-slide-dots button {
width: 12px; height: 12px; border-radius: 50%; border: 0; background: #000; opacity: .2;
margin: 0 6px; padding: 0; cursor: pointer;
}
.el-slide-dots button.on { background: #ed6c00; opacity: 1; }
/* ===== hero description 内嵌的 ele-ban-* 结构(原站 post-18.css 全量转写,数据库 HTML) ===== */
.ele-ban-tit-color-1 { color: #000000; }
.ele-ban-tit-color-2 { color: #ffffff; }
.ele-ban-tit-color-3 { color: #a5a5a5; }
.ele-ban-tit-color-4 { color: #5b5b5b; }
.ele-ban-title div { font-size: 48px !important; padding: 0; margin: 0 0 1rem; color: inherit; font-weight: bold; }
.ele-ban-details { font-size: 20px; margin-bottom: 1.5rem; }
/* note:原站含 hello-elementor reset(ul 默认 margin 全清零),本项目无 preflight,须显式 margin:0 */
.ele-ban1-ul ul { list-style: none; padding-left: 0; padding-bottom: 4rem; margin: 0; }
.ele-ban-slide-1 .ele-ban1-ul li { display: inline-block; max-width: 164px; text-align: center; }
.ele-ban-slide-1 .ele-ban1-li1 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-li2 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-li3 { background: url('/uploads/2023/09/ban-line-gray.png') no-repeat center right; padding: 0 10px 0 0; }
.ele-ban-slide-1 .ele-ban1-ul li img { margin: 0 auto 10px; }
.ele-ban-slide-1 .ele-ban1-ul li div { color: #5c5d5f; font-size: 18px; }
.ele-ban-btn a { background-color: transparent; background-image: linear-gradient(90deg, #f78400 0%, #fd5300 100%); color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; padding: 1rem 3rem; border-radius: 4px; transition: all 0.3s ease; }
.ele-ban-btn a:hover { color: #ffffff !important; box-shadow: 0 10px 20px rgba(237,108,0,0.5); background-color: transparent; background-image: linear-gradient(90deg, #f78400 50%, #fd5300 100%); }
.ele-ban-slide-4 .ele-ban1-ul li { display: inline-block; text-align: center; }
.ele-ban-slide-4 .ele-ban1-li1, .ele-ban-slide-4 .ele-ban1-li2, .ele-ban-slide-4 .ele-ban1-li3 { color: #ffffff; border-radius: 20px; padding: 10px 16px; border: 1px solid #ffffff; margin-right: 10px; }
.ele-ban-bBox ul { list-style: none; padding-left: 0; padding-bottom: 4rem; margin: 0; }
.ele-ban-bBox li { display: inline-block; text-align: center; margin-right: 10px; }
.ele-ban-btn2 a { color: #ffffff; font-size: 20px; font-weight: bold; text-decoration: none; padding: 0.875rem 3rem; border-radius: 4px; transition: all 0.3s ease; border: 1px solid #ffffff; box-sizing: border-box; }
.ele-ban-btn2 a:hover { background: #ffffff; color: #ed6c00; }
.ele-ban-slide-2 .ele-ban-title { overflow: hidden; }
.ele-silde3-det { width: 473px; height: 44px; background: url('/uploads/2023/09/dusun-orange-line.png') no-repeat center center; color: #ffffff; font-size: 24px !important; line-height: 44px; display: inline-block; }
.ele-ban-slide-3 .ele-ban1-ul li { display: inline-block; text-align: center; padding: 0 2rem 0.5rem 0; }
.ele-ban-slide-3 .ele-ban1-ul li img { margin: 0 10px 0 0; display: inline-block; float: left; }
.ele-ban-slide-3 .ele-ban1-ul li div { color: #5c5d5f; font-size: 18px; display: inline-block; float: left; line-height: 58px; color: #000000; }
.ele-ban-slide-3 .ele-ban-btn2 a { color: #000000; border: 1px solid #000000; }
.ele-ban-slide-3 .ele-ban-btn2 a:hover { background: #000000; color: #ed6c00; }
.ele-ban-slide-1 .ele-ban-btn2 a { color: #000000; border: 1px solid #000000; padding: 0.875rem 1rem; }
.ele-ban-slide-1 .ele-ban-btn2 a:hover { background: #000000; color: #ed6c00; }
.ele-ban-bt-top3 { margin-top: 3rem; }
.ele-ban-bt-top1 { margin-top: 1rem; }
/* reason:原站 @media(max-width:767px) 覆写(343340 高、6% 左距、隐藏箭头、
* 字号收缩、logo 图 90% 宽、隐藏图标列、按钮 padding 收缩) */
@media only screen and (max-width: 768px) {
.ele-ban-title div { font-size: 2rem !important; font-weight: bold; }
.ele-ban-details { font-size: 1.125rem; clear: both; }
.ele-ban-bBox li { margin-right: 8px; margin-bottom: 10px; }
.ele-ban-slide-4 .ele-ban1-ul li { margin-right: 10px; margin-bottom: 10px; }
.ele-ban-slide-4 .ele-ban1-li1, .ele-ban-slide-4 .ele-ban1-li2, .ele-ban-slide-4 .ele-ban1-li3 { padding: 10px 6px; }
.ele-ban-slide-1 .ele-ban1-ul li { max-width: 150px; }
.ele-ban1-ul ul { padding-bottom: 2rem; }
.ele-ban-btn a { padding: 0.75rem 1.5rem; }
.ele-ban-btn2 a { padding: 0.75rem 1.25rem; }
.ele-ban-slide-2 .ele-ban1-ul img { width: 90%; margin-bottom: 3rem; }
.ele-silde3-det { width: 300px; height: 44px; font-size: 1rem !important; padding-left: 0.5rem; margin: 0.5rem 0 0 0; float: none; }
.ele-ban-slide-3 .ele-ban1-ul li { display: inline-block; text-align: center; padding: 0 1rem 0.5rem 0; }
.ele-ban-slide-3 .ele-ban1-ul li img { width: 40px; margin-right: 6px; }
.ele-ban1-ul { display: none; }
.ele-ban-bBox ul { padding-bottom: 0; }
.el-slides { height: 340px !important; }
.el-slide-inner { padding-left: 6%; }
.el-slide-arrow { display: none; }
}
/* ===== content ticker(首页 H1 公告滚动条;数值取原站 2026-10-31 headless 实测)
* 原站渲染: .eael-ticker-wrap(flex 行)> .ticker-badge(span "Latest Products:") +
* .eael-ticker > .content-ticker(fade swiper) ;外层高 45px(badge 27px 行盒 + 16px 内边距)。
* badge 透明底、文字 18px/600 #000;内容链接 16px #222 hover #ED6C00(--e-global-color-primary);
* badge 与 ticker-content 同 padding 8px 12px;ticker-content 行高 1.8(EAEL 默认);
* 交叉淡入淡出时长 200ms(data-speed)、自动轮播 5000ms(data-autoplay)、不暂停(无 pause 属性)。
* slide 层:grid 叠放(grid-area 1/1)实现容器高按最高条目自适应,替代 swiper 绝对定位。
*/
.eael-ticker-wrap {
display: flex; flex-flow: row nowrap; align-items: center; width: 100%;
position: relative; overflow: hidden;
}
.eael-ticker-wrap .ticker-badge { flex: 0 0 auto; padding: 8px 12px; }
.eael-ticker-wrap .ticker-badge span { color: #000000; font-size: 18px; font-weight: 600; line-height: 1.5; }
.eael-ticker-wrap .eael-ticker { overflow: hidden; flex: 1 1 auto; min-width: 0; }
.eael-ticker-wrap .eael-ticker .content-ticker { width: 100%; }
.eael-ticker-wrap .content-ticker .swiper-wrapper {
display: grid; grid-template-columns: 1fr;
}
.eael-ticker-wrap .content-ticker .swiper-wrapper .swiper-slide {
grid-area: 1 / 1; opacity: 0; transition: opacity .2s ease;
}
.eael-ticker-wrap .content-ticker .swiper-wrapper .swiper-slide.active { opacity: 1; }
.eael-ticker-wrap .ticker-content { padding: 8px 12px; line-height: 1.8; }
.eael-ticker-wrap .ticker-content a { color: #222222; text-decoration: none; }
.eael-ticker-wrap .ticker-content a:hover { color: #ed6c00; }
/* ===== Elementor image-box widget(复刻原站 widget-image-box.min.css,数值 2026-10-31 实测)
* 结构:.el-imagebox > .el-imagebox-wrapper(块、text-align center) >
* figure.el-imagebox-img(inline-block;≥768 且图定位 top 时 margin auto 水平居中)
* > [a > img(block、line-height 0、max-width 100%——native 56px 图按原始尺寸呈现)]
* + .el-imagebox-content > .el-imagebox-title(标签随 title_size,默认 h3)+ p 描述(margin 0);
* title 颜色继承 body(原站 .elementor-image-box-title a color:inherit,实测 #333/16px/400),
* 因此标题不落品牌橙;figure 与标题间约 7px inline-block 基线空隙由排版自然形成。
* hover 滤镜(首页 H2 等页面级)放在 [data-el] 范围规则里,不在通用层。
*/
.el-imagebox-wrapper { text-align: center; }
/* margin:0 复位 UA figure 默认(原站 hello-elementor reset 后实测 figure margin 0px,
* 水平居中靠 wrapper text-align:center 的 inline-block 排版) */
.el-imagebox-img { display: inline-block; margin: 0; }
.el-imagebox-img img { display: block; max-width: 100%; line-height: 0; }
/* 图外层的 必须块化:内联 a 的行盒按基线对齐会给 figure 多出 ~2px 下伸部(H11 实测 fig 28 vs 26) */
.el-imagebox-img a { display: block; line-height: 0; }
.el-imagebox-title a { color: inherit; }
.el-imagebox-description { margin: 0; }
.el-imagebox-img img { transition: filter 0.3s ease; }
@media (min-width: 768px) {
/* 图在左/右的横向布局(原站 min-width:768px 分支);图与文案间距 15px
* (post-18 对 position-left/right 各自生成 .elementor-image-box-img margin-*,实测 H11 行) */
.el-imagebox-pos-left .el-imagebox-wrapper { display: flex; text-align: start; }
.el-imagebox-pos-left .el-imagebox-img { margin-right: 15px; }
.el-imagebox-pos-right .el-imagebox-wrapper { display: flex; flex-direction: row-reverse; text-align: end; }
.el-imagebox-pos-right .el-imagebox-img { margin-left: 15px; }
.el-imagebox-pos-left .el-imagebox-content, .el-imagebox-pos-right .el-imagebox-content { width: 100%; }
}
/* ===== 首页 H11 Developer Center 三卡列(post-18.css 对应块;1436 实测 2026-11-01)
* 原站这三列 populated 宽 = 列 453.33 - 水平 margin 10 = 443.33(flex 收缩语义),
* 与 H4 卡(populated = 列宽 272 含 margin 溢出)不同——此处按实测覆写为 auto 扣边距 */
[data-el="f43387e"] > div, [data-el="508f31a"] > div, [data-el="2b7b38c"] > div {
width: auto !important;
}
/* ec11f3f 的图宽 30% 只存在于 post-18 生成 CSS(DB settings 已无对应键),
* 其余八个 image-box 的 image_size 设置齐全、由组件内联输出(1436 实测 fig 宽全等) */
[data-el="ec11f3f"] .el-imagebox-img { width: 30%; }
@media (max-width: 767px) {
.el-imagebox-img { margin-inline: auto !important; margin-bottom: 15px; }
}
/* ===== EAEL adv-tabs 基础(eael-18.css 对应块;H12 Industries and Use Cases)
* 横排标签:nav ul flex flex-start;li flex 1 1 auto + 1em/1.5em(实测 16px 24px);
* 内容默认隐藏、.active 显示。竖排/角标箭头规则无实例,不移植。
*/
.eael-advance-tabs { display: block; }
.eael-advance-tabs .eael-tabs-nav > ul {
position: relative; padding: 0; margin: 0; list-style-type: none;
display: flex; justify-content: flex-start; align-items: center; z-index: 1;
}
.eael-advance-tabs .eael-tabs-nav > ul li {
position: relative; padding: 1em 1.5em; flex: 1 1 auto; cursor: pointer;
display: flex; justify-content: center; align-items: center; text-align: center;
background-color: #f1f1f1;
}
.eael-advance-tabs .eael-tabs-nav > ul li .eael-tab-title {
margin: unset; font-size: unset; line-height: unset; font-family: unset; font-weight: unset; color: unset;
}
.eael-advance-tabs .eael-tabs-content > div { display: none; opacity: 0; }
.eael-advance-tabs .eael-tabs-content > div.active { display: block; width: 100%; opacity: 1; }
/* ===== Elementor icon-list(widget-icon-list.min.css 语义;H13 链接条实测 2026-11-01)
* inline 视图:ul flex wrap + 负边距 -8px 与 li 8px 侧边距对冲(实测 ul margin 0 -8px);
* li/a 均 flex 居中;描边盒(border/padding/margin-bottom 6px)由节点 custom_css
* .ele-supplier-dif 注入;文字色 text_color 落 span、悬停主色走 per-widget 规则 */
.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.elementor-icon-list-item { display: flex; align-items: center; margin: 0 8px; }
.elementor-icon-list-item a { display: flex; align-items: center; text-decoration: none; }
/* ===== 首页 H12 adv-tabs 生成规则(post-18.css 对应块;1436 实测 2026-11-01)
* li 背景 #F4F5F8 + 文字 #333 + 底边 3px(默认同背景色、active/hover 变 #ED6C00,故 li 高 = 24+16*2+3);
* 内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA */
[data-el="ef0fcd9"] .eael-tabs-nav > ul li {
background-color: #F4F5F8; color: #333333;
border-style: solid; border-width: 0 0 3px; border-color: #F4F5F8;
}
[data-el="ef0fcd9"] .eael-tabs-nav > ul li.active,
[data-el="ef0fcd9"] .eael-tabs-nav > ul li:hover { color: #ED6C00; border-bottom-color: #ED6C00; }
[data-el="ef0fcd9"] .eael-tabs-nav > ul li .eael-tab-title { font-family: "Roboto", sans-serif; }
[data-el="ef0fcd9"] .eael-tab-content-item {
color: #333333; padding: 16px 0 0; border-top: 1px solid #C7CBDA;
}
/* ===== 首页 H13 Difference Maker(post-18.css 对应块;1436 实测 2026-11-01)
* 楼体大图 = 列 bf3d0ba 背景(bottom left + 100% auto,组件内联输出,post-18 生成规则
* background_size initial → 100% auto);icon-list 悬停主色(globals text_color_hover);
* 描边盒/按钮/列 padding 均设置驱动或 custom_css 注入,无额外规则 */
[data-el="002494b"] .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #ED6C00; }
/* ===== 首页 H13.5 counter 统计条(post-18.css 对应块;1436 实测 2026-11-01)
* 六列 16% 图标卡:列 padding 20px 16px 16px 36px + 边框 1px 0 1px 1px #E0E5F9
* (globals ee1917e,末列四边)设置驱动;图标宽 30% 仅存 post-18 生成 CSS(DB 无
* image_size 键),与 ec11f3f 同款补规则;标题 36px/700/#ED6C00、描述 18px 走
* title/description_typography 设置(随本版块进白名单) */
[data-el="efe1577"] .el-imagebox-img, [data-el="d48a588"] .el-imagebox-img,
[data-el="46684e1"] .el-imagebox-img, [data-el="17330e2"] .el-imagebox-img,
[data-el="a7cd0a1"] .el-imagebox-img, [data-el="e6b1413"] .el-imagebox-img { width: 30%; }
/* ===== 首页 H15 Trusted By Logo 墙(post-18.css 对应块;1436 实测 2026-11-01)
* 列 468316dc 设 space_between_widgets=0:widget 间距 0(实测 heading→text 0 间距、
* text 底即 logo 行顶),覆盖 kit-spacing 20px;
* 三行 logo 列(88b6737/e194e4f/f6a7591)populated 为 flex 纵向 + 垂直居中
* (实测图 dy = 列顶 + (148.8-130.8)/2),列 margin 8px + 边框 #474DFF26 设置驱动,
* 空占位列由组件裸渲染(无 populated 盒,margin/边框 0) */
[data-el="468316dc"] > div > [data-el]:not(:last-child):not(.el-w-auto):not(section) { margin-bottom: 0 !important; }
[data-el="88b6737"] .el-col > div,
[data-el="e194e4f"] .el-col > div,
[data-el="f6a7591"] .el-col > div { display: flex; flex-direction: column; justify-content: center; }
/* H14 四卡与 H15 logo 列:populated 扣除水平 margin(H14 680-8=672、H15 272-16=256,
* 与 H11 同款覆写;基线 100% 为 H4 溢出语义) */
[data-el="2902827"] > div, [data-el="9c42480"] > div,
[data-el="84729aa"] > div, [data-el="20852f8"] > div,
[data-el="88b6737"] .el-col > div, [data-el="e194e4f"] .el-col > div,
[data-el="f6a7591"] .el-col > div { width: auto !important; }
/* ===== 首页 H2 产品线入口(post-18.css 对应块;1436px 实测 2026-10-31)
* 外层 section:白→#F4F5F8 线性渐变(180deg)+ 1360 容器(SectionNode 背景已渲染);
* 中列 0.5rem 内边距;内层 e38a898 六列均分 224px,列内容 wrap padding 10px(高 107);
* 前五列右侧 v-line.png(2×50) 细竖线分隔(background-position center right,末列无线);
* 图占 figure 30% 宽、hover 亮度降至 90%(0.3s 过渡);≤767 列改 50% 宽两列三行。
*/
[data-el="0cfea23"], [data-el="91befe3"], [data-el="5ecac70"],
[data-el="bf3c723"], [data-el="13275e9"] {
background-image: url("/uploads/2023/09/v-line.png");
background-repeat: no-repeat;
background-position: center right;
}
/* 六列的 10px 内边距由列 gap 默认 padding 通用逻辑提供(ColumnNode),此处不再重复 */
[data-el="e38a898"] .el-imagebox-img { width: 30%; }
[data-el="e38a898"] .el-imagebox:hover .el-imagebox-img img {
filter: brightness(90%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}
@media (max-width: 767px) {
[data-el="91befe3"], [data-el="bf3c723"] { background-position: -2px 0; }
/* 列宽是行内样式,需 !important 压写在声明层之后 */
[data-el="e38a898"] > div > [data-el] { flex: 0 0 50% !important; max-width: 50% !important; }
/* post-18.css 对六个 widget 各有 margin-bottom:0,特异性高于基础 CSS 的 15px(实测原站 0px) */
[data-el="e38a898"] .el-imagebox-img { margin-bottom: 0 !important; }
}
/* ===== Elementor 通用规则(frontend.min.css 对应块)
* kit-widget-spacing:非末位 widget 的下间距默认 20px(实测原站 H4 text-editor margin 0 0 20px)
* 挂在 .el-col 直属 widget(data-el 包裹层)上。
* text-editor:display flow-root 建立 BFC(子元素 p 的下外距计入容器高度,与原站
* 实测 62.4 = 2 行 48 + p margin 14.4 一致),p 下外距 0.9em(原站 hello 环境 14.4px)。
*/
.el-col > div > [data-el]:not(.el-w-auto) { width: 100%; }
/* kit-spacing 20px 只挂 widget(.elementor-widget:not(:last-child)),内嵌 section 无此间距
* (H14 两行卡间实测 0 间距,section 曾被误加 20px 致行距 +20) */
.el-col > div > [data-el]:not(:last-child):not(.el-w-auto):not(section) { margin-bottom: 20px; }
.el-texteditor { display: flow-root; }
/* 0.9rem 固定值(原站 hello-elementor p 边距 14.4px @16 根字号;em 会随 widget 字号 20px 放大成 18px) */
.el-texteditor p { margin: 0 0 0.9rem; }
/* frontend.min.css:widget 内 figure 外边距清零(text-editor / post-content 例外保留 UA 边距);
* H10 html 模块 figure 曾因 UA margin(1em 40px) 被挤窄 80px、多出 16px 底边距 */
.content-html [data-el] figure:not(.el-imagebox-img) { margin: 0; }
.content-html .el-texteditor figure { margin-block: 1em; margin-inline: 40px; }
/* ===== Elementor widget-image 基础(widget-image.min.css 对应块)
* a 与 img 都是 inline-block 且 img vertical-align:middle,
* 消除行内盒基线空隙(否则容器多出 ~7px 行盒 descent,与原站 231.2≠238.2 对不上)。
*/
.el-image { text-align: center; }
.el-image a { display: inline-block; }
.el-image img { display: inline-block; vertical-align: middle; }
/* ===== Elementor hover 动画(e-animation-shrink.min.css):hover 缩至 90%,0.3s 过渡 */
/* heading 标题链接颜色继承(原站不受全局品牌橙影响,实测 #333/#000) */
.el-heading-title a { color: inherit; }
/* kit 全局链接排版(post-15.css .elementor-kit-15 a):链接默认 Roboto 400。
* 取证:tab 卡片 .card 为 ,kit 字体使其内部 ul/li 用 Roboto 渲染(文字 273.6px),
* 否则被卡片内嵌样式的 Arial 截住(261.9px),第 4 条规格多折一行(H9 body 高 +21.6)。
* 颜色不在此外加:各 widget 链接色已由自身规则(.el-heading-title a 等)与原站一致。
*/
.content-html a { font-family: "Roboto", sans-serif; font-weight: 400; }
.el-anim-shrink { transition-duration: 0.3s; transition-property: transform; }
.el-anim-shrink:hover, .el-anim-shrink:focus, .el-anim-shrink:active { transform: scale(0.9); }
/* ===== EAEL infobox 基础(取证:原站实际加载 uploads/essential-addons-elementor/eael-18.css,
* 并未加载 view/info-box.min.css——后者仅在带 content-align--* 修饰类时才给 icon/content 上 flex,
* 本站 infobox 只有 icon-on-left 类,故 icon/content 均为默认 block、img 默认 inline 32×32;
* 2026-11-01 原站样式表命中探针实测)
* box 为 flex 行;内容列 padding-left 15px + flex item;title-section 纵向 flex。
*/
.eael-infobox.icon-on-left { display: flex; position: relative; }
.eael-infobox.icon-on-left .infobox-content { padding-left: 15px; flex: 1 1 auto; min-width: 0; }
.eael-infobox .infobox-icon img { transition: all 300ms ease-in-out 0s; }
.eael-infobox .infobox-content .infobox-title-section { display: flex; flex-direction: column; }
.eael-infobox .infobox-content .infobox-title-section .title {
width: max-content; max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
.eael-infobox.icon-on-left .infobox-content .title { line-height: 1; margin: 0 0 10px 0; }
.eael-infobox .infobox-content p { margin: 0 0 15px; }
/* 内容里的 ul/ol:hello-elementor 主题 reset(H14 药丸列表实测 margin 0,
* UA 默认 1em 上下外距会撑高内容 16px);列表样式与内边距由节点 custom_css 定义 */
.eael-infobox .infobox-content ul,
.eael-infobox .infobox-content ol { margin: 0; }
/* ===== 首页 H4 硬件与服务系列 ×5(post-18.css 对应块;1436px 实测 2026-11-01)
* 卡列:渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + 列间 margin(ColumnNode 由 settings 渲染);
* 标题 widget 容器:底部橙线图背景(bottom center no-repeat)+ 左右 3rem 内边距;
* 产品图 widget 容器:margin -2.5rem 0 -1rem 上提;
* info-box ×2:图标列 margin-top 3px、内容标题 14px/#4d4d4d/margin 7px 0 0 -10px;
* 第二个 info-box 容器上提 -10px。
*/
[data-el="314b8d5"] .infobox-icon, [data-el="8417167"] .infobox-icon,
[data-el="9e1009f"] .infobox-icon, [data-el="2032426"] .infobox-icon,
[data-el="7c9ceeb"] .infobox-icon, [data-el="9ff518a"] .infobox-icon,
[data-el="2c9eb1c"] .infobox-icon, [data-el="1aa62bd"] .infobox-icon,
[data-el="64432f0"] .infobox-icon, [data-el="2ba29de"] .infobox-icon {
align-self: center;
margin: 3px 0 0 0;
height: 39px;
}
[data-el="314b8d5"] .eael-infobox .infobox-content .title, [data-el="8417167"] .eael-infobox .infobox-content .title,
[data-el="9e1009f"] .eael-infobox .infobox-content .title, [data-el="2032426"] .eael-infobox .infobox-content .title,
[data-el="7c9ceeb"] .eael-infobox .infobox-content .title, [data-el="9ff518a"] .eael-infobox .infobox-content .title,
[data-el="2c9eb1c"] .eael-infobox .infobox-content .title, [data-el="1aa62bd"] .eael-infobox .infobox-content .title,
[data-el="64432f0"] .eael-infobox .infobox-content .title, [data-el="2ba29de"] .eael-infobox .infobox-content .title {
color: #4d4d4d;
font-size: 14px;
margin: 7px 0 0 -10px;
}
/* inner 的 -10px 仅上移容器自身(原站实测 root 不位移),flow-root 阻止它与根折叠 */
[data-el="9ff518a"], [data-el="2c9eb1c"], [data-el="1aa62bd"],
[data-el="64432f0"], [data-el="2ba29de"] {
display: flow-root;
}
[data-el="9ff518a"] > div, [data-el="2c9eb1c"] > div,
[data-el="1aa62bd"] > div, [data-el="64432f0"] > div,
[data-el="2ba29de"] > div {
margin: -10px 0 0 0;
}
@media (max-width: 1024px) {
[data-el="68e06cb"], [data-el="c3c8429"], [data-el="8272123"],
[data-el="1d97802"], [data-el="4a8ad62"] {
margin: -2rem 0 -1rem;
}
}
@media (max-width: 767px) {
[data-el="9ff518a"] .eael-infobox .infobox-content .title, [data-el="2c9eb1c"] .eael-infobox .infobox-content .title,
[data-el="1aa62bd"] .eael-infobox .infobox-content .title, [data-el="64432f0"] .eael-infobox .infobox-content .title,
[data-el="2ba29de"] .eael-infobox .infobox-content .title {
margin: 7px 0 0 -6px;
}
}
/* ===== 首页 H6 宣言条(post-18.css 对应块;1436 实测 2026-11-01)
* 标题排版(Poppins 24px/600/行高 1,≤767 20px)由 DB typography 内联提供,
* 列 59bc2e1 的四向 10px 由 gap 默认 padding 通用逻辑提供;
* 此处仅保留 post-18 的 text-align:center 与移动端字号覆盖(需 !important 压过内联 24px)。
*/
[data-el="e50246d"] { text-align: center; }
@media (max-width: 767px) {
[data-el="e50246d"] .el-heading-title { font-size: 20px !important; }
}
/* ===== 首页 H5 双主张条(post-18.css 对应块;1436 实测 2026-11-01)
* 大列 b504916 的 wrap 即视觉条:long-arrow.png(1353×54)居中不重复(settings padding 全 0);
* 中列 f158695 与两侧列的 padding 由 settings/gap 默认逻辑提供;列宽 380(structure 30 三列);
* 文字 20px/500/#FFF 居中。
*/
[data-el="b504916"] > div {
background: url("/uploads/2023/09/long-arrow.png") 50% 50% no-repeat;
}
/* ===== 首页 H7 OS/芯片平台/语言/协议 四列(post-18.css 对应块;1436 实测)
* 外卡 66de90a:渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + padding 8/16/16/0;
* 内四列 b99f434/c8bd50b/821fd51 右侧虚线分隔(dashed #E0E5F9),列 padding-top 16px;
* ≤767 分隔虚线改下边框,section 左右 padding 1rem。
*/
[data-el="66de90a"] > div {
background: linear-gradient(180deg, #F4F5F9 0%, rgba(244, 245, 249, 0) 100%);
border: 1px solid #E0E5F9;
border-radius: 4px;
padding: 8px 16px 16px 0;
}
[data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
border-right: 1px dashed #E0E5F9;
}
@media (max-width: 767px) {
[data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
border-right: 0;
border-bottom: 1px dashed #E0E5F9;
}
/* 338fb86 移动端 padding 由 padding_mobile(collectResponsiveCss)在根上生效 */
}
/* ===== Elementor 原生 tabs widget(widget-tabs.min.css 对应块;H9 热门硬件切换器)
* 原站为水平视图 + alignment-center;竖排/其余档位规则随源码保留(无实例不生效)。
* 源文件的 border:1px #d5d8dc 简写缺 style,按规范整条无效——与原站一致不产生边框,未移植。
* active 下边框 4px #ed6c00 与内容 wrapper 顶部 1px #C7CBDA 由节点 custom_css
* (.ele-soms-chip-dif …,collectCustomCss 注入)提供。
*/
.elementor-widget-tabs .elementor-tabs { text-align: start; }
/* 源文件的 border:1px #d5d8dc 简写(实测原站伪元素 color=#d5d8dc 生效)——按可解析移植,
* 仅取颜色;宽度随后被 fd97340 的生成规则(border_width=0, 含伪元素)归零 */
.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-title:after,
.elementor-widget-tabs .elementor-tab-title:before,
.elementor-widget-tabs .elementor-tabs-content-wrapper { border-color: #d5d8dc; }
.elementor-widget-tabs .elementor-tabs-wrapper { overflow: hidden; }
.elementor-widget-tabs .elementor-tab-title { cursor: pointer; outline: var(--focus-outline, none); }
.elementor-widget-tabs .elementor-tab-desktop-title {
border: solid transparent;
font-weight: 700;
line-height: 1;
padding: 20px 25px;
position: relative;
}
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active { border-color: #d5d8dc; }
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:after,
.elementor-widget-tabs .elementor-tab-desktop-title.elementor-active:before {
content: ""; display: block; position: absolute;
}
.elementor-widget-tabs .elementor-tab-desktop-title:focus-visible { border: 1px solid #000; }
.elementor-widget-tabs .elementor-tab-mobile-title { cursor: pointer; padding: 10px; }
.elementor-widget-tabs .elementor-tab-content { display: none; padding: 20px; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title { display: table-cell; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active { border-block-end-style: none; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:after,
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:before {
border-block-end-style: solid; height: 0; inset-block-end: 0; width: 999em;
}
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:before { inset-inline-end: 100%; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:after { inset-inline-start: 100%; }
@media (min-width: 768px) {
.elementor-widget-tabs.elementor-tabs-alignment-center .elementor-tabs-wrapper,
.elementor-widget-tabs.elementor-tabs-alignment-end .elementor-tabs-wrapper,
.elementor-widget-tabs.elementor-tabs-alignment-stretch .elementor-tabs-wrapper { display: flex; }
.elementor-widget-tabs.elementor-tabs-alignment-center .elementor-tabs-wrapper { justify-content: center; }
.elementor-widget-tabs.elementor-tabs-alignment-end .elementor-tabs-wrapper { justify-content: flex-end; }
.elementor-widget-tabs.elementor-tabs-alignment-stretch.elementor-tabs-view-horizontal .elementor-tab-title { width: 100%; }
.elementor-tabs .elementor-tab-mobile-title { display: none; }
.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-content { border-style: solid; border-block-start-style: none; }
}
@media (max-width: 767px) {
.elementor-tabs .elementor-tab-content, .elementor-tabs .elementor-tab-title { border-style: solid; border-block-end-style: none; }
.elementor-tabs .elementor-tabs-wrapper { display: none; }
.elementor-tabs .elementor-tabs-content-wrapper { border-block-end-style: solid; }
.elementor-tabs .elementor-tab-content { padding: 10px; }
}
.elementor-clearfix:after { clear: both; content: ""; display: block; height: 0; width: 0; }
/* fd97340 生成规则:border_width=0 → 标题/伪元素/内容面板 border-width 0(原站实测 content 无边框、
* active 伪元素 0px solid #d5d8dc,而移植的 view-horizontal 规则给了 border-style:solid,
* 宽度须归零,否则 medium 3px 挤窄内容 6px / 画出通栏橙线);
* active 下边框 4px 与颜色由 custom_css !important / 生成规则覆盖 */
[data-el="fd97340"] .elementor-tab-title,
[data-el="fd97340"] .elementor-tab-title:before,
[data-el="fd97340"] .elementor-tab-title:after,
[data-el="fd97340"] .elementor-tab-content { border-width: 0; }
[data-el="fd97340"] .elementor-tab-title.elementor-active { color: #ED6C00; }
}
@media (max-width: 900px) {
.ele-ban-title div { font-size: 30px; }
}