/** Shopify CDN: Minification failed Line 52:2 All "@import" rules must come first **/ /* ========================================= 1. 全局变量配置 (在这里修改主题色) ========================================= */ /* 移除 Safari/Chrome 的输入框右侧默认箭头 */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* 移除 Firefox 的输入框右侧默认箭头 */ input[type="number"] { -moz-appearance: textfield; } :root { --color-primary: #2b2b2b; /* 主文字色 (深灰) */ --color-accent: #b89b6c; /* 强调色 (金色) */ --color-accent-hover: #5a4a42; /* 浅灰背景 */ --bg-cream: #f5e6cc; /* 奶油色背景 */ --font-heading: 'Playfair Display', serif; --font-body: 'Lato', sans-serif; --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* 丝滑动画曲线 */ /* 核心背景色：统一的极淡暖灰，消除割裂感 */ --page-bg-color: #f9f9f7; /* 卡片背景色：纯白，突出内容 */ --card-bg-color: #ffffff; /* 统一的金色强调色 */ --accent-gold: #b89b6c; /* 统一的柔和阴影：不再是死黑，而是带有扩散感的阴影 */ --soft-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.08); --hover-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* 引入字体 */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap'); /* 基础排版 */ .font-serif-title { font-family: 'Playfair Display', serif; } .font-serif-body { font-family: 'Lora', serif; } /* ========================================= 2. 基础排版与重置 ========================================= */ body { font-family: var(--font-body); color: var(--color-primary); background-color: #ffffff; -webkit-font-smoothing: antialiased; /* 让字体在Mac上更清晰 */ } h1, h2, h3, h4 { font-family: var(--font-heading); } /* 用于文字淡入效果的初始状态 */ .reveal-text { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal-text.visible { opacity: 1; transform: translateY(0); } /* ========================================= 3. 导航栏 (Header) ========================================= */ header { transition: background-color 0.3s ease, padding 0.3s ease; } header h1 { font-family: var(--font-body); } /* 当页面滚动后，给导航栏加白色背景 */ header.scrolled { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); /* 毛玻璃效果 */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); padding-top: 1.5rem; padding-bottom: 1.5rem; } /* 滚动后文字变色 */ header.scrolled h1, header.scrolled nav a, header.scrolled svg { color: var(--color-primary); } header.scrolled .hamburger span { background-color: var(--color-primary); } /* ----------------------------------------- 3. 导航栏 (Header) - 图标样式 (新增) ----------------------------------------- */ /* 确保所有图标链接和汉堡条在非滚动和滚动状态下颜色一致 */ .header-icons .icon-link { /* 继承父级 currentColor */ color: currentColor; position: relative; /* 用于购物车数量 */ } .header-icons .icon-link svg { /* 继承颜色，消除 JS 带来的 inline style 干扰 */ stroke: currentColor; } .cart-count { background-color: var(--color-primary, #2b2b2b); /* 假设主色调是 #2b2b2b */ color: #fff; } /* 移动端汉堡菜单按钮样式 */ .hamburger { display: none; /* 桌面端隐藏，仅移动端显示 */ cursor: pointer; flex-direction: column; gap: 6px; z-index: 50; } .hamburger span { width: 25px; height: 2px; background-color: #fff; transition: all 0.3s; } /* ========================================= Mobile Menu (Top-Down Dropdown Style) ========================================= */ .mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: auto; /* 高度自适应，不再占满全屏 */ /* 关键：给顶部留出足够的空间，避免内容被 Header 遮挡 Header 最大高度大约在 100px 左右，这里给 110px 或 7rem */ padding: 7rem 2rem 3rem 2rem; background-color: #ffffff; display: flex; flex-direction: column; justify-content: center; /* 内容居中 */ align-items: center; /* 链接居中对齐 */ gap: 2rem; /* 默认向上隐藏 */ transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 使用更自然的 easing */ /* Header 是 z-50，这里设为 40，这样菜单会从 Header 后面滑出来 */ z-index: 40; /* 底部加阴影，增加层次感 */ box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); } .mobile-menu.open { transform: translateY(0); /* 滑下 */ } /* ========================================= 4. Hero 区域 (视频背景) ========================================= */ .hero-section { position: relative; width: 100%; /* [新增] 降级方案：针对不支持 dvh 的旧浏览器（如 iOS 14.2） */ height: 100vh; /* 使用 dvh (dynamic viewport height) 解决移动端地址栏跳动问题 */ height: 100dvh; overflow: hidden; } .bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65); /* 稍微调暗，保证白字清晰 */ z-index: -1; } /* ========================================= 5. 按钮样式 (统一且优雅) ========================================= */ .btn-custom { position: relative; display: inline-block; padding: 18px 36px; font-size: 0.75rem; /* 12px */ letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #fff; border: 1px solid #fff; background: transparent; overflow: hidden; transition: color 0.4s ease, border-color 0.4s ease; z-index: 1; } /* 按钮填充层动画 */ .btn-custom::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform: scaleY(0); /* 默认垂直压缩 */ transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; } /* Hover 状态 */ @media (hover: hover) { .btn-custom:hover { color: var(--color-primary); border-color: #fff; } .btn-custom:hover::before { transform: scaleY(1); transform-origin: top; /* 从下往上长，消失时从上往下缩 */ } } /* 移动端点击状态 */ .btn-custom:active { background-color: rgba(255, 255, 255, 0.2); } /* ========================================= 6. 卡片 3D 效果 (仅桌面端) ========================================= */ .card-perspective { perspective: 1000px; } .card-inner { transform-style: preserve-3d; transform: rotateY(0deg) rotateX(0deg) scale(1); will-change: transform; /* 性能优化提示 */ } /* 统一图片和视频比例 */ .media-wrapper { position: relative; width: 100%; aspect-ratio: 4/5; /* 统一竖版比例 */ overflow: hidden; background: #eee; } .media-wrapper img, .media-wrapper video { width: 100%; height: 100%; object-fit: cover; } /* ========================================= 7. 响应式调整 (Mobile Tweaks) ========================================= */ @media (max-width: 768px) { .hamburger { display: flex; } /* 显示汉堡菜单 */ .desktop-nav { display: none; } /* 隐藏桌面菜单 */ /* 移动端标题尺寸调整 */ .hero-title { font-size: 2.5rem !important; } /* 移动端不需要 3D 倾斜，简单的按压反馈即可 */ .card-perspective { perspective: none; } .card-inner:active { transform: scale(0.98) !important; } .card-inner { transform: scale(1); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; } /* 简单的淡入动画类 (仅视觉效果，不影响逻辑) */ .fade-in-ready { opacity: 0; transition: opacity 0.8s ease-out; } .fade-in-active { opacity: 1; } /*隐藏滚动条 (保持不变) */ #recommendation-track::-webkit-scrollbar { display: none; } #recommendation-track { -ms-overflow-style: none; scrollbar-width: none; } /* --- 🔴 插入到