/* Hero Tabs 组件样式（2026-11-13 从 component_hero_tabs.html 抽离）
* 引用方（两个页面都是独立 HTML，必须各自引入）：
* template/pc/default/home/index.html
* template/pc/default/home/adslandpage/outdoor-ads-b.html
* 引入位置：各自 前、所有其它样式表之后，保持原有层叠顺序。
* 版本：2611131
*/
.c5-text-media-1 {
position: relative;
display: grid; align-items: center; overflow: hidden;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,');
background-position: 12px 50%;
background-size: 100% 100%;
margin: 0;
}
.c5-text-media-1.c5-text-media-1--contained { margin: 96px auto; }
.c5-text-flex { display: flex; position: relative; min-width: 0; }
/* 左侧大图：按 1920 设计稿基准给高度，用 aspect-ratio 而不是 vw。
ofFit() 在 1200~1919px 用 CSS zoom 等比缩放整个 section，而 vw 仍按真实视口计算、
不参与等比缩放 —— 用 vw 会让容器在窄视口塌矮，把绝对定位的产品图顶进 tab 行。 */
.c5-bg-clip-content {
position: relative; z-index: 2; width: 50%;
aspect-ratio: 1000 / 904;
background-image: var(--of-cur-img, none);
background-size: cover; background-repeat: no-repeat; background-position: center top;
filter: saturate(.3);
clip-path: polygon(0 0, 100% 0, 56% 100%, 0 100%);
}
/* 两层都用 background + 完全相同的 cover / center top 对位参数。
旧写法是「底层 background-position:center top」+「img 层 object-position 默认居中」，
淡入收尾换图时两层对不齐，画面会先进场再被重新定位一次；现在两层像素级一致。 */
.c5-bg-clip-content::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background-image: var(--of-next-img, none);
background-size: cover; background-repeat: no-repeat; background-position: center top;
opacity: 0;
transition: opacity .5s cubic-bezier(.22,.61,.36,1);
}
.c5-bg-clip-content.is-fading::before { opacity: 1; }
/* 收尾时瞬时归位，不做淡出叠加，避免两层半透明混合造成的位置错觉 */
.c5-bg-clip-content.is-reset::before { transition: none; }
/* 语义图片保留 src / alt / 宽高给读屏与 SEO，不参与视觉，切换时也不改它的属性 */
.c5-bg-clip-content > img {
position: absolute; inset: 0; display: block;
width: 100%; height: 100%; object-fit: cover;
opacity: 0; visibility: hidden;
}
@media (min-width: 1700px) { .c5-bg-clip-content { clip-path: polygon(0 0, 100% 0, 57% 100%, 0 100%); } }
.c5-text-textcont { width: 50%; position: relative; }
@media (min-width: 1600px) { .c5-text-textcont { left: -60px; } }
@media (min-width: 1200px) { .c5-text-textcont > div { display: flex; flex-direction: column; height: 100%; } }
.of-panel { position: relative; }
/* 右侧底部产品图：宽度/比例由服务端按附件真实宽高动态注入 CSS 变量，JS 切换时同步更新 */
.of-product {
position: absolute; z-index: 4; pointer-events: none; user-select: none;
right: 1%; bottom: 2%;
width: min(32%, var(--of-prod-w, 560px));
/* 兜底：容器万一因适配变矮，产品图最多占 58% 高，顶部不会顶到 tab 行 */
max-height: min(var(--of-prod-h, 470px), 58%);
aspect-ratio: var(--of-prod-ratio, 1.15);
height: auto; object-fit: contain;
opacity: 1;
transition: opacity .2s ease;
}
/* 换图只做淡出淡入，取消原来的 translateX + scale 位移，避免「产品图甩进来」的晃动感 */
.of-product.is-swapping { opacity: 0; }
.c5-text-media-1.c5-text-media-1--contained .of-product { bottom: 0%; }
.c5-content {
display: flex; align-items: center; gap: 0; margin: 108px 0 0 -5px; position: relative; z-index: 5;
--of-tab-blue: #137FEC;
--of-progress-dur: 12s;
}
/* 按钮之间的 10px 视觉间距挂在包裹层的左右 padding 上，而不是 flex gap ——
这样每颗按钮的 hover 命中区在水平方向是无缝相接的。用 gap 的话，鼠标从一颗划到下一颗
会先经过一段「谁都没 hover」的空隙，状态会瞬间退回 active 再跳到新的一项，看起来就是抖一下。 */
.c5-content .textMediaTabsMargins { display: flex; padding: 0 5px; }
/* 折叠式 tab（2026-11-12 定形 / 11-13 常驻化）：只有当前项 = 图标 + 文字的黑色胶囊，
其余项 = 只留图标的白色圆钮（hover 只变浅蓝，不再展开）。
宽度是「定宽」而不是随文字自适应 —— 展开态一律 268px、折叠态一律 54px（= 22px 图标 + 左右各 16px），
于是无论哪一项展开，整行总宽恒为 490px，按钮之间不会横向位移。
这一点很关键：若按文字自适应，展开项变宽会把后面的按钮顶开，鼠标落点会在动画中途落到相邻按钮上，
出现「悬停 A 却展开 B」甚至来回抖动。定宽 + overflow:hidden 让文字像被擦出来一样展开。
268px 的余量校验：最长文案 "Stretched bar LCD display" 实测 253.9px，留 14px。
min-width:0 不能省：按钮是包裹层的 flex item，默认 min-width:auto 取的是文字 min-content，
字体还没换上 Inter（或后台把 subtitle 改长）时会把胶囊顶到 268 以外，行宽就不再恒定；
宁可裁掉过长文字，也要保住宽度恒定 —— 宽度恒定了 hover 才不会错位。 */
.media-type-btn {
position: relative; isolation: isolate;
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: flex-start;
width: 54px; height: 54px; min-width: 0; padding: 0 16px;
overflow: hidden;
font-size: 1rem; line-height: 1.5rem; font-weight: 600;
color: #111418; background: #FFFFFF; border: 0; border-radius: 9999px; cursor: pointer;
letter-spacing: -.03em; margin: 24px 0;
-webkit-tap-highlight-color: transparent;
transition: width .42s cubic-bezier(.22,.61,.36,1),
background-color .3s ease,
color .3s ease;
}
/* 蓝色进度条 = 当前项 12 秒展示时长的进度指示：盖在按钮底色之上、文字图标之下，
scaleX 从左往右把黑底覆盖成 #137FEC。页面加载即运行，铺满切到下一项后重新计时，
与 hover 无关。基础态的 .26s 过渡负责中断时的快速回退。 */
.media-type-btn::before {
content: ""; position: absolute; inset: 0; z-index: 0;
background: var(--of-tab-blue);
transform: scaleX(0); transform-origin: left center;
transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .32s ease;
pointer-events: none;
}
.media-type-btn.is-loading::before {
transform: scaleX(1);
transition: transform var(--of-progress-dur) linear;
}
/* 铺满后蓝底原地淡出，不做「进度条倒带」 */
.media-type-btn.is-blue-done::before {
transform: scaleX(1); opacity: 0;
transition: opacity .32s ease;
}
/* 重置进度条时禁用过渡，避免移除类的一瞬间看到蓝色倒带/闪现 */
.media-type-btn.is-reset::before { transition: none; }
.media-type-btn .mtb-ico,
.media-type-btn .mtb-label { position: relative; z-index: 1; }
.media-type-btn .mtb-ico {
flex: none; font-size: 22px; line-height: 1;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* 折叠态文字仍留在 DOM 里（读屏与 SEO 取得到），自身 max-width:0 裁掉，展开时恢复自然宽 */
.media-type-btn .mtb-label {
flex: none; display: block; margin-left: 9px;
max-width: 0; overflow: hidden; opacity: 0;
white-space: nowrap;
transition: opacity .26s ease;
}
.media-type-btn.active,
.media-type-btn.active:hover { width: 268px; background-color: #000; color: #fff; }
.media-type-btn.active .mtb-label { max-width: none; opacity: 1; }
/* active 胶囊常驻（2026-11-13）：hover 其他 tab 时当前项不收起，被指到的那一项
展开成浅蓝胶囊并擦出文字，与「黑底 + 蓝色进度条」的当前项形成层次区分。
切换只由 12 秒进度条铺满或点击触发，hover 只做文字预览。 */
.c5-content:has(.textMediaTabsMargins:hover) .textMediaTabsMargins:hover .media-type-btn:not(.active),
.media-type-btn:focus-visible:not(.active) {
width: 268px;
background-color: #EAF2FE; color: var(--of-tab-blue);
}
.c5-content:has(.textMediaTabsMargins:hover) .textMediaTabsMargins:hover .media-type-btn:not(.active) .mtb-label,
.media-type-btn:focus-visible:not(.active) .mtb-label {
max-width: none; opacity: 1;
}
.media-type-btn:focus-visible { outline: 2px solid var(--of-tab-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.media-type-btn, .media-type-btn .mtb-label, .media-type-btn::before { transition: none; }
}
.c5-content-heading { display: grid; align-items: start; position: relative; z-index: 1; }
/* 4 个标题叠放同一网格单元（第 1 个 tab = h1，其余 = h2，层级由服务端决定）。
2026-11-13：改为新旧标题交叉淡入，仅 8px 纵向位移，去掉 rotateX 透视翻转，
JS 也不再强制重排重放动画 —— 切换时不再有翻转/大起伏。 */
.c5-content-heading > .of-heading-item {
grid-area: 1 / 1;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .42s cubic-bezier(.22,.61,.36,1),
transform .42s cubic-bezier(.22,.61,.36,1),
visibility 0s linear .42s;
}
.c5-content-heading > .of-heading-item.is-active {
opacity: 1; visibility: visible; transform: translateY(0);
transition-delay: 0s;
}
.c5-content-heading h1,
.c5-content-heading h2 {
white-space: inherit !important; word-break: inherit !important;
color: #111418; font-weight: 900; text-transform: uppercase; text-align: left;
font-family: Inter, sans-serif;
letter-spacing: -.03em; line-height: .84; margin: 16px 0 0;
}
@media (min-width: 1200px) { .c5-content-heading h1, .c5-content-heading h2 { font-size: 6em; margin-top: 1rem; min-height: 1.7em; } }
@media (max-width: 1199px) { .c5-content-heading h1, .c5-content-heading h2 { font-size: 2rem; width: 95%; display: block; margin-top: 1rem; min-height: 1.7em; } }
.of-feature {
position: relative; z-index: 1; color: #374151; margin: 32px 0 0;
display: flex; align-items: flex-start; gap: 12px;
font-family: Inter, Arial, "Helvetica Neue", sans-serif;
font-size: 1.25rem; line-height: 1.55; font-weight: 500;
letter-spacing: -.01em; max-width: 28%; text-wrap: pretty;
transition: opacity .2s ease, transform .2s ease;
}
/* 描述行（图标 + 文案）换内容时先淡出再换字，不做瞬间替换 */
.of-feature.is-swapping { opacity: 0; transform: translateY(4px); }
.of-feature .material-symbols-outlined {
flex: none; font-size: 1.625rem; line-height: 1.35; opacity: .92;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.of-cta { position: relative; z-index: 1; align-self: flex-start; margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
.c5-content-heading > .of-heading-item,
.of-feature, .of-product, .c5-bg-clip-content img { transition: none !important; }
}
@media (min-width: 1200px) {
.of-feature { margin-top: auto; }
.of-cta { margin-top: auto; margin-bottom: auto; }
}
/* ===== 窄屏：照下方 Applications 区块的横向 rail（隐藏滚动条 + 圆形按钮导航）=====
卡片机制与之一致：hover 时描述/CTA 展开。
浅色版：外容器白 -> 卡片浅灰 -> hover 变浅一档；thumb 是透明底产品图，
图片容器必须 transparent，让产品直接浮在卡片上，不能用 cover 裁掉产品。 */
.of-cards { display: none; }
@media (max-width: 1199px) {
.c5-text-media-1 {
display: block;
background-image: none !important;
background-color: #FFFFFF;
}
.c5-text-media-1.c5-text-media-1--contained { margin: 56px auto; }
.c5-text-media-1 .c5-text-flex { display: none; }
.c5-text-media-1 .of-cards {
display: block;
--of-gutter: 24px;
--of-gap: 16px;
--of-cw: 300px;
--of-ch: 340px;
--of-nav: 44px;
--of-ink: #111111;
--of-muted: #585A5E;
--of-panel: #F1F3F7;
--of-disc: #2569CC;
--of-nav-bg: #1A203A;
--of-ease: cubic-bezier(.4, 0, .2, 1);
--of-dur: .5s;
padding: 32px 0 28px;
}
/* 滚动条完全隐藏，改由下方两个圆形按钮驱动；末尾留白与左侧对齐 */
.of-cards__rail {
display: flex; gap: var(--of-gap);
overflow-x: auto; overflow-y: hidden;
padding-inline: var(--of-gutter);
scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.of-cards__rail::-webkit-scrollbar { display: none; }
.of-cards__rail::after {
content: ""; flex: 0 0 max(0px, calc(var(--of-gutter) - var(--of-gap)));
}
/* 整卡 ：触屏点击即可跳转；flex 布局让 reveal 展开时自动压缩图片区，永不重叠 */
.of-card {
position: relative; isolation: isolate;
display: flex; flex-direction: column; gap: 14px;
flex: 0 0 var(--of-cw); width: var(--of-cw); height: var(--of-ch);
box-sizing: border-box;
padding: 24px;
border-radius: 10px; overflow: hidden;
background: #E8EBEF; color: var(--of-ink); text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.of-card:focus-visible { outline: 2px solid var(--of-nav-bg); outline-offset: 3px; }
/* hover 时淡入的更浅灰面板（卡片亮一档，仍与白底有区分，文字层在其上） */
.of-card__panel {
position: absolute; inset: 0; z-index: 2;
background: var(--of-panel); opacity: 0;
transition: opacity var(--of-dur) var(--of-ease);
}
/* subtitle 在最上 */
.of-card__title {
position: relative; z-index: 4; flex: 0 0 auto;
margin: 0; min-height: 2.6em; /* 统一按两行预留，4 张卡的图片框起始位置对齐 */
font: 800 20px/1.3 Inter, Arial, sans-serif;
letter-spacing: -.01em; color: var(--of-ink);
transition: color var(--of-dur) var(--of-ease);
}
/* 产品图区：容器透明，透明底产品图直接浮在浅灰卡上，contain 不裁切、不变形 */
.of-card__mediaWrap {
position: relative; z-index: 4;
flex: 1 1 auto; min-height: 90px;
overflow: hidden; background: transparent;
}
.of-card__media {
display: block; width: 100%; height: 100%; object-fit: contain;
transition: transform .7s var(--of-ease);
}
/* 默认收起；hover / 键盘聚焦时 0fr -> 1fr 展开描述与 CTA */
.of-card__reveal {
position: relative; z-index: 4; flex: 0 0 auto;
display: grid; grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows var(--of-dur) var(--of-ease),
opacity var(--of-dur) var(--of-ease);
}
.of-card__revealIn { overflow: hidden; min-height: 0; }
.of-card__desc {
margin: 0;
font: 500 13px/1.5 Inter, Arial, sans-serif; color: var(--of-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.of-card__foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 14px;
}
.of-card__more {
font: 800 12px/1 Inter, Arial, sans-serif; letter-spacing: .04em; color: var(--of-ink);
}
/* 圆形箭头：复用全局 disc-rise--fab（与 Applications 的 .solv4__go 同一机制） */
.of-card__go {
box-sizing: border-box; flex: 0 0 auto;
width: 34px; height: 34px; padding: 0; border: 0;
--fill-bg: var(--of-disc);
--fill-shape: var(--of-nav-bg);
color: #fff;
}
.of-card__go svg { width: 46%; height: 46%; }
.of-card:hover .of-card__panel,
.of-card:focus-visible .of-card__panel { opacity: 1; }
.of-card:hover .of-card__media,
.of-card:focus-visible .of-card__media { transform: scale(1.05); }
.of-card:hover .of-card__title,
.of-card:focus-visible .of-card__title { color: var(--of-ink); }
.of-card:hover .of-card__reveal,
.of-card:focus-visible .of-card__reveal { grid-template-rows: 1fr; opacity: 1; }
.of-card:hover .of-card__go::after,
.of-card:focus-visible .of-card__go::after { transform: translateX(-50%) translateY(0); }
/* 圆形导航按钮：与 Applications 的 solv4__navbtn 完全同款，到边界自动 disabled */
.of-cards__nav {
display: flex; align-items: center; justify-content: center; gap: 24px;
margin-top: 28px;
}
.of-cards__navbtn {
box-sizing: border-box; width: var(--of-nav); height: var(--of-nav); padding: 0;
--fill-bg: var(--of-nav-bg); --fill-border: var(--of-nav-bg);
--fill-shape: var(--of-disc); --fill-text-hover: #ffffff;
color: #fff;
transition: color .25s linear .28s, border-color .3s ease, opacity .25s ease;
}
.of-cards__navbtn:not(:disabled),
.of-cards__navbtn:not(:disabled):hover,
.of-cards__navbtn:not(:disabled):focus-visible {
background-color: var(--of-nav-bg) !important;
}
.of-cards__navbtn:not(:disabled):hover,
.of-cards__navbtn:not(:disabled):focus-visible { border-color: var(--of-disc); }
.of-cards__navbtn svg { width: 42%; height: 42%; }
.of-cards__navbtn:disabled,
.of-cards__navbtn:disabled:hover,
.of-cards__navbtn:disabled:focus-visible {
--fill-bg: #fff; --fill-shape: #fff; --fill-border: #E8EAEF;
--fill-text-hover: #c3c6cd;
color: #c3c6cd; border-color: #E8EAEF;
cursor: default; transition: none;
}
.of-cards__navbtn:disabled::after { display: none; }
}
@media (max-width: 639px) {
.c5-text-media-1 .of-cards {
--of-gutter: 16px; --of-gap: 14px;
--of-cw: 258px; --of-ch: 310px; --of-nav: 40px;
padding: 26px 0 22px;
}
.of-card { padding: 20px; gap: 12px; }
.of-card__title { font-size: 18px; }
.of-card__desc { font-size: 12.5px; }
.of-card__foot { margin-top: 12px; }
.of-cards__nav { margin-top: 22px; gap: 20px; }
}
/* 触屏没有 hover：描述与 CTA 常驻展示；浅灰卡上文字保持深色 */
@media (hover: none) and (max-width: 1199px) {
.of-card__reveal { grid-template-rows: 1fr; opacity: 1; }
.of-card__desc { color: var(--of-muted); }
.of-card__more { color: var(--of-ink); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1199px) {
.of-cards__rail { scroll-behavior: auto; }
.of-card__media, .of-card__panel, .of-card__title,
.of-card__reveal { transition: none !important; }
}