/* Fonts */ @font-face { font-family: 'AlibabaPuHuiTi'; src: url('../../fonts/AlibabaPuHuiTi-Regular.woff2') format('woff2'), url('../../fonts/AlibabaPuHuiTi-Regular.woff') format('woff'), url('../../fonts/AlibabaPuHuiTi-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; /* 优化字体加载性能 */ } @font-face { font-family: 'AlibabaPuHuiTi'; src: url('../../fonts/AlibabaPuHuiTi-Medium.woff2') format('woff2'), url('../../fonts/AlibabaPuHuiTi-Medium.woff') format('woff'), url('../../fonts/AlibabaPuHuiTi-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'AlibabaPuHuiTi'; src: url('../../fonts/AlibabaPuHuiTi-Bold.woff2') format('woff2'), url('../../fonts/AlibabaPuHuiTi-Bold.woff') format('woff'), url('../../fonts/AlibabaPuHuiTi-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } :root { --accent-color: #A89060; /* 沿用之前选定的暗金色 */ --font-chinese-serif: "AlibabaPuHuiTi", "Noto Serif SC", "Source Han Serif SC", "SimSun", "宋体", serif; --font-chinese-sans: "AlibabaPuHuiTi", "PingFang SC", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Helvetica, sans-serif; } body { font-family: 'Inter', var(--font-chinese-sans); /* 正文：英文用Inter，中文用系统默认无衬线字体 */ background-color: #f8f8f8; /* 使用一个非常浅的灰色作为基础背景 */ } html { scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: 'DM Serif Display', var(--font-chinese-serif); /* 标题：英文用DM Serif Display，中文用系统默认衬线字体 */ } .text-balance { text-wrap: balance; } /* 主视觉区: 视频背景 */ .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* --- Fluid type for hero & materials (narrow screens) --- */ #hero-content h1{ font-size: clamp(28px, 8.5vw, 72px); } #hero-content .hero-subtitle--glow{ font-size: clamp(16px, 4.8vw, 32px); } #hero-services-row{ font-size: clamp(12px, 3.6vw, 18px); letter-spacing: 0.15em; } /* Materials - fluid texts */ .mobile-material-text h3{ font-size: clamp(20px, 6.2vw, 32px); } .mobile-material-text p{ font-size: clamp(14px, 3.8vw, 16px); } .pc-material-text h3{ font-size: clamp(22px, 2.2vw, 32px); } /* Chinese preference modal - fluid type */ #cn-lang-modal h3{ font-size: clamp(18px, 5.2vw, 22px); } #cn-lang-modal p{ font-size: clamp(14px, 3.9vw, 16px); } #cn-lang-modal button{ font-size: clamp(14px, 3.8vw, 16px); } /* —— 微信多图 Ken Burns（修复循环错位）—— */ #wx-hero { --interval: 4s; /* 与 JS 保持一致 */ --slides: 6; /* 与图片数量一致 */ --cycle: calc(var(--slides) * var(--interval)); /* 24s */ } #wx-hero .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.0) translateZ(0); /* 核心：使用整周期动画 + 负延迟，确保每轮都保持错位 */ animation: wx-fade var(--cycle) linear infinite, wx-zoom var(--cycle) ease-in-out infinite; animation-delay: calc(var(--i) * var(--interval) * -1), calc(var(--i) * var(--interval) * -1); animation-fill-mode: both; /* 负延迟首帧不闪烁 */ will-change: opacity, transform; } /* 一个整周期里，每张图的"可见窗口"为前 25%（=6s/24s） 其中前 8.333% 淡入、接着 8.333%~16.667% 全可见、16.667%~25% 淡出 */ @keyframes wx-fade { 0% { opacity: 0; } 8.333% { opacity: 1; } /* ~2s 时完全可见 */ 16.667% { opacity: 1; } /* ~4s 准备淡出 */ 25% { opacity: 0; } /* ~6s 不可见，等待下个窗 */ 100% { opacity: 0; } } /* 轻微缩放+平移，只在可见窗口内推进到目标 */ @keyframes wx-zoom { 0% { transform: scale(1.0) translateZ(0); } 25% { transform: scale(1.08) translate3d(var(--tx,1%), var(--ty,1%), 0) translateZ(0); } 100% { transform: scale(1.08) translate3d(var(--tx,1%), var(--ty,1%), 0) translateZ(0); } } /* 低动效偏好：只显示第一张 */ @media (prefers-reduced-motion: reduce){ #wx-hero .hero-slide{ animation:none; opacity:0 } #wx-hero .hero-slide:first-child{ opacity:1 } } /* 库存区: 隐藏滚动条 */ .scroll-container { -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .scroll-container::-webkit-scrollbar { display: none; } /* Hero 品种名：柔和金色发光 + 轻微呼吸 */ .hero-subtitle--glow{ color: var(--accent-color); /* 多层 text-shadow：近处清晰、远处扩散 */ text-shadow: 0 0 .5px rgba(168,144,96,.95), 0 0 8px rgba(168,144,96,.55), 0 0 20px rgba(168,144,96,.38); -webkit-text-stroke: .35px rgba(0,0,0,.22); /* 细描边，压住亮底图的边缘 */ animation: heroGlow 3.6s ease-in-out infinite; will-change: text-shadow; } @keyframes heroGlow{ 0%,100%{ text-shadow: 0 0 .5px rgba(168,144,96,.95), 0 0 6px rgba(168,144,96,.45), 0 0 16px rgba(168,144,96,.28); } 50%{ text-shadow: 0 0 1px rgba(168,144,96,1), 0 0 10px rgba(168,144,96,.65), 0 0 28px rgba(168,144,96,.44); } } /* 低动效偏好：禁用呼吸动画，保留发光 */ @media (prefers-reduced-motion: reduce){ .hero-subtitle--glow{ animation: none; } } /* --- WeChat 专用：禁用文字呼吸动画，保留静态光晕 --- */ .ua-wx .hero-subtitle--glow{ animation: none !important; } /* 让文字容器独立合成，避免受底层影响 */ #hero-content{ position: relative; z-index: 20; transform: translateZ(0); backface-visibility: hidden; contain: paint; /* 限定绘制边界，减少重绘 */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 遮罩也晋升一层，避免与文字同层反复合成导致闪烁 */ #hero-overlay{ transform: translateZ(0); backface-visibility: hidden; } /* 加工区: 视差滚动效果 */ .parallax-bg { background-attachment: fixed; } /* iOS Safari 兼容性优化 */ .ua-ios-safari .parallax-bg { /* iOS Safari不支持background-attachment: fixed，使用JavaScript实现 */ background-attachment: scroll; } /* iOS设备About轮播图优化 */ .ua-ios #about-carousel { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* iOS Safari PC端轮播图优化 */ .ua-ios-safari #pc-image-slider .hero-slide { /* 强制GPU加速，确保过渡效果正常 */ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* 导航栏透明渐变效果 */ #main-header { transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; background-color: transparent; } /* PC端智能导航条隐藏/显示动画 */ @media (min-width: 1024px) { #main-header { /* 不改变原本的 position（fixed），只加动画 */ z-index: 100; transition: transform 240ms ease, box-shadow 200ms ease, background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; will-change: transform; } /* 下滑时隐藏（上移整个导航） */ #main-header.is-hidden { transform: translateY(-100%); box-shadow: none; } /* 上滑时出现，并加一点柔和阴影，避免生硬 */ #main-header.is-shown { transform: translateY(0); box-shadow: 0 6px 20px rgba(0,0,0,0.06); } } @media (prefers-reduced-motion: reduce) { #main-header { transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; } } @media (min-width:1024px){ .pc-nav-link{ position:relative; padding-bottom:6px; transition: transform .18s ease; } .pc-nav-link::after{ content:""; position:absolute; left:50%; bottom:0; height:2px; width:0; background: var(--accent-color, #d4af37); border-radius:999px; transform: translateX(-50%); transition: width .22s ease; } .pc-nav-link:hover{ transform: translateY(-2px); } .pc-nav-link:hover::after{ width: 82%; } /* 想更细腻可改为 70%~90% */ } #main-header nav a, #main-header button svg { transition: color 0.3s ease-in-out; } #main-header.scrolled { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } #main-header.scrolled nav a { color: #374151; } #main-header.scrolled nav a:hover { color: #000000; } #main-header.scrolled button svg { stroke: #374151; } #main-header.scrolled #language-toggle { color: #374151; } #main-header.scrolled #language-toggle:hover { color: #000000; } /* PC端语言选择按钮方框样式 */ #language-toggle { padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; background: transparent; transition: all 0.2s ease; } #language-toggle:hover { border-color: rgba(255, 255, 255, 0.6); transform: translateY(-1px); } /* 滚动状态下的语言按钮样式 */ #main-header.scrolled #language-toggle { border-color: rgba(55, 65, 81, 0.3); background: transparent; } #main-header.scrolled #language-toggle:hover { border-color: rgba(55, 65, 81, 0.6); } /* 手机端LOGO透明渐变效果 */ #header-logo { transition: opacity 0.3s ease-in-out; } /* 手机端：LOGO随导航栏背景同步渐变 */ @media (max-width: 768px) { #header-logo { opacity: 0; } #main-header.scrolled #header-logo { opacity: 1; } } /* 库存轮播增强样式 */ #stock-carousel-wrapper { position: relative; } #discover-button { /* 应用动画：名称、时长、无限循环、缓动函数 */ animation: pulse-glow 3s infinite ease-in-out; } /* 定义动画的关键帧 */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.2), 0 0 2px rgba(255, 255, 255, 0.1) inset; } 50% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.2) inset; } } /* 渐变遮罩效果 - 方案A：经典半透明黑色 */ #stock-carousel-wrapper::before { content: ''; position: absolute; top: 0; left: 24px; /* 对应wrapper的px-6 (24px) */ width: var(--mask-width, 120px); height: 100%; background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 1; } #stock-carousel-wrapper::after { content: ''; position: absolute; top: 0; right: 24px; /* 对应wrapper的px-6 (24px) */ width: var(--mask-width, 120px); height: 100%; background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 1; } /* 响应式：移动端隐藏渐变遮罩 */ @media (max-width: 767px) { #stock-carousel-wrapper::before, #stock-carousel-wrapper::after { display: none; } } /* Scroll Snap 样式 */ #stock-carousel { scroll-behavior: smooth; scroll-snap-type: x mandatory; } #stock-carousel img { scroll-snap-align: center; } /* 导航箭头样式增强 */ .nav-arrow { transition: all 0.3s ease; } .nav-arrow:hover:not(:disabled) { transform: scale(1.1); } .nav-arrow:disabled { cursor: not-allowed; } /* 进度条样式 */ .carousel-progress-bar { opacity: 0.8; } #stock-carousel-wrapper:hover .carousel-progress-bar { opacity: 1; } /* About区域响应式图片布局样式 */ .aspect-4-3 { aspect-ratio: 4 / 3; } /* 主图卡片感（可保持你原来的圆角和阴影） */ .magazine-card { border-radius: 0.75rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); } /* PC端轮播图缩略图样式 */ #pc-image-slider [data-thumbnail-id] { opacity: 0.6; transition: all 0.3s ease-in-out; border: 2px solid transparent; } /* PC端轮播图当前激活的缩略图样式 */ #pc-image-slider .thumbnail-active { opacity: 1; border-color: var(--accent-color); /* 使用您网站的主题色 */ transform: scale(1.05); } @media (min-width: 1024px) { /* 桌面端：图片区域破界效果 */ #about { overflow: visible; } /* 图片区域绝对定位，突破容器限制 */ .pc-image-container { position: absolute; left: calc(50% - 50vw); top: 0; width: 55vw; height: 100%; z-index: 10; } /* 文字区域上层显示 */ .pc-text-container { position: relative; z-index: 20; margin-left: auto; width: 47vw; } /* 毛玻璃效果文字卡片 */ .text-card { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); padding: 2rem; border-radius: 0.75rem; box-shadow: 0 20px 40px -12px rgba(0,0,0,.15), 0 8px 32px -8px rgba(0,0,0,.1); } /* 极简导航点样式 */ #pc-image-slider .active { background-color: var(--accent-color); transform: scale(1.2); } /* 图片交叉淡入淡出的过渡效果 */ #pc-image-slider .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; /* 关键：定义2秒的过渡时间 */ transition: opacity 2s ease-in-out; will-change: opacity; } /* JS将通过添加/移除这个class来触发过渡 */ #pc-image-slider .is-visible { opacity: 1; } /* 低动效偏好：只显示第一张 */ @media (prefers-reduced-motion: reduce) { #pc-image-slider .hero-slide { animation: none; opacity: 0; } #pc-image-slider .hero-slide:first-child { opacity: 1; } } } /* 滚动指示器 (小圆点) 的激活状态 */ .indicator-dot.active { background-color: var(--accent-color); /* 使用您网站的暗金色主题色 */ transform: scale(1.2); } /* Stock carousel 滚动指示器样式 */ #stock-indicators .indicator-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #d1d5db; transition: all 0.3s ease; } #stock-indicators .indicator-dot.active { background-color: var(--accent-color); transform: scale(1.2); } /* ↓↓↓ 添加这段CSS到