/* 2026-09-21 品牌视觉样式（谢月开百货） 范围：字体 / 背景 / 配色 / 质感，不改动排版结构。 背景为纯 CSS 渐变与点阵，无外部图片依赖。字体由页面 内 Google Fonts 链接加载。 */ :root { --xyk-ink: #243024; --xyk-muted: #5f6a55; --xyk-paper: #f6f1e7; --xyk-sage: #42604e; --xyk-forest: #2f4634; --xyk-brass: #b07a3c; --xyk-brass-soft: #c89a5e; --xyk-line: rgba(67, 82, 63, .16); --xyk-card: rgba(255, 253, 247, .9); } /* ===== 背景：暖米纸底 + 品牌光晕 + 极淡点阵质感（无图片依赖） ===== */ html, body { font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important; color: var(--xyk-ink); background-color: var(--xyk-paper) !important; background-image: radial-gradient(1100px 560px at 50% -12%, rgba(66, 96, 78, .12), transparent 60%), radial-gradient(820px 460px at 100% -4%, rgba(176, 122, 60, .10), transparent 55%), radial-gradient(760px 520px at -4% 18%, rgba(66, 96, 78, .07), transparent 60%), radial-gradient(rgba(67, 82, 63, .045) 1px, transparent 1.4px) !important; background-size: auto, auto, auto, 22px 22px !important; background-position: center top, right top, left top, center top !important; background-repeat: no-repeat, no-repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, fixed, fixed !important; letter-spacing: 0 !important; } /* 顶部品牌细线，强化辨识度（不挤压布局） */ body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, var(--xyk-forest), var(--xyk-sage) 45%, var(--xyk-brass) 100%); } main, .main, .page, .content, .container, .content-wrapper, [class*="page"], [class*="content"] { font-family: inherit !important; position: relative; } /* ===== 标题：衬线，沉稳墨绿，带品牌下划线 ===== */ h1, h2, h3, .title, .section-title, .product-title, [class*="heading"] { font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif !important; color: var(--xyk-forest) !important; letter-spacing: 0 !important; } h1::after, h2::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--xyk-brass), var(--xyk-brass-soft)); } /* ===== 顶栏：毛玻璃 + 品牌描边（不含裸 nav：避免误伤分类条/页脚/轮播圆点条） ===== */ header, .header, .site-header, .main-header, [class*="siteHeader"], [class*="navMenu"] { backdrop-filter: saturate(135%) blur(10px); -webkit-backdrop-filter: saturate(135%) blur(10px); background-color: rgba(255, 252, 246, .92) !important; border-bottom: 1px solid var(--xyk-line) !important; box-shadow: 0 6px 22px rgba(47, 70, 52, .06) !important; } /* ===== 页脚导航列例外：不吃顶栏玻璃白底，与页脚照片背景保持一致 ===== */ #footer nav, .o-siteFooter__col.-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; } /* ===== 汉堡菜单闭合态隐藏：快照缺失闭合隐藏层，导致菜单左缘露出 188px 边条 ===== */ .m-navMenu__content:not(.-opened) { visibility: hidden !important; } /* ===== 卡片：圆角 + 柔和投影 + 悬浮微抬升 ===== */ .card, .product-card, .category-card, .tile, [class*="product"] [class*="card"], [class*="Card"], [class*="tile"] { border-radius: 10px !important; border: 1px solid rgba(55, 73, 54, .14) !important; box-shadow: 0 14px 34px rgba(54, 63, 48, .10) !important; background-color: var(--xyk-card) !important; transition: transform .22s ease, box-shadow .22s ease !important; } .card:hover, .product-card:hover, .category-card:hover, [class*="product"] [class*="card"]:hover { transform: translateY(-4px) !important; box-shadow: 0 22px 46px rgba(47, 70, 52, .16) !important; } /* ===== 按钮：品牌渐变 ===== */ button, .btn, .button, [class*="button"], [class*="Button"], [class*="btn"] { border-radius: 7px !important; font-family: inherit !important; background-image: linear-gradient(120deg, var(--xyk-sage), var(--xyk-forest)) !important; color: #fff !important; border: none !important; box-shadow: 0 8px 20px rgba(47, 70, 52, .18) !important; transition: filter .2s ease, transform .2s ease !important; } button:hover, .btn:hover, .button:hover, [class*="button"]:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; } /* ===== 链接 ===== */ a { color: var(--xyk-sage); text-decoration: none; } a:hover { color: var(--xyk-brass); } /* ===== 英雄区 / Banner：品牌叠色（仅作用于区块容器，不污染轮播 slide 本体） ===== */ .hero, .banner, .home-hero, [class*="hero"], [class*="banner"], [class*="Hero"], [class*="Banner"] { background-image: linear-gradient(100deg, rgba(47, 70, 52, .86), rgba(66, 96, 78, .46)), linear-gradient(160deg, rgba(176, 122, 60, .25), rgba(47, 70, 52, .55)) !important; background-size: cover !important; background-position: center !important; } /* 轮播 slide 与其内部元素不吃叠色，保持原版图片观感 */ [class*="fwBanner"], [class*="fwBanner"] * { background-image: none !important; } /* 英雄区圆点条/暂停条容器恢复透明干净底（不含暂停按钮本体） */ .o-heroCarousel__actions, .o-heroCarousel__dots { background-image: none !important; background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ===== 品牌差异条（保留结构，去掉坏图背景） ===== */ .brand-diff-strip { margin: 0 auto 28px; padding: 18px 24px; max-width: 1180px; border-left: 4px solid var(--xyk-brass); background: linear-gradient(90deg, rgba(255,255,255,.82), rgba(246,241,231,.7)) !important; color: var(--xyk-ink); border-radius: 0 10px 10px 0; box-shadow: 0 10px 26px rgba(54, 63, 48, .08); } .brand-diff-strip strong { margin-right: 18px; color: var(--xyk-forest); } .brand-diff-strip span { margin-right: 16px; color: var(--xyk-muted); } img { max-width: 100%; } @media (max-width: 768px) { html, body { background-attachment: scroll, scroll, scroll, scroll !important; } .brand-diff-strip { margin: 0 12px 18px; padding: 14px 16px; } h1::after, h2::after { width: 34px; } } /* ===== 商品图占位兜底：无源商品的图渲染为品牌占位块（alt 商品名可见），有图时无影响 ===== */ img[src*="/global/products/"] { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; background: linear-gradient(135deg, #f4f1e8, #e6ece4); border: 1px solid rgba(67, 82, 63, .16); border-radius: 6px; color: #5f6a55; font-size: 13px; text-align: center; } /* ===== 商品卡净化：内部子元素不再吃通用卡片白胶囊样式，只保留卡体本身 ===== */ .m-prodCard * { background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* 空行折叠：无内容的规格/占位行直接隐藏（有内容的"2 种规格可选"等不受影响） */ .m-prodCard a:empty, .m-prodCard div:empty, .m-prodCard span:empty { display: none !important; }