/* Theme Name: Fanguangqiyao Theme URI: https://fanguangqiyao.com Author: Fanguangqiyao Team Description: 梵光七曜天然水晶珠宝品牌官网主题 - v2.5.52 修改about页面文案（品牌承诺替换为抖音店铺保障、删除品牌定位板块、删除品牌信息条目）。 Version: 2.5.52 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: custom-header, custom-background, custom-menu, featured-images, translation-ready, responsive-layout, e-commerce Text Domain: fanguangqiyao */ /* ===== Base Styles (from index.html) ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background: #F3EAF7; color: #333; line-height: 1.6; } /* 通用样式 */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; margin: 0 auto; } .section { padding: 80px 0; } .section-title { font-size: 32px; text-align: center; margin-bottom: 25px; color: #4a1a6b; font-weight: 500; letter-spacing: 4px; } .section-subtitle { text-align: center; color: #999; margin-top: 6px; margin-bottom: 25px; font-size: 14px; letter-spacing: 2px; } /* 导航 */ .header { background: linear-gradient(180deg, rgba(45,27,78,0.92) 0%, rgba(74,26,107,0.85) 60%, rgba(74,26,107,0) 100%); position: fixed; width: 100%; top: 0; z-index: 1000; transition: background 0.3s ease, box-shadow 0.3s ease; } .header.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 2px 15px rgba(0,0,0,0.08); backdrop-filter: blur(10px); } .nav { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { font-size: 0; /* 隐藏文字，仅展示图片LOGO */ text-decoration: none; } .logo-img { height: 53px; width: auto; border-radius: 8px; transition: height 0.3s ease; } .header.scrolled .logo-img { height: 43px; } @media (max-width: 768px) { .logo-img { height: 48px !important; } .header.scrolled .logo-img { height: 44px !important; } } .footer-logo-img { display: block; width: 100%; max-width: 180px; height: auto; max-height: 70px; object-fit: contain; border-radius: 8px; } .nav-menu { display: flex; gap: 28px; list-style: none; } .nav-menu a { text-decoration: none; color: rgba(255,255,255,0.92); font-size: 14px; transition: color 0.3s; position: relative; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } .header.scrolled .nav-menu a { color: #555; text-shadow: none; } .nav-menu a:hover { color: #4a1a6b; } .nav-menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: #c9a96e; transition: width 0.3s; } .nav-menu a:hover::after { width: 100%; } .nav-cta { background: rgba(201,169,110,0.9); color: #fff; padding: 10px 25px; border-radius: 25px; text-decoration: none; font-size: 14px; transition: all 0.3s; } .header.scrolled .nav-cta { background: #7732B4; } .nav-cta:hover { background: #5a2080; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(74,26,107,0.3); } .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: #fff; } .header.scrolled .mobile-menu-btn { color: #4a1a6b; } /* Hero Banner */ .hero { height: 100vh; min-height: 700px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, transparent 0%, rgba(6,2,16,0.3) 40%, rgba(6,2,16,0.75) 75%, #060210 100%); z-index: 2; pointer-events: none; } @media (max-width: 768px) { .hero { height: 90vh; min-height: 500px; } } .hero-slides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out; } .hero-slide.active { opacity: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(45,27,78,0.75) 0%, rgba(74,26,107,0.55) 50%, rgba(26,26,46,0.75) 100%); } .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 0 20px; width: 100%; margin: 0 auto; } .hero-slogan { font-size: 48px; font-weight: 300; letter-spacing: 8px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .hero-slogan span { color: #c9a96e; font-weight: 500; } .hero-subtitle { font-size: 18px; letter-spacing: 4px; margin-bottom: 24px; color: rgba(255,255,255,0.8); } .hero-badges { display: flex; gap: 30px; justify-content: center; margin-bottom: 24px; } .hero-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.9); } .hero-badge::before { content: '◆'; color: #c9a96e; font-size: 10px; } .hero-cta-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .hero-cta-primary { background: #c9a96e; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-size: 16px; letter-spacing: 2px; transition: all 0.3s; display: inline-block; } .hero-cta-primary:hover { background: #d4b87a; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(201,169,110,0.4); } .hero-cta-secondary { border: 1px solid rgba(255,255,255,0.5); color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-size: 16px; letter-spacing: 2px; transition: all 0.3s; display: inline-block; } .hero-cta-secondary:hover { background: rgba(255,255,255,0.1); border-color: #c9a96e; } /* Banner indicators */ .hero-indicators { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 12px; } .hero-indicator { width: 30px; height: 3px; background: rgba(255,255,255,0.4); border: none; cursor: pointer; transition: all 0.3s; border-radius: 2px; } .hero-indicator.active { background: #c9a96e; width: 50px; } /* Banner arrows */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; backdrop-filter: blur(4px); } .hero-arrow:hover { background: rgba(201,169,110,0.4); border-color: #c9a96e; } .hero-arrow-left { left: 30px; } .hero-arrow-right { right: 30px; } @media (max-width: 768px) { .hero-arrow { display: none; } .hero-slogan { font-size: 22px; letter-spacing: 2px; line-height: 1.6; word-break: keep-all; } .hero-subtitle { font-size: 13px; letter-spacing: 2px; } .hero-badges { gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 15px; } .hero-badge { font-size: 11px; } .hero-cta-group { gap: 12px; } .hero-cta-primary, .hero-cta-secondary { padding: 12px 24px; font-size: 13px; letter-spacing: 1px; } .hero-indicators { bottom: 20px; } } /* 二维码区域 */ .qr-section { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 100%); padding: 40px 0; } @media (max-width: 768px) { .qr-section { padding: 25px 0; } .qr-box { width: 120px; height: 120px; padding: 0; } .qr-box img { width: 112px; height: 112px; } .qr-info h3 { font-size: 16px; } .qr-info p { font-size: 13px; } } .qr-content { display: flex; align-items: center; justify-content: center; gap: 60px; flex-wrap: wrap; } .qr-item { text-align: center; } .qr-box { width: 160px; height: 160px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 2px solid #DDD0E5; overflow: hidden; padding: 0; } .qr-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; } /* 美团二维码原始图案较小，统一放大以匹配视觉 */ .qr-item:nth-child(3) .qr-box img { transform: scale(1.18); } @media (max-width: 768px) { .qr-item:nth-child(3) .qr-box img { transform: scale(1.18); } } .qr-label { font-size: 14px; color: #666; letter-spacing: 2px; } .qr-divider { width: 1px; height: 120px; background: #d4c9bc; } .qr-info { max-width: 300px; } .qr-info h3 { font-size: 20px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .qr-info p { font-size: 14px; color: #888; line-height: 1.8; } #qr-section { scroll-margin-top: 90px; } @media (max-width: 768px) { #qr-section { scroll-margin-top: 70px; } } #products { scroll-margin-top: 90px; } @media (max-width: 768px) { #products { scroll-margin-top: 70px; } } /* 品牌理念 */ .philosophy { background: radial-gradient(circle at 30% 20%, rgba(201,169,110,0.12) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(119,50,180,0.2) 0%, transparent 50%), linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3a1f5a 100%); padding: 80px 0; position: relative; overflow: hidden; color: #fff; } .philosophy::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.03) 0%, transparent 60%); pointer-events: none; } .philosophy .section-title { color: #fff; } .philosophy .section-subtitle { color: rgba(255,255,255,0.5); } .philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .philosophy-card { height: 380px; border-radius: 16px; overflow: hidden; position: relative; transition: all 0.4s; } .philosophy-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .philosophy-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s; } .philosophy-card:hover .philosophy-card-bg { transform: scale(1.08); } .philosophy-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(26,26,46,0.92) 0%, rgba(26,26,46,0.4) 60%, rgba(26,26,46,0.1) 100%); } .philosophy-card-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 35px 30px; z-index: 1; } .philosophy-card-line { width: 40px; height: 2px; background: #c9a96e; margin-bottom: 15px; } .philosophy-title { font-size: 22px; color: #fff; margin-bottom: 12px; font-weight: 500; } .philosophy-desc { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.8; } .philosophy-quote { text-align: center; margin-top: 60px; margin-bottom: 40px; font-size: 20px; color: #c9a96e; font-style: italic; letter-spacing: 3px; line-height: 1.8; } @media (max-width: 768px) { .philosophy-quote { margin-top: 40px; margin-bottom: 25px; font-size: 16px; letter-spacing: 2px; padding: 0 20px; width: 100%; margin: 0 auto; } } /* 明星产品 - 横向滑动卡片 */ .products { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 100%); } .product-carousel { position: relative; } .product-carousel-inner { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 0 20px; } .product-carousel-inner::-webkit-scrollbar { display: none; } .product-carousel-inner .product-card { flex: 0 0 calc((100% - 90px) / 4); scroll-snap-align: start; } .product-carousel-inner .product-img { height: 240px; } .product-carousel-inner .product-info { padding: 20px; } .product-carousel-inner .product-name { font-size: 17px; } .product-carousel-inner .product-desc { font-size: 12px; -webkit-line-clamp: 2; } .product-carousel { position: relative; padding: 0 70px; } .carousel-nav { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .carousel-btn { width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(201,169,110,0.6); background: rgba(255,255,255,0.95); color: #c9a96e; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; pointer-events: auto; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .carousel-btn:hover { background: #c9a96e; color: #fff; border-color: #c9a96e; transform: scale(1.1); box-shadow: 0 6px 20px rgba(201,169,110,0.3); } @media (max-width: 768px) { .product-carousel-inner { gap: 20px; padding: 5px 0 15px; } .product-carousel-inner .product-card { flex: 0 0 85%; } .product-carousel-inner .product-img { height: 220px; } .product-carousel-inner .product-info { padding: 18px; } .product-carousel-inner .product-name { font-size: 16px; } .product-carousel-inner .product-desc { font-size: 13px; -webkit-line-clamp: 2; } .carousel-btn { width: 36px; height: 36px; font-size: 14px; } .product-carousel { padding: 0 30px; } } .product-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.4s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); cursor: pointer; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(74,26,107,0.18); } .product-card:hover .product-img { transform: scale(1.05); } .product-card:hover .product-img::after { opacity: 1; } .product-img { height: 280px; background-color: #EDE4F0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform 0.5s ease; } .product-img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(201,169,110,0.15) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .product-tag { position: absolute; top: 15px; left: 15px; background: #c9a96e; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; } .product-info { padding: 25px; } .product-name { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: 500; } .product-attr { display: flex; gap: 10px; margin-bottom: 12px; } .product-attr span { font-size: 12px; color: #c9a96e; border: 1px solid #e8d5a8; padding: 3px 10px; border-radius: 12px; } .product-desc { font-size: 13px; color: #888; margin-bottom: 15px; line-height: 1.6; } .product-link { color: #4a1a6b; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; transition: all 0.3s; padding: 6px 16px; border-radius: 20px; border: 1px solid transparent; } .product-link:hover { gap: 10px; color: #c9a96e; border-color: #c9a96e; background: rgba(201,169,110,0.08); } /* 信任背书 */ .trust { background: linear-gradient(180deg, #F3EAF7 0%, #EDE4F0 50%, #F3EAF7 100%); position: relative; overflow: hidden; } .trust::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at center, rgba(201,169,110,0.04) 0%, transparent 60%); } .trust .container { position: relative; z-index: 1; } .trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; text-align: center; } .trust-item { padding: 30px 20px; border-radius: 12px; transition: all 0.3s; background: rgba(255,255,255,0.5); border: 1px solid rgba(201,169,110,0.1); } @media (max-width: 768px) { .trust-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .trust-item { width: 30%; min-width: 100px; padding: 20px 10px; } .trust-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: 10px; } .trust-title { font-size: 14px; margin-bottom: 6px; } .trust-desc { font-size: 12px; line-height: 1.4; } .trust.section { padding: 40px 0; } .section-title { font-size: 22px; } } .trust-item:hover { background: rgba(255,255,255,0.9); transform: translateY(-5px); border-color: rgba(201,169,110,0.25); box-shadow: 0 10px 30px rgba(74,26,107,0.08); } .trust-icon { width: 60px; height: 60px; background: #EDE4F0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 24px; color: #4a1a6b; } .trust-title { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: 500; } .trust-desc { font-size: 13px; color: #888; } .trust .section-title { color: #4a1a6b; } .trust .section-subtitle { color: #999; } /* 品牌动态 */ .news { background: linear-gradient(180deg, #F3EAF7 0%, #F8F3FB 100%); } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .news-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .news-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .news-img { height: 200px; background: #E8DCEF; display: flex; align-items: center; justify-content: center; } .news-img::after { content: '[文章缩略图占位]'; color: #bbb; font-size: 14px; } .news-img[style*="background-image"]::after { display: none; } .news-content { padding: 25px; } .news-date { font-size: 12px; color: #c9a96e; margin-bottom: 10px; letter-spacing: 1px; } .news-title { font-size: 17px; color: #333; margin-bottom: 12px; line-height: 1.5; font-weight: 500; } .news-excerpt { font-size: 14px; color: #888; line-height: 1.7; } /* CTA区 */ .cta-section { padding: 80px 0; color: #fff; text-align: center; position: relative; overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #1a1228; } .cta-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%); animation: pulse 4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } .cta-content { position: relative; z-index: 1; } .cta-title { font-size: 28px; margin-bottom: 15px; letter-spacing: 4px; } .cta-subtitle { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 24px; } .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .cta-btn { padding: 15px 40px; border-radius: 30px; text-decoration: none; font-size: 16px; letter-spacing: 2px; transition: all 0.3s; display: inline-block; } .cta-btn-primary { background: #c9a96e; color: #fff; } .cta-btn-primary:hover { background: #d4b87a; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(201,169,110,0.4); } .cta-btn-secondary { border: 1px solid rgba(255,255,255,0.5); color: #fff; } .cta-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #c9a96e; } /* Footer */ .footer { background: #3C2854; color: rgba(255,255,255,0.7); padding: 60px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 24px; } .footer-brand .footer-logo { font-size: 24px; color: #c9a96e; margin-bottom: 15px; font-weight: 500; } .footer-brand p { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); } .footer-title { font-size: 15px; color: #fff; margin-bottom: 12px; font-weight: 500; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 6px; } .footer-links a { color: rgba(255,255,255,0.5); text-decoration: none; font-size: 14px; transition: color 0.3s; } .footer-links a:hover { color: #c9a96e; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 12px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.3); } /* 响应式 */ @media (max-width: 1024px) { .philosophy-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .hero-slogan { font-size: 32px; } .philosophy-grid { grid-template-columns: 1fr; } .news-grid { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: repeat(2, 1fr); } .qr-content { flex-direction: column; gap: 30px; } .qr-divider { display: none; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } } @media (max-width: 480px) { .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .trust-item { padding: 20px 12px; } .trust-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 10px; } .trust-title { font-size: 14px; } .trust-desc { font-size: 12px; } .hero-badges { flex-direction: column; gap: 15px; } } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 8px; padding: 10px 0; min-width: 160px; z-index: 100; list-style: none; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); } .dropdown-menu a { display: block; padding: 10px 20px; font-size: 14px; color: #555; text-decoration: none; white-space: nowrap; } .dropdown-menu a:hover { background: #f8f5f0; color: #4a1a6b; } .dropdown-arrow { font-size: 10px; margin-left: 3px; opacity: 0.7; } .footer-brand-btm { margin-top: 10px; } .footer-brand-btm p { font-size: 13px !important; color: rgba(255,255,255,0.4) !important; line-height: 1.5; margin-bottom: 2px; } .footer-bottom p { margin-bottom: 6px; } /* Mobile Menu */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 998; } .mobile-menu-overlay.active { display: block; } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; } .mobile-nav.active { display: block; transform: translateX(0); } .mobile-nav a { display: block; padding: 15px 0; border-bottom: 1px solid #E8DCEF; color: #333; text-decoration: none; font-size: 16px; } .mobile-nav a:hover { color: #4a1a6b; } .mobile-nav li:empty { display: none; } .mobile-nav li > a:empty { display: none; } .mobile-nav .dropdown-menu { display: block !important; position: static; box-shadow: none; padding: 0 0 0 15px; background: transparent; } .mobile-nav .dropdown-menu a { font-size: 14px; padding: 10px 0; border: none; color: #666; } .mobile-close { position: absolute; top: 20px; right: 20px; font-size: 28px; cursor: pointer; color: #333; } @media (max-width: 768px) { .mobile-menu-btn { display: block; font-size: 24px; cursor: pointer; color: #fff; z-index: 1001; } .header.scrolled .mobile-menu-btn { color: #4a1a6b; } } /* ===== SVG Icon System (replaces emoji) ===== */ .ico { display: inline-block; width: 1em; height: 1em; vertical-align: middle; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; flex-shrink: 0; } .ico-eye { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E'); } .ico-chat { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E'); } .ico-fire { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z%22/%3E%3C/svg%3E'); } .ico-tag { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.59%2013.41l-7.17%207.17a2%202%200%200%201-2.83%200L2%2012V2h10l8.59%208.59a2%202%200%200%201%200%202.82z%22/%3E%3Cline%20x1%3D%227%22%20y1%3D%227%22%20x2%3D%227.01%22%20y2%3D%227%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M20.59%2013.41l-7.17%207.17a2%202%200%200%201-2.83%200L2%2012V2h10l8.59%208.59a2%202%200%200%201%200%202.82z%22/%3E%3Cline%20x1%3D%227%22%20y1%3D%227%22%20x2%3D%227.01%22%20y2%3D%227%22/%3E%3C/svg%3E'); } .ico-pin { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22/%3E%3C/svg%3E'); } .ico-phone { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E'); } .ico-mail { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22/%3E%3Cpolyline%20points%3D%2222%2C6%2012%2C13%202%2C6%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22/%3E%3Cpolyline%20points%3D%2222%2C6%2012%2C13%202%2C6%22/%3E%3C/svg%3E'); } .ico-clock { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22/%3E%3C/svg%3E'); } .ico-clipboard { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22/%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%20ry%3D%221%22/%3E%3C/svg%3E'); } .ico-gem { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%203h12l4%206-10%2013L2%209z%22/%3E%3Cpath%20d%3D%22M11%203%208%209l4%2013%204-13-3-6%22/%3E%3Cpath%20d%3D%22M2%209h20%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%203h12l4%206-10%2013L2%209z%22/%3E%3Cpath%20d%3D%22M11%203%208%209l4%2013%204-13-3-6%22/%3E%3Cpath%20d%3D%22M2%209h20%22/%3E%3C/svg%3E'); } .ico-crystal { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202L6%209l6%2013%206-13z%22/%3E%3Cpath%20d%3D%22M6%209h12%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202L6%209l6%2013%206-13z%22/%3E%3Cpath%20d%3D%22M6%209h12%22/%3E%3C/svg%3E'); } .ico-sparkle { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202l1.5%206.5L20%2010l-6.5%201.5L12%2018l-1.5-6.5L4%2010l6.5-1.5z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202l1.5%206.5L20%2010l-6.5%201.5L12%2018l-1.5-6.5L4%2010l6.5-1.5z%22/%3E%3C/svg%3E'); } .ico-palette { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.83%200%201.5-.67%201.5-1.5%200-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99%200-.83.67-1.5%201.5-1.5H16c3.31%200%206-2.69%206-6%200-5.5-4.5-9-10-9z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%221.5%22/%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.83%200%201.5-.67%201.5-1.5%200-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99%200-.83.67-1.5%201.5-1.5H16c3.31%200%206-2.69%206-6%200-5.5-4.5-9-10-9z%22/%3E%3C/svg%3E'); } .ico-leaf { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010z%22/%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%209.8%206.1C15.5%205%2017%204.48%2019%202c1%202%202%204.18%202%208%200%205.5-4.78%2010-10%2010z%22/%3E%3Cpath%20d%3D%22M2%2021c0-3%201.85-5.36%205.08-6%22/%3E%3C/svg%3E'); } .ico-search { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22/%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22/%3E%3C/svg%3E'); } .ico-scroll { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%2021h12a2%202%200%200%200%202-2v-2H10v2a2%202%200%200%201-2%202z%22/%3E%3Cpath%20d%3D%22M19%2017V5a2%202%200%200%200-2-2H4%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%2021h12a2%202%200%200%200%202-2v-2H10v2a2%202%200%200%201-2%202z%22/%3E%3Cpath%20d%3D%22M19%2017V5a2%202%200%200%200-2-2H4%22/%3E%3C/svg%3E'); } .ico-rainbow { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2%2017a10%2010%200%200%201%2020%200%22/%3E%3Cpath%20d%3D%22M6%2017a6%206%200%200%201%2012%200%22/%3E%3Cpath%20d%3D%22M10%2017a2%202%200%200%201%204%200%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2%2017a10%2010%200%200%201%2020%200%22/%3E%3Cpath%20d%3D%22M6%2017a6%206%200%200%201%2012%200%22/%3E%3Cpath%20d%3D%22M10%2017a2%202%200%200%201%204%200%22/%3E%3C/svg%3E'); } .ico-snowflake { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%2222%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%224.93%22%20y1%3D%224.93%22%20x2%3D%2219.07%22%20y2%3D%2219.07%22/%3E%3Cline%20x1%3D%2219.07%22%20y1%3D%224.93%22%20x2%3D%224.93%22%20y2%3D%2219.07%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%2222%22/%3E%3Cline%20x1%3D%222%22%20y1%3D%2212%22%20x2%3D%2222%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%224.93%22%20y1%3D%224.93%22%20x2%3D%2219.07%22%20y2%3D%2219.07%22/%3E%3Cline%20x1%3D%2219.07%22%20y1%3D%224.93%22%20x2%3D%224.93%22%20y2%3D%2219.07%22/%3E%3C/svg%3E'); } .ico-scale { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203v18%22/%3E%3Cpath%20d%3D%22M3%208h18%22/%3E%3Cpath%20d%3D%22M7%2012l-4%208h8z%22/%3E%3Cpath%20d%3D%22M17%2012l-4%208h8z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203v18%22/%3E%3Cpath%20d%3D%22M3%208h18%22/%3E%3Cpath%20d%3D%22M7%2012l-4%208h8z%22/%3E%3Cpath%20d%3D%22M17%2012l-4%208h8z%22/%3E%3C/svg%3E'); } .ico-shield { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3C/svg%3E'); } .ico-moon { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22/%3E%3C/svg%3E'); } .ico-book { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d%3D%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d%3D%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E'); } .ico-warning { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10.29%203.86L1.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212.01%22%20y2%3D%2217%22/%3E%3C/svg%3E'); } .ico-bolt { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M13%202L3%2014h9l-1%208%2010-12h-9l1-8z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M13%202L3%2014h9l-1%208%2010-12h-9l1-8z%22/%3E%3C/svg%3E'); } .ico-wrench { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22/%3E%3C/svg%3E'); } .ico-cake { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2021h16v-7a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v7z%22/%3E%3Cpath%20d%3D%22M12%206V3%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223%22%20r%3D%221%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2021h16v-7a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v7z%22/%3E%3Cpath%20d%3D%22M12%206V3%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%223%22%20r%3D%221%22/%3E%3C/svg%3E'); } .ico-zodiac { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M9%209c0%204%203%2013%203%2013s3-9%203-13%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M9%209c0%204%203%2013%203%2013s3-9%203-13%22/%3E%3C/svg%3E'); } .ico-dragon { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2012c0-4%204-8%208-8s8%204%208%208%22/%3E%3Cpath%20d%3D%22M4%2012c0%204%204%208%208%208s8-4%208-8%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M12%204c2%200%204%202%204%204%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2012c0-4%204-8%208-8s8%204%208%208%22/%3E%3Cpath%20d%3D%22M4%2012c0%204%204%208%208%208s8-4%208-8%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M12%204c2%200%204%202%204%204%22/%3E%3C/svg%3E'); } .ico-beads { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%228%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%228%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M10%2020h4%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%226%22%20cy%3D%228%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%228%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M10%2020h4%22/%3E%3C/svg%3E'); } .ico-atom { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M20.2%2012c0%204.4-3.6%208-8.2%208s-8.2-3.6-8.2-8%22/%3E%3Cpath%20d%3D%22M3.8%2012c0-4.4%203.6-8%208.2-8s8.2%203.6%208.2%208%22/%3E%3Cpath%20d%3D%22M6%204c2%203%202%2013%200%2016%22/%3E%3Cpath%20d%3D%22M18%204c-2%203-2%2013%200%2016%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M20.2%2012c0%204.4-3.6%208-8.2%208s-8.2-3.6-8.2-8%22/%3E%3Cpath%20d%3D%22M3.8%2012c0-4.4%203.6-8%208.2-8s8.2%203.6%208.2%208%22/%3E%3Cpath%20d%3D%22M6%204c2%203%202%2013%200%2016%22/%3E%3Cpath%20d%3D%22M18%204c-2%203-2%2013%200%2016%22/%3E%3C/svg%3E'); } .ico-circle { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3C/svg%3E'); } .ico-droplet { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%202.69l5.66%205.66a8%208%200%201%201-11.31%200z%22/%3E%3C/svg%3E'); } .ico-mountain { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%203l4%208%205-5%205%2015H2L8%203z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M8%203l4%208%205-5%205%2015H2L8%203z%22/%3E%3C/svg%3E'); } .ico-yinyang { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%201%200%2020%205%205%200%200%201%200-10%205%205%200%200%200%200-10z%22%20fill%3D%22currentColor%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221.5%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%202a10%2010%200%200%201%200%2020%205%205%200%200%201%200-10%205%205%200%200%200%200-10z%22%20fill%3D%22currentColor%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221.5%22%20fill%3D%22none%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%221.5%22/%3E%3C/svg%3E'); } .ico-edit { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M11%204H4a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%22/%3E%3Cpath%20d%3D%22M18.5%202.5a2.121%202.121%200%200%201%203%203L12%2015l-4%201%201-4%209.5-9.5z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M11%204H4a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%22/%3E%3Cpath%20d%3D%22M18.5%202.5a2.121%202.121%200%200%201%203%203L12%2015l-4%201%201-4%209.5-9.5z%22/%3E%3C/svg%3E'); } .ico-store { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%209l1-5h16l1%205%22/%3E%3Cpath%20d%3D%22M4%209v11a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V9%22/%3E%3Cpath%20d%3D%22M9%2021v-6h6v6%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%209l1-5h16l1%205%22/%3E%3Cpath%20d%3D%22M4%209v11a1%201%200%200%200%201%201h14a1%201%200%200%200%201-1V9%22/%3E%3Cpath%20d%3D%22M9%2021v-6h6v6%22/%3E%3C/svg%3E'); } .ico-recycle { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%2019l-3-3%203-3%22/%3E%3Cpath%20d%3D%22M4%2016h8%22/%3E%3Cpath%20d%3D%22M17%205l3%203-3%203%22/%3E%3Cpath%20d%3D%22M20%208h-8%22/%3E%3Cpath%20d%3D%22M12%2022l-3-5h6z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7%2019l-3-3%203-3%22/%3E%3Cpath%20d%3D%22M4%2016h8%22/%3E%3Cpath%20d%3D%22M17%205l3%203-3%203%22/%3E%3Cpath%20d%3D%22M20%208h-8%22/%3E%3Cpath%20d%3D%22M12%2022l-3-5h6z%22/%3E%3C/svg%3E'); } .ico-calendar { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E'); } .ico-megaphone { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l18-5v12L3%2014v-3z%22/%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%2011l18-5v12L3%2014v-3z%22/%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22/%3E%3C/svg%3E'); } .ico-qq { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E'); } .ico-link { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E'); } .ico-meditation { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M12%206v6%22/%3E%3Cpath%20d%3D%22M8%2012l4%202%204-2%22/%3E%3Cpath%20d%3D%22M6%2018c2-2%204-3%206-3s4%201%206%203%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%222%22/%3E%3Cpath%20d%3D%22M12%206v6%22/%3E%3Cpath%20d%3D%22M8%2012l4%202%204-2%22/%3E%3Cpath%20d%3D%22M6%2018c2-2%204-3%206-3s4%201%206%203%22/%3E%3C/svg%3E'); } .ico-star { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22/%3E%3C/svg%3E'); } .ico-mountain2 { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2%2018l8-8%204%204%206-6%202%202v8z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%226%22%20r%3D%222%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2%2018l8-8%204%204%206-6%202%202v8z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%226%22%20r%3D%222%22/%3E%3C/svg%3E'); } .ico-pencil { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4L16.5%203.5z%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.121%202.121%200%200%201%203%203L7%2019l-4%201%201-4L16.5%203.5z%22/%3E%3C/svg%3E'); } .ico-check { -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E'); } /* ===== End SVG Icon System ===== */ /* ===== Unified Font System ===== */ body, p, span, a, input, button, textarea, select, li, td, th, label, div { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .section-subtitle, .cta-title, .page-title, .article-title, .product-name, .product-series, .brand-name, .nav-logo { font-family: 'Noto Serif SC', 'Songti SC', serif; } /* ===== End Unified Font System ===== */ /* ===== Page-Specific: about ===== */ .nav-menu { display: flex; gap: 32px; list-style: none; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .page-hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1a1228; background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 0; } .page-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,18,40,0.5) 0%, rgba(26,18,40,0.3) 50%, rgba(26,18,40,0.6) 100%); } .page-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 0 20px; width: 100%; margin: 0 auto; } .page-hero-title { font-size: 36px; font-weight: 300; letter-spacing: 6px; margin-bottom: 15px; } .page-hero-title span { color: #c9a96e; font-weight: 500; } .page-hero-subtitle { font-size: 16px; letter-spacing: 3px; color: rgba(255,255,255,0.7); } .origin { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 100%); } .origin-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .origin-img { height: 400px; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .origin-img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(74,26,107,0.15) 0%, rgba(201,169,110,0.1) 100%); } .origin-text h3 { font-size: 24px; color: #4a1a6b; margin-bottom: 20px; font-weight: 500; letter-spacing: 2px; } .origin-text p { font-size: 16px; color: #666; line-height: 2; margin-bottom: 15px; } .origin-quote { margin-top: 30px; padding-left: 20px; border-left: 3px solid #c9a96e; font-size: 18px; color: #c9a96e; font-style: italic; line-height: 1.8; } .philosophy { background: radial-gradient(ellipse at 20% 30%, rgba(201,169,110,0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(106,61,143,0.15) 0%, transparent 50%), linear-gradient(135deg, #2a1838 0%, #3C2854 40%, #2d1b4e 100%); padding: 80px 0; } .brand-data { background: radial-gradient(circle at 30% 20%, rgba(201,169,110,0.12) 0%, transparent 40%), radial-gradient(circle at 70% 80%, rgba(119,50,180,0.2) 0%, transparent 50%), linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3a1f5a 100%); color: #fff; position: relative; overflow: hidden; } .brand-data::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%); } .brand-data-content { position: relative; z-index: 1; } .brand-slogan { text-align: center; margin-bottom: 50px; } .brand-slogan h2 { font-size: 36px; font-weight: 300; letter-spacing: 6px; margin-bottom: 15px; } .brand-slogan h2 span { color: #c9a96e; font-weight: 500; } .brand-slogan p { font-size: 16px; color: rgba(255,255,255,0.7); letter-spacing: 3px; } .data-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; } .data-item { padding: 30px; border-radius: 12px; background: rgba(255,255,255,0.05); transition: all 0.3s; } .data-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); } .data-number { font-size: 42px; color: #c9a96e; font-weight: 300; margin-bottom: 10px; } .data-label { font-size: 14px; color: rgba(255,255,255,0.7); letter-spacing: 2px; } .data-desc { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; } .brand-position { text-align: center; margin-top: 50px; padding: 30px; border-radius: 12px; background: rgba(255,255,255,0.05); } .brand-position h4 { font-size: 18px; color: #c9a96e; margin-bottom: 15px; letter-spacing: 2px; } .brand-position p { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.8; } .timeline { background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .timeline-wrapper { position: relative; max-width: 900px; margin: 0 auto; } .timeline-wrapper::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #c9a96e, #4a1a6b); transform: translateX(-50%); } .timeline-item { display: flex; justify-content: flex-end; padding-right: 50%; position: relative; margin-bottom: 50px; } .timeline-item:nth-child(even) { justify-content: flex-start; padding-right: 0; padding-left: 50%; } .timeline-dot { position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; background: #c9a96e; border-radius: 50%; transform: translateX(-50%); border: 3px solid #fff; box-shadow: 0 0 0 3px #c9a96e; z-index: 2; } .timeline-content { background: #FFFFFF; padding: 25px 30px; border-radius: 12px; max-width: 380px; margin: 0 30px; position: relative; border: 1px solid #E8DCEF; } .timeline-content::before { content: ''; position: absolute; top: 15px; width: 0; height: 0; } .timeline-item:nth-child(odd) .timeline-content::before { right: -10px; border-left: 10px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .timeline-item:nth-child(even) .timeline-content::before { left: -10px; border-right: 10px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .timeline-date { font-size: 14px; color: #c9a96e; font-weight: 500; margin-bottom: 8px; letter-spacing: 1px; } .timeline-title { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .timeline-desc { font-size: 14px; color: #777; line-height: 1.7; } .compliance { background: linear-gradient(180deg, #F3EAF7 0%, #F8F3FB 100%); } .compliance-box { background: #fff; border-radius: 16px; padding: 50px; border: 1px solid #E8DCEF; } .compliance-box h3 { font-size: 22px; color: #4a1a6b; margin-bottom: 25px; text-align: center; font-weight: 500; } .compliance-list { list-style: none; } .compliance-list li { padding: 15px 0; border-bottom: 1px solid #EDE4F0; display: flex; align-items: flex-start; gap: 15px; } .compliance-list li:last-child { border-bottom: none; } .compliance-list .icon { width: 30px; height: 30px; background: #7732B4; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .compliance-list .text h4 { font-size: 16px; color: #333; margin-bottom: 5px; } .compliance-list .text p { font-size: 14px; color: #888; line-height: 1.7; } .compliance-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #EDE4F0; font-size: 13px; color: #aaa; } @media (max-width: 1024px) { .origin-content { grid-template-columns: 1fr; } .origin-img { height: 300px; } .philosophy-grid { grid-template-columns: repeat(2, 1fr); } .data-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .timeline-wrapper::before { left: 20px; } .timeline-item { padding-right: 0; padding-left: 50px; justify-content: flex-start; } .timeline-item:nth-child(even) { padding-left: 50px; } .timeline-dot { left: 20px; } .timeline-content { margin: 0; max-width: 100%; } .timeline-item:nth-child(odd) .timeline-content::before { left: -10px; right: auto; border-right: 10px solid #FFFFFF; border-left: none; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .page-hero-title { font-size: 28px; } .philosophy-grid { grid-template-columns: 1fr; } .data-grid { grid-template-columns: 1fr 1fr; } .brand-slogan h2 { font-size: 26px; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .timeline-content { padding: 20px; } .compliance-box { padding: 30px 20px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .data-grid { grid-template-columns: 1fr; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ===== Page-Specific: booking ===== */ .booking-hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3C2854 100%); margin-top: 0; } .booking-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; } .booking-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,27,78,0.5); } .booking-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 700px; padding: 0 20px; width: 100%; margin: 0 auto; } .booking-hero-badge { display: inline-block; background: rgba(201,169,110,0.2); border: 1px solid #c9a96e; color: #c9a96e; padding: 8px 25px; border-radius: 25px; font-size: 14px; letter-spacing: 3px; margin-bottom: 25px; } .booking-hero-title { font-size: 42px; font-weight: 300; letter-spacing: 6px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .booking-hero-title span { color: #c9a96e; font-weight: 500; } .booking-hero-subtitle { font-size: 16px; color: rgba(255,255,255,0.8); letter-spacing: 2px; } .booking-form-section { background: #fff; } .booking-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: start; } .form-card { background: #fff; border-radius: 20px; padding: 50px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); border: 1px solid #E8DCEF; } .form-header { margin-bottom: 35px; } .form-header h2 { font-size: 24px; color: #4a1a6b; margin-bottom: 8px; font-weight: 500; } .form-header p { font-size: 14px; color: #999; } .form-group { margin-bottom: 25px; } .form-label { display: block; font-size: 14px; color: #555; margin-bottom: 8px; font-weight: 500; } .form-label span { color: #e74c3c; margin-left: 3px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 14px 18px; border: 2px solid #eee; border-radius: 12px; font-size: 15px; font-family: inherit; color: #333; background: #fafafa; transition: all 0.3s; outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #c9a96e; background: #fff; box-shadow: 0 0 0 4px rgba(201,169,110,0.1); } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: #d4c9bc; } .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } .form-textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-hint { font-size: 12px; color: #999; margin-top: 6px; } .service-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .service-option { position: relative; } .service-option input { position: absolute; opacity: 0; } .service-option label { display: block; padding: 18px 20px; border: 2px solid #eee; border-radius: 12px; cursor: pointer; transition: all 0.3s; text-align: center; background: #fafafa; } .service-option label:hover { border-color: #c9a96e; background: #fff; } .service-option input:checked + label { border-color: #4a1a6b; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); color: #fff; } .service-option input:checked + label .service-icon { color: #c9a96e; } .service-icon { font-size: 28px; margin-bottom: 8px; display: block; } .service-name { font-size: 15px; font-weight: 500; display: block; } .service-desc { font-size: 12px; opacity: 0.8; margin-top: 4px; display: block; } .time-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .time-slot { position: relative; } .time-slot input { position: absolute; opacity: 0; } .time-slot label { display: block; padding: 12px; border: 2px solid #eee; border-radius: 10px; cursor: pointer; text-align: center; font-size: 14px; transition: all 0.3s; background: #fafafa; } .time-slot label:hover { border-color: #c9a96e; } .time-slot input:checked + label { border-color: #4a1a6b; background: #7732B4; color: #fff; } .time-slot input:disabled + label { opacity: 0.4; cursor: not-allowed; background: #f0f0f0; } .form-submit { width: 100%; padding: 16px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 500; letter-spacing: 3px; cursor: pointer; transition: all 0.3s; margin-top: 10px; } .form-submit:hover { background: linear-gradient(135deg, #5a2080, #7a4d9f); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(74,26,107,0.3); } .form-submit:active { transform: translateY(0); } .notice-card { background: linear-gradient(135deg, #FFFFFF, #EDE4F0); border-radius: 20px; padding: 40px; border: 1px solid #E8DCEF; } .notice-card h3 { font-size: 20px; color: #4a1a6b; margin-bottom: 25px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .notice-card h3::before { content: '📋'; font-size: 24px; } .notice-item { padding: 18px 0; border-bottom: 1px solid #DDD0E5; } .notice-item:last-child { border-bottom: none; } .notice-item-title { font-size: 15px; color: #4a1a6b; font-weight: 500; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .notice-item-title::before { content: '●'; color: #c9a96e; font-size: 8px; } .notice-item-desc { font-size: 14px; color: #777; line-height: 1.8; padding-left: 16px; } .notice-highlight { background: rgba(201,169,110,0.1); border-left: 3px solid #c9a96e; padding: 15px 20px; border-radius: 0 8px 8px 0; margin-top: 25px; } .notice-highlight p { font-size: 14px; color: #4a1a6b; line-height: 1.8; } .map-section { background: #FFFFFF; } .map-container { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.08); } .map-placeholder { height: 400px; background: #EDE4F0; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .map-placeholder::after { content: '[地图占位]\n点击导航'; color: #bbb; font-size: 16px; text-align: center; white-space: pre-line; } .map-info { padding: 35px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .map-info-item { text-align: center; } .map-info-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #fff; font-size: 20px; } .map-info-label { font-size: 13px; color: #999; margin-bottom: 5px; } .map-info-value { font-size: 16px; color: #4a1a6b; font-weight: 500; } .contact-section { background: #fff; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .contact-card { background: #FFFFFF; border-radius: 16px; padding: 40px 30px; text-align: center; transition: all 0.3s; border: 1px solid #E8DCEF; } .contact-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: #c9a96e; } .contact-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #fff; font-size: 24px; } .contact-title { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .contact-detail { font-size: 15px; color: #777; line-height: 1.8; } .contact-detail a { color: #4a1a6b; text-decoration: none; transition: color 0.3s; } .contact-detail a:hover { color: #c9a96e; } @media (max-width: 1024px) { .booking-layout { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .time-slots { grid-template-columns: repeat(3, 1fr); } .map-info { grid-template-columns: repeat(3, 1fr); } .contact-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .booking-hero-title { font-size: 28px; } .form-card { padding: 30px 25px; } .service-options { grid-template-columns: 1fr; } .time-slots { grid-template-columns: repeat(2, 1fr); } .map-info { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .time-slots { grid-template-columns: repeat(2, 1fr); } .service-options { grid-template-columns: 1fr; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ===== Page-Specific: brand-news ===== */ .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1a1228; background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 0; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,27,78,0.5); } .hero-slogan { font-size: 42px; font-weight: 300; letter-spacing: 8px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .hero-subtitle { font-size: 16px; letter-spacing: 4px; color: rgba(255,255,255,0.8); } .breadcrumb { background: #fff; padding: 15px 0; border-bottom: 1px solid #E8DCEF; } .breadcrumb-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; } .breadcrumb-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-inner a:hover { color: #4a1a6b; } .breadcrumb-inner .current { color: #4a1a6b; } .breadcrumb-sep { color: #ccc; } .knowledge { background: #fff; } .knowledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .knowledge-card { background: #FFFFFF; border-radius: 16px; padding: 40px 30px; text-align: center; transition: all 0.4s; border: 1px solid #E8DCEF; position: relative; overflow: hidden; text-decoration: none; color: inherit; display: block; } .knowledge-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #c9a96e; transform: scaleX(0); transition: transform 0.4s; } .knowledge-card:hover::before { transform: scaleX(1); } .knowledge-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .knowledge-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: #fff; font-size: 32px; } .knowledge-title { font-size: 20px; color: #4a1a6b; margin-bottom: 12px; font-weight: 500; } .knowledge-desc { font-size: 14px; color: #777; line-height: 1.8; } .knowledge-count { display: inline-block; margin-top: 15px; font-size: 12px; color: #c9a96e; background: rgba(201,169,110,0.1); padding: 5px 15px; border-radius: 15px; } .articles { background: #FFFFFF; } .articles-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 20px; } .articles-title { font-size: 28px; color: #4a1a6b; font-weight: 500; letter-spacing: 2px; } .view-all { color: #c9a96e; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.3s; } .view-all:hover { gap: 10px; } .articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .article-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); text-decoration: none; color: inherit; display: block; } .article-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .article-img { height: 200px; background: linear-gradient(135deg, #E8DCEF, #DDD0E5); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .article-img::after { content: attr(data-category); position: absolute; bottom: 15px; left: 15px; background: #7732B4; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; } .article-img.has-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%); } .article-img:not(.has-bg)::after { content: '暂无图片'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; color: #bbb; font-size: 14px; padding: 0; border-radius: 0; letter-spacing: 1px; } .article-content { padding: 25px; } .article-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 12px; color: #999; } .article-date { color: #c9a96e; letter-spacing: 1px; } .article-title { font-size: 17px; color: #333; margin-bottom: 12px; line-height: 1.5; font-weight: 500; transition: color 0.3s; } /* v2.5.50: brand-news 文章卡片标题与 energy-guide 对齐 */ .articles-grid .article-title { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; } .article-card:hover .article-title { color: #4a1a6b; } .article-excerpt { font-size: 14px; color: #888; line-height: 1.7; } @media (max-width: 1024px) { .knowledge-grid { grid-template-columns: repeat(2, 1fr); } .articles-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .hero-slogan { font-size: 28px; } .knowledge-grid { grid-template-columns: 1fr; } .articles-grid { grid-template-columns: 1fr; } .articles-header { flex-direction: column; align-items: flex-start; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .logo-img { max-height: 48px !important; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } /* ===== Page-Specific: collections ===== */ .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .collection-hero { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3C2854 100%); margin-top: 0; } .collection-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; } .collection-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,27,78,0.5); } .collection-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 700px; padding: 0 20px; width: 100%; margin: 0 auto; } .collection-hero-content h1 { font-size: 42px; font-weight: 300; letter-spacing: 8px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .collection-hero-content h1 span { color: #c9a96e; font-weight: 500; } .collection-hero-content p { font-size: 18px; letter-spacing: 4px; color: rgba(255,255,255,0.8); } .collection-hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; animation: bounce 2s infinite; } .collection-hero-scroll::after { content: '▼'; color: rgba(255,255,255,0.6); font-size: 20px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } .category-section { background: #fff; padding: 60px 0; } .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* v2.5.12: 为 page-collections.php 的分类卡片添加 .category-grid 前缀，避免与品牌动态页的分类卡片冲突 */ .category-grid .category-card { position: relative; border-radius: 16px; overflow: hidden; height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; text-decoration: none; transition: all 0.4s; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .category-grid .category-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(45,27,78,0.85) 0%, rgba(45,27,78,0.3) 50%, transparent 100%); z-index: 1; transition: all 0.4s; } .category-grid .category-card:hover::before { background: linear-gradient(to top, rgba(45,27,78,0.92) 0%, rgba(45,27,78,0.5) 60%, transparent 100%); } .category-grid .category-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .category-grid .category-card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s; } .category-grid .category-card:hover .category-card-bg { transform: scale(1.08); } .category-grid .category-card-content { position: relative; z-index: 2; color: #fff; } .category-grid .category-card-tag { display: inline-block; background: #c9a96e; color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; margin-bottom: 12px; } .category-grid .category-card-title { font-size: 26px; font-weight: 500; margin-bottom: 10px; letter-spacing: 2px; } .category-grid .category-card-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 15px; } .category-grid .category-card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #c9a96e; transition: gap 0.3s; } .category-grid .category-card:hover .category-card-link { gap: 15px; } .filter-section { background: #FFFFFF; padding: 40px 0; border-bottom: 1px solid #E8DCEF; } .filter-bar { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; } .filter-group { display: flex; flex-direction: column; gap: 8px; } .filter-group-label { font-size: 13px; color: #888; letter-spacing: 1px; } .filter-coming-soon { display: inline-block; font-size: 11px; color: #c9a96e; border: 1px solid #c9a96e; padding: 1px 6px; border-radius: 3px; margin-left: 4px; } .filter-options { display: flex; flex-wrap: wrap; gap: 8px; } .filter-btn { background: #fff; border: 1px solid #e0d8cf; padding: 8px 18px; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.3s; font-family: inherit; } .filter-btn:hover:not(:disabled) { border-color: #c9a96e; color: #4a1a6b; } .filter-btn.active { background: #7732B4; color: #fff; border-color: #4a1a6b; } .filter-btn:disabled, .filter-btn-disabled { opacity: 0.4; cursor: not-allowed; } .filter-options-disabled .filter-btn { background: #EDE4F0; border-color: #DDD0E5; color: #aaa; } .filter-reset { margin-left: auto; align-self: center; background: none; border: 1px solid #c9a96e; color: #c9a96e; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.3s; } .filter-reset:hover { background: #c9a96e; color: #fff; } .products-section { background: #FFFFFF; padding: 50px 0 80px; } /* v2.5.20: 产品列表页左右布局（左产品网格 + 右筛选器侧边栏） */ .products-layout { display: grid; grid-template-columns: 1fr 240px; gap: 40px; align-items: flex-start; } .products-main { min-width: 0; } .products-sidebar { position: sticky; top: 20px; background: #FAF8FB; border-radius: 12px; padding: 24px 20px; } .filter-sidebar-widget { margin-bottom: 28px; } .filter-sidebar-widget:last-of-type { margin-bottom: 20px; } .filter-widget-title { font-size: 15px; font-weight: 600; color: #4a1a6b; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #E8DCEF; letter-spacing: 1px; } .filter-widget-list { display: flex; flex-direction: column; gap: 4px; } .filter-sidebar-link { display: block; padding: 8px 12px; font-size: 14px; color: #666; text-decoration: none; border-radius: 6px; transition: all 0.25s; cursor: pointer; } .filter-sidebar-link:hover { background: #EDE4F0; color: #4a1a6b; } .filter-sidebar-link.active { background: #7732B4; color: #fff; font-weight: 500; } .filter-reset-btn { width: 100%; padding: 10px; background: none; border: 1px solid #c9a96e; color: #c9a96e; border-radius: 20px; cursor: pointer; font-family: inherit; font-size: 14px; transition: all 0.3s; } .filter-reset-btn:hover { background: #c9a96e; color: #fff; } /* 响应式：平板及以下改为上下布局 */ @media (max-width: 968px) { .products-layout { grid-template-columns: 1fr; gap: 20px; } .products-sidebar { position: static; order: -1; } .filter-widget-list { flex-direction: row; flex-wrap: wrap; gap: 8px; } .filter-sidebar-link { display: inline-block; padding: 6px 14px; border: 1px solid #e0d8cf; border-radius: 20px; } .filter-sidebar-link.active { border-color: #4a1a6b; } .filter-reset-btn { width: auto; display: inline-block; padding: 8px 20px; } .products-main .product-grid { grid-template-columns: 1fr; } } /* v2.5.20: 有侧边栏时产品网格改为3列 */ .products-main .product-grid { grid-template-columns: repeat(3, 1fr); } .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } .product-img { height: 260px; background: #EDE4F0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background-size: contain; background-position: center; background-repeat: no-repeat; } .product-img::after { content: ''; } .product-wuxing { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; font-weight: 500; } .wuxing-fire { background: linear-gradient(135deg, #e74c3c, #c0392b); } .wuxing-water { background: linear-gradient(135deg, #3498db, #2980b9); } .wuxing-wood { background: linear-gradient(135deg, #27ae60, #229954); } .wuxing-metal { background: linear-gradient(135deg, #f39c12, #e67e22); } .wuxing-earth { background: linear-gradient(135deg, #d4a574, #b8956a); } .series-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 11px; color: #fff; letter-spacing: 1px; } .series-wuxing { background: linear-gradient(135deg, #4a1a6b, #6b3a8b); } .series-shengxiao { background: linear-gradient(135deg, #C8102E, #e63946); } .series-xingzuo { background: linear-gradient(135deg, #4B0082, #6a0dad); } .series-jieqi { background: linear-gradient(135deg, #228B22, #2ecc71); } .series-fajing { background: linear-gradient(135deg, #FFD700, #FFA500); } .series-tumao { background: linear-gradient(135deg, #FFB6C1, #FF69B4); } .series-liaoyu { background: linear-gradient(135deg, #87CEEB, #4682B4); } .series-overview { background: #fff; padding: 60px 0; } .series-overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .series-card { border-radius: 12px; overflow: hidden; text-decoration: none; transition: all 0.4s; border: 1px solid #E8DCEF; background: #FFFFFF; } .series-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-color: #c9a96e; } .series-card-header { height: 80px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .series-card-header h3 { color: #fff; font-size: 20px; font-weight: 500; letter-spacing: 3px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1; } .series-card-body { padding: 18px; } .series-card-desc { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 10px; } .series-card-dim { font-size: 12px; color: #999; } .series-card-dim span { color: #c9a96e; font-weight: 500; } .product-info { padding: 22px; } .product-series { font-size: 12px; color: #c9a96e; letter-spacing: 1px; margin-bottom: 6px; } .product-card .product-name { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: 500; line-height: 1.4; } .product-attr { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .product-attr span { font-size: 12px; color: #888; background: #EDE4F0; padding: 3px 10px; border-radius: 12px; } .product-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E8DCEF; } .product-price { font-size: 14px; color: #c9a96e; font-weight: 500; letter-spacing: 1px; } .product-link { color: #4a1a6b; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.3s; } .product-link:hover { gap: 10px; } .wp-loop-placeholder { grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #fff; border-radius: 16px; border: 2px dashed #e0d8cf; } .wp-loop-placeholder code { display: block; background: #EDE4F0; padding: 20px; border-radius: 8px; font-family: 'Consolas', monospace; font-size: 14px; color: #4a1a6b; line-height: 1.8; text-align: left; max-width: 700px; margin: 0 auto; } .wp-loop-placeholder .note { margin-top: 15px; font-size: 13px; color: #999; } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 8px; text-decoration: none; font-size: 14px; transition: all 0.3s; } .pagination a { background: #fff; color: #666; border: 1px solid #e0d8cf; } .pagination a:hover { background: #7732B4; color: #fff; border-color: #4a1a6b; } .pagination span.current { background: #7732B4; color: #fff; border: 1px solid #4a1a6b; } .pagination span.dots { color: #999; border: none; background: none; } .pagination .prev-next { padding: 0 16px; letter-spacing: 1px; } @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .category-grid { grid-template-columns: repeat(2, 1fr); } .series-overview-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .filter-bar { gap: 15px; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .collection-hero-content h1 { font-size: 28px; } .collection-hero { height: 380px; } .product-grid, .products-main .product-grid { grid-template-columns: 1fr; gap: 20px; } .category-grid { grid-template-columns: 1fr; } .series-overview-grid { grid-template-columns: repeat(2, 1fr); } .category-grid .category-card { height: 260px; } .filter-bar { flex-direction: column; } .filter-reset { margin-left: 0; align-self: flex-start; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .cta-title { font-size: 22px; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .series-overview-grid { grid-template-columns: 1fr; } .collection-hero-content h1 { font-size: 24px; letter-spacing: 4px; } .collection-hero-content p { font-size: 14px; } .filter-options { gap: 6px; } .filter-btn { padding: 6px 12px; font-size: 12px; } .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: 13px; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ===== Page-Specific: contact ===== */ .nav-menu { display: flex; gap: 32px; list-style: none; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .page-hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1a1228; background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: 0; } .page-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,18,40,0.5) 0%, rgba(26,18,40,0.3) 50%, rgba(26,18,40,0.6) 100%); } .page-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 0 20px; width: 100%; margin: 0 auto; } .page-hero-title { font-size: 36px; font-weight: 300; letter-spacing: 6px; margin-bottom: 15px; } .page-hero-title span { color: #c9a96e; font-weight: 500; } .page-hero-subtitle { font-size: 16px; letter-spacing: 3px; color: rgba(255,255,255,0.7); } .store-info { background: #fff; } .store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; } .store-details { display: flex; flex-direction: column; justify-content: center; } .store-details h3 { font-size: 24px; color: #4a1a6b; margin-bottom: 25px; font-weight: 500; } .info-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .info-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; } .info-text h4 { font-size: 16px; color: #4a1a6b; margin-bottom: 5px; } .info-text p { font-size: 15px; color: #666; line-height: 1.6; } .store-map { background: linear-gradient(135deg, #EDE4F0 0%, #DDD0E5 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center; min-height: 400px; position: relative; overflow: hidden; } .store-map::after { content: '[高德地图嵌入占位]\n成都市高新区天府大道北段1480号\n德商国际B座305B'; color: #bbb; font-size: 14px; text-align: center; white-space: pre-line; } .store-hours { margin-top: 20px; padding: 20px; background: #FFFFFF; border-radius: 12px; border-left: 4px solid #c9a96e; } .store-hours h4 { font-size: 15px; color: #4a1a6b; margin-bottom: 8px; } .store-hours p { font-size: 14px; color: #777; } .online-channels { background: #FFFFFF; } .channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .channel-card { background: #fff; border-radius: 16px; padding: 40px 30px; text-align: center; transition: all 0.4s; border: 1px solid #E8DCEF; } .channel-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); } .channel-qr { width: 160px; height: 160px; background: linear-gradient(135deg, #EDE4F0 0%, #DDD0E5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; border: 2px solid #DDD0E5; } .channel-qr::after { content: '[二维码占位]'; color: #bbb; font-size: 13px; } .channel-name { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .channel-desc { font-size: 14px; color: #888; line-height: 1.7; } .channel-btn { display: inline-block; margin-top: 15px; padding: 10px 25px; background: #7732B4; color: #fff; text-decoration: none; border-radius: 25px; font-size: 14px; transition: all 0.3s; } .channel-btn:hover { background: #5a2080; transform: translateY(-2px); } .contact-form { background: #fff; } .form-wrapper { max-width: 700px; margin: 0 auto; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-size: 14px; color: #4a1a6b; margin-bottom: 8px; font-weight: 500; } .form-group label .required { color: #e74c3c; } .form-group input, .form-group select, .form-group textarea { padding: 14px 16px; border: 1px solid #DDD0E5; border-radius: 10px; font-size: 15px; font-family: inherit; background: #FFFFFF; transition: all 0.3s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #4a1a6b; background: #fff; box-shadow: 0 0 0 3px rgba(74,26,107,0.08); } .form-group textarea { resize: vertical; min-height: 120px; } .form-submit { text-align: center; margin-top: 30px; } .form-submit button { padding: 15px 50px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); color: #fff; border: none; border-radius: 30px; font-size: 16px; cursor: pointer; transition: all 0.3s; letter-spacing: 2px; } .form-submit button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(74,26,107,0.3); } .notice { background: #FFFFFF; } .notice-box { background: #fff; border-radius: 16px; padding: 40px 50px; border: 1px solid #E8DCEF; max-width: 800px; margin: 0 auto; } .notice-box h3 { font-size: 20px; color: #4a1a6b; margin-bottom: 20px; text-align: center; font-weight: 500; } .notice-list { list-style: none; } .notice-list li { padding: 12px 0; border-bottom: 1px solid #EDE4F0; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: #666; line-height: 1.7; } .notice-list li:last-child { border-bottom: none; } .notice-list li::before { content: '◆'; color: #c9a96e; font-size: 10px; margin-top: 6px; flex-shrink: 0; } .notice-highlight { text-align: center; margin-top: 25px; padding: 20px; background: #FFFFFF; border-radius: 10px; border-left: 4px solid #c9a96e; } .notice-highlight p { font-size: 14px; color: #4a1a6b; font-weight: 500; } @media (max-width: 1024px) { .store-grid { grid-template-columns: 1fr; } .store-map { min-height: 300px; } .channels-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .page-hero-title { font-size: 28px; } .channels-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .notice-box { padding: 30px 20px; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .logo-img { max-height: 48px !important; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ===== Page-Specific: guide-beginner ===== */ :root { --brand-purple: #4a1a6b; --brand-purple-dark: #3a1455; --brand-purple-light: #6b3d8e; --brand-gold: #c9a96e; --brand-gold-light: #e0c896; --brand-gold-dark: #a88a55; --bg-primary: #F3EAF7; --bg-secondary: #EDE4F0; --text-primary: #2d2d2d; --text-secondary: #666; --text-muted: #999; --border-color: #DDD0E5; --white: #ffffff; --shadow-sm: 0 2px 8px rgba(74, 26, 107, 0.08); --shadow-md: 0 4px 20px rgba(74, 26, 107, 0.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; padding-top: 72px; } h1, h2, h3, h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; } a { color: var(--brand-purple); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--brand-gold); } img { max-width: 100%; height: auto; display: block; } .breadcrumb-wrap { background: transparent; border-bottom: none; margin-top: 0; padding: 0; } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .breadcrumb a:hover { color: var(--brand-purple); } .breadcrumb .sep { color: #ccc; } .breadcrumb .current { color: var(--brand-purple); font-weight: 500; } .main-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 40px; } @media (max-width: 768px) { .main-container { grid-template-columns: 1fr; padding: 20px 20px 60px; } } .content-area { min-width: 0; } .page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--border-color); } .page-header h1 { font-size: 32px; color: var(--brand-purple); margin-bottom: 12px; font-weight: 600; letter-spacing: 2px; } .page-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.8; } .article-list { display: flex; flex-direction: column; gap: 30px; } .article-list .article-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.3s ease; } .article-list .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-gold-light); } @media (max-width: 768px) { .article-list .article-card { grid-template-columns: 1fr; } } .article-list .article-thumbnail { width: 160px; height: 120px; background: linear-gradient(135deg, var(--bg-secondary), #ede8e0); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 768px) { .article-list .article-thumbnail { width: 100%; height: 160px; } } .placeholder-icon { font-size: 40px; opacity: 0.6; } .article-body { display: flex; flex-direction: column; gap: 10px; } .article-list .article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .cat-tag { background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-light)); color: var(--white); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .article-list .article-title { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin: 0; } .article-title a { color: inherit; text-decoration: none; transition: color 0.3s; } .article-title a:hover { color: var(--brand-purple); } .article-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--brand-purple); font-weight: 500; margin-top: 4px; transition: all 0.3s; } .read-more:hover { color: var(--brand-gold); gap: 8px; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } } /* v2.5.51: care-guide 卡片垂直布局 — 缩略图全宽在上方，标题在meta上方，阅读全文右下角 */ .article-list-care .article-card { display: flex; flex-direction: column; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s; text-decoration: none; color: inherit; } .article-list-care .article-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .article-list-care .article-thumbnail { width: 100%; height: 220px; background: linear-gradient(135deg, #E8DCEF, #DDD0E5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .article-list-care .article-thumbnail img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .article-list-care .article-thumbnail { height: 180px; } } .article-list-care .article-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; } .article-list-care .article-title { font-size: 20px; font-weight: 600; line-height: 1.4; margin: 0; color: var(--text-primary); } .article-list-care .article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .article-list-care .article-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .article-list-care .article-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 4px; } .article-list-care .article-footer .read-more { font-size: 13px; color: var(--brand-purple, #7732B4); text-decoration: none; transition: gap 0.3s; display: inline-flex; align-items: center; gap: 5px; } .article-list-care .article-footer .read-more::after { content: '\2192'; transition: transform 0.3s; } .article-list-care .article-footer .read-more:hover::after { transform: translateX(4px); } /* ===== Page-Specific: guide-care ===== */ :root { --brand-purple: #4a1a6b; --brand-purple-dark: #3a1455; --brand-purple-light: #6b3d8e; --brand-gold: #c9a96e; --brand-gold-light: #e0c896; --brand-gold-dark: #a88a55; --bg-primary: #F3EAF7; --bg-secondary: #EDE4F0; --text-primary: #2d2d2d; --text-secondary: #666; --text-muted: #999; --border-color: #DDD0E5; --white: #ffffff; --shadow-sm: 0 2px 8px rgba(74, 26, 107, 0.08); --shadow-md: 0 4px 20px rgba(74, 26, 107, 0.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; padding-top: 72px; } h1, h2, h3, h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; } a { color: var(--brand-purple); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--brand-gold); } img { max-width: 100%; height: auto; display: block; } .breadcrumb-wrap { background: transparent; border-bottom: none; margin-top: 0; padding: 0; } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .breadcrumb a:hover { color: var(--brand-purple); } .breadcrumb .sep { color: #ccc; } .breadcrumb .current { color: var(--brand-purple); font-weight: 500; } .main-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 40px; } @media (max-width: 768px) { .main-container { grid-template-columns: 1fr; padding: 20px 20px 60px; } } .content-area { min-width: 0; } .page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--border-color); } .page-header h1 { font-size: 32px; color: var(--brand-purple); margin-bottom: 12px; font-weight: 600; letter-spacing: 2px; } .page-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.8; } .article-list { display: flex; flex-direction: column; gap: 30px; } .article-list .article-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.3s ease; } .article-list .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-gold-light); } @media (max-width: 768px) { .article-list .article-card { grid-template-columns: 1fr; } } .article-list .article-thumbnail { width: 160px; height: 120px; background: linear-gradient(135deg, var(--bg-secondary), #ede8e0); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 768px) { .article-list .article-thumbnail { width: 100%; height: 160px; } } .placeholder-icon { font-size: 40px; opacity: 0.6; } .article-body { display: flex; flex-direction: column; gap: 10px; } .article-list .article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .cat-tag { background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-light)); color: var(--white); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .article-list .article-title { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin: 0; } .article-title a { color: inherit; text-decoration: none; transition: color 0.3s; } .article-title a:hover { color: var(--brand-purple); } .article-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--brand-purple); font-weight: 500; margin-top: 4px; transition: all 0.3s; } .read-more:hover { color: var(--brand-gold); gap: 8px; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } } /* ===== Page-Specific: guide-diy ===== */ :root { --brand-purple: #4a1a6b; --brand-purple-dark: #3a1455; --brand-purple-light: #6b3d8e; --brand-gold: #c9a96e; --brand-gold-light: #e0c896; --brand-gold-dark: #a88a55; --bg-primary: #F3EAF7; --bg-secondary: #EDE4F0; --text-primary: #2d2d2d; --text-secondary: #666; --text-muted: #999; --border-color: #DDD0E5; --white: #ffffff; --shadow-sm: 0 2px 8px rgba(74, 26, 107, 0.08); --shadow-md: 0 4px 20px rgba(74, 26, 107, 0.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; padding-top: 72px; } h1, h2, h3, h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; } a { color: var(--brand-purple); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--brand-gold); } img { max-width: 100%; height: auto; display: block; } .breadcrumb-wrap { background: transparent; border-bottom: none; margin-top: 0; padding: 0; } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .breadcrumb a:hover { color: var(--brand-purple); } .breadcrumb .sep { color: #ccc; } .breadcrumb .current { color: var(--brand-purple); font-weight: 500; } .main-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 40px; } @media (max-width: 768px) { .main-container { grid-template-columns: 1fr; padding: 20px 20px 60px; } } .content-area { min-width: 0; } .page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--border-color); } .page-header h1 { font-size: 32px; color: var(--brand-purple); margin-bottom: 12px; font-weight: 600; letter-spacing: 2px; } .page-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.8; } .article-list { display: flex; flex-direction: column; gap: 30px; } .article-list .article-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.3s ease; } .article-list .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-gold-light); } @media (max-width: 768px) { .article-list .article-card { grid-template-columns: 1fr; } } .article-list .article-thumbnail { width: 160px; height: 120px; background: linear-gradient(135deg, var(--bg-secondary), #ede8e0); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 768px) { .article-list .article-thumbnail { width: 100%; height: 160px; } } .placeholder-icon { font-size: 40px; opacity: 0.6; } .article-body { display: flex; flex-direction: column; gap: 10px; } .article-list .article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .cat-tag { background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-light)); color: var(--white); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .article-list .article-title { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin: 0; } .article-title a { color: inherit; text-decoration: none; transition: color 0.3s; } .article-title a:hover { color: var(--brand-purple); } .article-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--brand-purple); font-weight: 500; margin-top: 4px; transition: all 0.3s; } .read-more:hover { color: var(--brand-gold); gap: 8px; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } } /* ===== Page-Specific: guide-energy ===== */ :root { --brand-purple: #4a1a6b; --brand-purple-dark: #3a1455; --brand-purple-light: #6b3d8e; --brand-gold: #c9a96e; --brand-gold-light: #e0c896; --brand-gold-dark: #a88a55; --bg-primary: #F3EAF7; --bg-secondary: #EDE4F0; --text-primary: #2d2d2d; --text-secondary: #666; --text-muted: #999; --border-color: #DDD0E5; --white: #ffffff; --shadow-sm: 0 2px 8px rgba(74, 26, 107, 0.08); --shadow-md: 0 4px 20px rgba(74, 26, 107, 0.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --element-metal: #e8e8e8; --element-wood: #c8e6c9; --element-water: #bbdefb; --element-fire: #ffcdd2; --element-earth: #fff9c4; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; padding-top: 72px; } h1, h2, h3, h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; } a { color: var(--brand-purple); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--brand-gold); } img { max-width: 100%; height: auto; display: block; } .breadcrumb-wrap { background: transparent; border-bottom: none; margin-top: 0; padding: 0; } .breadcrumb { max-width: 1200px; margin: 0 auto; padding: 12px 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s; } .breadcrumb a:hover { color: var(--brand-purple); } .breadcrumb .sep { color: #ccc; } .breadcrumb .current { color: var(--brand-purple); font-weight: 500; } .main-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 40px; } @media (max-width: 768px) { .main-container { grid-template-columns: 1fr; padding: 20px 20px 60px; } } .content-area { min-width: 0; } .page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 2px solid var(--border-color); } .page-header h1 { font-size: 32px; color: var(--brand-purple); margin-bottom: 12px; font-weight: 600; letter-spacing: 2px; } .page-desc { font-size: 16px; color: var(--text-secondary); line-height: 1.8; } .article-list { display: flex; flex-direction: column; gap: 30px; } .article-list .article-card { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 24px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.3s ease; } .article-list .article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand-gold-light); } @media (max-width: 768px) { .article-list .article-card { grid-template-columns: 1fr; } } .article-list .article-thumbnail { width: 160px; height: 120px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; position: relative; } .article-list .article-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .article-list .article-card:hover .article-list .article-thumbnail img { transform: scale(1.08); } .article-thumbnail::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(74,26,107,0.15) 0%, rgba(201,169,110,0.1) 100%); pointer-events: none; } @media (max-width: 768px) { .article-list .article-thumbnail { width: 100%; height: 160px; } } .placeholder-icon { font-size: 40px; opacity: 0.6; } .article-body { display: flex; flex-direction: column; gap: 10px; } .article-list .article-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); } .cat-tag { background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-light)); color: var(--white); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .article-list .article-title { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin: 0; } .article-title a { color: inherit; text-decoration: none; transition: color 0.3s; } .article-title a:hover { color: var(--brand-purple); } .article-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .read-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--brand-purple); font-weight: 500; margin-top: 4px; transition: all 0.3s; } .read-more:hover { color: var(--brand-gold); gap: 8px; } @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } } .calculator-widget { background: linear-gradient(135deg, rgba(74,26,107,0.06) 0%, rgba(201,169,110,0.08) 100%); border: 1px solid rgba(201,169,110,0.3); border-radius: var(--radius-lg); padding: 40px 35px; margin-bottom: 40px; text-align: center; position: relative; overflow: hidden; } .calculator-widget::before { content: ''; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%); pointer-events: none; } .calculator-widget h3 { font-size: 22px; color: var(--brand-purple); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; } .calculator-widget h3 .ico { width: 1.4em; height: 1.4em; color: var(--brand-gold); } .calc-placeholder { position: relative; z-index: 1; } .calc-icon { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(74,26,107,0.25); } .calc-icon .ico { width: 2em; height: 2em; color: var(--brand-gold-light); } .calc-placeholder p { font-size: 16px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 8px; } .calc-note { font-size: 13px !important; color: var(--text-muted) !important; letter-spacing: 1px; } .calc-cta-btn { display: inline-block; margin-top: 16px; padding: 12px 36px; background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-light) 100%); color: #fff; border-radius: 30px; font-size: 15px; letter-spacing: 2px; text-decoration: none; box-shadow: 0 6px 20px rgba(74,26,107,0.3); transition: all 0.3s; } .calc-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(74,26,107,0.4); } /* ===== Page-Specific: news-detail ===== */ :root { --brand-purple: #4a1a6b; --brand-purple-dark: #3a1455; --brand-purple-light: #6b3d8e; --brand-gold: #c9a96e; --brand-gold-light: #e0c896; --brand-gold-dark: #a88a55; --bg-primary: #F3EAF7; --bg-secondary: #EDE4F0; --text-primary: #2d2d2d; --text-secondary: #666; --text-muted: #999; --border-color: #DDD0E5; --white: #ffffff; --shadow-sm: 0 2px 8px rgba(74, 26, 107, 0.08); --shadow-md: 0 4px 20px rgba(74, 26, 107, 0.12); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; } body { padding-top: 70px; font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Noto Serif SC', serif; font-weight: 600; } a { color: var(--brand-purple); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--brand-gold); } img { max-width: 100%; height: auto; display: block; } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .logo { font-size: 0; text-decoration: none; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(255,255,255,0.97); box-shadow: 0 10px 40px rgba(0,0,0,0.15); border-radius: 8px; padding: 10px 0; min-width: 160px; z-index: 100; list-style: none; } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-wrap { background: linear-gradient(180deg, #F8F3FB 0%, #F5EEF8 100%); border-bottom: 1px solid var(--border-color); } .breadcrumb { max-width: 1280px; margin: 0 auto; padding: 14px 24px; font-size: 13px; color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--brand-purple); } .breadcrumb .sep { margin: 0 8px; color: var(--border-color); } .breadcrumb .current { color: var(--brand-purple); font-weight: 500; } .main-container { max-width: 1280px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1fr 340px; gap: 40px; } .article-header { margin-bottom: 32px; } .article-meta-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .article-category { display: inline-block; padding: 6px 16px; background: #3C2854; color: var(--white); border-radius: 20px; font-size: 13px; font-weight: 500; } .article-date, .article-views { font-size: 14px; color: var(--text-muted); } .article-date::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: middle; background: var(--text-muted); -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22/%3E%3C/svg%3E'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .article-views::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: middle; background: var(--text-muted); -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .article-title { font-size: 32px; color: var(--brand-purple); line-height: 1.4; margin-bottom: 24px; font-weight: 600; letter-spacing: 1px; } /* v2.5.8: 微信分享弹窗 */ .wechat-share-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .wechat-share-overlay.active { display: flex; } .wechat-share-box { background: var(--white); border-radius: var(--radius-md); padding: 32px; max-width: 320px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: wechat-pop-in 0.3s ease; } @keyframes wechat-pop-in { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .wechat-share-box .qr-placeholder { width: 180px; height: 180px; background: var(--bg-secondary); border-radius: var(--radius-sm); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border-color); color: var(--text-muted); font-size: 13px; } .wechat-share-box h4 { color: var(--brand-purple); font-size: 18px; margin-bottom: 8px; } .wechat-share-box p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; } .wechat-share-box .close-btn { background: var(--brand-purple); color: var(--white); border: none; padding: 10px 30px; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.3s; } .wechat-share-box .close-btn:hover { background: var(--brand-purple-dark); } .featured-image { width: 100%; height: 400px; background: linear-gradient(135deg, var(--bg-secondary), var(--border-color)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; position: relative; overflow: hidden; } .featured-image::after { content: ''; } .article-body { max-width: 720px; font-size: 16px; line-height: 1.8; color: var(--text-primary); } .article-body p { margin-bottom: 20px; } .article-lead { font-size: 18px; color: var(--text-secondary); line-height: 1.8; padding: 24px 28px; background: var(--bg-secondary); border-left: 4px solid var(--brand-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 32px; } .toc-box { background: var(--white); border-radius: var(--radius-md); padding: 24px; margin-bottom: 32px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); } .toc-title { font-size: 18px; color: var(--brand-purple); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--brand-gold); } .toc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .toc-list li a { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 15px; padding: 8px 12px; border-radius: var(--radius-sm); transition: all 0.3s; } .toc-list li a:hover { background: var(--bg-secondary); color: var(--brand-purple); } .toc-list li a .toc-num { width: 28px; height: 28px; background: #3C2854; color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; } .article-body h2 { font-size: 24px; color: var(--brand-purple); margin: 48px 0 20px; padding-left: 16px; border-left: 4px solid var(--brand-gold); line-height: 1.4; } .article-body h3 { font-size: 20px; color: var(--brand-purple); margin: 32px 0 16px; padding-left: 12px; border-left: 3px solid var(--brand-gold-light); line-height: 1.4; } .article-image { width: 100%; margin: 28px 0; border-radius: var(--radius-md); overflow: hidden; } .image-placeholder { width: 100%; height: 300px; background: linear-gradient(135deg, var(--bg-secondary), var(--border-color)); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } .image-placeholder .img-icon { font-size: 48px; opacity: 0.4; } .image-placeholder .img-caption { color: var(--text-muted); font-size: 14px; text-align: center; padding: 0 20px; width: 100%; margin: 0 auto; } .image-caption { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; font-style: italic; } .quote-block { background: #3C2854; color: var(--white); padding: 32px 36px; border-radius: var(--radius-md); margin: 32px 0; position: relative; border-left: 5px solid var(--brand-gold); } .quote-block::before { content: '"'; font-family: 'Noto Serif SC', serif; font-size: 64px; color: var(--brand-gold); opacity: 0.4; position: absolute; top: 8px; left: 20px; line-height: 1; } .quote-block p { font-size: 18px; line-height: 1.8; position: relative; z-index: 1; margin-bottom: 12px; } .quote-block .quote-author { font-size: 14px; color: var(--brand-gold-light); text-align: right; } .comparison-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .comparison-table th { background: #3C2854; color: var(--white); padding: 14px 16px; text-align: left; font-weight: 500; } .comparison-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table tr:nth-child(even) { background: var(--bg-secondary); } .article-body ul, .article-body ol { margin: 20px 0; padding-left: 28px; } .article-body li { margin-bottom: 10px; color: var(--text-secondary); } .article-body ul li::marker { color: var(--brand-gold); } .highlight { background: linear-gradient(transparent 60%, rgba(201, 169, 110, 0.3) 60%); padding: 0 2px; } .related-articles { margin-top: 60px; padding-top: 40px; border-top: 2px solid var(--border-color); } .related-title { font-size: 24px; color: var(--brand-purple); margin-bottom: 28px; display: flex; align-items: center; gap: 10px; } .related-title::before { content: ''; width: 4px; height: 24px; background: var(--brand-gold); border-radius: 2px; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .related-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.3s; text-decoration: none; color: inherit; display: block; } .related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .related-card:hover .related-card-title { color: var(--brand-purple); } .related-card-img { height: 160px; background: linear-gradient(135deg, var(--bg-secondary), var(--border-color)); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; } .related-card-body { padding: 20px; } .related-card-category { font-size: 12px; color: var(--brand-gold-dark); margin-bottom: 8px; font-weight: 500; } .related-card-title { font-size: 15px; color: var(--text-primary); line-height: 1.5; margin-bottom: 10px; transition: color 0.3s; } .related-card-date { font-size: 12px; color: var(--text-muted); } .sidebar { display: flex; flex-direction: column; gap: 28px; } .widget { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); } .widget-title { font-size: 17px; color: var(--brand-purple); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--brand-gold); display: flex; align-items: center; gap: 8px; } .widget-title .icon { font-size: 18px; } .widget-toc { position: sticky; top: 90px; } .sidebar-toc-list { list-style: none; display: flex; flex-direction: column; gap: 4px; } .sidebar-toc-list li a { display: block; padding: 8px 12px; color: var(--text-secondary); font-size: 14px; border-radius: var(--radius-sm); transition: all 0.3s; border-left: 3px solid transparent; } .sidebar-toc-list li a:hover { background: var(--bg-secondary); color: var(--brand-purple); border-left-color: var(--brand-gold); } .sidebar-toc-list li.toc-h2 a { padding-left: 12px; font-weight: 500; } .sidebar-toc-list li.toc-h3 a { padding-left: 24px; font-size: 13px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-block; padding: 6px 14px; background: var(--bg-secondary); border-radius: 20px; font-size: 13px; color: var(--text-secondary); transition: all 0.3s; } .tag-cloud a:hover { background: #3C2854; color: var(--white); } .tag-cloud .tag-lg { font-size: 15px; padding: 8px 16px; } .tag-cloud .tag-sm { font-size: 12px; padding: 4px 10px; } .popular-list { display: flex; flex-direction: column; gap: 16px; } .popular-item { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; } .popular-thumb { width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--brand-purple); opacity: 0.5; } .popular-info h4 { font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; } .popular-info h4 a { color: var(--text-primary); } .popular-info h4 a:hover { color: var(--brand-purple); } .popular-info .pop-date { font-size: 12px; color: var(--text-muted); } .cta-widget { background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark)); color: var(--white); text-align: center; padding: 32px 24px; } .cta-widget-title { font-size: 18px; margin-bottom: 8px; color: var(--brand-gold); } .cta-widget-desc { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; line-height: 1.6; } .cta-widget-btn { display: inline-block; padding: 12px 32px; background: var(--brand-gold); color: var(--brand-purple); border-radius: 30px; font-size: 15px; font-weight: 500; transition: all 0.3s; } .cta-widget-btn:hover { background: var(--brand-gold-light); transform: translateY(-2px); } .article-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-color); } .share-section { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; } .share-label { font-size: 14px; color: var(--text-muted); } .share-buttons { display: flex; gap: 10px; } .share-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: all 0.3s; border: 1px solid var(--border-color); background: var(--white); } .share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .share-wechat:hover { background: #07c160; color: var(--white); border-color: #07c160; } .share-weibo:hover { background: #e6162d; color: var(--white); border-color: #e6162d; } .share-qq:hover { background: #12b7f5; color: var(--white); border-color: #12b7f5; } .share-link:hover { background: #3C2854; color: var(--white); border-color: var(--brand-purple); } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 48px; } .post-nav-item { background: var(--white); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); transition: all 0.3s; text-decoration: none; color: inherit; } .post-nav-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .post-nav-item:hover .post-nav-title { color: var(--brand-purple); } .post-nav-label { font-size: 12px; color: var(--brand-gold-dark); margin-bottom: 8px; font-weight: 500; } .post-nav-prev .post-nav-label::before { content: '← '; } .post-nav-next { text-align: right; } .post-nav-next .post-nav-label::after { content: ' →'; } .post-nav-title { font-size: 15px; color: var(--text-primary); line-height: 1.5; transition: color 0.3s; } .comments-area { background: var(--white); border-radius: var(--radius-md); padding: 40px; box-shadow: var(--shadow-sm); } .comments-title { font-size: 20px; color: var(--brand-purple); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--brand-gold); } .comments-placeholder { text-align: center; padding: 60px 20px; color: var(--text-muted); } .comments-placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .comments-placeholder-text { font-size: 15px; margin-bottom: 20px; } .comments-placeholder-btn { display: inline-block; padding: 10px 28px; background: #3C2854; color: var(--white); border-radius: 25px; font-size: 14px; transition: all 0.3s; } .comments-placeholder-btn:hover { background: var(--brand-purple-light); transform: translateY(-2px); } /* v2.4.9: 移除 footer margin-top，消除 CTA 与 footer 之间的空隙 */ .footer { background: #3C2854; color: rgba(255,255,255,0.7); margin-top: 0; } .footer .container { padding: 21px 24px 11px; } /* 当 CTA section 紧邻 footer 时，确保无缝衔接 */ .cta-section + .footer, .cta-section + footer.footer { margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 24px; } .footer-brand .footer-logo { margin-bottom: 15px; } .footer-brand p { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.6); } .footer-links h4 { font-size: 14px; color: var(--brand-gold); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; } .footer-links ul { list-style: none; } .footer-links a { color: rgba(255,255,255,0.6); font-size: 14px; transition: color 0.3s; } .footer-links a:hover { color: var(--brand-gold); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.4); } @media (max-width: 1024px) { .main-container { grid-template-columns: 1fr; } .sidebar { order: 2; margin-top: 40px; } .related-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; font-size: 24px; cursor: pointer; color: #fff; z-index: 1001; } .header.scrolled .mobile-menu-btn { color: #4a1a6b; } .article-title { font-size: 28px; } .featured-image { height: 240px; } .article-body { font-size: 15px; } .article-body h2 { font-size: 20px; } .article-body h3 { font-size: 18px; } .quote-block { padding: 24px; } .quote-block p { font-size: 16px; } .related-grid { grid-template-columns: 1fr; } .post-nav { grid-template-columns: 1fr; } .post-nav-next { text-align: left; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .main-container { padding: 24px 16px; } /* v2.5.8: 移动端面包屑优化 */ .breadcrumb-wrap .breadcrumb { padding: 10px 16px; font-size: 12px; flex-wrap: wrap; gap: 4px; } .breadcrumb-wrap .breadcrumb .sep { margin: 0 4px; } .breadcrumb-wrap .breadcrumb a, .breadcrumb-wrap .breadcrumb .current { white-space: nowrap; line-height: 1.8; } .logo-img { max-height: 36px !important; height: 36px !important; } } @media (max-width: 480px) { .article-meta-top { gap: 10px; } .comparison-table { font-size: 13px; } .comparison-table th, .comparison-table td { padding: 10px; } } .header { background: linear-gradient(180deg, rgba(45,27,78,0.95) 0%, rgba(74,26,107,0.9) 100%); box-shadow: 0 2px 15px rgba(0,0,0,0.12); } .header .nav-menu a { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.3); font-weight: 500; } .header .nav-cta { background: rgba(201,169,110,0.95); } .header .mobile-menu-btn { color: #fff; } .header.scrolled { background: linear-gradient(180deg, rgba(45,27,78,0.97) 0%, rgba(74,26,107,0.92) 100%); box-shadow: 0 2px 20px rgba(0,0,0,0.15); } .header.scrolled .nav-menu a { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.3); font-weight: 500; } .header.scrolled .nav-cta { background: rgba(201,169,110,0.95); } .header.scrolled .mobile-menu-btn { color: #fff; } /* ===== Page-Specific: news ===== */ .section { padding: 60px 0; } .section-title { font-size: 32px; text-align: center; margin-bottom: 25px; color: #4a1a6b; font-weight: 500; letter-spacing: 4px; } .page-hero { background-color: #1a1228; background-size: cover; background-position: center; background-repeat: no-repeat; height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .page-hero h1 { font-size: 36px; font-weight: 300; letter-spacing: 6px; margin-bottom: 15px; } .page-hero h1 span { color: #c9a96e; font-weight: 500; } .page-hero p { font-size: 15px; color: rgba(255,255,255,0.7); letter-spacing: 2px; } .breadcrumb { background: #fff; padding: 15px 0; border-bottom: 1px solid #E8DCEF; } .breadcrumb-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; } .breadcrumb-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-inner a:hover { color: #4a1a6b; } .breadcrumb-inner .current { color: #4a1a6b; } .breadcrumb-sep { color: #ccc; } .filter-bar { background: #fff; padding: 25px 0; border-bottom: 1px solid #E8DCEF; position: sticky; top: 70px; z-index: 100; } .filter-inner { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .filter-label { font-size: 14px; color: #666; font-weight: 500; } .filter-tags { display: flex; gap: 10px; flex-wrap: wrap; } .filter-tag { padding: 8px 20px; border-radius: 25px; border: 1px solid #DDD0E5; background: #fff; color: #666; font-size: 14px; cursor: pointer; transition: all 0.3s; text-decoration: none; } .filter-tag:hover, .filter-tag.active { background: #7732B4; color: #fff; border-color: #4a1a6b; } .news-list { background: #FFFFFF; } .news-items { display: flex; flex-direction: column; gap: 30px; } .news-item { display: grid; grid-template-columns: 280px 1fr; gap: 30px; background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); text-decoration: none; color: inherit; } .news-item:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .news-item-img { min-height: 200px; background: linear-gradient(135deg, #E8DCEF, #DDD0E5); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .news-item-img::after { content: attr(data-category); position: absolute; top: 15px; left: 15px; background: #7732B4; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; } .news-item-content { padding: 30px; display: flex; flex-direction: column; justify-content: center; } .news-item-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; font-size: 13px; color: #999; } .news-item-date { color: #c9a96e; letter-spacing: 1px; } .news-item-category { background: rgba(201,169,110,0.1); color: #c9a96e; padding: 3px 12px; border-radius: 12px; font-size: 12px; } .news-item-title { font-size: 20px; color: #333; margin-bottom: 15px; line-height: 1.5; font-weight: 500; transition: color 0.3s; } .news-item:hover .news-item-title { color: #4a1a6b; } .news-item-excerpt { font-size: 15px; color: #888; line-height: 1.8; margin-bottom: 20px; } .news-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .read-more { color: #4a1a6b; text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.3s; font-weight: 500; } .read-more:hover { gap: 10px; } .news-item-stats { display: flex; gap: 20px; font-size: 13px; color: #bbb; } .news-item-stats span { display: flex; align-items: center; gap: 5px; } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; } .page-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid #DDD0E5; background: #fff; color: #666; font-size: 14px; cursor: pointer; transition: all 0.3s; text-decoration: none; } .page-btn:hover, .page-btn.active { background: #7732B4; color: #fff; border-color: #4a1a6b; } .page-btn.disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 1024px) { .news-item { grid-template-columns: 240px 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .page-hero h1 { font-size: 28px; } .news-item { grid-template-columns: 1fr; } .news-item-img { min-height: 180px; } .news-item-content { padding: 20px; } .filter-inner { flex-direction: column; align-items: flex-start; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 40px 0; } .section-title { font-size: 24px; } .logo-img { max-height: 48px !important; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } /* ===== Page-Specific: product-detail ===== */ /* v2.5.7: 强制隐藏 WooCommerce 默认产品图片输出，防止与主题自定义图片区叠加 */ .single-product .woocommerce-product-gallery, .single-product .woocommerce-product-gallery__wrapper, .single-product .woocommerce-product-gallery__image, .single-product .flex-viewport, .single-product .flex-control-thumbs { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; } .breadcrumb { padding: 90px 0 15px; background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-inner { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-inner a:hover { color: #4a1a6b; } .breadcrumb-inner span { color: #ccc; } .breadcrumb-inner .current { color: #4a1a6b; } .product-hero { padding: 40px 0 60px; } .product-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .product-gallery { position: sticky; top: 90px; } .main-image { width: 100%; height: 500px; background: #EDE4F0; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.08); } .main-image img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 16px; } .image-thumbs { display: flex; gap: 12px; margin-top: 20px; } .thumb { width: 80px; height: 80px; background: #EDE4F0; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid #DDD0E5; position: relative; overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .thumb.active { border-color: #4a1a6b; } .product-info { padding-top: 10px; } .product-brand { font-size: 14px; color: #c9a96e; letter-spacing: 2px; margin-bottom: 10px; } .product-hero .product-name { font-size: 36px; color: #4a1a6b; font-weight: 600; margin-bottom: 20px; line-height: 1.3; } .product-tags { display: flex; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .product-tag-main { background: #7732B4; color: #fff; padding: 6px 18px; border-radius: 20px; font-size: 14px; letter-spacing: 1px; } .product-tag-sub { background: #EDE4F0; color: #777; padding: 6px 15px; border-radius: 20px; font-size: 13px; border: 1px solid #DDD0E5; } /* v2.5.27: 产品标签链接 hover 样式 */ a.product-tag-main, a.product-tag-sub { text-decoration: none; display: inline-block; cursor: pointer; transition: all 0.25s; } a.product-tag-main:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(119, 50, 180, 0.35); } a.product-tag-sub:hover { background: #7732B4; color: #fff; border-color: #7732B4; transform: translateY(-2px); } .energy-keywords { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; } .energy-keyword { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #666; } .energy-keyword::before { content: '◆'; color: #c9a96e; font-size: 8px; } .product-story { background: #EDE4F0; padding: 20px 25px; border-radius: 12px; margin-bottom: 30px; border-left: 4px solid #c9a96e; } .product-story p { font-size: 16px; color: #555; line-height: 1.8; font-style: italic; } .product-story .story-highlight { color: #4a1a6b; font-weight: 500; } .product-price { font-size: 18px; color: #c9a96e; font-weight: 500; margin-bottom: 20px; letter-spacing: 2px; } .product-actions { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .btn-primary { background: #7732B4; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-size: 16px; letter-spacing: 2px; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover { background: #5a2080; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(74,26,107,0.3); } .btn-secondary { background: #fff; color: #4a1a6b; padding: 15px 30px; border-radius: 30px; text-decoration: none; font-size: 16px; border: 2px solid #4a1a6b; transition: all 0.3s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .btn-secondary:hover { background: #7732B4; color: #fff; } .product-meta { display: flex; gap: 30px; font-size: 14px; color: #999; flex-wrap: wrap; } .product-meta span { display: flex; align-items: center; gap: 6px; } .product-meta span::before { content: '✓'; color: #c9a96e; font-weight: bold; } .pc-only { display: block; } .mobile-only { display: none; } @media (max-width: 768px) { .pc-only { display: none; } .mobile-only { display: block; } } .qr-buy-section { background: #fff; padding: 40px 0; border-top: 1px solid #E8DCEF; border-bottom: 1px solid #E8DCEF; } .qr-buy-content { display: flex; align-items: center; justify-content: center; gap: 50px; flex-wrap: wrap; } .qr-buy-item { text-align: center; } .qr-buy-box { width: 180px; height: 180px; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 2px solid #DDD0E5; } .qr-buy-box::after { content: '抖音直播间\n二维码'; color: #999; font-size: 14px; white-space: pre-line; text-align: center; } /* 2026-08-27: 有真实二维码图片时隐藏伪元素占位文字，防止文字叠在二维码上（仅在图片缺失时保留占位提示） */ .qr-buy-box.has-img::after { content: none; } .qr-buy-label { font-size: 16px; color: #4a1a6b; font-weight: 500; letter-spacing: 2px; margin-bottom: 8px; } .qr-buy-hint { font-size: 13px; color: #c9a96e; } .qr-buy-divider { width: 1px; height: 140px; background: #DDD0E5; } .qr-buy-text { max-width: 350px; } .qr-buy-text h3 { font-size: 22px; color: #4a1a6b; margin-bottom: 12px; font-weight: 500; } .qr-buy-text p { font-size: 15px; color: #888; line-height: 1.8; } .qr-buy-btn { margin-top: 20px; } .params-section { background: #FFFFFF; } .params-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .param-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: all 0.3s; } .param-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); } .param-label { font-size: 13px; color: #999; letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; } .param-value { font-size: 18px; color: #4a1a6b; font-weight: 500; } .param-note { font-size: 13px; color: #bbb; margin-top: 5px; } .wuxing-section { background: #fff; } .wuxing-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .wuxing-visual { background: #EDE4F0; height: 400px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; } .wuxing-visual img { position: relative; z-index: 1; } .wuxing-visual::after { content: '[五行属性图]\n火行能量可视化'; color: #bbb; font-size: 14px; text-align: center; white-space: pre-line; z-index: 0; } .wuxing-info h3 { font-size: 24px; color: #4a1a6b; margin-bottom: 20px; font-weight: 500; } .wuxing-info h3 span { color: #c9a96e; } .wuxing-desc { font-size: 16px; color: #666; line-height: 1.8; margin-bottom: 25px; } .wuxing-attributes { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 25px; } .wuxing-attr { background: #FFFFFF; padding: 10px 20px; border-radius: 25px; font-size: 14px; color: #555; border: 1px solid #E8DCEF; } .wuxing-attr strong { color: #4a1a6b; } .wuxing-benefits { list-style: none; } .wuxing-benefits li { padding: 10px 0; padding-left: 25px; position: relative; font-size: 15px; color: #666; border-bottom: 1px solid #EDE4F0; } .wuxing-benefits li:last-child { border-bottom: none; } .wuxing-benefits li::before { content: '◆'; position: absolute; left: 0; color: #c9a96e; } .story-section { background: radial-gradient(ellipse at 30% 20%, rgba(201,169,110,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(106,61,143,0.15) 0%, transparent 50%), linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 100%); color: #fff; position: relative; overflow: hidden; } .story-content { position: relative; z-index: 2; } .story-section .section-title { color: #fff; } .story-section .section-subtitle { color: rgba(255,255,255,0.6); } .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .story-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 40px 30px; transition: all 0.4s; } .story-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-8px); } .story-icon { width: 60px; height: 60px; background: #c9a96e; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; font-size: 24px; color: #fff; } .story-card h4 { font-size: 20px; margin-bottom: 15px; font-weight: 500; } .story-card p { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.8; } .story-quote { text-align: center; margin-top: 50px; font-size: 22px; color: #c9a96e; font-style: italic; letter-spacing: 3px; position: relative; z-index: 1; } .match-section { background: #FFFFFF; } .match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .match-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.4s; } .match-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .match-img { height: 200px; background: #EDE4F0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* v2.5.51: 删除 .match-img::after 伪元素，不再无条件显示占位文字 */ .match-info { padding: 25px; } .match-info h4 { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .match-info p { font-size: 14px; color: #888; line-height: 1.6; } .match-tag { display: inline-block; background: #c9a96e; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; margin-top: 10px; } .care-section { background: #fff; } .care-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .care-card { background: #FFFFFF; border-radius: 16px; padding: 40px; border: 1px solid #E8DCEF; } .care-card h4 { font-size: 20px; color: #4a1a6b; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-weight: 500; } .care-card h4 span { font-size: 24px; } .care-list { list-style: none; } .care-list li { padding: 12px 0; padding-left: 30px; position: relative; font-size: 15px; color: #666; border-bottom: 1px solid #E8DCEF; } .care-list li:last-child { border-bottom: none; } .care-list li::before { content: '◆'; position: absolute; left: 0; color: #c9a96e; } .care-note { margin-top: 20px; padding: 15px; background: #fff; border-radius: 8px; font-size: 14px; color: #888; border-left: 3px solid #c9a96e; } .trust-section { background: #EDE4F0; } .trust-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .trust-cert { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center; } .cert-image { width: 100%; height: 300px; background: #EDE4F0; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .cert-image::after { content: '[质检证书展示]\nNGTC天然水晶鉴定证书'; color: #bbb; font-size: 14px; text-align: center; white-space: pre-line; } .cert-title { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .cert-desc { font-size: 14px; color: #888; } .trust-info h3 { font-size: 28px; color: #4a1a6b; margin-bottom: 20px; font-weight: 500; } .trust-info p { font-size: 16px; color: #666; line-height: 1.8; margin-bottom: 25px; } .trust-features { list-style: none; } .trust-features li { padding: 15px 0; padding-left: 35px; position: relative; font-size: 15px; color: #555; border-bottom: 1px solid #E8DCEF; } .trust-features li:last-child { border-bottom: none; } .trust-features li::before { content: '✓'; position: absolute; left: 0; color: #c9a96e; font-weight: bold; font-size: 18px; } .related-section { background: #FFFFFF; } .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .related-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.4s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); text-decoration: none; color: inherit; display: block; } .related-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } .related-img { height: 220px; background: #EDE4F0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } /* v2.5.51: 删除 .related-img::after 伪元素，不再无条件显示占位文字 */ .related-tag { position: absolute; top: 12px; left: 12px; background: #c9a96e; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; } .related-info { padding: 20px; } .related-info h4 { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: 500; } .related-info .related-attr { display: flex; gap: 8px; margin-bottom: 10px; } .related-info .related-attr span { font-size: 12px; color: #c9a96e; border: 1px solid #e8d5a8; padding: 2px 8px; border-radius: 10px; } .related-info .related-price { font-size: 14px; color: #c9a96e; font-weight: 500; } @media (max-width: 1024px) { .product-hero-grid { gap: 40px; } .params-grid { grid-template-columns: repeat(2, 1fr); } .story-grid { grid-template-columns: repeat(2, 1fr); } .related-grid { grid-template-columns: repeat(3, 1fr); } .match-grid { grid-template-columns: 1fr; } .trust-content { grid-template-columns: 1fr; } .wuxing-content { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .product-hero-grid { grid-template-columns: 1fr; } .product-gallery { position: relative; top: 0; } .main-image { height: 350px; } .product-hero-grid .product-name { font-size: 28px; } .params-grid { grid-template-columns: 1fr; } .story-grid { grid-template-columns: 1fr; } .care-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: repeat(2, 1fr); } .qr-buy-content { flex-direction: column; gap: 30px; } .qr-buy-divider { display: none; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .wuxing-visual { height: 280px; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .product-actions { flex-direction: column; } .product-actions.pc-only { display: none !important; } .product-actions.mobile-only { display: flex !important; } .product-tags { gap: 8px; } .energy-keywords { gap: 10px; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } /* ===== Page-Specific: store ===== */ .logo { font-size: 0; text-decoration: none; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .store-hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3C2854 100%); margin-top: 0; } .store-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 1; } .store-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,27,78,0.5); } .store-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 700px; padding: 0 20px; width: 100%; margin: 0 auto; } .store-hero-badge { display: inline-block; background: rgba(201,169,110,0.2); border: 1px solid #c9a96e; color: #c9a96e; padding: 8px 25px; border-radius: 25px; font-size: 14px; letter-spacing: 3px; margin-bottom: 25px; } .store-hero-title { font-size: 42px; font-weight: 300; letter-spacing: 6px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .store-hero-title span { color: #c9a96e; font-weight: 500; } .store-hero-address { font-size: 16px; color: rgba(255,255,255,0.8); letter-spacing: 2px; margin-bottom: 30px; } .store-hero-cta { display: inline-flex; gap: 15px; } .store-hero-btn { background: #c9a96e; color: #fff; padding: 12px 35px; border-radius: 25px; text-decoration: none; font-size: 15px; letter-spacing: 2px; transition: all 0.3s; } .store-hero-btn:hover { background: #d4b87a; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(201,169,110,0.4); } .store-hero-btn-outline { border: 1px solid rgba(255,255,255,0.5); color: #fff; padding: 12px 35px; border-radius: 25px; text-decoration: none; font-size: 15px; letter-spacing: 2px; transition: all 0.3s; } .store-hero-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: #c9a96e; } .store-info-bar { background: linear-gradient(180deg, #F8F3FB 0%, #F5EEF8 100%); padding: 40px 0; border-bottom: 1px solid #E8DCEF; } .store-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; } .store-info-item { padding: 20px; } .store-info-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; color: #fff; font-size: 20px; } .store-info-label { font-size: 13px; color: #999; margin-bottom: 5px; letter-spacing: 1px; } .store-info-value { font-size: 16px; color: #4a1a6b; font-weight: 500; } .tab-nav { background: linear-gradient(180deg, #F8F3FB 0%, #F5EEF8 100%); padding: 0; border-bottom: 2px solid #E8DCEF; position: sticky; top: 70px; z-index: 50; box-shadow: 0 4px 15px rgba(0,0,0,0.04); } .tab-nav-inner { display: flex; justify-content: center; gap: 0; max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; margin: 0 auto; } .tab-btn { padding: 20px 40px; font-size: 16px; color: #999; text-decoration: none; position: relative; transition: color 0.3s; letter-spacing: 2px; cursor: pointer; border: none; background: none; font-family: inherit; } .tab-btn:hover { color: #4a1a6b; } .tab-btn.active { color: #4a1a6b; font-weight: 500; } .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 20%; width: 60%; height: 3px; background: #c9a96e; border-radius: 2px; } .tab-panel { display: none; } .tab-panel.active { display: block; } .interior { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 50%, #EDE4F0 100%); } .interior-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .interior-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all 0.4s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .interior-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } .interior-img { height: 240px; background: #EDE4F0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .interior-img::after { content: '[空间图片占位]'; color: #bbb; font-size: 14px; } .interior-tag { position: absolute; top: 15px; left: 15px; background: #7732B4; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; } .interior-info { padding: 30px; } .interior-name { font-size: 20px; color: #4a1a6b; margin-bottom: 12px; font-weight: 500; } .interior-desc { font-size: 14px; color: #777; line-height: 1.8; } .interior-features { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; } .interior-features span { font-size: 12px; color: #c9a96e; border: 1px solid #e8d5a8; padding: 4px 12px; border-radius: 12px; } .concept { background: linear-gradient(135deg, #3d2b1e 0%, #5a3a2a 50%, #2d4a3e 100%); color: #fff; position: relative; overflow: hidden; } .concept::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139,115,85,0.12) 0%, transparent 70%); } .concept-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .concept-text h2 { font-size: 28px; margin-bottom: 25px; letter-spacing: 4px; color: #d4c8a8; font-weight: 500; } .concept-text p { font-size: 16px; line-height: 2; color: rgba(255,255,255,0.8); margin-bottom: 20px; } .concept-quote { font-size: 18px; font-style: italic; color: #c9a96e; border-left: 3px solid #c9a96e; padding-left: 20px; margin-top: 30px; } .concept-visual { background: rgba(255,255,255,0.06); border: 1px solid rgba(180,160,120,0.2); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .concept-element { text-align: center; padding: 25px 15px; background: rgba(200,180,140,0.08); border-radius: 12px; transition: all 0.3s; } .concept-element:hover { background: rgba(180,160,120,0.15); transform: translateY(-5px); } .concept-element-icon { font-size: 32px; margin-bottom: 12px; } .concept-element-title { font-size: 15px; color: #fff; margin-bottom: 8px; } .concept-element-desc { font-size: 13px; color: rgba(255,255,255,0.6); } .areas { background: linear-gradient(180deg, #F5EEF8 0%, #F0E6F5 100%); } .areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .area-card { display: flex; gap: 25px; padding: 35px; background: #FFFFFF; border-radius: 16px; transition: all 0.3s; border: 1px solid #E8DCEF; } .area-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: #c9a96e; } .area-icon { width: 60px; height: 60px; min-width: 60px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; } .area-content h3 { font-size: 20px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .area-content p { font-size: 14px; color: #777; line-height: 1.8; margin-bottom: 10px; } .area-content ul { list-style: none; } .area-content ul li { font-size: 13px; color: #999; padding: 3px 0; display: flex; align-items: center; gap: 8px; } .area-content ul li::before { content: '\25C6'; color: #c9a96e; font-size: 8px; } .transport { background: linear-gradient(180deg, #F0E6F5 0%, #F5EEF8 100%); } .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .transport-card { background: #fff; border-radius: 16px; padding: 40px 30px; text-align: center; transition: all 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .transport-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .transport-icon { width: 60px; height: 60px; background: #EDE4F0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; } .transport-title { font-size: 20px; color: #4a1a6b; margin-bottom: 15px; font-weight: 500; } .transport-detail { font-size: 14px; color: #777; line-height: 2; } .transport-detail strong { color: #4a1a6b; } .landmarks { background: linear-gradient(180deg, #F5EEF8 0%, #F8F3FB 100%); } .landmarks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; } .landmark-item { text-align: center; padding: 30px 20px; border-radius: 12px; transition: all 0.3s; background: #FFFFFF; } .landmark-item:hover { background: #EDE4F0; transform: translateY(-5px); } .landmark-icon { font-size: 36px; margin-bottom: 15px; } .landmark-name { font-size: 16px; color: #4a1a6b; margin-bottom: 8px; font-weight: 500; } .landmark-distance { font-size: 13px; color: #c9a96e; } .landmark-desc { font-size: 13px; color: #999; margin-top: 8px; } .sourcing { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 100%); } .sourcing-intro { text-align: center; max-width: 700px; margin: 0 auto 50px; } .sourcing-intro p { font-size: 16px; color: #666; line-height: 1.8; } .sourcing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .sourcing-card { background: #FFFFFF; border-radius: 16px; padding: 35px 25px; text-align: center; transition: all 0.4s; border: 1px solid #E8DCEF; position: relative; } .sourcing-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); } .sourcing-step { width: 50px; height: 50px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #fff; font-size: 20px; font-weight: 500; } .sourcing-title { font-size: 18px; color: #4a1a6b; margin-bottom: 12px; font-weight: 500; } .sourcing-desc { font-size: 14px; color: #777; line-height: 1.7; } .quality { background: #2d1b4e; color: #fff; position: relative; overflow: hidden; } .quality::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 70%); } .quality-content { position: relative; z-index: 1; } .quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .quality-card { background: rgba(255,255,255,0.05); border-radius: 16px; padding: 40px 30px; text-align: center; border: 1px solid rgba(255,255,255,0.1); transition: all 0.4s; } .quality-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-8px); } .quality-icon { width: 70px; height: 70px; background: rgba(201,169,110,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #c9a96e; font-size: 32px; } .quality-title { font-size: 20px; color: #c9a96e; margin-bottom: 15px; font-weight: 500; } .quality-desc { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.8; } .quality-highlight { text-align: center; margin-top: 50px; padding: 30px; border-radius: 12px; background: rgba(255,255,255,0.05); } .quality-highlight h4 { font-size: 18px; color: #c9a96e; margin-bottom: 15px; } .quality-highlight p { font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.8; } .design { background: linear-gradient(180deg, #F5EEF8 0%, #F0E6F5 100%); } .design-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .design-text h3 { font-size: 24px; color: #4a1a6b; margin-bottom: 20px; font-weight: 500; letter-spacing: 2px; } .design-text p { font-size: 16px; color: #666; line-height: 2; margin-bottom: 15px; } .design-principles { margin-top: 30px; } .design-principle { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; } .design-principle .num { width: 36px; height: 36px; background: #7732B4; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .design-principle .text h4 { font-size: 16px; color: #4a1a6b; margin-bottom: 5px; } .design-principle .text p { font-size: 14px; color: #888; line-height: 1.6; margin-bottom: 0; } .design-img { height: 400px; border-radius: 16px; overflow: hidden; } .design-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .craft-process { background: linear-gradient(180deg, #F0E6F5 0%, #F5EEF8 100%); } .process-flow { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; max-width: 1000px; margin: 0 auto; position: relative; } .process-flow::before { content: ''; position: absolute; top: 35px; left: 60px; right: 60px; height: 3px; background: linear-gradient(to right, #c9a96e, #4a1a6b); z-index: 0; } .process-step { flex: 1; text-align: center; position: relative; z-index: 1; } .process-circle { width: 70px; height: 70px; background: #fff; border: 3px solid #c9a96e; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #4a1a6b; font-size: 24px; } .process-title { font-size: 16px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .process-desc { font-size: 13px; color: #888; line-height: 1.6; } .certificate { background: linear-gradient(180deg, #F5EEF8 0%, #F8F3FB 100%); } .cert-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .cert-img { height: 350px; border-radius: 16px; overflow: hidden; } .cert-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .cert-text h3 { font-size: 24px; color: #4a1a6b; margin-bottom: 20px; font-weight: 500; } .cert-text p { font-size: 15px; color: #666; line-height: 2; margin-bottom: 15px; } .cert-features { margin-top: 25px; } .cert-feature { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cert-feature::before { content: '\2713'; color: #c9a96e; font-size: 18px; font-weight: bold; } .cert-feature span { font-size: 14px; color: #555; } .cert-guarantee { margin-top: 30px; padding: 20px; background: #fff; border-radius: 12px; border-left: 4px solid #c9a96e; } .cert-guarantee h4 { font-size: 16px; color: #4a1a6b; margin-bottom: 8px; } .cert-guarantee p { font-size: 14px; color: #888; margin-bottom: 0; } .svc-grid-section { background: linear-gradient(180deg, #F8F3FB 0%, #F3EAF7 100%); } .services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px; } .service-card { background: #FFFFFF; border-radius: 16px; padding: 40px 25px; text-align: center; transition: all 0.4s; border: 1px solid #E8DCEF; position: relative; overflow: hidden; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #c9a96e; transform: scaleX(0); transition: transform 0.4s; } .service-card:hover::before { transform: scaleX(1); } .service-icon { width: 70px; height: 70px; background: linear-gradient(135deg, #4a1a6b, #6a3d8f); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #fff; font-size: 28px; } .service-title { font-size: 18px; color: #4a1a6b; margin-bottom: 12px; font-weight: 500; } .service-desc { font-size: 13px; color: #777; line-height: 1.7; margin-bottom: 15px; } .service-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .service-tag { font-size: 11px; color: #c9a96e; border: 1px solid #e8d5a8; padding: 3px 10px; border-radius: 12px; } .svc-process { background: linear-gradient(180deg, #F3EAF7 0%, #F8F3FB 100%); } .process-intro { text-align: center; max-width: 700px; margin: 0 auto 50px; } .process-intro p { font-size: 16px; color: #666; line-height: 1.8; } .process-steps { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; max-width: 900px; margin: 0 auto; position: relative; } .process-steps::before { content: ''; position: absolute; top: 40px; left: 80px; right: 80px; height: 3px; background: linear-gradient(to right, #c9a96e, #4a1a6b); z-index: 0; } .process-step-item { flex: 1; text-align: center; position: relative; z-index: 1; } .step-circle { width: 80px; height: 80px; background: #fff; border: 3px solid #c9a96e; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #4a1a6b; font-size: 28px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .step-title { font-size: 18px; color: #4a1a6b; margin-bottom: 10px; font-weight: 500; } .step-desc { font-size: 13px; color: #888; line-height: 1.6; } .process-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; max-width: 900px; margin-left: auto; margin-right: auto; } .process-detail-card { background: #fff; border-radius: 12px; padding: 30px; display: flex; gap: 20px; align-items: flex-start; border: 1px solid #E8DCEF; transition: all 0.3s; } .process-detail-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.06); } .detail-img { width: 120px; height: 120px; background: linear-gradient(135deg, #EDE4F0 0%, #DDD0E5 100%); border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .detail-text h4 { font-size: 16px; color: #4a1a6b; margin-bottom: 8px; } .detail-text p { font-size: 13px; color: #888; line-height: 1.7; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 20px; } .footer-brand-btm { margin-top: 12px; } .footer-brand-btm p { font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 4px; line-height: 1.6; } @media (max-width: 1024px) { .interior-grid { grid-template-columns: repeat(2, 1fr); } .areas-grid { grid-template-columns: 1fr; } .transport-grid { grid-template-columns: repeat(2, 1fr); } .landmarks-grid { grid-template-columns: repeat(2, 1fr); } .concept-content { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .store-info-grid { grid-template-columns: repeat(2, 1fr); } .sourcing-grid { grid-template-columns: repeat(2, 1fr); } .quality-grid { grid-template-columns: 1fr; } .design-content { grid-template-columns: 1fr; } .design-img { height: 300px; } .cert-content { grid-template-columns: 1fr; } .cert-img { height: 300px; } .process-flow { flex-wrap: wrap; } .process-flow::before { display: none; } .process-step { flex: 1 1 30%; } .services-grid { grid-template-columns: repeat(3, 1fr); } .process-steps::before { display: none; } .process-steps { flex-wrap: wrap; } .process-step-item { flex: 1 1 45%; } .process-detail { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .store-hero-title { font-size: 28px; } .interior-grid { grid-template-columns: 1fr; } .transport-grid { grid-template-columns: 1fr; } .landmarks-grid { grid-template-columns: repeat(2, 1fr); } .concept-visual { grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 25px; } .concept-element { padding: 18px 10px; } .concept-element-icon { font-size: 24px; } .concept-element-title { font-size: 14px; } .concept-element-desc { font-size: 11px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .area-card { flex-direction: column; text-align: center; padding: 25px 20px; } .area-icon { width: 50px; height: 50px; font-size: 20px; margin: 0 auto 15px; } .area-content h3 { font-size: 18px; } .area-content p { font-size: 13px; line-height: 1.6; } .area-content ul { text-align: left; padding-left: 20px; font-size: 12px; } .store-info-grid { grid-template-columns: repeat(2, 1fr); } .sourcing-grid { grid-template-columns: 1fr; } .process-step { flex: 1 1 45%; } .services-grid { grid-template-columns: 1fr; } .process-step-item { flex: 1 1 100%; } .tab-btn { padding: 15px 20px; font-size: 14px; } .tab-nav-inner { justify-content: flex-start; overflow-x: auto; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .landmarks-grid { grid-template-columns: 1fr; } .store-hero-cta { flex-direction: column; } .store-info-grid { grid-template-columns: 1fr; } .process-step { flex: 1 1 100%; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ===== Page-Specific: tag-crystal-care ===== */ .logo { font-size: 0; text-decoration: none; } .nav-menu { display: flex; gap: 28px; list-style: none; align-items: center; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: #fff; background: none; border: none; } .dropdown-menu a { display: block; padding: 10px 20px; font-size: 14px; color: #555; text-decoration: none; white-space: nowrap; text-shadow: none !important; } .hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1a1228; margin-top: 0; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 50%, rgba(201,169,110,0.15) 0%, transparent 60%); } .hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(26,18,40,0.7) 0%, rgba(45,27,78,0.5) 50%, rgba(26,18,40,0.7) 100%); z-index: 1; } /* v2.4.0 hero-bg-img: when inline background-image is set via style attribute */ .hero[style*="background-image"]::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,18,40,0.5) 0%, rgba(26,18,40,0.3) 50%, rgba(26,18,40,0.6) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 120px 20px 60px; } .hero-title { font-size: 42px; font-weight: 300; letter-spacing: 8px; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .hero-title span { color: #c9a96e; font-weight: 500; } .hero-subtitle { font-size: 16px; letter-spacing: 6px; color: rgba(255,255,255,0.75); } .breadcrumb { background: #fff; padding: 15px 0; border-bottom: 1px solid #E8DCEF; } .breadcrumb-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; flex-wrap: wrap; } .breadcrumb-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-inner a:hover { color: #4a1a6b; } .breadcrumb-inner .current { color: #4a1a6b; } .breadcrumb-sep { color: #ccc; } .tag-intro { background: #fff; padding: 50px 0; border-bottom: 1px solid #E8DCEF; } .tag-intro-content { max-width: 800px; margin: 0 auto; text-align: center; } .tag-intro-content h2 { font-size: 24px; color: #4a1a6b; margin-bottom: 16px; font-weight: 500; letter-spacing: 2px; } .tag-intro-content p { font-size: 15px; color: #666; line-height: 2; } .tag-intro-content .intro-decoration { width: 60px; height: 3px; background: #c9a96e; margin: 20px auto; border-radius: 2px; } .tag-badge { display: inline-block; padding: 6px 20px; background: rgba(201,169,110,0.15); color: #c9a96e; border-radius: 20px; font-size: 14px; margin-bottom: 16px; letter-spacing: 1px; } .main-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding: 60px 0; } .content-area { min-width: 0; } .article-list { display: flex; flex-direction: column; gap: 24px; } /* v2.5.11: scope to .article-list only */ .article-list .article-card { display: grid; grid-template-columns: 200px 1fr; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s; text-decoration: none; color: inherit; } .article-list .article-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .article-list .article-img { height: 100%; min-height: 160px; background: linear-gradient(135deg, #E8DCEF, #DDD0E5); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .article-list .article-img .img-placeholder { font-size: 40px; opacity: 0.3; color: #4a1a6b; } .article-list .article-content { padding: 24px 28px; } .article-tag { display: inline-block; font-size: 12px; color: #c9a96e; background: rgba(201,169,110,0.1); padding: 4px 12px; border-radius: 12px; margin-bottom: 10px; text-decoration: none; transition: all 0.3s; } .article-tag:hover { background: rgba(201,169,110,0.2); } .article-list .article-title { font-size: 18px; color: #333; margin-bottom: 10px; line-height: 1.5; font-weight: 500; transition: color 0.3s; } .article-list .article-card:hover .article-title { color: #4a1a6b; } .article-list .article-excerpt { font-size: 14px; color: #888; line-height: 1.8; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-footer { display: flex; justify-content: space-between; align-items: center; } .article-date { font-size: 13px; color: #c9a96e; letter-spacing: 1px; } .article-read { font-size: 13px; color: #4a1a6b; text-decoration: none; transition: gap 0.3s; display: inline-flex; align-items: center; gap: 5px; } .article-read::after { content: '\2192'; transition: transform 0.3s; } .article-card:hover .article-read::after { transform: translateX(4px); } .sidebar { display: flex; flex-direction: column; gap: 24px; } .widget { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .widget-title { font-size: 17px; color: #4a1a6b; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #c9a96e; font-weight: 500; display: flex; align-items: center; gap: 8px; } .widget-title .icon { font-size: 18px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-block; padding: 6px 14px; background: #EDE4F0; border-radius: 20px; font-size: 13px; color: #666; text-decoration: none; transition: all 0.3s; } .tag-cloud a:hover { background: #7732B4; color: #fff; } .tag-cloud a.current { background: #7732B4; color: #fff; } .tag-cloud .tag-lg { font-size: 15px; padding: 8px 16px; } .popular-list { display: flex; flex-direction: column; gap: 14px; } .popular-item { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; } .popular-num { width: 28px; height: 28px; border-radius: 50%; background: #EDE4F0; color: #c9a96e; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; } .popular-item:nth-child(1) .popular-num { background: #c9a96e; color: #fff; } .popular-item:nth-child(2) .popular-num { background: #b8956a; color: #fff; } .popular-item:nth-child(3) .popular-num { background: #a88a55; color: #fff; } .popular-info h4 { font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 4px; } .popular-info h4 a { color: #555; text-decoration: none; transition: color 0.3s; } .popular-info h4 a:hover { color: #4a1a6b; } .popular-info .pop-date { font-size: 12px; color: #bbb; } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; } .pagination a, .pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; text-decoration: none; transition: all 0.3s; } .pagination a { background: #fff; color: #555; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .pagination a:hover { background: #7732B4; color: #fff; transform: translateY(-2px); } .pagination .current { background: #7732B4; color: #fff; font-weight: 500; } .pagination .disabled { color: #ccc; background: #EDE4F0; cursor: not-allowed; } .pagination .ellipsis { color: #ccc; background: none; box-shadow: none; } /* CTA区域 - v2.3.3 统一使用首页样式（line 252），不再重复定义 .cta-section */ .cta-content { max-width: 600px; margin: 0 auto; padding: 0 20px; width: 100%; margin: 0 auto; position: relative; z-index: 1; } .cta-content h2 { font-size: 28px; color: #fff; margin-bottom: 16px; font-weight: 400; letter-spacing: 3px; } .cta-content h2 span { color: #c9a96e; } .cta-content p { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 30px; line-height: 1.8; } .cta-btn { display: inline-block; padding: 14px 40px; background: #c9a96e; color: #fff; border-radius: 30px; text-decoration: none; font-size: 15px; letter-spacing: 2px; transition: all 0.3s; } .cta-btn:hover { background: #b8956a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201,169,110,0.4); } @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } .sidebar { order: 2; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background: rgba(45,27,78,0.97); backdrop-filter: blur(10px); flex-direction: column; padding: 20px; gap: 15px; } .nav-menu.active { display: flex; } .nav-menu a { color: rgba(255,255,255,0.92) !important; text-shadow: none !important; } .nav-menu a::after { display: none; } .mobile-menu-btn { display: block; } .nav-cta { display: none; } .hero-title { font-size: 28px; letter-spacing: 4px; } .hero-subtitle { font-size: 14px; letter-spacing: 3px; } .article-list .article-card { grid-template-columns: 1fr; } .article-img { min-height: 180px; } .article-content { padding: 20px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .tag-intro { padding: 40px 0; } .tag-intro-content h2 { font-size: 20px; } .cta-content h2 { font-size: 22px; } .pagination a, .pagination span { min-width: 36px; height: 36px; font-size: 13px; } .logo-img { max-height: 48px !important; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } /* ===== Page-Specific: topic-crystal-knowledge ===== */ .logo { font-size: 0; text-decoration: none; } .nav-menu { display: flex; gap: 28px; list-style: none; align-items: center; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .mobile-menu-btn { display: none; font-size: 24px; cursor: pointer; color: #fff; background: none; border: none; } .dropdown-menu a { display: block; padding: 10px 20px; font-size: 14px; color: #555; text-decoration: none; white-space: nowrap; text-shadow: none !important; } .hero { height: 400px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #1a1228; margin-top: 0; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 50%, rgba(201,169,110,0.15) 0%, transparent 60%); } .hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26,18,40,0.5) 0%, rgba(26,18,40,0.3) 50%, rgba(26,18,40,0.6) 100%); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 120px 20px 60px; } .hero-title { font-size: 48px; font-weight: 300; letter-spacing: 12px; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); } .hero-title span { color: #c9a96e; font-weight: 500; } .hero-subtitle { font-size: 16px; letter-spacing: 6px; color: rgba(255,255,255,0.75); } .breadcrumb { background: #fff; padding: 15px 0; border-bottom: 1px solid #E8DCEF; } .breadcrumb-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #999; flex-wrap: wrap; } .breadcrumb-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-inner a:hover { color: #4a1a6b; } .breadcrumb-inner .current { color: #4a1a6b; } .breadcrumb-sep { color: #ccc; } .topic-intro { background: #fff; padding: 50px 0; border-bottom: 1px solid #E8DCEF; } .topic-intro-content { max-width: 800px; margin: 0 auto; text-align: center; } .topic-intro-content h2 { font-size: 24px; color: #4a1a6b; margin-bottom: 16px; font-weight: 500; letter-spacing: 2px; } .topic-intro-content p { font-size: 15px; color: #666; line-height: 2; } .topic-intro-content .intro-decoration { width: 60px; height: 3px; background: #c9a96e; margin: 20px auto; border-radius: 2px; } .main-layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; padding: 60px 0; } .content-area { min-width: 0; } .article-list { display: flex; flex-direction: column; gap: 24px; } /* v2.5.11: scope to .article-list only */ .article-list .article-card { display: grid; grid-template-columns: 200px 1fr; gap: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.3s; text-decoration: none; color: inherit; } .article-list .article-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); } .article-list .article-img { height: 100%; min-height: 160px; background: linear-gradient(135deg, #E8DCEF, #DDD0E5); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } ..article-list .article-img .img-placeholder { font-size: 40px; opacity: 0.3; color: #4a1a6b; } .article-list .article-content { padding: 24px 28px; } .article-tag { display: inline-block; font-size: 12px; color: #c9a96e; background: rgba(201,169,110,0.1); padding: 4px 12px; border-radius: 12px; margin-bottom: 10px; text-decoration: none; transition: all 0.3s; } .article-tag:hover { background: rgba(201,169,110,0.2); } .article-list .article-title { font-size: 18px; color: #333; margin-bottom: 10px; line-height: 1.5; font-weight: 500; transition: color 0.3s; } .article-list .article-card:hover .article-title { color: #4a1a6b; } .article-list .article-excerpt { font-size: 14px; color: #888; line-height: 1.8; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .article-footer { display: flex; justify-content: space-between; align-items: center; } .article-date { font-size: 13px; color: #c9a96e; letter-spacing: 1px; } .article-read { font-size: 13px; color: #4a1a6b; text-decoration: none; transition: gap 0.3s; display: inline-flex; align-items: center; gap: 5px; } .article-read::after { content: '\2192'; transition: transform 0.3s; } .article-card:hover .article-read::after { transform: translateX(4px); } .sidebar { display: flex; flex-direction: column; gap: 24px; } .widget { background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); } .widget-title { font-size: 17px; color: #4a1a6b; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid #c9a96e; font-weight: 500; display: flex; align-items: center; gap: 8px; } .widget-title .icon { font-size: 18px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-block; padding: 6px 14px; background: #EDE4F0; border-radius: 20px; font-size: 13px; color: #666; text-decoration: none; transition: all 0.3s; } .tag-cloud a:hover { background: #7732B4; color: #fff; } .tag-cloud a.current { background: #7732B4; color: #fff; } .tag-cloud .tag-lg { font-size: 15px; padding: 8px 16px; } .popular-list { display: flex; flex-direction: column; gap: 14px; } .popular-item { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; } .popular-num { width: 28px; height: 28px; border-radius: 50%; background: #EDE4F0; color: #c9a96e; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; } .popular-item:nth-child(1) .popular-num { background: #c9a96e; color: #fff; } .popular-item:nth-child(2) .popular-num { background: #b8956a; color: #fff; } .popular-item:nth-child(3) .popular-num { background: #a88a55; color: #fff; } .popular-info h4 { font-size: 14px; font-weight: 400; line-height: 1.5; margin-bottom: 4px; } .popular-info h4 a { color: #555; text-decoration: none; transition: color 0.3s; } .popular-info h4 a:hover { color: #4a1a6b; } .popular-info .pop-date { font-size: 12px; color: #bbb; } .about-widget p { font-size: 14px; color: #777; line-height: 1.9; margin-bottom: 14px; } .about-widget .about-cta { display: inline-block; padding: 8px 20px; background: #7732B4; color: #fff; border-radius: 20px; font-size: 13px; text-decoration: none; transition: all 0.3s; } .about-widget .about-cta:hover { background: #5a2080; transform: translateY(-2px); } /* CTA区域 - v2.3.3 统一使用首页样式（line 252），不再重复定义 .cta-section */ .cta-content { max-width: 600px; margin: 0 auto; padding: 0 20px; width: 100%; margin: 0 auto; position: relative; z-index: 1; } .cta-content h2 { font-size: 28px; color: #fff; margin-bottom: 16px; font-weight: 400; letter-spacing: 3px; } .cta-content h2 span { color: #c9a96e; } .cta-content p { font-size: 15px; color: rgba(255,255,255,0.7); margin-bottom: 30px; line-height: 1.8; } .cta-btn { display: inline-block; padding: 14px 40px; background: #c9a96e; color: #fff; border-radius: 30px; text-decoration: none; font-size: 15px; letter-spacing: 2px; transition: all 0.3s; } .cta-btn:hover { background: #b8956a; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201,169,110,0.4); } @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } .sidebar { order: 2; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; position: absolute; top: 70px; left: 0; right: 0; background: rgba(45,27,78,0.97); backdrop-filter: blur(10px); flex-direction: column; padding: 20px; gap: 15px; } .nav-menu.active { display: flex; } .nav-menu a { color: rgba(255,255,255,0.92) !important; text-shadow: none !important; } .nav-menu a::after { display: none; } .mobile-menu-btn { display: block; } .nav-cta { display: none; } .hero-title { font-size: 32px; letter-spacing: 6px; } .hero-subtitle { font-size: 14px; letter-spacing: 3px; } .article-list .article-card { grid-template-columns: 1fr; } .article-img { min-height: 180px; } .article-content { padding: 20px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .topic-intro { padding: 40px 0; } .topic-intro-content h2 { font-size: 20px; } .cta-content h2 { font-size: 22px; } .logo-img { max-height: 48px !important; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } /* ===== Page-Specific: wuxing-series ===== */ .logo { font-size: 0; text-decoration: none; } .nav-menu a.active { color: #c9a96e; } .header.scrolled .nav-menu a.active { color: #4a1a6b; } .nav-menu a.active::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu a.active::after { background: #c9a96e; } .wuxing-hero { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .wuxing-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .wuxing-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(45,27,78,0.75) 0%, rgba(74,26,107,0.65) 50%, rgba(26,26,46,0.7) 100%); } .wuxing-hero-content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 800px; padding: 0 20px; width: 100%; margin: 0 auto; } .wuxing-hero-content h1 { font-size: 48px; font-weight: 300; letter-spacing: 12px; margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,0.4); } .wuxing-hero-content h1 span { color: #c9a96e; font-weight: 500; } .wuxing-hero-content p { font-size: 20px; letter-spacing: 6px; color: rgba(255,255,255,0.85); margin-bottom: 30px; } .wuxing-hero-elements { display: flex; gap: 20px; justify-content: center; margin-top: 20px; } .wuxing-hero-elements span { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; font-weight: 500; border: 2px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); } .el-fire { background: rgba(231,76,60,0.6); } .el-water { background: rgba(52,152,219,0.6); } .el-wood { background: rgba(39,174,96,0.6); } .el-metal { background: rgba(243,156,18,0.6); } .el-earth { background: rgba(212,165,116,0.6); } .wuxing-hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; animation: bounce 2s infinite; } .wuxing-hero-scroll::after { content: '\25BC'; color: rgba(255,255,255,0.6); font-size: 20px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } .intro-section { background: #fff; padding: 80px 0; } .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .intro-text h2 { font-size: 28px; color: #4a1a6b; margin-bottom: 24px; letter-spacing: 3px; font-weight: 500; } .intro-text h2 span { color: #c9a96e; } .intro-text p { font-size: 15px; color: #666; line-height: 2; margin-bottom: 16px; } .intro-text .intro-quote { font-size: 16px; color: #4a1a6b; font-style: italic; padding: 20px 25px; background: linear-gradient(135deg, rgba(201,169,110,0.08) 0%, rgba(74,26,107,0.05) 100%); border-left: 3px solid #c9a96e; border-radius: 0 8px 8px 0; margin: 20px 0; line-height: 1.8; } .intro-visual { display: flex; align-items: center; justify-content: center; } .wuxing-wheel { width: 340px; height: 340px; position: relative; } .wuxing-wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; border-radius: 50%; background: rgba(74,26,107,0.15); display: flex; align-items: center; justify-content: center; color: #c9a96e; font-size: 14px; letter-spacing: 2px; text-align: center; box-shadow: 0 8px 30px rgba(74,26,107,0.3); z-index: 2; } .wuxing-wheel-item { position: absolute; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; font-weight: 500; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: transform 0.3s; } .wuxing-wheel-item:hover { transform: scale(1.1); } .wheel-fire { top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #e74c3c, #c0392b); } .wheel-water { top: 50%; right: 0; transform: translateY(-50%); background: linear-gradient(135deg, #3498db, #2980b9); } .wheel-wood { bottom: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #27ae60, #229954); } .wheel-metal { top: 50%; left: 0; transform: translateY(-50%); background: linear-gradient(135deg, #f39c12, #e67e22); } .wheel-earth { top: 50%; left: 50%; transform: translate(-50%,-50%) translateY(120px); background: linear-gradient(135deg, #d4a574, #b8956a); } .wuxing-wheel-line { position: absolute; top: 50%; left: 50%; width: 120px; height: 2px; background: rgba(201,169,110,0.2); transform-origin: 0 0; } .philosophy-section { background: linear-gradient(180deg, #FFFFFF 0%, #f3ede5 100%); padding: 60px 0; } .philosophy-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .philosophy-card { text-align: center; padding: 30px 20px; border-radius: 12px; background: #fff; transition: all 0.3s; border-top: 3px solid transparent; } .philosophy-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .philosophy-card .ph-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; color: #fff; font-weight: 500; } .philosophy-card .ph-title { font-size: 18px; font-weight: 500; margin-bottom: 8px; letter-spacing: 2px; } .philosophy-card .ph-desc { font-size: 13px; color: #888; line-height: 1.7; } .ph-fire { border-top-color: #e74c3c; } .ph-fire .ph-icon { background: linear-gradient(135deg, #e74c3c, #c0392b); } .ph-water { border-top-color: #3498db; } .ph-water .ph-icon { background: linear-gradient(135deg, #3498db, #2980b9); } .ph-wood { border-top-color: #27ae60; } .ph-wood .ph-icon { background: linear-gradient(135deg, #27ae60, #229954); } .ph-metal { border-top-color: #f39c12; } .ph-metal .ph-icon { background: linear-gradient(135deg, #f39c12, #e67e22); } .ph-earth { border-top-color: #d4a574; } .ph-earth .ph-icon { background: linear-gradient(135deg, #d4a574, #b8956a); } .series-block { padding: 80px 0; overflow: hidden; } .series-block:nth-child(odd) { background: #fff; } .series-block:nth-child(even) { background: #FFFFFF; } .series-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .series-row.reverse { direction: rtl; } .series-row.reverse > * { direction: ltr; } .series-visual { position: relative; } .series-visual-bg { height: 400px; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 15px 40px rgba(0,0,0,0.12); } .series-visual-bg .product-img { height: 100%; background: #E8DCEF; display: flex; align-items: center; justify-content: center; position: relative; } .series-visual-bg .product-img .wuxing-big-tag { position: absolute; top: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; font-weight: 500; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .series-visual-bg .product-img .wuxing-big-tag.fire { background: linear-gradient(135deg, #e74c3c, #c0392b); } .series-visual-bg .product-img .wuxing-big-tag.water { background: linear-gradient(135deg, #3498db, #2980b9); } .series-visual-bg .product-img .wuxing-big-tag.wood { background: linear-gradient(135deg, #27ae60, #229954); } .series-visual-bg .product-img .wuxing-big-tag.metal { background: linear-gradient(135deg, #f39c12, #e67e22); } .series-visual-bg .product-img .wuxing-big-tag.earth { background: linear-gradient(135deg, #d4a574, #b8956a); } .series-visual-bg .product-img .img-placeholder-text { font-size: 14px; color: #bbb; letter-spacing: 1px; } .series-visual-bg .product-img .img-placeholder-icon { font-size: 48px; color: #ddd; margin-bottom: 10px; } .series-info h2 { font-size: 32px; font-weight: 500; margin-bottom: 12px; letter-spacing: 4px; } .series-info h2 .el-fire-text { color: #c0392b; } .series-info h2 .el-water-text { color: #2980b9; } .series-info h2 .el-wood-text { color: #229954; } .series-info h2 .el-metal-text { color: #e67e22; } .series-info h2 .el-earth-text { color: #b8956a; } .series-tag { display: inline-block; padding: 5px 16px; border-radius: 20px; font-size: 12px; letter-spacing: 2px; margin-bottom: 16px; color: #fff; } .series-tag.fire { background: linear-gradient(135deg, #e74c3c, #c0392b); } .series-tag.water { background: linear-gradient(135deg, #3498db, #2980b9); } .series-tag.wood { background: linear-gradient(135deg, #27ae60, #229954); } .series-tag.metal { background: linear-gradient(135deg, #f39c12, #e67e22); } .series-tag.earth { background: linear-gradient(135deg, #d4a574, #b8956a); } .series-desc { font-size: 15px; color: #666; line-height: 2; margin-bottom: 24px; } .series-keyword { font-size: 16px; color: #c9a96e; margin-bottom: 20px; letter-spacing: 2px; font-weight: 500; } .rep-products { display: flex; flex-direction: column; gap: 16px; } .rep-product-card { display: flex; gap: 16px; padding: 20px; background: #FFFFFF; border-radius: 12px; transition: all 0.3s; border: 1px solid #E8DCEF; } .series-block:nth-child(even) .rep-product-card { background: #fff; } .rep-product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateX(5px); } .rep-product-img { width: 100px; height: 100px; border-radius: 10px; background: #E8DCEF; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #ccc; position: relative; overflow: hidden; } .rep-product-img .small-wuxing { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; font-weight: 500; } .rep-product-img .small-wuxing.fire { background: linear-gradient(135deg, #e74c3c, #c0392b); } .rep-product-img .small-wuxing.water { background: linear-gradient(135deg, #3498db, #2980b9); } .rep-product-img .small-wuxing.wood { background: linear-gradient(135deg, #27ae60, #229954); } .rep-product-img .small-wuxing.metal { background: linear-gradient(135deg, #f39c12, #e67e22); } .rep-product-img .small-wuxing.earth { background: linear-gradient(135deg, #d4a574, #b8956a); } .rep-product-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .rep-product-name { font-size: 16px; color: #333; font-weight: 500; margin-bottom: 6px; } .rep-product-attr { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .rep-product-attr span { font-size: 12px; color: #888; background: rgba(201,169,110,0.1); padding: 3px 10px; border-radius: 12px; border: 1px solid rgba(201,169,110,0.2); } .rep-product-meta { display: flex; justify-content: space-between; align-items: center; } .rep-product-price { font-size: 14px; color: #c9a96e; font-weight: 500; letter-spacing: 1px; } .rep-product-link { color: #4a1a6b; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; transition: gap 0.3s; } .rep-product-link:hover { gap: 10px; } .culture-section { background: linear-gradient(135deg, #2d1b4e 0%, #4a1a6b 50%, #3C2854 100%); padding: 80px 0; color: #fff; position: relative; overflow: hidden; } .culture-section::before { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%); animation: pulse 6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.8; } } .culture-content { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; } .culture-content h2 { font-size: 32px; font-weight: 300; letter-spacing: 6px; margin-bottom: 30px; color: #c9a96e; } .culture-content p { font-size: 16px; line-height: 2.2; color: rgba(255,255,255,0.8); margin-bottom: 20px; } .culture-quote { font-size: 18px; color: #c9a96e; font-style: italic; padding: 20px 30px; border: 1px solid rgba(201,169,110,0.3); border-radius: 12px; margin: 30px auto; max-width: 600px; line-height: 1.8; background: rgba(201,169,110,0.05); } .culture-elements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 50px; } .culture-el-card { text-align: center; padding: 24px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; } .culture-el-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); } .culture-el-card .ce-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 18px; color: #fff; font-weight: 500; } .culture-el-card .ce-name { font-size: 15px; color: #fff; margin-bottom: 6px; letter-spacing: 2px; } .culture-el-card .ce-crystal { font-size: 12px; color: rgba(201,169,110,0.8); margin-bottom: 6px; } .culture-el-card .ce-desc { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; } @media (max-width: 1024px) { .intro-grid { grid-template-columns: 1fr; gap: 40px; } .philosophy-grid { grid-template-columns: repeat(3, 1fr); } .series-row { grid-template-columns: 1fr; gap: 40px; } .series-row.reverse { direction: ltr; } .culture-elements { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-menu { display: none; } .mobile-menu-btn { display: block; } .wuxing-hero-content h1 { font-size: 30px; letter-spacing: 6px; } .wuxing-hero-content p { font-size: 15px; letter-spacing: 3px; } .wuxing-hero { height: 400px; } .wuxing-hero-elements span { width: 40px; height: 40px; font-size: 16px; } .philosophy-grid { grid-template-columns: repeat(2, 1fr); } .culture-elements { grid-template-columns: repeat(2, 1fr); } .series-visual-bg { height: 300px; } .series-info h2 { font-size: 24px; } .footer-grid { grid-template-columns: 1fr; text-align: center; } .section { padding: 50px 0; } .section-title { font-size: 24px; } .cta-title { font-size: 22px; } .wuxing-wheel { width: 280px; height: 280px; } .culture-content h2 { font-size: 24px; } .logo-img { max-height: 48px !important; } } @media (max-width: 480px) { .wuxing-hero-content h1 { font-size: 24px; letter-spacing: 4px; } .wuxing-hero-content p { font-size: 13px; } .wuxing-hero-elements { gap: 10px; } .wuxing-hero-elements span { width: 36px; height: 36px; font-size: 14px; } .philosophy-grid { grid-template-columns: 1fr; } .culture-elements { grid-template-columns: 1fr; } .rep-product-card { flex-direction: column; align-items: center; text-align: center; } .rep-product-attr { justify-content: center; } .rep-product-meta { flex-direction: column; gap: 10px; } .intro-text h2 { font-size: 22px; } .series-info h2 { font-size: 20px; letter-spacing: 2px; } } .mobile-nav { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 300px; height: 100%; background: #fff; z-index: 999; padding: 80px 30px 30px; box-shadow: -5px 0 30px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .mobile-nav a { display: block; padding: 12px 0; font-size: 16px; color: #333; text-decoration: none; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar { background: #fff; border-bottom: 1px solid #E8DCEF; } .breadcrumb-bar-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; } .breadcrumb-bar-inner a { color: #666; text-decoration: none; transition: color 0.3s; } .breadcrumb-bar-inner a:hover { color: #4a1a6b; } .breadcrumb-bar-inner .sep { color: #ccc; } .breadcrumb-bar-inner .current { color: #4a1a6b; font-weight: 500; } /* ============================================================ WordPress Menu Overrides — Bridge WP nav classes to DEMO styles ============================================================ */ /* Active state */ .nav-menu li.active > a, .nav-menu li.current-menu-item > a, .nav-menu li.current_page_item > a { color: #c9a96e; } .nav-menu li.active > a::after, .nav-menu li.current-menu-item > a::after, .nav-menu li.current_page_item > a::after { width: 100%; background: #c9a96e; } .header.scrolled .nav-menu li.active > a, .header.scrolled .nav-menu li.current-menu-item > a, .header.scrolled .nav-menu li.current_page_item > a { color: #4a1a6b; } /* Dropdown arrow */ .nav-menu li.menu-item-has-children > a .dropdown-arrow { font-size: 10px; margin-left: 4px; opacity: 0.7; } /* Sub-menu / dropdown-menu */ .nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 10px 0; min-width: 180px; z-index: 1000; list-style: none; margin: 0; } .nav-menu li.menu-item-has-children:hover > .sub-menu, .nav-menu li.menu-item-has-children.focus > .sub-menu { display: block; } .nav-menu .sub-menu li { display: block; margin: 0; } .nav-menu .sub-menu a { display: block; padding: 8px 20px; color: #555 !important; text-shadow: none !important; font-size: 13px; transition: color 0.2s, background 0.2s; } .nav-menu .sub-menu a:hover { color: #4a1a6b !important; background: #F3EAF7; } .nav-menu .sub-menu a::after { display: none; } /* 确保 .header .nav-menu a 的 !important 不会覆盖子菜单文字颜色 */ .header .nav-menu .sub-menu a, .header.scrolled .nav-menu .sub-menu a { color: #555 !important; text-shadow: none !important; } .header .nav-menu .sub-menu a:hover, .header.scrolled .nav-menu .sub-menu a:hover { color: #4a1a6b !important; } /* Mobile sub-menu */ .mobile-menu-list .sub-menu { display: block; position: static; background: none; box-shadow: none; padding: 0 0 0 20px; min-width: 0; } .mobile-menu-list .sub-menu a { padding: 10px 20px; font-size: 14px; color: rgba(255, 255, 255, 0.7); } .mobile-menu-list .sub-menu a:hover { background: none; color: #c9a96e; } /* ================================================== 内页 section-title / section-subtitle 间距修复 v2.4.0 确保 origin / philosophy / timeline / compliance 的 主副标题间距与首页一致（25px / 6px） ================================================== */ .origin .section-subtitle, .timeline .section-subtitle, .compliance .section-subtitle { margin-top: 6px; margin-bottom: 25px; } /* philosophy 为深色背景，subtitle颜色已存在 */ .philosophy .section-subtitle { margin-top: 6px; margin-bottom: 25px; } /* ================================================== 品牌哲学卡片排版修复 v2.3.1 确保3列布局不被其他内页CSS覆盖 ================================================== */ .philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 1024px) { .philosophy-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .philosophy-grid { grid-template-columns: 1fr; } } /* ================================================== 首页覆盖样式 v2.3.1 修复内页 CSS 覆盖首页样式的问题 ================================================== */ /* 1. 首页 hero 高度恢复（内页 .hero{height:400px} 覆盖了首页 100vh） 360 浏览器上方空白问题根因：内页 .hero 的 height:400px + padding 覆盖了首页 .hero 的 height:100vh，导致首页 banner 被压缩 */ .hero-front { height: 100vh !important; min-height: 700px !important; background: none !important; margin-top: 0 !important; padding: 0 !important; } .hero-front::before { display: none !important; } .hero-front .hero-content { padding: 0 20px !important; } @media (max-width: 768px) { .hero-front { height: 90vh !important; min-height: 500px !important; } } /* 2. 首页 philosophy-grid 恢复 3 列布局 内页 .philosophy-grid{repeat(5,1fr)} 覆盖了首页 repeat(3,1fr) */ .philosophy-home .philosophy-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; } .philosophy-home .philosophy-card { height: 380px !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; text-align: left !important; padding: 0 !important; background: none !important; border-top: none !important; box-shadow: none !important; transition: all 0.4s !important; } .philosophy-home .philosophy-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important; } .philosophy-home .philosophy-card-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; transition: transform 0.6s !important; } .philosophy-home .philosophy-card:hover .philosophy-card-bg { transform: scale(1.08) !important; } .philosophy-home .philosophy-card-overlay { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to top, rgba(26,26,46,0.92) 0%, rgba(26,26,46,0.4) 60%, rgba(26,26,46,0.1) 100%) !important; } .philosophy-home .philosophy-card-content { position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important; padding: 35px 30px !important; z-index: 1 !important; } .philosophy-home .philosophy-card-line { width: 40px !important; height: 2px !important; background: #c9a96e !important; margin-bottom: 15px !important; display: block !important; } .philosophy-home .philosophy-title { font-size: 20px !important; color: #fff !important; margin-bottom: 10px !important; letter-spacing: 2px !important; display: block !important; } .philosophy-home .philosophy-desc { font-size: 14px !important; color: rgba(255,255,255,0.7) !important; line-height: 1.6 !important; display: block !important; } /* 3. news-card-link 样式（a 标签包裹不改变卡片视觉） */ .news-card-link { text-decoration: none !important; color: inherit !important; display: block; } .news-card-link .news-card { transition: transform 0.3s, box-shadow 0.3s; } .news-card-link:hover .news-card { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.12); } /* 4. 360 浏览器兼容：修复 hero 上方空白 360 浏览器默认渲染模式可能导致 body/header 有额外 margin */ body { margin: 0 !important; padding: 0 !important; } .header { margin: 0 !important; } .hero-front { margin-top: 0 !important; } /* ================================================== v2.4.0 线下体验页子板块主副标题间距修复 确保 .section-title / .section-subtitle 间距与首页一致（25px / 6px） ================================================== */ .interior .section-title, .concept .section-title, .areas .section-title, .transport .section-title, .landmarks .section-title, .sourcing .section-title, .quality .section-title, .design .section-title, .craft-process .section-title, .certificate .section-title, .svc-grid-section .section-title, .svc-process .section-title { margin-bottom: 25px !important; } .interior .section-subtitle, .concept .section-subtitle, .areas .section-subtitle, .transport .section-subtitle, .landmarks .section-subtitle, .sourcing .section-subtitle, .quality .section-subtitle, .design .section-subtitle, .craft-process .section-subtitle, .certificate .section-subtitle, .svc-grid-section .section-subtitle, .svc-process .section-subtitle { margin-top: 6px !important; margin-bottom: 25px !important; } /* ================================================== v2.4.0 关于我们页面子板块主副标题间距修复 ================================================== */ .origin .section-title, .timeline .section-title, .compliance .section-title, .philosophy .section-title { margin-bottom: 25px !important; } .origin .section-subtitle, .timeline .section-subtitle, .compliance .section-subtitle, .philosophy .section-subtitle { margin-top: 6px !important; margin-bottom: 25px !important; } /* ================================================== v2.3.3 关于我们页面品牌哲学卡片排版修复 内页 .philosophy-card（五行系列页面）覆盖了关于我们的卡片样式 使用 .philosophy .philosophy-card 限定选择器恢复正确样式 ================================================== */ .philosophy .philosophy-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; } .philosophy .philosophy-card { height: 380px !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; transition: all 0.4s !important; text-align: left !important; padding: 0 !important; background: none !important; border-top: none !important; } .philosophy .philosophy-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important; } @media (max-width: 768px) { .philosophy .philosophy-grid { grid-template-columns: 1fr !important; } } /* ================================================== v2.4.2 截图问题修复（10项） ================================================== */ /* v2.4.3 修复： 1. 修复 ZIP 包路径分隔符问题（PowerShell 反斜杠 → Python 正斜杠），解决 assets/images/ 和 js/ 下所有文件 404 2. 修复 front-page.php 二维码 fallback 引用不存在的 qr-placeholder.jpg → qr-douyin.png / qr-meituan.png 3. 取消品牌动态下拉子菜单（用户要求直接取消） 4. 移动端明星臻品卡片从双列改为 85% 宽单卡片，增大视觉体验 */ /* 1. 品牌动态页文章卡片图片 - 有背景图时添加渐变遮罩 */ .article-img.has-bg { background-size: cover !important; background-position: center !important; } .article-img.has-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.35) 100%); pointer-events: none; z-index: 1; } .article-img.has-bg::after { z-index: 2; } .article-img:not(.has-bg)::after { content: '暂无图片'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; color: #bbb; font-size: 14px; padding: 0; border-radius: 0; letter-spacing: 1px; } /* 2. 移动端导航菜单 - 统一子菜单样式，去除圆点 */ .mobile-nav ul, .mobile-nav .sub-menu { list-style: none !important; margin: 0 !important; padding: 0 !important; } .mobile-nav .sub-menu li { list-style: none !important; } .mobile-nav .sub-menu li::before { content: none !important; } .mobile-nav .sub-menu a { padding: 10px 0 10px 20px !important; font-size: 15px !important; color: #666 !important; border-bottom: 1px solid #F0EAF5 !important; } .mobile-nav .menu-item-has-children > a::after { content: ' \25BE'; font-size: 12px; color: #999; } /* 3. 移动端二维码区域间距翻倍 */ @media (max-width: 768px) { .qr-section { padding: 50px 0 !important; } .qr-content { gap: 40px !important; } .qr-box { width: 140px !important; height: 140px !important; } .qr-box img { width: 130px !important; height: 130px !important; } .qr-info h3 { font-size: 18px !important; margin-bottom: 12px !important; } .qr-info p { font-size: 14px !important; line-height: 1.8 !important; } } /* 4. 移动端品牌承诺子板块放大 */ @media (max-width: 768px) { .trust-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; } .trust-item { width: auto !important; min-width: 0 !important; padding: 25px 15px !important; } .trust-icon { width: 56px !important; height: 56px !important; font-size: 24px !important; margin-bottom: 12px !important; } .trust-title { font-size: 16px !important; margin-bottom: 8px !important; } .trust-desc { font-size: 13px !important; line-height: 1.5 !important; } } /* 5. 产品列表页分页 - 空结果时隐藏 */ .pagination.pagination-static { display: none; } .pagination.pagination-static.has-results { display: flex; } /* 6. 门店页concept-visual移动端2x2布局确保 */ @media (max-width: 768px) { .concept-visual { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; padding: 25px !important; } .concept-element { padding: 20px 10px !important; text-align: center !important; } .concept-element-icon { font-size: 28px !important; margin-bottom: 10px !important; } .concept-element-title { font-size: 15px !important; margin-bottom: 6px !important; } .concept-element-desc { font-size: 12px !important; } } /* 7. 门店页功能分区移动端布局修复 */ @media (max-width: 768px) { .areas-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } .area-card { flex-direction: column !important; text-align: center !important; padding: 25px 20px !important; } .area-icon { width: 56px !important; height: 56px !important; font-size: 24px !important; margin: 0 auto 15px !important; } .area-content h3 { font-size: 18px !important; margin-bottom: 10px !important; } .area-content p { font-size: 14px !important; line-height: 1.7 !important; margin-bottom: 12px !important; } .area-content ul { text-align: left !important; padding-left: 20px !important; font-size: 13px !important; line-height: 2 !important; } .area-content ul li { margin-bottom: 4px !important; } } /* 8. 首页Hero文字移动端排版修复 */ @media (max-width: 768px) { .hero-slogan { font-size: 26px !important; word-break: keep-all !important; line-height: 1.4 !important; padding: 0 10px !important; } } @media (max-width: 480px) { .hero-slogan { font-size: 22px !important; } .hero-subtitle { font-size: 13px !important; letter-spacing: 3px !important; padding: 0 15px !important; } .hero-cta-primary, .hero-cta-secondary { padding: 10px 20px !important; font-size: 12px !important; } } /* 9. 门店页interior-grid移动端确保单列 */ @media (max-width: 768px) { .interior-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } .interior-card { flex-direction: column !important; } .interior-img { min-height: 180px !important; } } /* 10. 首页品牌动态区域news-img占位符修复 */ .news-img[style*="background-image"]::after { display: none !important; } .news-img:not([style*="background-image"])::after { content: '' !important; } .news-img:not([style*="background-image"]) { background: linear-gradient(135deg, #E8DCEF, #DDD0E5) !important; } /* ===== v2.4.4 修复 ===== */ /* 11. 移动端菜单圆点消除（360浏览器兼容） */ .mobile-nav ul, .mobile-nav li, .mobile-menu-list, .mobile-menu-list li, .mobile-menu-list ul, .mobile-nav .sub-menu, .mobile-nav .sub-menu li { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; } .mobile-nav .sub-menu { padding-left: 20px !important; margin-bottom: 5px !important; } .mobile-nav .sub-menu a { font-size: 14px !important; color: #666 !important; padding: 10px 0 !important; border-bottom: 1px dashed #E8DCEF !important; } .mobile-nav .sub-menu a:hover { color: #4a1a6b !important; } /* 12. 移动端首页产品卡片增大（85%→90%） */ @media (max-width: 768px) { .product-carousel-inner .product-card { flex: 0 0 90% !important; } .product-carousel-inner .product-img { height: 260px !important; } .product-carousel-inner .product-info { padding: 20px !important; } .product-carousel-inner .product-name { font-size: 17px !important; } .product-carousel-inner .product-desc { font-size: 13px !important; -webkit-line-clamp: 2 !important; } } /* 13. 品牌动态knowledge-grid可见性保障 */ .knowledge { display: block !important; background: #fff !important; padding: 60px 0 !important; } .knowledge-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 30px !important; margin-top: 30px !important; } @media (max-width: 1024px) { .knowledge-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 768px) { .knowledge-grid { grid-template-columns: 1fr !important; gap: 20px !important; } } .knowledge-card { display: block !important; visibility: visible !important; opacity: 1 !important; } .knowledge-icon { width: 80px !important; height: 80px !important; background: linear-gradient(135deg, #4a1a6b, #6a3d8f) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 25px !important; color: #fff !important; font-size: 32px !important; } .knowledge-icon .ico::before { content: '\2728' !important; } .knowledge-title { font-size: 20px !important; color: #4a1a6b !important; margin-bottom: 12px !important; font-weight: 500 !important; display: block !important; } .knowledge-desc { font-size: 14px !important; color: #777 !important; line-height: 1.8 !important; display: block !important; } .knowledge-count { display: inline-block !important; margin-top: 15px !important; font-size: 12px !important; color: #c9a96e !important; background: rgba(201,169,110,0.1) !important; padding: 5px 15px !important; border-radius: 15px !important; } /* 14. 移动端面包屑与固定导航重叠修复 */ @media (max-width: 768px) { .breadcrumb, .breadcrumb-bar, .breadcrumb-wrap { margin-top: 70px !important; } body { padding-top: 0 !important; } } /* 15. 门店interior-img有背景图时隐藏占位文字 */ .interior-img[style*="background-image"]::after, .interior-img[style*="background-image"] { content: none !important; } .interior-img[style*="background-image"]::after { display: none !important; } /* 16. 文章详情页评论区排版修复 */ .comments-area { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } .comment-form-comment, .comment-form-author, .comment-form-email, .comment-form-url { width: 100% !important; margin-bottom: 15px !important; } .comment-form-comment textarea, .comment-form-author input, .comment-form-email input, .comment-form-url input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 10px !important; border: 1px solid #ddd !important; border-radius: 6px !important; font-size: 14px !important; } .comment-form-author, .comment-form-email, .comment-form-url { display: block !important; width: 100% !important; } .comment-list { list-style: none !important; padding: 0 !important; margin: 0 0 30px 0 !important; } .comment-list .children { list-style: none !important; padding-left: 30px !important; } .comment-list li { list-style: none !important; padding: 15px 0 !important; border-bottom: 1px solid #eee !important; } .comment-body { padding: 15px !important; background: #f9f9f9 !important; border-radius: 8px !important; margin-bottom: 10px !important; } .comment-author { font-weight: 500 !important; margin-bottom: 5px !important; } .comment-meta { font-size: 12px !important; color: #999 !important; margin-bottom: 8px !important; } .comment-form { margin-top: 20px !important; } .comment-form p { margin-bottom: 15px !important; } .comment-form label { display: block !important; margin-bottom: 5px !important; font-size: 14px !important; color: #333 !important; } .comment-form .required { color: #e74c3c !important; } .comment-form .submit { background: linear-gradient(135deg, #4a1a6b, #6a3d8f) !important; color: #fff !important; border: none !important; padding: 12px 30px !important; border-radius: 25px !important; cursor: pointer !important; font-size: 14px !important; transition: all 0.3s !important; } .comment-form .submit:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 20px rgba(74,26,107,0.3) !important; } #cancel-comment-reply-link { font-size: 12px !important; color: #999 !important; margin-left: 10px !important; } /* 17. 文章详情页post-layout移动端全宽 */ @media (max-width: 768px) { .post-layout, .main-container { display: block !important; grid-template-columns: 1fr !important; } .post-main, .content-area { width: 100% !important; max-width: 100% !important; } .sidebar { width: 100% !important; max-width: 100% !important; margin-top: 40px !important; } } /* 18. 水晶科普页面内容保障 */ .topic-intro { display: block !important; padding: 60px 0 !important; } .topic-intro-content { max-width: 800px !important; margin: 0 auto !important; text-align: center !important; } .main-layout { display: grid !important; grid-template-columns: 1fr 300px !important; gap: 40px !important; padding: 40px 0 !important; } @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr !important; } } .article-list { display: flex !important; flex-direction: column !important; gap: 30px !important; } .article-list .article-card { display: flex !important; flex-direction: row !important; background: #fff !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important; transition: all 0.3s !important; text-decoration: none !important; color: inherit !important; } .article-list .article-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; } .article-list .article-img { width: 240px !important; min-width: 240px !important; height: 180px !important; overflow: hidden !important; } .article-list .article-content { padding: 25px !important; flex: 1 !important; } @media (max-width: 768px) { .article-list .article-card { flex-direction: column !important; } .article-list .article-img { width: 100% !important; min-width: 100% !important; height: 200px !important; } } /* 19. 版本号更新 */ /* v2.4.6: 4项修复 - 品牌动态删除水晶科普/选购指南改名水晶入门/WooCommerce产品类型冲突/Musea残留JS清理/评论区PC+M排版(article-footer flex布局根因) */ /* 20. article-img含img时隐藏"暂无图片"占位文字 */ .article-img:has(img)::after { display: none !important; content: '' !important; } .article-img:has(img) { background: none !important; } /* 21. 评论区placeholder排版保障 */ .comments-placeholder { text-align: center !important; padding: 40px 20px !important; width: 100% !important; box-sizing: border-box !important; } .comments-placeholder-text { font-size: 15px !important; color: #777 !important; line-height: 2 !important; margin-bottom: 20px !important; word-break: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; writing-mode: horizontal-tb !important; text-orientation: mixed !important; } .comments-placeholder-icon { font-size: 48px !important; color: #c9a96e !important; margin-bottom: 20px !important; } .comments-placeholder-btn { display: inline-block !important; padding: 10px 30px !important; background: linear-gradient(135deg, #4a1a6b, #6a3d8f) !important; color: #fff !important; border-radius: 25px !important; text-decoration: none !important; font-size: 14px !important; transition: all 0.3s !important; } .comments-placeholder-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 5px 20px rgba(74,26,107,0.3) !important; } /* v2.5.4: 修复移动端CTA widget样式 */ @media (max-width: 1023px) { .sidebar .cta-widget { display: block !important; visibility: visible !important; opacity: 1 !important; background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark)) !important; color: var(--white) !important; text-align: center !important; padding: 24px 16px !important; border-radius: 12px !important; margin: 0 0 20px 0 !important; } .cta-widget-title { font-size: 16px !important; margin-bottom: 8px !important; color: var(--brand-gold) !important; } .cta-widget-desc { font-size: 13px !important; color: rgba(255,255,255,0.7) !important; margin-bottom: 16px !important; line-height: 1.6 !important; } .cta-widget-btn { padding: 12px 32px !important; background: var(--brand-gold) !important; color: var(--brand-purple) !important; border-radius: 30px !important; font-size: 15px !important; font-weight: 500 !important; display: inline-block !important; } } /* 22. 移动端content-area全宽保障 */ @media (max-width: 768px) { .main-container { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 15px !important; } .content-area { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* 23. v2.4.6: 修复文章详情页 .article-footer flex 布局导致评论区被挤压 */ /* 根因: .article-footer 在多处被设为 display:flex; justify-content:space-between */ /* 导致 share-section / post-nav / comments-area 三个子元素横向排列，评论区被挤压成极窄列 */ /* 移动端表现为文字竖排（每字一行），PC端表现为评论区宽度异常 */ .single-post .article-footer { display: block !important; flex-direction: unset !important; justify-content: unset !important; align-items: unset !important; } /* share-section 保持 flex 用于内部分享按钮排列 */ .single-post .article-footer .share-section { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 16px !important; margin-bottom: 32px !important; flex-wrap: wrap !important; } /* post-nav 保持 flex 用于上一篇/下一篇横向排列 */ .single-post .article-footer .post-nav { display: flex !important; justify-content: space-between !important; gap: 20px !important; margin-bottom: 32px !important; } /* 评论区全宽 */ .single-post .article-footer .comments-area { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* 评论区 placeholder 文字强制水平排版 */ .single-post .comments-placeholder-text { writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* 移动端评论区额外保障 */ @media (max-width: 768px) { .single-post .article-footer .comments-area { padding: 20px 15px !important; } .single-post .article-footer .post-nav { flex-direction: column !important; gap: 12px !important; } } /* ============================================================ v2.4.7 修复 ============================================================ */ /* 17. 下拉子菜单定位修复：nav-menu li 需要 position:relative 作为 sub-menu 的定位上下文 */ .nav-menu > li { position: relative !important; } /* 18. PC端面包屑避让固定header（70px高度） */ .breadcrumb-wrap, .breadcrumb-bar, .breadcrumb { margin-top: 70px; } @media (max-width: 768px) { .breadcrumb-wrap, .breadcrumb-bar, .breadcrumb { margin-top: 60px !important; } } /* 19. 单产品页和文章页的面包屑也需要避让 */ /* v2.5.0: 分类卡片样式 - 品牌动态页 */ .category-cards-section { padding: 30px 0 20px; } .category-cards-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .category-card { background: #fff; border-radius: 16px; padding: 24px 16px; text-align: center; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(74,44,106,0.06); } .category-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(74,44,106,0.12); border-color: rgba(74,44,106,0.1); } .category-card.active { border-color: #4a2c6a; background: linear-gradient(135deg, #4a2c6a 0%, #5d3a7e 100%); color: #fff; } .category-card.active .category-card-desc { color: rgba(255,255,255,0.7); } .category-card-icon { width: 32px; height: 32px; margin: 0 auto 12px; color: var(--brand-purple, #4a1a6b); display: flex; align-items: center; justify-content: center; } .category-card-icon svg { width: 100%; height: 100%; stroke: currentColor; } /* v2.5.21: 分类卡片图片支持 */ .category-card-img { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(74,44,106,0.08) 0%, rgba(93,58,126,0.05) 100%); } .category-card-img img { width: 100%; height: 100%; object-fit: cover; } .category-card.active .category-card-icon, .category-card.active .category-card-img { color: #fff; background: rgba(255,255,255,0.15); } .category-card.active .category-card-img img { opacity: 0.9; } .category-card-name { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: inherit; } .category-card-desc { font-size: 12px; color: #888; line-height: 1.5; } .category-card-enter { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--brand-purple, #4a1a6b); text-decoration: none; transition: opacity 0.2s; } .category-card-enter:hover { opacity: 0.7; text-decoration: underline; } @media (max-width: 992px) { .category-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .category-card { padding: 16px 10px; } .category-card-icon { font-size: 24px; } .category-card-name { font-size: 14px; } } @media (max-width: 576px) { .category-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .category-card { padding: 14px 8px; border-radius: 12px; } .category-card-icon { font-size: 22px; margin-bottom: 8px; } .category-card-name { font-size: 13px; margin-bottom: 4px; } .category-card-desc { font-size: 11px; } } /* ===== v2.5.13: 移动端修复 ===== */ /* 修复1: 确保所有页面整页滚动，不出现内部滚动条 */ html { overflow-x: hidden; } body { overflow-x: hidden; position: relative; } .section, .container, .product-grid, .filter-bar { overflow: visible !important; max-height: none !important; } /* 修复2: 文章详情页防横滑 — 约束内容元素宽度 */ .main-container { overflow-x: hidden; } .article-body { overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; } .article-body img, .article-body video, .article-body iframe { max-width: 100%; height: auto; } .article-body pre { overflow-x: auto; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .article-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .featured-image img { max-width: 100%; height: auto; } /* 修复3: 产品卡片确保点击区域覆盖整个卡片 */ .product-card { cursor: pointer; } .product-card .product-image { display: block; width: 100%; } .product-card .product-info { pointer-events: none; } .product-card .product-info a { pointer-events: auto; } /* 修复4: 移动端分类卡片点击响应区域 */ @media (max-width: 768px) { .category-card { cursor: pointer; -webkit-tap-highlight-color: rgba(201,169,110,0.2); } } /* ===== v2.5.17: 修复产品详情页与文章详情页文字竖排/404 ===== */ /* 修复1: 产品详情页 match-card、related-card、qr-buy-box 文字竖排问题 */ .single-product .match-card, .single-product .match-card *, .single-product .related-card, .single-product .related-card *, .single-product .qr-buy-box, .single-product .qr-buy-box * { writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: normal !important; word-break: normal !important; } /* 修复2: 移动端文章列表页路径/blog 404 — 重写规则兜底 */ @media (max-width: 768px) { .single-product .match-card, .single-product .match-card *, .single-product .related-card, .single-product .related-card *, .single-product .qr-buy-box, .single-product .qr-buy-box * { writing-mode: horizontal-tb !important; text-orientation: mixed !important; } } /* ===== v2.5.25: 修复产品详情页footer logo排版异常 ===== */ /* WooCommerce全局img样式覆盖footer-logo-img，用高优先级修复 */ .single-product .footer-logo-img, .woocommerce-page .footer-logo-img { display: block !important; width: 100% !important; max-width: 180px !important; height: auto !important; max-height: 70px !important; object-fit: contain !important; border-radius: 8px !important; } .single-product .footer-grid, .woocommerce-page .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 30px !important; margin-bottom: 24px !important; } .single-product .footer-brand .footer-logo, .woocommerce-page .footer-brand .footer-logo { margin-bottom: 15px !important; } .single-product .footer .container, .woocommerce-page .footer .container { padding: 21px 24px 11px !important; } @media (max-width: 768px) { .single-product .footer-grid, .woocommerce-page .footer-grid { grid-template-columns: 1fr !important; text-align: center !important; } } /* ===== v2.5.28: archive-product.php 专用样式 ===== */ /* 筛选栏 badge 按钮 */ .badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; text-decoration: none; transition: all 0.3s; cursor: pointer; white-space: nowrap; } .badge-purple { background: #EDE4F0; color: #666; } .badge-purple:hover { background: #4a1a6b; color: #fff; } .badge-purple.active { background: #4a1a6b; color: #fff; } /* 产品卡片图片区域高度（archive-product.php 使用 .product-image） */ .product-card .product-image { display: block; width: 100%; height: 260px; position: relative; overflow: hidden; background: #EDE4F0; } .product-card .product-image img { width: 100%; height: 100%; object-fit: cover; } .product-card .product-tag { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 12px; font-size: 11px; background: rgba(74,26,107,0.85); color: #fff; text-decoration: none; z-index: 2; } /* 产品卡片基础样式（archive-product.php 使用 article.product-card） */ article.product-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: all 0.4s; } article.product-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(74,26,107,0.18); } article.product-card .product-info { padding: 22px; } article.product-card .product-series { font-size: 12px; color: #c9a96e; letter-spacing: 1px; margin-bottom: 6px; } article.product-card .product-name { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: 500; line-height: 1.4; } article.product-card .product-name a { text-decoration: none; color: inherit; } article.product-card .product-attr { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } article.product-card .product-attr span { font-size: 12px; color: #888; background: #EDE4F0; padding: 3px 10px; border-radius: 12px; } article.product-card .product-price { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E8DCEF; font-size: 14px; color: #c9a96e; font-weight: 500; } article.product-card .price-hint { color: #c9a96e; font-size: 14px; } /* ===== v2.5.30: 排版对齐修复 — 导航/CTA/Footer 居中统一 ===== */ /* 1. 顶部导航：nav-menu 居中 根因：.nav 使用 justify-content:space-between，logo 贴左、nav-cta 贴右， nav-menu 夹在两者之间但不一定在容器中心（因 logo 与 nav-cta 宽度不等）。 修复：让 nav-menu 占据全部剩余空间(flex:1)并自身居中 */ .nav-menu { flex: 1 !important; justify-content: center !important; } /* 2. CTA 区块：确保文案和按钮严格居中 根因：.cta-content 被两处重复定义覆盖(line 5659/5990)，max-width:600px 偏窄； 不同页面视觉上产生轻微偏移。 修复：统一 max-width 到 720px，强制居中 */ .cta-section { text-align: center !important; } .cta-section .container { text-align: center !important; } .cta-content { max-width: 720px !important; margin: 0 auto !important; padding: 0 20px !important; text-align: center !important; position: relative; z-index: 1; } .cta-title, .cta-content h2 { text-align: center !important; } .cta-subtitle, .cta-content p { text-align: center !important; } .cta-buttons { display: flex !important; gap: 20px !important; justify-content: center !important; flex-wrap: wrap !important; } /* 3. Footer：统一 container padding，确保内容居中 根因：.footer .container 的 padding 被改为 21px 24px 11px（非标准）， 与全局 .container 的 padding:0 20px 不一致，导致 footer 内容左右偏移。 修复：统一 padding 为 0 20px，保持与全局 .container 一致 */ .footer .container { padding: 0 20px !important; max-width: 1200px !important; margin: 0 auto !important; display: flex; flex-direction: column; align-items: center; } .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 30px !important; margin: 0 auto 24px !important; max-width: 1160px !important; width: 100%; } /* Footer品牌列（第一列）左对齐，其他列居中 */ .footer-brand { text-align: left; } .footer-col { text-align: center; } /* 修复footer链接列表的默认margin/padding导致的偏移 */ .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 6px; text-align: center; } /* Footer联系信息列 */ .footer-contact p { text-align: center; margin-bottom: 8px; } /* WooCommerce 页面 footer 同步修复 */ .single-product .footer .container, .woocommerce-page .footer .container { padding: 0 20px !important; display: flex; flex-direction: column; align-items: center; } .single-product .footer-grid, .woocommerce-page .footer-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr !important; gap: 30px !important; margin: 0 auto 24px !important; max-width: 1160px !important; width: 100%; } /* 移动端保持原响应式 */ @media (max-width: 768px) { .nav-menu { flex: none !important; justify-content: flex-start !important; } .footer-grid, .single-product .footer-grid, .woocommerce-page .footer-grid { max-width: 100% !important; grid-template-columns: 1fr !important; text-align: center !important; } .footer-brand, .footer-col, .footer-links li, .footer-contact p { text-align: center !important; } .footer-logo { display: flex; justify-content: center; } }