/* ============================================================ 🌿 自然選物 · 背景花紋公共樣式 (common-background.css) 說明：抽離背景花紋與基底設定，供 hansu.ftl / hansuHome.ftl 共用使用方式：在中引入此檔案，並於加上對應 class ============================================================ */ /* ---------- 全域背景基底 (通用) ---------- */ body { /* 主色：暖白基調 */ background-color: #f8f5f0; /* 花紋組合：葉脈 / 編織感 / 自然微粒 */ background-image: /* 柔和光暈 */ radial-gradient(circle at 20% 30%, rgba(200, 180, 160, 0.08) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(180, 160, 140, 0.07) 0%, transparent 40%), /* 45度斜紋 (細膩) */ repeating-linear-gradient(45deg, rgba(180, 165, 150, 0.03) 0px, rgba(180, 165, 150, 0.03) 2px, transparent 2px, transparent 8px), /* -45度斜紋 (交織) */ repeating-linear-gradient(-45deg, rgba(160, 145, 130, 0.03) 0px, rgba(160, 145, 130, 0.03) 2px, transparent 2px, transparent 8px); background-attachment: fixed; min-height: 100vh; } /* ---------- 商城專用背景 (hansuHome 風格) ---------- */ /* 使用方式： */ body.home-body { background-color: #f6f2ec; background-image: radial-gradient(circle at 10% 20%, rgba(190, 170, 150, 0.10) 0%, transparent 35%), radial-gradient(circle at 90% 80%, rgba(160, 140, 120, 0.08) 0%, transparent 40%), repeating-linear-gradient(30deg, rgba(170, 155, 140, 0.04) 0px, rgba(170, 155, 140, 0.04) 3px, transparent 3px, transparent 12px), repeating-linear-gradient(-30deg, rgba(150, 135, 120, 0.04) 0px, rgba(150, 135, 120, 0.04) 3px, transparent 3px, transparent 12px); background-attachment: fixed; } /* ---------- 落地頁專用裝飾 (hansu 風格) ---------- */ /* 使用方式：在 .hero / .products 等區塊加上 .pattern-overlay 或直接套用 */ .hero, .products { position: relative; } /* 為特定區塊增加局部花紋疊加 (非必需，但可強化一致性) */ .hero::before, .products::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 10% 90%, rgba(160, 140, 120, 0.04) 0%, transparent 50%), radial-gradient(circle at 90% 10%, rgba(180, 160, 140, 0.04) 0%, transparent 50%); z-index: 0; } /* 確保內容在花紋上層 */ .hero-text, .hero-image, .products > * { position: relative; z-index: 1; } /* ---------- 輔助：毛玻璃容器 (讓背景花紋透出) ---------- */ /* 可選用於卡片、導航、訂單區塊，增加通透感 */ .glass-card { background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.3); } /* 更輕透的版本 */ .glass-light { background: rgba(255, 252, 248, 0.65); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ---------- 直接沿用既有元件 (保持相容) ---------- */ /* 若原有元件已設定背景，可覆蓋或保留，此處僅提供額外選項 */