/* css/top/customize.css */
/* bootstrap.css 已由 layout.html 在 中以 加载，此处不再用 @import 重复引入。
@import 会串行阻塞渲染（先下载 customize.css，再发现并下载 bootstrap.css），移除后消除一次关键路径往返。 */
/* 英文字体 Inter-Regular */
@font-face {
font-family: 'Inter-Regular';
src: url('../../../../static/nav/fonts/Inter-Regular.woff2') format('woff2'), /* 优先使用 woff2，压缩率更高 */
url('../../../../static/nav/fonts/Inter-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap; /* 让文字在字体加载完成前先用系统字体显示，以提升体验 */
}
/* 中文字体 SourceHanSansCN-Regular */
@font-face {
font-family: 'SourceHanSansCN-Regular';
src: url('../../../../static/fonts/SourceHanSansCN-Regular.woff') format('woff'),
url('../../../../static/fonts/SourceHanSansCN-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--xl-main-width: 85%; /* screen-width: 1301px-1920px */
--xl-main-max-width: 1340px;
--md-main-width: 90%; /* screen-width: 1201px-1300px */
--md-main-max-width: 90%;
--sm-main-width: 90%; /* screen-width: 768px-1200px */
--sm-main-max-width: 90%;
--xs-main-width: 90%; /* screen-width: <768px */
--xs-main-max-width: 90%;
--max-img-height: calc(100vh - 180px);
--appl-context-align-justify: 12px; /* .appl-block-title::before width + .appl-block-title::before margin-right */
--appl-primary-color: #0068B6;
--appl-pagenav-height: 40px;
--top-highlight-content-left: 15px;
--top-highlight-img-top: 15px;
--top-highlight-img-hight: 45px;
--topnav-height-margin: 62px;
--top-link-color: #0068B6;
}
/* 小屏幕 (<=480px) */
@media (max-width: 480px) {
:root {
--font-size-h1: 20px;
--font-size-h2: 18px;
--font-size-h3: 14px;
--font-size-p: 13px;
--font-size-nav: 13px;
--font-size-table: 11px;
}
}
/* 中等屏幕 (481px-768px) */
@media (min-width: 481px) and (max-width: 768px) {
:root {
--font-size-h1: 20px;
--font-size-h2: 18px;
--font-size-h3: 16px;
--font-size-p: 14px;
--font-size-nav: 14px;
--font-size-table: 11px;
}
}
/* 大屏幕 (>768px) */
@media (min-width: 769px) {
:root {
--font-size-h1: 30px;
--font-size-h2: 26px;
--font-size-h3: 20px;
--font-size-p: 16px;
--font-size-nav: 16px;
--font-size-table: 13px;
}
}
/* 多语言字体配置 */
body:lang(en) {
font-family: 'Inter-Regular','Helvetica Neue','San Francisco','Segoe UI',Arial,'PingFang SC','黑体','Oppoins',sans-serif !important;
font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "ss01" 0;
}
body:lang(zh-CN) {
font-family: "SourceHanSansCN-Regular","Source Han Sans","思源黑体","Noto Sans CJK SC","Noto Sans CJK TC",sans-serif !important;
font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "ss01" 0;
}
body {
padding-top: 0;
transition: padding-top 0.3s;
}
body.sticky-padding {
padding-top: 92px;
}
img {
border: 0;
width: 100%;
height: auto;
margin: auto;
vertical-align: middle;
}
.screen-fit-image {
width: 100%;
max-width: 1200px;
}
@media (max-width: 1200px) {
.screen-fit-image {
width: 90%;
}
}
@media (max-width: 768px) {
.screen-fit-image {
width: 95%;
}
}
.disabled-link {
pointer-events: none;
cursor: not-allowed;
color: #999999 !important;
text-decoration: none !important;
opacity: 0.8;
}
.disabled-link img {
filter: grayscale(100%);
opacity: 0.6;
}
/* 定义一个只负责宽度的工具类 */
.content-width-container {
width: var(--xl-main-width);
max-width: var(--xl-main-max-width);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
@media (min-width: 1201px) and (max-width: 1300px) {
.content-width-container {
width: var(--md-main-width);
max-width: var(--md-main-max-width);
}
}
@media (max-width: 1200px) {
.content-width-container {
width: 100%;
max-width: none;
padding-left: var(--topnav-margin-left);
padding-right: var(--topnav-margin-left);
}
}
/*
1. 默认样式 (移动端优先)
这是基础样式，默认应用于所有屏幕尺寸。
它遵循移动端优先的原则，在没有特定媒体查询匹配时生效。
*/
.rst-content {
width: 100%;
margin-left: auto;
margin-right: auto;
/* --- 实现粘性页脚 --- */
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--topnav-height-margin));
}
/* 使主内容区域自动伸展以填充多余空间，保证页脚显示在页面底部 */
.rst-content .document {
flex-grow: 1;
}
/*
2. 大屏幕桌面端样式
当屏幕宽度大于等于 1301px 时，应用此样式。
这通常对应大尺寸的桌面显示器。
*/
@media (min-width: 1301px) {
.rst-content {
width: var(--xl-main-width);
/* 使用变量定义内容宽度 */
max-width: var(--xl-main-max-width);
/* 使用变量定义最大内容宽度 */
}
}
/*
3. 中等屏幕样式 (平板或小尺寸桌面)
当屏幕宽度在 1201px 和 1300px 之间时，应用此样式。
这通常对应平板设备（尤其是横屏）或小尺寸的桌面显示器。
*/
@media (min-width: 1201px) and (max-width: 1300px) {
.rst-content {
width: var(--md-main-width);
max-width: var(--md-main-max-width);
}
}
/*
4. 移动端/小屏幕样式 (特定调整)
当屏幕宽度小于等于 1200px 时，为内容区域增加内边距。
这是对移动端和小尺寸平板视图的体验优化。
*/
@media (max-width: 1200px) {
.rst-content {
padding-left: var(--topnav-margin-left);
padding-right: var(--topnav-margin-left);
}
}
/*
下面这两个规则通常是为了覆盖主题默认的侧边栏宽度，
让内容区能够扩展。在移动端和桌面端通常都需要，可以保留。
*/
.wy-nav-content-wrap {
margin-left: 0 !important;
}
/*top_icnav_script*/
h1:first-of-type {
display: none;
/* 隐藏标题 */
}
@media (max-width: 768px) {
.wy-nav-top {
display: none !important;
}
}
.top-container-noborder {
border: none !important;
box-shadow: none !important;
}
.top-container-nopadding {
padding: 0 !important;
}
.top-container-nomargin {
margin: 0 !important;
}
.top-container-nobackground {
background-color: transparent !important;
}
/* if can not work, should add flex for it's father like this */
/* */
.top-container-center {
align-items: center !important;
justify-content: center !important;
}
.top-container-verti-center {
align-items: center !important;
}
.top-container-bothends-align {
justify-content: space-between !important;
}
.top-container-add-border {
border: 1px solid rgba(137, 175, 201, 0.4) !important;
background-clip: padding-box !important;
}
.top-line-with-padding {
display: inline-block;
padding-bottom: 1%;
padding-top: 1%;
}
.font-color-black {
color: #333333 !important;
}
.font-color-white {
color: #fff !important;
}
.font-color-blue {
color: #0068b6 !important;
}
.cool-bg {
background-color: #1a1a2e;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}
/* 全局贯穿水平线 */
.hr-full {
width: 100%;
border: none;
height: 1px;
background-color: #ccc;
margin: 0;
display: block;
}
/*
* Hidden tab info injected by inject_tab_labels.py into each
* sphinx-tabs panel. Invisible to users but present in raw HTML for
* text-based RAG indexers (e.g. Kapa) to associate panel content with
* the correct tab name.
*/
.tab-info-label {
display: none;
}
@media (min-width: 1201px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
}
/* css/top/nav.css */
.top-tabs-container {
position: sticky;
top: var(--topnav-height-margin);
background-color: transparent;
z-index: 1000;
padding-left: 0;
padding-right: 0;
display: flex; /* 让内部子元素左右横向排列 */
align-items: center;
}
/* 2. 添加伪元素作为全屏背景 */
.top-tabs-container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
/* 先移动到容器中心 */
transform: translateX(-50%);
/* 再通过transform精确地向左移动自身宽度的一半，实现完美居中 */
width: 100vw;
/* 使用100vw撑满视口宽度 */
height: 100%;
/* 高度与父元素一致 */
background-color: #334466;
/* 你想要的背景色 */
z-index: -1;
/* 将伪元素置于父元素内容的下方 */
}
/*
.sticky 类及其相关媒体查询已被移除，
因为现在使用原生的 position: sticky 实现。
原生 sticky 会自动处理宽度和占位，简化了大量 CSS。
*/
@media (max-width: 1200px) {
.top-tabs-container {
/*
box-sizing 确保 padding 不会撑大容器。
*/
box-sizing: border-box;
}
}
.top-tabs {
display: flex;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
white-space: nowrap;
padding-left: 0;
flex-grow: 1; /* 占据左侧菜单之外的所有剩余空间 */
min-width: 0; /* 防止 flex 子项撑破容器，保证 overflow-x 生效 */
}
.top-tabs::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
}
.top-tabs .top-tab-item {
display: flex;
flex: 0 0 auto;
margin-right: 1em;
height: 40px;
line-height: 1.5;
padding: 0 0.8em;
cursor: pointer;
color: #fff;
font-size: var(--font-size-nav);
font-weight: normal !important;
transition: color 0.3s, border-bottom 0.3s;
position: relative;
align-items: center;
justify-content: center;
}
.top-tabs .top-tab-item::after {
content: '';
position: absolute;
left: 0%;
bottom: 0;
height: 5px;
background-color: #FF6D65;
width: 0;
transition: width 0.5s ease;
}
.top-tabs .top-tab-item:hover::after {
width: 100%;
}
.top-tabs .top-tab-item.active {
background-color: #FF6D65;
color: #fff;
}
/* WCAG 2.5.5:
fills full tap area of the tab item */
.top-tabs .top-tab-item a {
color: inherit;
text-decoration: none;
display: flex;
height: 100%;
width: 100%;
align-items: center;
}
/* css/top/content.css */
.top-block-container {
position: relative;
background-color: transparent;
z-index: 1;
background-repeat: round;
padding-left: 0;
padding-right: 0;
padding-top: var(--font-size-p);
padding-bottom: 0;
}
.top-block-container::before {
background-color: transparent;
}
/* 只影响作为 top-block-container 直接子元素的图片，而不会影响到 .top-content-box 中的图片布局 */
.top-block-container > img,
.top-block-detail > img,
.top-block-container > video,
.top-block-detail > video {
display: block; /* 将图片转换为块级元素，使其可以应用 margin: auto */
margin-left: auto;
margin-right: auto;
margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
margin-bottom: var(--font-size-p) !important;
max-width: 100%; /* 确保图片在任何情况下都不会超出其容器 */
}
.top-content-box > img {
margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
margin-bottom: 0;
align-self: flex-start;
}
.top-block-detail > p {
margin-top: var(--font-size-p) !important; /* 与上方内容产生一定间距，视觉上更协调 */
}
/* TBD：整体放在block里还是title、block单独控制 */
.top-block-content {
width: var(--xl-main-width);
max-width: var(--xl-main-max-width);
margin: 0 auto;
}
.top-block-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 28px;
background-color: var(--appl-primary-color);
}
.top-block-title {
position: relative;
/* color: white; */
color: #333;
font-size: var(--font-size-h2);
padding-left: var(--top-highlight-content-left);
margin-bottom: 20px;
}
.top-block-title.no-prefix::before {
background-color: transparent;
}
.top-block-title.no-prefix {
padding-left: 0;
}
.top-block-title > a {
font-size: var(--font-size-p);
color: var(--top-link-color);
}
.top-block-detail a {
color: var(--top-link-color);
text-decoration: underline;
}
.top-block-detail {
padding: 15px 0;
font-size: var(--font-size-p);
color: #666;
}
.top-full-width-background {
position: relative;
z-index: 1;
}
.top-full-width-background::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background-repeat: round;
border: none;
z-index: -1;
}
.top-full-width-background.bg-gray::before {
background-color: #F6F9FB;
}
.top-full-width-background.bg-topblue::before {
background-color: #334466;
}
/* Tab 容器整体样式 */
.top-case-box .top-nav-tabs.nav-tabs {
display: flex;
padding-bottom: 4px;
border-bottom: 1px solid #E6E5E5 !important; /* 底部长灰线 */
}
.top-case-box .top-nav-tabs.nopadding {
padding-bottom: 0;
margin-bottom: 0 !important;
}
.top-case-box .top-nav-tabs li {
list-style-type: none !important;
margin-left: 0;
}
/* Tab 链接样式 () */
.top-case-box .top-nav-tabs .nav-link {
border: none !important; /* 移除Bootstrap的默认边框 */
background-color: transparent !important;
color: #4E4E4E; /* 未激活状态的文字颜色 */
padding-top: 20px;
padding-bottom: 8px;
padding-left: 0px;
margin-right: 1.5em;
transition: color 0.3s ease;
position: relative;
white-space: nowrap;
}
/* 通过伪元素创建下划线，默认宽度为0 */
.top-case-box .top-nav-tabs .nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--appl-primary-color);
transition: width .3s;
position: absolute;
bottom: 0;
left: 0;
}
/* 鼠标悬停在任意Tab上时，文字变蓝 */
.top-case-box .top-nav-tabs .nav-link:hover {
color: var(--appl-primary-color);
}
/* 激活状态的Tab链接 */
.top-case-box .top-nav-tabs .nav-link.active,
.top-case-box .top-nav-tabs .nav-link.active:hover,
.top-case-box .top-nav-tabs .nav-link.active:focus {
color: var(--appl-primary-color); /* 激活状态文字颜色 */
border-color: transparent !important;
background-color: transparent !important;
}
/* 激活状态的Tab显示下划线 */
.top-case-box .top-nav-tabs .nav-link.active::after {
width: 100%; /* 下划线宽度撑满 */
}
/* Tab内容区域样式 */
.top-case-box .tab-content {
margin-top: var(--font-size-p); /* 内容区域与Tab导航的距离 */
padding: 0; /* 移除可能存在的内边距 */
}
/* 确保 tab-pane 的背景和内边距由其内部的 .top-highlight-container 控制 */
.top-case-box .tab-content > .tab-pane {
padding: 0;
background-color: transparent;
}
.top-tab-highlight-container {
display: none;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
}
.top-tab-highlight-container .top-gallery-wrapper {
width: 100%;
}
.top-tab-highlight-container .top-highlight-container.top-hor-pane {
width: 100%;
}
.top-tab-highlight-container.active {
display: flex;
}
.top-case-box .top-tab-highlight-container > .top-block-detail {
width: 100%;
flex-grow: 1; /* 确保在 flex 容器中占据所有剩余空间 */
}
/* ==========================================================================
1. Base Component: .top-content-box
========================================================================== */
/* Base styles for all two-column content boxes */
.top-content-box {
display: flex;
flex-direction: column;
align-items: flex-start; /* 让子元素（包括图片）靠顶部对齐 */
gap: 40px;
margin-top: var(--font-size-h2);
margin-bottom: var(--font-size-h2);
flex-direction: row-reverse;
}
/* Default sizing for children: 50/50 split.
This will be overridden by .ratio-* modifiers. */
.top-content-box > * {
flex: 1;
min-width: 0; /* Prevents flex items from overflowing their container */
}
.top-content-box > .top-block-detail {
padding: 0;
align-self: flex-start;
}
/* ==========================================================================
2. Desktop Layout Modifiers
========================================================================== */
/* 更改文字和图片的左右相对位置, 默认在右边，使用此modifier使其在左边 */
.top-content-box.inverse {
flex-direction: row; /* Overrides the default row-reverse */
}
/* 5-5 ratio */
.top-content-box.ratio-5-5 > :first-child,
.top-content-box.ratio-5-5 > :last-child { flex: 1 1 0%; }
/* 1-9 ratio
.top-content-box.ratio-1-9 > :first-child { flex: 1 1 0%; }
.top-content-box.ratio-1-9 > :last-child { flex: 9 1 0%; }*/
/* 2-8 ratio
.top-content-box.ratio-2-8 > :first-child { flex: 2 1 0%; }
.top-content-box.ratio-2-8 > :last-child { flex: 8 1 0%; }*/
/* 3-7 ratio */
.top-content-box.ratio-3-7 > :first-child { flex: 3 1 0%; }
.top-content-box.ratio-3-7 > :last-child { flex: 7 1 0%; }
/* 4-6 ratio */
.top-content-box.ratio-4-6 > :first-child { flex: 4 1 0%; }
.top-content-box.ratio-4-6 > :last-child { flex: 6 1 0%; }
/* 6-4 ratio */
.top-content-box.ratio-6-4 > :first-child { flex: 6 1 0%; }
.top-content-box.ratio-6-4 > :last-child { flex: 4 1 0%; }
/* 7-3 ratio */
.top-content-box.ratio-7-3 > :first-child { flex: 7 1 0%; }
.top-content-box.ratio-7-3 > :last-child { flex: 3 1 0%; }
/* 8-2 ratio
.top-content-box.ratio-8-2 > :first-child { flex: 8 1 0%; }
.top-content-box.ratio-8-2 > :last-child { flex: 2 1 0%; }*/
/* 9-1 ratio
.top-content-box.ratio-9-1 > :first-child { flex: 9 1 0%; }
.top-content-box.ratio-9-1 > :last-child { flex: 1 1 0%; }*/
/* ==========================================================================
Cast Grid Layout
========================================================================== */
.top-cast-wrapper {
display: grid;
/* 定义两列，宽度相等 */
grid-template-columns: 1fr 1fr;
/* 定义列间距 */
gap: 40px;
/* 顶部间距，保持原有风格 */
margin-top: var(--font-size-h2);
margin-bottom: var(--font-size-h2);
/* 确保对齐 */
align-items: start;
}
.top-cast-item {
display: flex;
flex-direction: column;
/* 确保图片在上，文字在下 */
justify-content: flex-start;
height: 100%; /* 让两个item高度一致（如果需要背景色时很有用） */
}
.top-cast-item > img {
/* 强制图片宽度适应容器 */
width: 100%;
height: auto;
/* 保持图片底部与文字的距离 */
margin-bottom: 15px !important;
margin-top: 0 !important; /* 覆盖可能存在的全局 margin */
/* 如果你想让两张图片强制等高（可能会裁剪），可以解开下面两行 */
/* height: 250px; */
/* object-fit: contain; */
}
.top-cast-item .top-block-detail {
padding: 0;
/* 确保文字部分顶部对齐 */
margin-top: 0 !important;
}
.top-cast-item .top-block-detail p {
/* 覆盖可能存在的全局 margin-top，让文字紧贴图片下方 */
margin-top: 0 !important;
}
/* ==========================================================================
3. Responsive Styles (Mobile) - REFACTORED
========================================================================== */
@media (max-width: 1200px) {
/* DEFAULT mobile behavior: Wrap elements with floated image */
.top-content-box {
display: block; /* Change from flex to block */
overflow: auto; /* Contains the floated image */
gap: initial; /* Reset gap from desktop flex */
}
.top-content-box > * {
flex: none; /* Disable flex item properties for all children */
}
/* Default image float behavior (image on the right) */
.top-content-box > img {
display: block;
width: 100vw;
margin-bottom: 1em;
}
/* Handle the inverse case (image on the left) */
.top-content-box.inverse > img {
display: block;
width: 100vw;
margin-bottom: 1em;
}
/* MODIFIER mobile behavior: .no-wrap
This overrides the default wrapping to stack elements vertically. */
.top-content-box.no-wrap {
display: flex; /* Re-enable flexbox for stacking */
flex-direction: column;
gap: 20px;
}
/* Reset float and width for images in stacked containers */
.top-content-box.no-wrap > img {
float: none;
width: 100%; /* Make image full-width */
/* Margin: top, right, bottom, left */
margin: 20px 0 0 0; /* Reset margins and add top margin */
}
.top-cast-wrapper {
/* 切换为单列布局 */
grid-template-columns: 1fr;
gap: 30px;
}
.top-cast-item {
/* 在移动端也可以保持图片在上文字在下，或者根据需要调整 */
width: 100%;
}
}
/* ==========================================================================
Software Features Tab Selector (.top-sw-features)
========================================================================== */
.top-highlight-container.top-sw-features {
flex-direction: column;
margin: 40px auto;
}
.top-sw-features-items {
display: flex;
justify-content: space-around;
align-items: flex-end;
padding: 0;
position: relative;
margin-bottom: 30px;
}
.top-sw-features-item {
text-align: center;
cursor: pointer;
opacity: 0.6;
transition: all 0.3s;
flex: 1;
position: relative;
padding-bottom: 15px;
}
.top-sw-features-item img {
height: 120px;
width: auto;
max-width: 100%;
object-fit: contain;
margin-bottom: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}
.top-sw-features-item h3 {
font-size: var(--font-size-p);
font-weight: bold;
margin: 0;
color: #333;
}
.top-sw-features-item.active {
opacity: 1;
}
.top-sw-features-item.active h3 {
color: var(--appl-primary-color);
}
.top-sw-features-item.active::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
width: 12px;
height: 12px;
border-top: 3px solid var(--appl-primary-color);
border-left: 3px solid var(--appl-primary-color);
transform: translateX(-50%) rotate(45deg);
z-index: 10;
}
.top-sw-features-box {
width: 100%;
box-sizing: border-box;
clear: both;
margin-top: 20px;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding: 30px 0;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
min-height: 80px;
}
.top-sw-features-content {
flex: 1;
width: 100%;
box-sizing: border-box;
padding-left: 50px;
padding-right: 20px;
margin: 0;
font-size: var(--font-size-p);
line-height: 1.6;
color: #666666;
text-align: left;
}
/* css/top/highlight.css */
.top-highlight-container {
/* margin-top: 29px; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
margin-left: -0.5%;
margin-right: -0.5%;
}
.top-highlight-container.no-margin {
margin-left: 0;
margin-right: 0;
}
.top-highlight-container.with-gap {
gap: 20px;
}
.top-highlight-container.top-hor-pane {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 0;
margin-top: 0;
border: none;
box-shadow: none;
}
.top-highlight-container.bg-transparent {
background-color: transparent;
}
.top-highlight-container.border-white {
border: 1px solid #FFFFFF;
border-radius: 3px;
}
.top-highlight-col {
backdrop-filter: blur(7px);
border-radius: 6px;
background-color: rgba(137, 175, 201, 0.21);
border: 1px solid rgba(137, 175, 201, 0.21) !important;
background-clip: padding-box !important; /* content-box; */
color: white;
padding: 0;
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 15px;
margin-bottom: 15px;
box-sizing: border-box;
width: calc(25% - 1%); /* 默认为四列布局 */
max-width: calc(25% - 1%);
min-width: 170px; /* 设置最小宽度 */
flex-grow: 1;
}
.top-highlight-col.product-card {
background-color: transparent; /* 移除 highlight.css 默认的半透明背景 */
border: none !important; /* 移除默认边框 */
backdrop-filter: none; /* 移除毛玻璃效果 */
margin: 0;
}
.top-highlight-col.margin-none {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
.top-highlight-col.col-5 {
width: calc(20% - 1%);
max-width: calc(20% - 1%);
}
.top-highlight-col.col-4 {
width: calc(25% - 1%);
max-width: calc(25% - 1%);
}
.top-highlight-col.col-3 {
width: calc(33.3% - 1%);
max-width: calc(33.3% - 1%);
}
.top-highlight-col.col-2 {
width: calc(50% - 1%);
max-width: calc(50% - 1%);
}
.top-highlight-col.col-1 {
width: calc(100%) !important;
max-width: calc(100%) !important;
}
.top-highlight-content-title {
display: block;
padding-left: var(--top-highlight-content-left);
padding-top: var(--margin-top-h3);
padding-bottom: var(--margin-bottom-h3);
text-align: left;
font-size: var(--font-size-h3);
font-weight: 400;
line-height: 29px;
color: #0068b6;
}
.top-highlight-content-image {
margin-left: var(--top-highlight-content-left);
margin-top: var(--top-highlight-img-top);
width: 45px;
height: 45px;
}
@media (max-width: 1200px) {
.top-highlight-content-image {
width: 35px;
height: 35px;
}
}
.top-highlight-content-detail {
overflow: auto;
padding-bottom: 0;
padding-top: 0;
padding-left: var(--top-highlight-content-left);
padding-right: 25px;
font-size: var(--font-size-p);
color: #666666;
word-wrap: break-word;
}
.top-highlight-content-detail.border-white {
border: 1px solid #FFFFFF;
border-radius: 4px;
}
.top-highlight-content-detail.border-none {
border: none;
}
.top-highlight-content-detail li {
margin-left: 15px;
list-style-type: disc !important;
}
.top-highlight-content-detail h2,
.top-highlight-content-detail h3,
.top-highlight-content-detail h4,
.top-highlight-content-detail h5,
.top-highlight-content-detail h6 {
font-weight: 700; /* strong 标签通常对应 700 */
}
.top-highlight-content-padding-zero {
color: black !important;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.gold-underline {
text-decoration: underline;
text-decoration-color: gold;
}
.top-highlight-detail {
padding: 0 15px 15px 15px;
}
.top-font-color-black {
color: #333333;
}
.top-highlight-content-detail.overflow-visible {
overflow: visible; /* 修改为 visible，允许内容溢出 */
}
/* 媒体查询：适应不同屏幕尺寸 */
@media (max-width: 1200px) {
.top-highlight-col,
.top-highlight-col.col-4,
.top-highlight-col.col-3,
.top-highlight-col.col-2 {
width: calc(100%);
max-width: calc(100%);
}
.top-highlight-col.product-card,
.top-highlight-col.product-card.col-4,
.top-highlight-col.product-card.col-3,
.top-highlight-col.product-card.col-2 {
margin-left: 0;
margin-right: 0;
width: calc(50% - 10px); /* 减去 gap 的一半空间 */
max-width: calc(50% - 10px);
flex-grow: 0; /* 防止 flex-grow 撑破布局 */
}
/* 如果容器没有 .with-gap，则还是按 50% 排列 */
.top-highlight-container:not(.with-gap) .top-highlight-col.product-card {
width: calc(50% - 1%);
max-width: calc(50% - 1%);
}
.top-highlight-container.top-horiz-tabpane {
flex-direction: column;
}
.top-highlight-content-title {
padding-left: var(--topnav-margin-left);
}
.top-highlight-content-detail {
padding-left: var(--topnav-margin-left);
padding-right: var(--topnav-margin-left);
}
.top-highlight-content-image {
margin-left: var(--topnav-margin-left);
}
}
@media (max-width: 480px) {
.top-highlight-col.product-card,
.top-highlight-col.product-card.col-4,
.top-highlight-col.product-card.col-3,
.top-highlight-col.product-card.col-2 {
width: calc(100%);
max-width: calc(100%);
}
.top-highlight-col.product-card.col-5 {
margin-left: 0;
margin-right: 0;
width: calc(50% - 10px); /* 减去 gap 的一半空间 */
max-width: calc(50% - 10px);
flex-grow: 0; /* 防止 flex-grow 撑破布局 */
}
}
/* css/top/image.css */
.top-image-container {
position: relative;
overflow: hidden;
width: 100vw;
max-width: none;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/*
@media screen and (max-width: 768px) {
.top-image-container {
display: none;
}
}
*/
.top-image {
width: 100%;
height: auto;
/*
Reserve the banner's height from CSS before the image bytes arrive, so the
page does not reflow when it loads (fixes the Cumulative Layout Shift the
SEO/Lighthouse audit flagged). The container always uses the standard 4-step
responsive set (1920x560 / 1200x350 / 768x320 / 480x200), which collapses
into two intrinsic aspect ratios; we restate them here per breakpoint so the
reserved box matches the rendered image exactly and object-fit never crops.
Base value covers <=768px (768x320 & 480x200 -> 12/5 = 2.4); the >=769px
override below switches to 24/7 (1200x350 & 1920x560 -> ~3.4286).
*/
aspect-ratio: 12 / 5;
max-height: 60vh;
min-height: 300px;
object-fit: cover;
display: block;
}
/* >=769px serves 1200x350 / 1920x560, both 24/7 (matches the breakpoints). */
@media (min-width: 769px) {
.top-image {
aspect-ratio: 24 / 7;
}
}
.top-image-text {
position: absolute;
top: 50%;
/* 1. 将容器在视口中水平居中 */
left: 50%;
transform: translate(-50%, -50%);
/* 2. 默认采用大屏幕桌面端样式，与 .rst-content 的行为保持一致 */
width: var(--xl-main-width);
max-width: var(--xl-main-max-width);
box-sizing: border-box;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
/*
3. 中等屏幕样式 (1201px - 1300px)
覆盖默认的大屏样式，以适配中等尺寸屏幕。
*/
@media (min-width: 1201px) and (max-width: 1300px) {
.top-image-text {
width: var(--md-main-width);
max-width: var(--md-main-max-width);
}
}
/*
4. 移动端/小屏幕样式 (<= 1200px)
覆盖默认的大屏样式，以适配小尺寸屏幕。
*/
@media (max-width: 1200px) {
.top-image-text {
/* 在小屏幕上，宽度设为100% */
width: 100%;
/* 移除大屏幕下的最大宽度限制 */
max-width: none;
/* 应用与 .rst-content 相同的内边距以对齐 */
padding-left: var(--topnav-margin-left);
padding-right: var(--topnav-margin-left);
}
.top-image {
min-height: 180px; /* 进一步减小最小高度 */
}
}
.top-image-text .top-image-title {
text-align: left;
font-weight: bold !important;
font-family: "SourceHanSansCN-Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, PingFangSC-Regular, "PingFang SC Regular", 黑体, sans-serif !important;
font-size: var(--font-size-h1);
margin-bottom: 0.5em !important;
color: white !important;
display: block !important;
}
.top-image-text p {
font-size: var(--font-size-h3);
line-height: 1.425 !important;
font-family: "SourceHanSansCN-Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "PingFangSC-Light", "PingFang SC Light", "黑体", sans-serif !important;
text-align: left;
margin: 0;
max-width: clamp(50%, calc(90% - 10%*(100vw - 768px) / 100px), 90%);
width: clamp(50%, calc(90% - 10%*(100vw - 768px) / 100px), 90%);
/* 遇到長單字或URL自動斷行 */
overflow-wrap: break-word;
/* 保證自動換行 */
white-space: normal;
/* 允許自動換行 */
display: block;
/* 預設p已是block，也讓.features是block */
}
.top-image-text .features {
font-size: var(--font-size-p);
font-family: "SourceHanSansCN-Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "PingFangSC-Light", "PingFang SC Light", "黑体", sans-serif !important;
text-align: left;
line-height: 1.425 !important;
margin-top: 10px;
max-width: 95%;
width: 95%;
/* 遇到長單字或URL自動斷行 */
overflow-wrap: break-word;
/* 保證自動換行 */
white-space: normal;
/* 允許自動換行 */
display: block;
/* 預設p已是block，也讓.features是block */
}
/* css/top/resource-table.css */
.top-resource-table {
width: 100%;
border-collapse: collapse;
font-weight: 400;
line-height: 29px;
color: rgb(102, 102, 102);
}
.top-resource-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.top-resource-table td {
padding: 8px 0;
vertical-align: middle;
}
.top-resource-table td:first-child {
padding-left: 4px; /*BT 20px*/
padding-right: 6px;
padding-bottom: 10px;
}
.top-resource-table td:last-child {
text-align: right;
padding-right: 4px; /* 与 first-child padding-left 一致 */
}
.top-resource-table a {
text-decoration: none;
border: 1px solid rgb(153, 153, 153);
border-radius: 4px;
color: rgb(102, 102, 102);
padding: 5px 30px;
text-transform: uppercase;
display: inline-block;
vertical-align: middle;
white-space: nowrap; /* 禁止文字换行 */
}
.top-resource-table a:hover {
background: rgb(0, 104, 182);
color: rgb(255, 255, 255) !important;
border: 0px;
}
.top-resource-icon {
width: 38px; /* 28px without padding */
}
.top-resource-icon img {
width: 28px !important;
height: 28px !important;
display: inline-block; /* 确保 vertical-align 生效 */
vertical-align: middle; /* 使图片自身垂直居中对齐 */
margin: 0;
}
/* css/top/table.css */
/* Container for the scrollable table */
.top-table-container {
width: 100%;
overflow-x: auto;
min-width: 100%;
scrollbar-color: #C5D7EA #E7EBF0;
border-radius: 6px; /* 为容器添加圆角，使表格整体看起来有圆角效果 */
position: relative;
margin-bottom: 20px;
/* 添加一层与竞品风格类似的柔和外边框 */
border: 1px solid rgb(233, 240, 248);
}
.top-table {
border-collapse: separate;
border-spacing: 0;
white-space: nowrap;
min-width: 100%;
border-style: hidden; /* 隐藏表格自身边框，由容器处理 */
}
/* 使用 table-layout: fixed; 让所有列宽度均匀分布 */
.top-table.table-layout-fixed {
table-layout: fixed;
width: 100%;
}
.top-table .section-header {
text-align: center !important;
background-color: #e6f2ff !important; /* 浅蓝色背景 */
font-weight: bold !important;
color: #0068b6 !important; /* 深蓝色文字 */
padding: 10px !important;
}
.top-table th,
.top-table td {
padding-top: 0.6em;
padding-bottom: 0.6em;
padding-left: 0.3em;
padding-right: 0.3em;
text-align: left;
text-wrap: auto;
border-bottom: 1px solid rgb(233, 240, 248); /* #E9F0F8, 统一的行分隔线 */
border-right: 1px solid rgb(221, 221, 221); /* This creates the vertical lines */
width:auto;
vertical-align: middle; /* 垂直对齐 */
}
.top-table th,td,th>p,td>p,th>ul>li,td>ul>li {
font-size: var(--font-size-table) !important;
}
/* remove border from the last column to avoid double border*/
.top-table th:last-child,
.top-table td:last-child {
border-right: none;
}
/* 最后一行的单元格移除底部边框，避免与容器边框重叠 */
.top-table tr:last-child th,
.top-table tr:last-child td {
border-bottom: none;
}
/* 禁止第一行内容换行 */
.top-table th.no-wrap,
.top-table th.no-wrap span {
white-space: nowrap;
}
/* --- STICKY & STYLING LOGIC (REFINED) --- */
/* 所有表格的第一列（无论是 th 还是 td）都必须固定且置顶 */
.top-table th:first-child,
.top-table td:first-child {
position: sticky;
left: 0;
z-index: 50; /* 基础层级：高于普通单元格(0)，保证普通文字滑过时被遮挡 */
border-right: 1px solid rgb(221, 221, 221); /* 必须设置背景色，防止内容透出 */
}
/* 右侧阴影线 */
.top-table th:first-child::after,
.top-table td:first-child::after {
content: "";
position: absolute;
top: 0;
right: -1px;
height: 100%;
width: 1px;
background-color: rgb(221, 221, 221);
z-index: 6;
}
/* --- THEAD 处理 (针对 SoC Selection 表格) --- */
/* 第一行表头 (Header Row)：固定在顶部 */
.top-table thead tr:first-child th {
position: sticky;
top: 0;
background-color: rgb(215, 232, 250);
color: #0068b6;
font-weight: bold;
z-index: 20; /* 极高层级，保证纵向滚动时盖住 tbody */
border-bottom: 1px solid rgb(221, 221, 221);
}
/* 左上角第一个单元格 (交叉点) */
.top-table thead tr:first-child th:first-child {
z-index: 50; /* 最高层级，任何滚动都不能盖住它 */
}
/* Filter Row (第二行) 的第一个单元格 */
/* 确保它有不透明背景，防止第一行数据划过时透出来 */
.top-table thead tr.filter-row th:first-child {
background-color: rgb(247, 250, 253); /* 使用浅灰色/浅蓝色填充 */
z-index: 5;
}
/* 确保 filter-row 其他单元格也有背景 */
.top-table thead tr.filter-row th {
background-color: rgb(247, 250, 253);
}
/* --- ZEBRA-STRIPING & BACKGROUNDS --- */
/* 偶数行 (Even Rows) */
.top-table tbody tr:nth-child(even) {
background-color: rgb(247, 250, 253);
}
/* 偶数行首列 - 强制设置背景色，防止透明 */
.top-table tbody tr:nth-child(even) td:first-child,
.top-table tbody tr:nth-child(even) th:first-child {
background-color: rgb(247, 250, 253);
z-index: 5;
}
/* 奇数行 (Odd Rows) */
.top-table tbody tr:nth-child(odd) {
background-color: white;
}
/* 奇数行首列 - 强制设置白色背景，防止透明 */
.top-table tbody tr:nth-child(odd) td:first-child,
.top-table tbody tr:nth-child(odd) th:first-child {
background-color: white;
z-index: 5;
}
/* 无 thead 表格 (Part Number) 的首行处理 */
/* 这类表格第一行在 tbody 中，且是 th，必须给予最高优先级，覆盖上面的奇数行白色背景 */
.top-table tbody tr:first-child th {
background-color: rgb(215, 232, 250) !important; /* 强制蓝色背景 */
color: #0068b6 !important;
font-weight: bold;
}
/* Part Number 表的首行首列 (Sticky Corner) */
.top-table tbody tr:first-child th:first-child {
background-color: rgb(215, 232, 250) !important; /* 确保不透明 */
z-index: 10; /* 高于其他数据行首列，防止被覆盖 */
}
.highlighted-column {
background-color: #f0f0f0 !important; /* 可以根据需要调整颜色 */
}
/************ 表格列筛选功能 ************/
.filter-options {
position: static; /* 改为静态定位 */
display: flex;
flex-direction: column;
align-items: flex-start;
font-weight: normal;
}
.filter-options label {
display: flex;
align-items: center;
margin-top: 2px;
font-size: var(--font-size-table);
white-space: nowrap;
}
.filter-options input[type="checkbox"] {
margin: 0;
margin-right: 5px;
}
/* 隐藏不符合筛选条件的行 */
.top-table tbody tr.hidden {
display: none;
}
/* 隐藏不符合筛选条件的列 */
.top-table th.hidden-col,
.top-table td.hidden-col {
display: none !important;
}
/* 为带有 fixed-width 类的列设置固定宽度 */
.top-table th.fixed-width,
.top-table td.fixed-width {
width: 12em; /* 根据需要调整宽度 */
min-width: 12em;
max-width: 12em;
}
/* 为需要 sticky 的第二列添加样式 */
.top-table td.-col2,
.top-table th.sticky-col2 {
position: sticky;
left: 11.67em; /* 调整这个值以匹配第一列的宽度 */
z-index: 10; /* 略低于第一列，确保第一列始终在最上层 */
background-color: inherit;
}
/************ 表格列筛选功能 ************/
/************ header span 用于hover显示注释 ************/
.top-table th span[data-tooltip],
.top-table td span[data-tooltip] {
position: relative;
cursor: help;
}
.top-table th span[data-tooltip]::after,
.top-table td span[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
/* 外观设置 */
padding: 1em 1em;
background-color: var(--color-tooltip-bg);
color: var(--color-tooltip-text);
font-size: calc(var(--font-size-table)*0.8);
white-space: pre-wrap; /* 允许文字换行 */
border-radius: 4px;
max-width: 22em;
min-width: 18em;
z-index: 9999; /* 确保在最上层 */
pointer-events: none; /* 防止鼠标遮挡 */
text-align: center; /* 文本左对齐 */
/* 初始状态：隐藏 */
opacity: 0;
visibility: hidden;
margin-bottom: 8px; /* 距离 Chip 的间距 */
transition: opacity 0.2s, visibility 0.2s, margin-bottom 0.2s;
}
.top-table th span[data-tooltip]::after {
/* 定位：显示在下方 */
top: 2.5em;
left: 50%;
transform: translateX(-50%);
}
.top-table td span[data-tooltip]::after {
/* 定位：显示在右上方 */
bottom: -100%;
left: 23em;
transform: translateX(-50%);
}
.top-table th span[data-tooltip]:hover::after,
.top-table td span[data-tooltip]:hover::after {
visibility: visible;
opacity: 1;
}
/* WCAG AA: #0068b6 on #d7e8fa = 4.60:1 (required ≥ 4.5:1 for normal text) */
.top-table th a,
.top-table th a span {
color: #0068b6;
}
.top-table th a span:hover,
.top-table td a span:hover {
color: #FF6D65;
}
.top-table td {
position: relative; /* 确保tooltip可以相对于td定位 */
overflow: visible; /* 允许tooltip溢出td */
}
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--font-size-table);
height: var(--font-size-table);
border-radius: 50%;
background-color: #0068B6;
color: #ffffff;
font-size: 0.8em;
font-weight: bold;
cursor: help;
vertical-align: middle;
margin-left: 0.2em;
}
/************ header span 用于hover显示注释 ************/
/* 移动端强制fix的首列和其它可滚动列各占50%view window */
@media (max-width: 1200px) {
.top-table td:first-child,
.top-table th:first-child {
/* TEXT WRAPPING */
white-space: normal !important;
/* Prevent Chinese text from breaking mid-word. */
word-break: keep-all;
/* Prevent first column from being too thin */
min-width: 30vw;
max-width: 50vw;
/* Visual alignment */
vertical-align: middle;
word-break: keep-all;
}
/* Keep other columns neat */
.top-table td:not(:first-child),
.top-table th:not(:first-child) {
max-width: 70vw;
white-space: normal !important;
vertical-align: middle;
word-break: keep-all;
}
/* Cancel line break by html */
.top-table td:not(:first-child) br,
.top-table th:not(:first-child) br {
display: none;
}
}
/* css/top/ic-nav.css */
body{
overflow-x: clip;
--icnav-bg-color: #334466; /* f3f1f7 */
--icnav-font-color: #FFFFFF; /* 333333 */
}
#top-sections-container {
/* --- 核心修改 --- */
position: sticky;
z-index: 900; /* 确保它在滚动时能覆盖在其他内容之上 */
/* --- 原有样式保留 --- */
background-color: transparent; /* 背景交由伪元素处理 */
padding-left: 0;
padding-right: 0;
}
/*
全屏背景伪元素方案 (保持不变)
这个方案在 position: sticky 下依然完美工作。
*/
#top-sections-container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background-color: var(--icnav-bg-color);
border: none;
z-index: -1; /* 将伪元素置于父元素内容的下方 */
}
/*
移除了所有的 #top-sections-container.sticky 规则，
因为 position: sticky 会自动处理，不再需要这些。
*/
/*
针对移动端的内边距调整 (保持不变)
这部分逻辑与粘性定位无关，是针对小屏幕的布局适应，应当保留。
*/
@media (max-width: 1200px) {
#top-sections-container {
/*
3. 确保 padding 被计算在元素的总宽度之内，
防止容器超出视口宽度。
*/
box-sizing: border-box;
}
}
/* 以下为内部元素样式，保持不变 */
.top-tab-content {
display: none;
}
.top-tab-content.active {
display: block;
}
#top-sections {
display: flex;
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
white-space: nowrap;
padding-left: 0;
}
#top-sections::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */
}
/* 修改选择器，适配 a 标签 */
#top-sections a {
display: flex; /* Flex 布局以垂直居中文字 */
flex: 0 0 auto;
margin-left: 0.5em;
margin-top: 2.5px;
margin-bottom: 2.5px;
height: 35px;
padding: 0 1em;
cursor: pointer;
border: 1px solid #FFFFFF;
border-radius: 17px;
background-color: transparent;
/* 字体设置 */
font-family: inherit;
color: var(--icnav-font-color);
font-weight: normal;
text-decoration: none; /* 去除下划线 */
transition: all 0.3s;
justify-content: center;
align-items: center;
}
/* Hover 状态 */
#top-sections a:hover {
background-color: #FF6D65;
border-color: #FF6D65;
color: #fff;
}
/* Active 状态 */
#top-sections a.active {
border: 1px solid #FF6D65; /* 保持边框或者去掉视设计而定 */
background-color: #FF6D65;
font-weight: 700;
color: #fff;
}
/* css/top/ic-sections.css */
/* =========================================
Sticky Bar Container
定位基准：下拉菜单将相对于此容器进行全宽定位
========================================= */
#top-icsections-container {
position: sticky;
top: var(--topnav-height-margin); /* 确保定义了此变量 */
height: 40px;
z-index: 1000;
display: flex;
align-items: center;
padding: 0;
background-color: transparent;
}
/* 全屏深色背景伪元素 */
#top-icsections-container::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 100%;
background-color: #334466;
z-index: -1;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#top-icsections {
display: flex;
flex-grow: 1; /* 占据剩余空间 */
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
white-space: nowrap;
padding-left: 10px;
height: 40px;
align-items: center;
}
#top-icsections::-webkit-scrollbar {
display: none;
}
#top-icsections button {
flex: 0 0 auto;
margin-right: 1em;
height: 100%;
line-height: 1.5;
padding: 0 0.8em;
cursor: pointer;
border: none;
background-color: transparent;
font-family: inherit;
color: #fff;
font-size: var(--font-size-nav);
font-weight: normal;
transition: color 0.3s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* 按钮底部游标动画 */
#top-icsections button::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background-color: #FF6D65;
width: 0;
transition: width 0.3s ease;
}
#top-icsections button:hover::after,
#top-icsections button.active::after {
width: 100%;
}
#top-icsections button.active {
font-weight: 700;
background-color: #FF6D65;
}
/* css/top/ic-select-via-app.css */
.icdropdown {
position: relative;
margin-bottom: 10px;
}
.icdropdown-toggle {
cursor: pointer;
}
.icdropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
.icdropdown-menu {
position: relative; /* 改为相对定位 */
width: 100%;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 10rem;
margin: 0.125rem 0 0;
font-size: var(--font-zise-p)
color: #212529;
text-align: left;
list-style: none;
background-color: transparent;
background-clip: padding-box;
border: 0;
padding-top: 1vw;
padding-bottom: 1vw;
padding-left: var(--top-highlight-content-left);
}
.icdropdown-menu.show {
display: flex !important; /* 使用 flex 布局 */
flex-wrap: wrap; /* 允许换行 */
}
.icdropdown-item {
display: block;
width: 33.33%;
padding-top: 0.5vw;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
font-weight: 400;
color: #212529; /*#007bff;*/
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
box-sizing: border-box;
}
.icdropdown-item.col2 {
width: 50%;
}
.icdropdown-item:hover, .icdropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #f8f9fa;
}
.show {
display: block !important;
}
.hover-link {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
.hover-link:hover {
color: #007bff; /* 蓝色，可以根据需要调整 */
}
/* css/top/dropdown-menu.css */
/* =========================================
Dropdown Trigger (左侧触发按钮)
========================================= */
.top-dropdown-menu {
position: static;
display: flex;
align-items: center;
height: 100%;
padding: 0 1em;
color: #fff;
font-weight: 500;
border-right: 1px solid rgba(255,255,255,0.15);
white-space: nowrap;
z-index: 1002; /* 确保层级高于 Tabs，防止极端情况下滚动重叠 */
}
.top-dropdown-menu i {
margin-left: 10px;
font-size: var(--font-size-nav);
transition: transform 0.3s;
opacity: 0.8;
}
.top-dropdown-menu.open i {
transform: rotate(180deg);
}
#top-current-menu-item {
font-size: var(--font-size-nav);
}
.top-menu-label-wrapper {
position: relative; /* Tip 参照它定位 */
display: flex; /* 保持内部文字和图标横向排列 */
align-items: center;
height: 100%; /* 撑满高度，保证点击区域 */
}
/* =========================================
Mega Menu Container (下拉列表)
========================================= */
.top-dropdown-menu-list {
position: absolute;
top: 100%;
left: 0;
right: 0; /* 左右均为0，确保充满父容器宽度 */
width: 100%;
max-height: 80vh;
overflow-y: auto;
/* 背景色调整 */
background-color: #334466;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
padding-bottom: 15px;
padding-top: 0;
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-direction: column;
z-index: 1002;
/* 动画状态 */
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s ease-in-out;
}
/* 显示状态 */
.top-dropdown-menu-list:not(.hidden) {
display: flex;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.top-dropdown-menu-list.hidden {
display: none !important;
opacity: 0;
visibility: hidden;
}
/* =========================================
Mega Menu Content Structures
========================================= */
.top-mega-menu-section-title {
margin-top: 10px !important;
font-size: var(--font-size-nav);
font-weight: 600;
}
/* 左侧：分类名称 */
.top-mega-menu-category-label {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 160px; /* 固定左侧宽度 */
font-size: var(--font-size-nav);
color: #fff;
margin-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.top-mega-menu-category-label.short-label {
flex-basis: 6em;
}
.top-mega-menu-category-label.long-label {
flex-basis: 180px;
}
/* 右侧：芯片列表容器 */
.top-mega-menu-items-wrapper {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 0;
}
/* 让 Item 容器占满宽度，不需要左侧留白 */
.top-mega-menu-items-wrapper.full-width {
flex: 1 1 100%;
padding-left: 0;
margin-left: 0;
}
/* 具体的芯片链接 Item */
.top-mega-menu-item,
.top-mega-menu-item:visited,
.top-mega-menu-item:link,
.top-mega-menu-item:active {
display: inline-block;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 0;
padding-right: 1em;
border: none;
color: #fff;
text-decoration: none;
font-size: var(--font-size-nav);
font-weight: normal;
transition: all 0.2s;
/* 移除固定宽度，改为自适应 */
min-width: 60px;
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.top-mega-menu-item:hover {
color: #FF6D65;
transform: translateY(-1px);
}
/* 激活状态 */
.top-mega-menu-item.active {
color: #FF6D65;
font-weight: bold;
}
/* =========================================
Mega Menu Tabs Styling (Bootstrap Adapter)
========================================= */
/* 覆盖默认的 Bootstrap nav-tabs 样式以适应深色背景 */
.top-mega-menu-tabs {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
margin-bottom: 20px;
padding-bottom: 5px;
padding-left: 0;
display: flex !important;
}
.top-mega-menu-tabs .nav-item {
list-style: none !important;
margin-left: 0 !important;
}
.top-mega-menu-tabs .nav-link {
color: #aebfd4;
border: none;
border-bottom: 3px solid transparent; /* 预留底部边框位置 */
font-size: var(--font-size-nav);
padding-top: 10px;
padding-bottom: 8px;
padding-left: 0;
padding-right: 20px;
background-color: transparent !important; /* 确保背景透明 */
transition: all 0.3s;
}
.top-mega-menu-tabs .nav-link:hover {
color: #fff;
border-color: transparent; /* hover时不显示边框，只变色 */
}
/* 选中状态 */
.top-mega-menu-tabs .nav-link.active {
color: #fff !important;
background-color: transparent !important;
border-color: transparent;
border-bottom: 3px solid #FF6D65; /* 选中时底部的亮色条 */
}
/* 内容区域的间距调整 */
.top-mega-menu-content {
/* 可以在这里添加 fade 动画相关的 padding */
width: 100%;
}
.top-mega-menu-row {
display: flex;
align-items: flex-start;
padding: 5px 0;
border-bottom: 1px dashed rgba(255,255,255,0.1); /* 可选：增加极淡的分隔线 */
}
.top-mega-menu-row:last-child {
border-bottom: none;
}
/* =========================================
Dropdown Tip (新增提示框样式)
========================================= */
.top-menu-tip {
position: absolute;
bottom: 100%; /* 位于父元素上方 */
left: 0;
right: auto;
transform: translateY(5px);
background-color: #FF6D65; /* 使用你网站的强调色 (橙红色) */
color: #fff;
padding: 6px 12px;
border-radius: 4px;
font-size: var(--font-size-p);
font-weight: normal;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
pointer-events: none; /* 防止遮挡鼠标点击 */
z-index: 1003;
}
/* 显示状态 */
.top-menu-tip.show {
opacity: 1;
visibility: visible;
transform: translateY(-20px);
}
/* 底部的小箭头 */
.top-menu-tip .tip-arrow {
position: absolute;
bottom: -6px;
left: 30px;
transform: none;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #FF6D65;
}
/* 只要下拉菜单打开了，提示框就必须强制隐藏 */
.top-dropdown-menu.open .top-menu-tip {
display: none !important;
}
/* =========================================
Tab Functionality
========================================= */
/* 默认隐藏所有 tab-pane */
.top-mega-menu-content .tab-pane {
display: none;
}
/* 只有带有 active 类的 tab-pane 才显示 */
.top-mega-menu-content .tab-pane.active {
display: block;
/* 你的 .top-mega-menu-row 已经是 display:flex 了，
所以这里用 block 即可，内部元素会自动撑开 */
}
/* 处理 Fade 动画 (模拟 Bootstrap 行为) */
.top-mega-menu-content .tab-pane.fade {
opacity: 0;
transition: opacity 0.15s linear;
}
/* 显示并完全不透明 */
.top-mega-menu-content .tab-pane.fade.show {
opacity: 1;
}
/* 确保 active 的同时也是不透明的 (兼容旧版 BS class 组合) */
.top-mega-menu-content .tab-pane.active.fade {
opacity: 1;
}
/* =========================================
Mobile Adaptation
========================================= */
@media (max-width: 768px) {
.top-dropdown-menu-list {
padding-left: 18px;
padding-right: 18px;
max-height: 60vh;
overflow-y: auto;
/* 突破父容器宽度 */
width: 100vw;
left: 50%;
right: auto;
margin-left: -50vw;
border-radius: 0;
box-sizing: border-box; /* 确保 padding 不会撑破 100vw */
}
.top-mega-menu-row {
flex-direction: column;
padding: 5px 0;
margin-top: 5px;
margin-bottom: 5px;
}
.top-mega-menu-category-label {
flex: auto;
flex-basis: 0 !important;
margin-bottom: 5px;
text-transform: uppercase;
font-size: var(--font-size-h2);
}
}
/* 移动端适配：如果屏幕太窄，防止 Tip 溢出屏幕，可以微调位置 */
@media (max-width: 480px) {
.top-menu-tip {
left: 20px; /* 左对齐一点，避免右边溢出 */
transform: translateY(-10px);
}
.top-menu-tip.show {
transform: translateY(-15px);
}
.top-menu-tip .tip-arrow {
left: 20px; /* 箭头也要跟着移 */
}
}
/* css/top/mobile-menu.css */
#top-mobile-menu-modal {
display: none;
}
@media (max-width: 1200px) {
/* 移动菜单模态框基础样式 */
#top-mobile-menu-modal {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .90);
z-index: 9998;
color: #fff;
line-height: 1.6;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
pointer-events: none; /* 隐藏时不可点击 */
transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* 动画效果 */
}
/* 菜单内容区域 */
.top-mobile-menu-wrapper {
padding-top: var(--topnav-height);
padding-left: 15px;
padding-right: 15px;
padding-bottom: 0;
height: 100vh;
overflow-y: auto;
}
.top-mobile-menu-content {
padding-top: 10px;
padding-bottom: 20px;
}
/* 菜单项 DL/DT/DD 结构 */
.top-mobile-menu-wrapper dl {
padding: 15px 0;
line-height: 1.6;
}
.top-mobile-menu-wrapper dl:not(:first-child) {
border-top: 1px solid #555;
}
/* 一级菜单标题 (dt) */
.top-mobile-menu-wrapper dt {
color: #fff;
font-size: var(--font-size-h2);
font-weight: 700;
text-align: left;
}
/* 二级/三级菜单容器 (dd) */
.top-mobile-menu-wrapper dd {
overflow: hidden;
margin-top: 10px;
padding-left: 0;
margin-left: 0;
}
/* 二级菜单标题 */
.top-mobile-menu-wrapper .top-mobile-menu-column-title {
color: #e0e0e0;
font-size: var(--font-size-h3);
margin-top: 10px;
margin-bottom: 5px;
font-weight: 500;
}
/* 第三级菜单容器 */
.top-mobile-menu-items-container {
display: flex;
flex-wrap: wrap;
gap: 0 15px; /* 垂直间距0, 水平间距15px */
padding-left: 0; /* 覆盖可能存在的父级缩进 */
}
/* 第三级菜单项 (a) */
.top-mobile-menu-wrapper dd a {
display: inline-block; /* 改为 inline-block 以便水平排列 */
padding: 0;
font-size: var(--font-size-p);
color: #ccc;
text-decoration: none;
transition: color 0.2s;
border-bottom: 1px solid transparent; /* 占位 */
}
.top-mobile-menu-wrapper dd a:hover {
color: #fff;
border-bottom-color: #fff; /* 悬停时显示下划线 */
}
.top-mobile-menu-wrapper dd a:visited {
color: #ccc; /* 保持与未访问时一样的颜色 */
}
.top-mobile-menu-wrapper dd a i {
margin-left: 8px;
font-size: var(--font-size-p);
}
/* 用于JS控制页面滚动的类 */
body.top-mobile-menu-open, html.top-mobile-menu-open {
overflow: hidden;
}
#top-mobile-user-actions {
border-top: 1px solid #555;
padding: 15px 0;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-mobile-user-action-btn {
display: flex;
align-items: center;
text-decoration: none;
color: #ccc !important; /* 避免a:visited被改色 */
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.2s;
}
.top-mobile-user-action-btn:hover {
color: #fff;
}
.top-mobile-user-action-btn:hover svg {
stroke: #fff; /* 悬停时SVG描边变色 */
}
.top-mobile-user-action-btn:hover .top-mobile-user-icon {
color: #fff; /* 悬停时用户图标变色 */
}
#top-mobile-lang-toggle svg {
stroke: #ccc; /* 默认SVG描边颜色 */
transition: stroke 0.2s;
}
/* 通用：按钮内文字样式 */
.top-mobile-user-action-btn span {
font-size: var(--font-size-p);
margin-left: 8px; /* 图标与文字的间距 */
}
.top-mobile-user-action-btn .top-mobile-user-icon {
font-size: 18px; /* 调整图标大小 */
transition: color 0.2s;
}
/* 当菜单激活时，显示模态框 */
body.top-mobile-menu-active #top-mobile-menu-modal {
opacity: 1;
visibility: visible;
pointer-events: auto; /* 显示时可点击 */
transition: opacity 0.3s ease, visibility 0s linear 0s;
}
/* 当菜单激活时，锁定背景滚动 */
body.top-mobile-menu-active {
overflow: hidden;
}
/* 当菜单激活时，切换汉堡包图标为关闭图标 */
body.top-mobile-menu-active .navbar-toggle i::before {
content: "\f00d"; /* FontAwesome "times" (close) icon */
font-family: "Font Awesome 5 Free"; /* 确保使用正确的字体 */
font-weight: 900; /* FontAwesome 5+ 需要这个 */
}
}
/* css/top/gallery.css */
.top-gallery-wrapper {
width: 100%; /* Fill the rst-content parent */
box-sizing: border-box; /* Ensure padding doesn't add to width */
position: relative;
}
.top-gallery-header {
text-align: left;
margin-bottom: 0.5rem; /* tightened a bit since we add a selected title below */
padding: 0 1rem;
}
.top-gallery-header h2 {
font-size: 1.8rem;
color: #212529;
margin-top: 0;
margin-bottom: 0.25rem;
display: inline-block;
border-left: 4px solid #0068B6;
padding: 0.2rem 1rem 0.2rem 1rem;
background-color: #ffffff;
border-radius: 4px;
}
/* Container */
.top-gallery-container {
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 0.5rem;
padding-bottom: 1rem;
justify-content: flex-start;
--card-gap: clamp(12px, 2vw, 24px);
scrollbar-width: none;
}
.top-gallery-container::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
.top-gallery-container.correcting .top-card {
transition: none !important;
}
/* Active card */
.top-card.active {
transform: scale(1);
opacity: 1;
z-index: 2; /* ensure active is layered above */
}
.top-card-content {
color: #ffffff;
padding: 1.5rem 2rem;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.top-card-content h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
border-left: 3px solid #0068B6;
padding-left: 1rem;
color: #ffffff !important;
opacity: 1 !important;
}
.top-card-content p {
margin-bottom: 0;
font-size: 1rem;
line-height: 1.6;
opacity: 0.9;
}
.top-gallery-nav {
text-align: center;
margin-top: 1rem;
}
.top-gallery-nav button {
width: 44px;
height: 44px;
margin: 0 0.5rem;
border-radius: 50%;
border: 1px solid #0068B6;
background-color: #ffffff;
color: #0068B6;
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.top-gallery-nav button:hover {
background-color: #0068B6;
color: #ffffff;
border-color: #0068B6;
}
.top-card-title {
display: none;
}
/* NEW: Selected title bar (left-aligned to header text, right below the header) */
.top-gallery-selected-title-wrap {
margin: 0;
display: none;
}
.top-gallery-selected-title {
/* Align to the start of the H2 text */
margin-left: 0;
font-size: 1.05rem;
color: #6c757d;
line-height: 1.4;
font-weight: 500;
margin-bottom: 0.4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-gallery-container::-webkit-scrollbar { display: none; }
/* Track that we move as a whole */
.top-gallery-track {
display: flex;
align-items: center;
will-change: transform;
transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cards: equal size, no scale/opacity differences */
.top-card {
flex: 0 0 auto;
box-sizing: border-box;
width: var(--xl-main-width);
max-width: var(--xl-main-max-width);
aspect-ratio: 21 / 9;
margin: 0 var(--card-gap);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-size: cover;
background-position: center;
border-radius: 0px;
overflow: hidden;
/* Remove scale/opacity differences */
transform: none;
opacity: 1;
transition: none; /* animation will be on the track, not on individual cards */
}
@media (max-width: 1200px) {
.top-gallery-wrapper {
padding: 0 0;
box-sizing: border-box;
}
/* [JITTER FIX] Add perspective to create a 3D rendering context for smoother animation */
.top-gallery-container {
display: block;
overflow: hidden;
perspective: 1000px; /* Jitter Fix */
width: 100%;
left: auto;
transform: none;
padding: 0;
--card-gap: 0px;
height: auto;
margin-bottom: 0;
}
/* [JITTER FIX] Add backface-visibility to stabilize the moving track */
.top-gallery-track {
backface-visibility: hidden;
}
.top-gallery-selected-title {
font-size: 0.95rem;
margin-bottom: 0.35rem;
}
.top-gallery-nav {
margin: 1rem -1.25rem 0;
padding-bottom: 1rem;
/* Add Flexbox to center the buttons themselves */
display: flex;
justify-content: center;
align-items: center;
}
.top-gallery-nav button {
width: 36px;
height: 36px;
font-size: 1.2rem;
/* --- ADD THESE LINES --- */
display: flex;
align-items: center;
justify-content: center;
line-height: 1; /* Reset line-height to avoid conflicts */
}
.top-gallery-mobile-content {
display: block;
background-color: #ffffff;
padding: 0;
margin: 1rem 0;
box-sizing: border-box;
}
.top-gallery-mobile-content h3 {
color: #212529 !important;
border-left: 3px solid #0068B6;
padding-left: 1rem;
font-size: 1.3rem;
margin-top: 0;
margin-bottom: 0.75rem;
}
.top-gallery-mobile-content p {
color: #6c757d !important;
margin-bottom: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.top-card .top-card-content {
display: none !important;
}
.top-card {
width: 100%;
flex-shrink: 0;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
border-radius: 0;
padding: 0;
}
}
/* css/top/footer.css */
.layout-footer {
position: relative;
margin-top: auto;
overflow-x: hidden;
background-color: #2D2D2D;
padding: 40px 0 20px;
width: 100vw;
left: 50%;
margin-left: -50vw;
margin-bottom: 0;
box-sizing: border-box; /* 确保 padding 和 border 不会增加总宽度 */
}
.footer-wrapper {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
width: 100%;
}
/*
宽度、居中和响应式边距都由 .content-width-container 工具类处理。
*/
.footer-content-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.footer-wrapper a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s ease-in-out;
}
.footer-wrapper a:hover {
color: #FFFFFF;
}
.footer-main-section {
padding-bottom: 30px;
border-bottom: 1px solid #444;
}
.footer-branding {
flex: 1;
min-width: 250px;
}
.footer-logo img {
max-height: 40px;
margin-bottom: 35px;
width: 185px;
height: 29px; /* explicit box reserves layout */
}
.footer-links {
flex: 3;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 40px;
}
.footer-link-column {
min-width: 150px;
}
.footer-column-title {
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
display: block;
margin-bottom: 15px;
}
.footer-link-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-link-column li {
margin-bottom: 10px;
}
.footer-copyright-section {
padding-top: 20px;
}
.copyright-grid {
justify-content: center;
align-items: center;
gap: 15px;
}
.legal-links {
order: 1;
}
.copyright-text {
font-size: 13px;
order: 2;
}
.copyright-text::before {
content: "|";
color: rgba(255, 255, 255, 0.7);
margin-right: 15px;
}
.copyright-text span {
margin-right: 15px;
}
.copyright-text a {
font-size: 13px;
}
.legal-links a,
.legal-links span {
font-size: 13px;
margin-left: 10px;
}
.footer-social-icons {
display: flex;
align-items: center;
gap: 40px; /* Space between WeChat and Shop icons */
}
/* Common styles for the grey circle buttons */
.social-btn {
position: relative; /* Needed for positioning the popup */
display: flex; /* Use flex to center the icon image inside the circle */
justify-content: center;
align-items: center;
width: 62px;
height: 62px;
background-color: rgb(168, 168, 168);
border-radius: 50%;
transition: background-color 0.3s ease;
cursor: pointer;
text-decoration: none;
}
/* Ensure the icon images fit nicely inside the circle */
.social-btn .btn-icon {
/* width: 30px; */
max-width: 60%;
height: auto;
border: none;
margin: 0;
display: block;
}
/* Per-icon aspect-ratio reserves each social icon's box (the two icons have
different intrinsic ratios, so this can't live on the shared rule above). */
.wechat-btn .btn-icon {
aspect-ratio: 40 / 33;
}
.shop-btn .btn-icon {
aspect-ratio: 35 / 34;
}
/* Facebook uses an icon-font glyph (fa-facebook-f) instead of an ![]()
, so it's sized
via font-size/color/line-height rather than the aspect-ratio used by the img icons. */
.facebook-btn .btn-icon {
font-size: 28px;
line-height: 1;
color: #fff;
}
/* The Popup Container */
.footer-qrcode {
display: none;
position: absolute;
/* Vertical Alignment*/
top: 50%;
transform: translateY(-50%);
/* Horizontal Alignment*/
left: auto;
right: 100%;
/* Spacing */
margin-top: 0;
margin-right: 15px;
padding: 10px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
z-index: 999;
width: 150px;
}
/* Small arrow pointing up to the icon */
.footer-qrcode::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: auto;
right: -8px;
/* Create the triangle pointing Right */
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #fff;
border-right: none;
}
.footer-qrcode img {
width: 100%;
height: auto;
display: block;
margin: 0;
aspect-ratio: 1; /* square QR; reserves the box */
}
/* Show popup on hover */
.wechat-btn:hover .footer-qrcode {
display: block;
}
.wechat-btn:hover {
background-color: #29C61B;
}
.facebook-btn:hover .footer-qrcode {
display: block;
}
.facebook-btn:hover {
background-color: #1877F2;
}
.shop-btn:hover {
background-color: #F5A515;
}
@media (max-width: 1200px) {
/*
RealMCU < 992px 时：
.footer-wechat, .footer-shop { width: 40px; height: 40px; }
.footer-wechat img { width: 26px; height: 20px; }
.footer-shop img { width: 22px; height: 22px; }
gap: 15px
*/
.footer-social-icons {
gap: 15px;
}
.social-btn {
width: 40px;
height: 40px;
}
.social-btn .btn-icon {
max-width: 65%; /* 调整图标在小圆圈内的比例 */
}
.facebook-btn .btn-icon {
font-size: 18px;
}
}
@media (max-width: 768px) {
.footer-content-grid {
flex-direction: column;
align-items: flex-start;
}
.footer-links {
width: 100%;
justify-content: flex-start;
gap: 20px;
}
.footer-link-column {
flex-basis: calc(50% - 15px);
min-width: 120px;
}
.copyright-grid {
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.copyright-text {
order: 2;
}
.legal-links {
order: 1;
}
.copyright-text::before {
display: none;
}
.footer-branding {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 30px;
width: 100%;
margin-bottom: 20px;
}
.footer-logo img {
margin-bottom: 0;
width: 129px;
height: 20px;
}
.footer-social-icons {
gap: 12px; /* Space between WeChat and Shop icons */
}
.social-btn {
width: 36px;
height: 36px;
}
.wechat-btn .btn-icon {
width: 24px;
height: 18px;
}
.shop-btn .btn-icon {
width: 18px;
height: 18px;
}
.facebook-btn .btn-icon {
font-size: 16px;
}
.footer-qrcode {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 15px;
padding: 10px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
z-index: 999;
width: 150px;
}
/* Small arrow pointing up to the icon */
.footer-qrcode::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #fff;
}
}
/* css/top/layout-body.css */
/* 正文配置 */
body {
font-weight: 400;
color: #404040;
min-height: 100%;
background: #edf0f2;
transition: all var(--sidebar-transition);
}
/* 代码段配置 */
pre {
line-height: 1.2 !important; /* 调整代码快行距 */
}
/* 标题配置 */
h1, h2, h3, h4, h5, h6 {
color: #333 !important; /* 设置标题颜色 */
margin-left: 2px; /* 段左间距 */
font-weight: 400;
font-family: inherit;
}
h3, h4, h5, h6 {
margin-top: var(--margin-top-h3) !important; /* 段前间距 */
margin-bottom: var(--margin-bottom-h3) !important; /* 段后间距 */
}
h1, h2 {
margin-top: var(--margin-top-h2) !important; /* 段前间距 */
margin-bottom: var(--margin-bottom-h2) !important; /* 段后间距 */
}
/* 将相邻标题的 margin-top 设为 0 */
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
margin-top: 0;
}
/* 自定义各级标题的文字大小 */
h1 {
font-size: var(--font-size-h1);
}
h2 {
font-size: var(--font-size-h2);
}
h3,h4,h5,h6 {
font-size: var(--font-size-h3);
}
/* 段间距 */
p {
display: block;
margin-block-start: 1em; /* 段前 */
margin-block-end: 1em; /* 段后 */
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
margin-top: 1em;
margin-bottom: 1em; /* 行距 */
}
body,p,li,pre {
font-size: var(--font-size-p);
line-height: 1.8; /* 调整行距 */
}
th,td,th>p,td>p {
font-size: var(--font-size-table) !important;
}
dl, ol, ul {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* css/top/layout-content.css */
/* layout-content-top.css */
:root {
--top-nav-height: 61px;
--side-bar-width: 300px;
--side-bar-padding-top: 61px;
--side-bar-margin-top: 20px;
--float-bar-bottom: 60px;
--content-top-btn-right: 5px;
--content-top-btn-top: 150px;
--sidebar-transition: 50ms linear;
--margin-top-h2: 0.8em;/* 0.8xfont-size */
--margin-bottom-h2: 1em;
--margin-top-h3: 0.6em;/* 0.8xfont-size */
--margin-bottom-h3: 0.6em;
--body-font-color: #666666;
--color-tooltip-bg: rgba(0, 0, 0, 0.95); /* 半透明黑底 */
--color-tooltip-text: #fff;
}
/* 移除隐藏侧边栏的样式 */
.wy-nav-side {
background-color: #474444 !important;
left: 0;
position: fixed;
padding-top: 0; /* var(--side-bar-padding-top); 为顶部导航留出空间 */
margin-top: 0; /* var(--side-bar-margin-top); 为顶部导航留出空间 */
bottom: 0;
width: var(--side-bar-width);;
flex: 0 0 var(--side-bar-width);; /* 固定宽度 */
z-index: 2000; /* 确保侧边栏在内容之上 */
}
.wy-nav-content {
max-width: none;
min-height: 100vh;
margin-left: 0; /* 从最左侧开始 */
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background-color: white !important;
padding-top: var(--topnav-height-margin);
}
/* 为内容包装器添加上边距 */
.custom-content-wrapper {
margin-top: 5px;
position: relative;
}
.rst-content [role="navigation"] hr {
display: none !important; /* 面包屑下面内容之上的横线去掉 */
}
.wy-grid-for-nav {
position: relative;
width: 100%;
left: 0;
display: block;
flex-direction: row;
}
.wy-nav-side {
width: 0; /* top 隐藏侧边栏 */
}
/* css/top/float_share_bar.css */
/* Container Positioning */
#float-action-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 2147483647; /* Max Safe Integer to float above everything */
display: flex;
flex-direction: column;
gap: 10px;
font-family: Arial, sans-serif;
}
/* Common Button Styling */
.float-btn {
width: 48px;
height: 48px;
background-color: #1B68F7; /* match logo-ai.png blue */
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
transition: all 0.3s ease;
}
.float-btn i { font-size: 18px; margin-bottom: 2px; }
.float-btn span { font-size: 10px; transform: scale(0.9); }
.float-btn:hover { opacity: 0.7; color: #fff; }
.float-btn img {
width: 24px;
margin: 0;
}
/* AI button: let the logo image fill the whole button */
.chat-btn {
padding: 0;
overflow: hidden;
}
.chat-btn img {
width: 100%;
height: 100%;
border-radius: 4px;
object-fit: cover;
}
/* Share Panel Styling */
.share-wrapper { position: relative; }
.share-panel {
display: none;
position: absolute;
bottom: 0;
right: 60px;
width: 180px;
background: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
border-radius: 4px;
padding: 15px;
text-align: center;
border: 1px solid #eee;
}
/* Bridge to fix hover gap */
.share-panel::after {
content: '';
position: absolute;
top: 0;
right: -15px;
height: 100%;
width: 20px;
background: transparent;
}
/* Show panel on hover/active */
.share-wrapper:hover .share-panel,
.share-wrapper.active .share-panel {
display: block;
animation: fadeIn 0.3s;
}
.panel-divider {
height: 1px;
background: #f0f0f0;
margin: 10px 0;
}
/* QR Code Canvas */
#share-qrcode canvas {
width: 130px;
height: 130px;
display: block;
margin: 0 auto;
}
/* Action Buttons Row */
.share-actions {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 0;
}
.action-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #1B68F7; /* match logo-ai.png blue */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
transition: background 0.2s;
text-decoration: none; /* Ensure no underline for links */
}
.action-btn:hover { opacity: 0.7; color: #fff; }
/* Scroll Top Wrapper - Hidden by default */
.top-wrapper {
display: none;
}
/* Toast Notification */
#toast-tip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
z-index: 2147483648; /* Higher than container */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1200px) {
.float-btn {
width: 40px;
height: 40px;
}
.float-btn i {
font-size: 16px;
}
.share-panel {
padding: 10px;
}
#float-action-container {
z-index: 9997; /* float under mobile menu */
}
}
/* css/top/product-table.css */
.top-th-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* 容器设置 */
.product-table-container {
overflow-x: visible; /* PC 端禁止横向滚动 */
padding: 20px 0;
max-width: 100%; /* 确保容器不会超出父元素 */
width: 100%;
}
.top-reminder {
color: #767676;
font-size: 16px;
margin: 0 0 20px 0; /* 调整下边距 */
text-align: center;
line-height: 1.5;
}
.top-reminder i {
display: inline-block;
margin-top: 10px;
font-size: 20px; /* 图标大小 */
color: #334466;
animation: bounce 2s infinite; /* 可选：增加一个跳动动画吸引注意 */
}
.product-table-title {
font-size: var(--font-size-p);
color: #fff;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 2em;
background: #334466;
border-radius: 2px;
width: 100%; /* 使用百分比宽度 */
min-width: auto; /* 移除最小宽度限制 */
}
.product-table-wrapper {
width: 100%;
overflow-x: visible;
}
.product-table {
/* overflow-x: visible; */ /* PC 端禁止横向滚动 */
width: 100%;
border-collapse: collapse;
min-width: auto; /* 移除最小宽度限制 */
}
/* 单元格基础样式 */
.product-table td {
padding: 5px 1px;
vertical-align: middle;
text-align: center;
color: var(--body-font-color);
position: relative;
}
/* --------------------------------------
Row Label (Y轴文字)
-------------------------------------- */
.product-table td.row-label {
text-align: right;
padding-right: 1em;
color: var(--body-font-color);
width: 5em;
white-space: nowrap;
/* Y轴实线 */
border-right: 1px solid #999;
}
.row-label a {
color: inherit;
text-decoration: none;
}
.row-label a:hover {
color: blue;
text-decoration: underline;
}
/* 去除底部标签行的第一列边框 */
.product-table tr.row-labels-bottom td {
border-right: none !important;
}
/* --------------------------------------
X 轴逻辑
-------------------------------------- */
.product-table tr.row-x-axis td:not(:first-child):not(.product-cell-arrow-right) {
border-bottom: 1px solid #999;
}
.product-table tr.row-x-axis td:first-child {
border-bottom: none;
}
/* --------------------------------------
箭头绘制 (Y轴 & X轴)
-------------------------------------- */
/* Y轴箭头 (上) */
.product-table td.y-axis-top::after {
content: "";
display: block;
position: absolute;
/* --- 修复点 1: 消除空白 --- */
right: -5px; /* 居中于 1px 边框 */
top: -8px; /* 原来是 -10px，现在改为 -8px (正好是 border-bottom 的高度)，确保紧贴 */
/* 如果还有微小缝隙，可以试着改成 -7px 让它稍微盖住一点线 */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #999;
}
/* X轴箭头 (右) */
.product-table td.product-cell-arrow-right {
width: 1em;
vertical-align: bottom;
padding: 0;
}
.product-table td.product-cell-arrow-right::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid #999;
}
/* --------------------------------------
虚线网格
-------------------------------------- */
/*
规则：除了 Label列、箭头列、底部行、以及X轴实线行 之外
只加 border-bottom (横虚线)，去掉了 border-left
*/
.product-table tr:not(.row-labels-bottom):not(.row-x-axis) td:not(.row-label) {
border-bottom: 1px dashed #e0e0e0;
/* border-left: 1px dashed #e0e0e0; <-- 已删除此行，隐藏竖向虚线 */
}
/* X轴那一行原本有 border-left，现在也删掉，或者显式设为 none */
.product-table tr.row-x-axis td:not(.row-label):not(.product-cell-arrow-right) {
border-left: none;
}
/* --------------------------------------
产品链接块 Chips
-------------------------------------- */
.product-cell-link {
position: relative;
display: block;
width: clamp(6em, calc(6em + 1em * ((100vw - 480px) / 200px)), 14em);
padding: 4px 2px; /* 减小内边距 */
font-size: calc(var(--font-size-table)*0.8);
margin: 4px auto;
color: var(--color-tooltip-text) !important;
text-decoration: none;
text-align: center;
border-radius: 2px;
white-space: nowrap;
transition: opacity 0.2s;
overflow: visible;
z-index: 1;
}
.product-cell-link:hover {
opacity: 0.8;
z-index: 100;
}
.style-mainstream { background-color: #49b170; }
.style-dsp { background-color: #e61fd5; }
.style-pro { background-color: #e6007e; }
.style-hp { background-color: #8c0078; }
.product-model-dot {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
right: -4px; /* 向右偏移，悬挂在边角 */
top: -4px; /* 向上偏移，悬挂在边角 */
z-index: 2; /* 确保在最上层，但要在Tooltip之下 */
box-shadow: 0 0 0 1px #fff; /* 可选：增加白色描边增强对比度 */
pointer-events: none; /* 让鼠标穿透圆点，确保能触发 link 的 hover */
}
.tooltip-popup {
position: absolute;
bottom: 100%; /* 显示在上方 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
width: max-content;
min-width: 120px;
max-width: 220px;
padding: 8px;
background-color: var(--color-tooltip-bg, #333);
color: #fff;
border-radius: 4px;
font-size: calc(var(--font-size-table) * 0.8);
line-height: 1.4;
text-align: left;
/* 层级必须高于 Dot (2) */
z-index: 10;
/* 初始隐藏 */
opacity: 0;
visibility: hidden;
margin-bottom: 8px;
transition: opacity 0.2s, visibility 0.2s, margin-bottom 0.2s;
pointer-events: none; /* 防止遮挡鼠标导致闪烁 */
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* 悬停触发 */
.product-cell-link:hover .tooltip-popup {
opacity: 1;
visibility: visible;
margin-bottom: 12px; /* 上浮动效 */
}
/* Tooltip 下方小三角 */
.tooltip-popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--color-tooltip-bg, #333);
}
/* 列表样式美化 */
.tooltip-popup ul {
margin: 0;
list-style-type: disc;
line-height: 1.2 !important;
}
.tooltip-popup li {
margin-bottom: 2px;
margin-left: 20px !important;
white-space: nowrap; /* 列表项不换行 */
font-size: calc(var(--font-size-table) * 0.8) !important;
}
.dot-low-power {
background-color: #3CB4E6;
}
.dot-riscv {
background-color: #ffd200; /* RISC-V logo 黄色 */
}
.dot-linux {
background-color: #3cff00; /* RISC-V logo 黄色 */
}
/* 底部标签文字 */
.col-label {
padding-top: 0.5em !important;
font-size: var(--font-size-table);
vertical-align: top !important;
line-height: 1.2; /* 调整行高 */
text-align: center; /* 确保文本居中 */
}
.top-product-tips {
list-style: none;
padding: 0;
margin: 30px auto 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 900px;
}
.top-product-tips li {
/* 使用 inline-flex 确保内容紧凑 */
display: inline-flex;
/* 垂直方向几何居中 */
align-items: center;
margin-top: 0;
margin-bottom: 0;
margin-right: 15px;
margin-left: 15px;
font-size: 14px;
/* 关键：将行高设为1，去除文字自带的上下留白干扰 */
line-height: 1;
color: var(--body-font-color, #333);
}
/* 如果您的 HTML 结构里文字在 span 标签内，此条生效；如果是纯文字也兼容 */
.top-product-tips li span {
line-height: normal; /* 恢复文字正常的阅读行高 */
}
.tips-dot {
display: block; /* 在 flex 容器内，block 表现最稳定 */
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0; /* 防止被挤压 */
transform: translateY(6px);
}
/* 清除浮动辅助类 (如果需要兼容旧代码) */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* 简单的跳动动画 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-5px);}
60% {transform: translateY(-3px);}
}
/* 对“支持触摸”的设备隐藏 Tooltip */
@media (hover: none) {
.tooltip-popup {
display: none !important;
}
}
@media (max-width: 1200px) {
/* 移动端隐藏 Tooltip */
.tooltip-popup {
display: none !important; /* 强制不显示 */
/*以此确保即便有 hover 伪类触发，也无法看见 */
opacity: 0 !important;
visibility: hidden !important;
}
/* 同时移除 hover 时的任何层级提升效果，避免点击时出现奇怪的遮挡 */
.product-cell-link:hover {
z-index: 1 !important; /* 恢复默认层级 */
}
}
/* 768px及以上分辨率适合水平显示 */
@media (max-width: 767px) {
.product-table-wrapper {
overflow-x: auto; /* 开启横向滚动 */
-webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
padding-bottom: 5px; /* 预留一点空间给滚动条，避免遮挡边框 */
}
.product-table {
table-layout: auto; /* 移动端允许横向滚动 */
width: max-content;
min-width: 100%;
}
.top-product-tips {
flex-direction: column;
align-items: flex-start;
padding-left: 20px;
}
}
/* css/top/app-block.css */
/* =========================================
Application Block
========================================= */
:root {
--top-app-padding: 20px;
}
@media (max-width: 1200px) {
:root {
--top-app-padding: 10px;
}
}
.top-app-block {
display: flex;
flex-direction: column;
height: 100%; /* 确保在 flex 行中等高 */
background: #ffffff;
border: 1px solid #f3f3f3; /* rgb(243, 243, 243) */
border-radius: 6px;
overflow: hidden; /* 防止图片溢出圆角 */
box-sizing: border-box;
transition: box-shadow 0.3s ease;
}
.top-app-block:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #e0e0e0;
}
.top-app-img-wrap {
width: 100%;
text-align: center;
overflow: hidden;
}
.top-app-img {
width: 100%;
height: auto;
aspect-ratio: 381 / 244;
padding: var(--top-app-padding);
box-sizing: border-box;
display: block;
object-fit: contain;
}
.top-app-title {
margin-top: 10px;
padding: 0 var(--top-app-padding);
color: #333333; /* rgb(51, 51, 51) */
font-size: var(--font-size-h3);
font-weight: 500;
text-align: center;
}
.top-app-detail {
flex: 1; /* 关键：撑开高度，使底部按钮对齐 */
margin-top: 10px;
margin-bottom: 30px;
padding-left: var(--top-app-padding);
padding-right: var(--top-app-padding);
color: #666666;
font-size: var(--font-size-p);
font-weight: 400;
text-align: left;
word-wrap: break-word;
}
.top-app-detail p {
margin: 0;
}
.top-app-link-wrap {
text-align: center;
margin-top: 8px;
margin-bottom: 30px;
height: auto;
}
.top-app-btn {
display: inline-block;
background: #ffffff;
width: 122px;
height: auto;
padding: 4px;
border: 1px solid #666666; /* rgb(102, 102, 102) */
border-radius: 18.5px; /* Pill shape */
color: #666666;
font-size: var(--font-size-p);
font-weight: 400;
text-align: center;
cursor: pointer;
text-decoration: none; /* 防止作为 a 标签时有下划线 */
transition: all 0.2s ease-in-out;
outline: none;
}
/* 按钮悬停态 */
.top-app-btn:hover {
background: var(--top-link-color);
color: #ffffff !important;
border-color: var(--top-link-color);
}
/* =========================================
Responsive Adjustments (Mobile < 768px)
Matches competitor's mobile styles
========================================= */
@media screen and (max-width: 1200px) {
.top-app-link-wrap {
margin-bottom: 20px;
}
.top-app-btn {
width: 110px;
}
}
/* css/top/image-fit.css */
/* Responsive sizing for content ![]()
/