/* CSS 变量定义 */ :root { --bg: #FFFFFF; --text: #0F172A; --muted: #475569; --nav-underline: #F1F100; --subtle: #64748B; --border: #E5E7EB; --soft: #FAF8FC; --primary: #1463FF; --primary-dark: #0B57D0; --shadow: 0 8px 30px rgba(2, 6, 23, .08); --radius: 16px; } a:focus, a:active { outline: none !important; box-shadow: none !important; } @media (min-width: 960px){ /* 让 header 粘顶（不改主布局就用 sticky 最省心） */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 1000; } /* 真正涂背景的那层：做半透明 + 毛玻璃 */ .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background { background-color: rgba(255,255,255,.7) !important; /* 覆盖实心底色 */ -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15); border-bottom: 1px solid var(--border); transition: background .3s ease, box-shadow .3s ease; padding-top:10px !important; padding-bottom:10px !important; } /* 深色模式下的半透明 */ @media (prefers-color-scheme: dark){ .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background { background-color: rgba(255,255,255,.55) !important; border-bottom-color: rgba(0,0,0,.1); } } /* 滚动时加阴影（可选：配合下面的小 JS 给 加类名） */ .header-scrolled .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background { box-shadow: 0 10px 30px rgba(2,6,23,.12); } .nav_area{ padding-right:50px; } .nav_area a{ font-size: 24px; text-decoration: none; } /* Navbar hover effect styles */ .wp-block-navigation-item__content { position: relative; color: var(--text, #0F172A); opacity: 0.8; transition: opacity 0.3s ease; text-decoration: none; } .wp-block-navigation-item__content:hover { opacity: 1; } /* Blue underline animation */ header .wp-block-navigation-item__content::after { content: ''; position: absolute; left: 0; bottom: -14px; height: 4px; width: 0; background: var(--nav-underline); transition: width 0.1s ease; } .wp-block-navigation-item__content:hover::after { width: 100%; } /* Optional: If you want to style the navigation container */ .wp-block-navigation__container { display: flex; gap: 28px; } /* Optional: If you need to adjust spacing for your specific layout */ .wp-block-navigation-item { position: relative; } } /* ===== 仅移动端生效 ===== */ @media (max-width: 960px){ /* mobile header padding */ .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background { padding-top:20px !important; padding-bottom:20px !important; } /* 1) 菜单打开时全屏覆盖 */ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.has-modal-open { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; overflow: auto !important; z-index: 2000 !important; display: block !important; padding: 0; background-color: rgba(255,255,255,.70); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); } @media (prefers-color-scheme: dark){ .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.has-modal-open { background-color: rgba(255,255,255,.55); } } /* 2) 只在打开时让内层“对话框”与关闭区域占满 */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog{ position: relative !important; width: 100% !important; min-height: 100% !important; background: transparent !important; box-shadow: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-close{ position: relative !important; width: 100% !important; height: 100% !important; pointer-events: auto !important; background: transparent !important; } /* 3) 关闭按钮位置（仅打开时） */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close{ position: absolute !important; top: 12px; right: 16px; z-index: 2100 !important; background: transparent; border: 0; padding: 8px; line-height: 1; cursor: pointer; color: inherit; fill: currentColor; } /* 4) 菜单内留白（仅打开时） */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation, .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation{ margin: 0 auto; padding: 72px 24px 24px; } /* 移动端菜单button */ .wp-block-navigation__responsive-container-open > svg{ width: 32px !important; height: 32px !important; display: block; /* 避免基线空隙 */ fill: currentColor; /* 图标跟随按钮文字颜色 */ } .nav_area{ padding-right:20px; } /* nav菜单的文字大小 */ header .wp-block-navigation__container{ margin:0 20px auto auto !important; } header .wp-block-navigation.wp-block-navigation-item{ padding: 10px 0; text-align: right; } header .wp-block-navigation-item__label{ font-size: 48px; font-weight: bold; } } /* 让 header 不裁剪后代（这两条可保留为常态） */ .wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > header.wp-block-template-part > .wp-block-group.has-background { overflow: visible !important; } /* language style */ /* 外层语言切换容器：竖直排列 */ .lang-item { list-style: none; margin: 0; padding: 0; } /* 包含语言切换器的 ul */ .lang-item, .lang-item a { display: block; line-height: 1.3; text-align: center; /* 让国旗在中间 */ } /* 国旗样式：放大、保持比例 */ .lang-item img { width: 24px !important; /* 想要更大可以调，比如 40px */ height: auto !important; /* 按比例缩放 */ border-radius: 0px; /* 给国旗加点圆角，可选 */ display: inline-block; } /* 按页面语言自动显示/隐藏对应块 —— 兼容 en / en-US、zh / zh-CN */ html:lang(en) .i18n-zh, html:lang(en-US) .i18n-zh, html:lang(en) .nav-zh, html:lang(en-US) .nav-zh { display: none !important; } html:lang(zh) .i18n-en, html:lang(zh-CN) .i18n-en, html:lang(zh) .nav-en, html:lang(zh-CN) .nav-en { display: none !important; } /* Hero Image 渐入动画效果 */ @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* 为 heroImage 类添加动画效果 */ .heroImage { animation: fadeInRight 1s ease-out 0.6s both; } /* 可选：为图片添加悬停效果（类似 index.html 中的 device-showcase 效果） */ .heroImage figure { transition: transform 0.5s ease; } .heroImage:hover figure { transform: scale(1.04); } /* 可选：为图片添加阴影和圆角效果 */ .heroImage img { border-radius: 0px; box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08); transition: box-shadow 0.3s ease; } .heroImage:hover img { box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12); } /* 响应式优化：移动端减少动画效果 */ @media (max-width: 960px) { .heroImage { animation: fadeInRight 0.8s ease-out 0.3s both; } .heroImage:hover figure { transform: none; } } /* Specs Table 样式 - 完全按照 index.html */ .specs-table { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 18px !important; box-shadow: var(--shadow) !important; overflow: hidden !important; opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .specs-table.animate-in { opacity: 1; transform: translateY(0); } .specs-table table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; border: none !important; background: transparent !important; } .specs-table th, .specs-table td { text-align: left !important; padding: 12px !important; border-bottom: 1px solid var(--border) !important; vertical-align: middle !important; border-left: none !important; border-right: none !important; border-top: none !important; background: transparent !important; } .specs-table th { color: var(--primary) !important; font-weight: 700 !important; } .specs-table td { color: var(--text) !important; } /* 重要：行悬停效果，与 index.html 完全一致 */ .specs-table tr:hover { background: var(--soft) !important; } .specs-table tr:hover th, .specs-table tr:hover td { background: var(--soft) !important; } .specs-table tr:last-child th, .specs-table tr:last-child td { border-bottom: none !important; } /* 确保表头行不受悬停影响 */ .specs-table thead tr:hover, .specs-table thead tr:hover th { background: transparent !important; } /* 响应式处理 */ @media (max-width: 900px) { .heroImage { animation: fadeInRight 0.8s ease-out 0.3s both; } .heroImage:hover figure { transform: none; } } @media (max-width: 768px) { .specs-table { padding: 12px !important; border-radius: 12px !important; overflow-x: auto !important; } .specs-table th, .specs-table td { padding: 10px 8px !important; font-size: 14px !important; } .specs-table table { min-width: 300px !important; } } /* 图标框样式 - 模仿 index.html 技术规格部分的 contact-method 样式 */ .stk-block-icon-box { display: flex !important; gap: 14px !important; align-items: center !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 14px !important; transition: transform 0.2s ease !important; margin-bottom: 14px !important; } .stk-block-icon-box:hover { transform: translateX(6px) !important; } /* 图标容器样式 */ .stk-block-icon-box .stk-block-icon { width: 46px !important; height: 46px !important; min-width: 46px !important; border-radius: 10px !important; color: var(--primary) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; } /* 内容区域样式 */ .stk-block-icon-box .stk-block-content { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } /* 标题样式 */ .stk-block-icon-box .stk-block-heading__text { color: var(--text) !important; margin: 0 !important; line-height: 1.4 !important; } /* 描述文字样式 */ .stk-block-icon-box .stk-block-text__text { font-size: 14px !important; color: var(--muted) !important; margin: 0 !important; line-height: 1.4 !important; } /* 重置一些可能的默认样式 */ .stk-block-icon-box .stk-row { display: contents !important; gap: 0 !important; margin: 0 !important; } .stk-block-icon-box .stk-inner-blocks { gap: 0 !important; } .stk-block-icon-box .stk-container { padding: 0 !important; max-width: none !important; } /* 确保图标标签容器正确布局 */ .stk-block-icon-box .stk-block-icon-label { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; } /* 响应式处理 */ @media (max-width: 960px) { .stk-block-icon-box { padding: 12px !important; gap: 12px !important; } .stk-block-icon-box .stk-block-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; } .stk-block-icon-box .stk-block-heading__text { font-size: 15px !important; } .stk-block-icon-box .stk-block-text__text { font-size: 13px !important; } }