/** Shopify CDN: Minification failed Line 287:18 Unexpected "*" **/ /** * ============================================================ * EnamoR Design System Override * 依據 enamor-design-system.md 建立 * 套用至 Prestige Theme（Shopify） * ============================================================ * * 字型由 theme.liquid 的 載入 Noto Sans TC * 本檔案不再 @import，避免雙重請求 * * 架構說明： * 1. CSS 設計 Token（色彩、字級、間距） * 2. 全域排版覆蓋 * 3. 按鈕樣式 * 4. Color Scheme 覆蓋（對應 Prestige scheme-1 ~ scheme-4） * 5. 頁面結構（Hero、體感區、定價、評價、CTA） * 6. 商品卡片 * 7. Header / Footer * 8. 動畫 * 9. RWD 手機版 * 10. 全域細節修正 * ============================================================ * * 版本紀錄： * v16-final3 → v16-final4 2026-03-31 * - 修正商品卡片文字對齊：text-align 與 justify-items 改為 center * （原 left !important 覆蓋了後段的 center 設定） * v16-final4 → v16-final5 2026-03-31 * - image-with-text 圖片 slide-in 提早觸發： * inView margin -200px → 200px（圖片進入畫面前即開始動畫） * ============================================================ */ /* ============================================================ 1. EnamoR Design Token ============================================================ */ :root { /* 色彩 */ --en-charcoal: 28 28 26; /* #1C1C1A — 主背景、按鈕 */ --en-warm-white: 250 250 247; /* #FAFAF7 — 頁面底色 */ --en-cream: 245 240 232; /* #F5F0E8 — 體感區、CTA 背景 */ --en-accent: 139 111 71; /* #8B6F47 — 金棕點綴 */ --en-accent-light: 196 168 130; /* #C4A882 — 次要點綴 */ --en-mid: 92 92 88; /* #5C5C58 — 內文說明 */ --en-light: 156 154 146; /* #9C9A92 — 作者標注 */ --en-border-alpha: 0.10; /* border opacity */ /* 字型堆疊 */ --en-font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --en-font-serif: Georgia, 'Times New Roman', serif; /* 字重 */ --en-weight-light: 300; --en-weight-regular: 400; --en-weight-medium: 500; /* 字級對照表 */ --en-tag-size: 0.5625rem; /* 9px */ --en-body-size: 0.8125rem; /* 13px */ --en-func-size: 0.8125rem; /* 13px */ --en-reassurance-sz: 0.6875rem; /* 11px */ --en-price-size: 1.25rem; /* 20px */ /* letter-spacing */ --en-ls-tag: 0.25em; /* 4px */ --en-ls-btn: 0.25em; /* 4px */ --en-ls-th: 0.125em; /* 2px */ --en-ls-badge: 0.0625em; /* 1px */ /* line-height */ --en-lh-body: 1.7; --en-lh-heading: 1.5; --en-lh-quote: 1.6; } /* ============================================================ 2. 全域排版覆蓋 ============================================================ */ /* ── Body：Noto Sans TC 300 ── */ body { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; line-height: var(--en-lh-body) !important; letter-spacing: 0 !important; color: rgb(var(--en-charcoal)) !important; background: rgb(var(--en-warm-white)) !important; } /* ── 標題（H1–H6）：Georgia serif 300 ── */ .heading, .h1, .h2, .h3, .h4, .h5, .h6, .prose :where(h1, h2, h3, h4, h5, h6) { font-family: var(--en-font-serif) !important; font-weight: var(--en-weight-light) !important; font-style: normal !important; letter-spacing: 0 !important; line-height: var(--en-lh-heading) !important; text-transform: none !important; } /* ── H1-H6：字型 Georgia、字重 300，字級由主題控制，不覆蓋 font-size ── */ /* ── 區塊標籤 TAG（小字全大寫）── */ .text-xxs, .text-label, [class*="section-header"] .h6, [class*="subheading"] { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-regular) !important; font-size: var(--en-tag-size) !important; text-transform: uppercase !important; letter-spacing: var(--en-ls-tag) !important; } /* ── 功能標題（01/02/03 等）── */ .text-sm, .prose p, .prose li, .text-subdued { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; } /* ── 體感引用（Quote style）── */ .prose blockquote, blockquote { font-family: var(--en-font-serif) !important; font-weight: var(--en-weight-light) !important; font-size: clamp(1.125rem, 2vw, 1.625rem) !important; line-height: var(--en-lh-quote) !important; letter-spacing: 0 !important; border-left: 2px solid rgb(var(--en-accent)) !important; padding-left: 1.5rem !important; font-style: italic !important; } /* ── em 強調：金棕淡色 ── */ .prose em, em { color: rgb(var(--en-accent-light)) !important; font-style: italic !important; } /* ── 次要說明文字 ── */ .text-subdued { color: rgb(var(--en-mid)) !important; opacity: 1 !important; } /* ── 極次要說明（作者、reassurance）── */ .text-xs { font-size: var(--en-reassurance-sz) !important; color: rgb(var(--en-light)) !important; letter-spacing: var(--en-ls-badge) !important; } /* ── 禁用 600、700 字重 ── */ b, strong { font-weight: var(--en-weight-medium) !important; } /* ============================================================ 4. 按鈕 ============================================================ */ /* ── 主要 CTA 按鈕 ── */ .button, .shopify-challenge__button, .shopify-payment-button__button--unbranded { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; text-transform: uppercase !important; letter-spacing: var(--en-ls-btn) !important; border-radius: 0 !important; padding: 1.125rem 3.25rem !important; background-color: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; border: 1px solid rgb(var(--en-charcoal)) !important; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } /* ── 按鈕 hover：金棕底色 ── */ @media screen and (pointer: fine) { .button:not([disabled]):hover, .shopify-challenge__button:not([disabled]):hover, .shopify-payment-button__button--unbranded:not([disabled]):hover { background-color: rgb(var(--en-accent)) !important; border-color: rgb(var(--en-accent)) !important; color: rgb(var(--en-warm-white)) !important; } } /* ── outline 按鈕 ── */ .button--outline { background-color: transparent !important; color: rgb(var(--en-charcoal)) !important; border-color: rgb(var(--en-charcoal)) !important; } @media screen and (pointer: fine) { .button--outline:not([disabled]):hover { background-color: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; } } /* ── small 按鈕 ── */ .button--sm { padding: 0.625rem 1.25rem !important; font-size: calc(var(--en-body-size) - 0.0625rem) !important; } /* ============================================================ 5. Color Scheme 覆蓋 ============================================================ 設計系統的四個 scheme： scheme-1 → 奶油白底（頁面底色 / 評價區） scheme-2 → 暖米底（體感區 / CTA） scheme-3 → 炭黑底（Hero / 定價區） scheme-4 → 透明（overlay 用） ============================================================ */ /* scheme-1：奶油白 #FAFAF7 */ .color-scheme--scheme-1 { --background: 250 250 247 !important; --background-without-opacity: 250 250 247 !important; --text-color: 28 28 26 !important; --accent: 28 28 26 !important; --button-background: 28 28 26 !important; --button-text-color: 250 250 247 !important; --circle-button-background: 250 250 247 !important; --circle-button-text-color: 28 28 26 !important; --border-color: 28 28 26 !important; background-color: rgb(250 250 247) !important; color: rgb(28 28 26) !important; } /* scheme-2：暖米 #F5F0E8 */ .color-scheme--scheme-2 { --background: 245 240 232 !important; --background-without-opacity: 245 240 232 !important; --text-color: 28 28 26 !important; --accent: 139 111 71 !important; --button-background: 28 28 26 !important; --button-text-color: 250 250 247 !important; --circle-button-background: 245 240 232 !important; --circle-button-text-color: 28 28 26 !important; background-color: rgb(245 240 232) !important; color: rgb(28 28 26) !important; } /* scheme-3：炭黑 #1C1C1A */ .color-scheme--scheme-3 { --background: 28 28 26 !important; --background-without-opacity: 28 28 26 !important; --text-color: 250 250 247 !important; --accent: 196 168 130 !important; --button-background: 250 250 247 !important; --button-text-color: 28 28 26 !important; --circle-button-background: 250 250 247 !important; --circle-button-text-color: 28 28 26 !important; background-color: rgb(28 28 26) !important; color: rgb(250 250 247) !important; } /* scheme-4：透明（overlay 用）*/ .color-scheme--scheme-4 { --text-color: 250 250 247 !important; --button-background: 250 250 247 !important; --button-text-color: 28 28 26 !important; } /* ── 讓全頁面預設底色是奶油白而非灰色 ── */ body, .color-scheme--bg-* { background-color: rgb(var(--en-warm-white)) !important; } /* 修正預設 scheme-1 底色（原來是 #efefef，改成設計系統的 #FAFAF7）*/ .color-scheme--scheme-1, body > * { background-color: rgb(var(--en-warm-white)); } /* ============================================================ 6. 頁面結構元件 ============================================================ */ /* ── Hero 區（炭黑底）── */ .shopify-section--video .content-over-media, .shopify-section--image-with-text-overlay .content-over-media, .shopify-section--slideshow .content-over-media { background-color: rgb(var(--en-charcoal)); /* 左側底紋 */ background-image: repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 41px ); } /* ── 體感說明區（暖米底）── */ .shopify-section--image-with-text, .shopify-section--multiple-media-with-text, .shopify-section--images-with-text-scroll { background-color: rgb(var(--en-cream)) !important; } /* ── 定價 / 促銷區（炭黑底）── */ .shopify-section--countdown, .shopify-section--countdown-condensed, .shopify-section--countdown-banner { background-color: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; } /* ── 評價區（白底）── */ .shopify-section--blog-posts { background-color: rgb(var(--en-warm-white)) !important; } /* ── CTA 區（暖米底）── */ .shopify-section--newsletter { background-color: rgb(var(--en-cream)) !important; } /* ── Section 邊框線：細緻 0.5px ── */ .bordered-section { border-top: 0.5px solid rgba(28, 28, 26, var(--en-border-alpha)) !important; } /* ── 引用左側線（金棕）── */ .image-with-text__content blockquote, .multiple-media-with-text__content blockquote, .rich-text blockquote { border-left: 2px solid rgb(var(--en-accent)) !important; } /* ============================================================ 7. 商品卡片 ============================================================ */ /* ── 商品卡片排版 ── */ .product-card__info { text-align: center !important; justify-items: center !important; gap: 0.375rem !important; } /* ── 商品標題 ── */ .product-card__info .product-title, .product-card__info a[class*="title"], .product-card__info .h5, .product-card__info .h6 { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; letter-spacing: 0 !important; color: rgb(var(--en-charcoal)) !important; } /* ── 商品 vendor ── */ .product-card__info .vendor, .product-card__info .text-subdued { font-size: var(--en-reassurance-sz) !important; color: rgb(var(--en-light)) !important; letter-spacing: var(--en-ls-badge) !important; } /* ── 價格大字 ── */ .price, .price__current, [class*="price"] .price:first-child { font-family: var(--en-font-serif) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-price-size) !important; } /* ── 商品圖 hover 縮放 ── */ .product-card__image { transition: transform 0.5s ease !important; } .product-card:hover .product-card__image { transform: scale(1.03) !important; } /* ── 商品圖 object-fit ── */ .product-card__image { object-fit: cover !important; object-position: center top !important; } /* ── 快速加入按鈕：去掉圓角 ── */ .product-card__quick-add-button { border-radius: 0 !important; background: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; } /* ── badge（MIT TAIWAN）── */ .badge { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-regular) !important; font-size: var(--en-tag-size) !important; letter-spacing: var(--en-ls-badge) !important; border-radius: 0 !important; } /* ── 售完 / 折扣 badge 顏色 ── */ .badge--sold-out { background: rgb(var(--en-mid)) !important; color: rgb(var(--en-warm-white)) !important; } .badge--on-sale { background: rgb(var(--en-accent)) !important; color: rgb(var(--en-warm-white)) !important; } /* ============================================================ 8. Header / Navigation ============================================================ */ /* ── Header 背景：奶油白 ── */ .shopify-section--header .header { background-color: rgb(var(--en-warm-white)) !important; border-bottom: 0.5px solid rgba(28, 28, 26, var(--en-border-alpha)) !important; } /* ── Header Nav 連結 ── */ .header__nav-item a, .header__navigation a, .header a { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; letter-spacing: 0 !important; color: rgb(var(--en-charcoal)) !important; text-transform: none !important; } /* ── Footer 背景：炭黑 ── */ .shopify-section--footer .footer { background-color: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; } .shopify-section--footer .footer a, .shopify-section--footer .footer p, .shopify-section--footer .footer li { color: rgb(var(--en-warm-white)) !important; } .shopify-section--footer .footer .link-faded { color: rgb(var(--en-light)) !important; } .shopify-section--footer .footer .link-faded:hover { color: rgb(var(--en-warm-white)) !important; } /* ── Footer copyright text ── */ .shopify-section--footer .footer__aside p { font-size: var(--en-reassurance-sz) !important; letter-spacing: var(--en-ls-badge) !important; } /* ============================================================ 9. 評價卡片 ============================================================ */ /* ── 評價大引號裝飾 ── */ .rating-card::before, [class*="review"] blockquote::before, [class*="testimonial"]::before { content: '\201C'; font-size: 4.5rem; color: rgb(var(--en-accent-light)); opacity: 0.25; font-family: var(--en-font-serif); line-height: 1; display: block; margin-bottom: -1.5rem; } /* ── 評價卡片邊框 ── */ [class*="review-card"], [class*="testimonial-card"] { border: 1px solid rgba(28, 28, 26, var(--en-border-alpha)) !important; border-radius: 0 !important; } /* ============================================================ 10. 動畫 ============================================================ */ /* ── 滑入動畫（IntersectionObserver 配合使用）── */ @keyframes en-fade-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } } .en-reveal { animation: en-fade-up 0.8s ease forwards; } .en-reveal:nth-child(2) { animation-delay: 0.15s; } .en-reveal:nth-child(3) { animation-delay: 0.30s; } .en-reveal:nth-child(4) { animation-delay: 0.45s; } .en-reveal:nth-child(5) { animation-delay: 0.60s; } /* ============================================================ 11. RWD 手機版（≤768px） ============================================================ */ @media screen and (max-width: 699px) { /* 各區塊 padding */ .section-spacing { padding-block: 3.75rem !important; padding-inline: 1.5rem !important; } /* H1 / H2 手機版：字級由主題控制，不覆蓋 */ /* 按鈕全寬（可選）*/ .button--full-width-mobile { width: 100% !important; justify-content: center !important; } /* 商品卡片 info 置中（手機一列一個較常見）*/ .product-card__info { text-align: center !important; justify-items: center !important; } } /* ============================================================ 12. 全域細節修正 ============================================================ */ /* ── 所有 border-radius 清零（方形美學）── */ .card, [class*="-card"], .modal, .drawer, .dropdown, input, textarea, select { border-radius: 0 !important; } /* ── input / form 元素 ── */ input, textarea, select { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-body-size) !important; color: rgb(var(--en-charcoal)) !important; border-color: rgba(28, 28, 26, 0.2) !important; background: rgb(var(--en-warm-white)) !important; } input:focus, textarea:focus, select:focus { border-color: rgb(var(--en-charcoal)) !important; outline: none !important; box-shadow: 0 1px 0 0 rgb(var(--en-charcoal)) !important; } /* ── 連結 ── */ a { color: inherit; text-decoration: none; } a:hover { color: rgb(var(--en-accent)) !important; } /* ── scrollbar（細緻）── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: rgb(var(--en-cream)); } ::-webkit-scrollbar-thumb { background: rgb(var(--en-accent-light)); border-radius: 0; } /* ── announcement bar ── */ .shopify-section--announcement-bar { background-color: rgb(var(--en-charcoal)) !important; color: rgb(var(--en-warm-white)) !important; } .shopify-section--announcement-bar a, .shopify-section--announcement-bar p { font-family: var(--en-font-sans) !important; font-weight: var(--en-weight-light) !important; font-size: var(--en-tag-size) !important; letter-spacing: var(--en-ls-tag) !important; text-transform: uppercase !important; color: rgb(var(--en-warm-white)) !important; } /* ── loading bar 顏色 ── */ .loading-bar { background: rgb(var(--en-accent)) !important; } /* ── 頁面最外層底色保護 ── */ #shopify-section-header ~ * > .color-scheme--scheme-1 { background-color: rgb(var(--en-warm-white)) !important; } /* ============================================================ 15. Slideshow / Hero 影片文字 — 字級 + 顏色 ============================================================ */ /* 副標（ZERO TEX 萊卡抗菌）→ 17px，白色 */ .shopify-section--slideshow .content-over-media p.h6 { font-size: 17px !important; color: #FAFAF7 !important; } /* 主文（您的舒適邊界 我們分寸不讓）→ 28px，白色 */ .shopify-section--slideshow .content-over-media p.h1, .shopify-section--slideshow .content-over-media p.h2 { font-size: 28px !important; color: #FAFAF7 !important; } /* Featured collection nav（MIT / SKIN / EnTry99）→ 16px */ .featured-collections-navigation > button, .featured-collections-navigation > button.h2, .shopify-section--featured-collections .section-stack > div > h2 { font-size: 16px !important; } /* ============================================================ 16. 選項選中狀態 — 黑底白字 ============================================================ */ /* 顏色選項 + 尺寸選項：選中時黑底白字 */ :checked + .block-swatch, .block-swatch.is-selected { background-color: #1C1C1A !important; color: #FAFAF7 !important; border-color: #1C1C1A !important; } /* 顏色色塊選中（圓形色票）*/ :checked + .color-swatch, .color-swatch.is-selected { outline: 2px solid #1C1C1A !important; outline-offset: 2px !important; } /* ============================================================ 17. 多件折扣優惠列（enamor-multibuy-bar） ============================================================ */ /* 只有「查看全部優惠 →」連結是桃紅色 + 粗體 */ .enamor-multibuy-bar a { color: #C4386B !important; font-weight: 500 !important; } /* 修復手機版左右滑動 */ .enamor-multibuy-bar { overflow-x: hidden !important; flex-wrap: wrap !important; } /* [EnamoR] 隱藏文章作者 */ .article__footer-bottom p.text-subdued { display: none; } /* [EnamoR] 首頁blog摘錄截三行 */ .blog-post-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* [EnamoR] 商品卡片文字置中（已合併至第7節） */ /* [EnamoR] Collection grid 左右間距縮小為 5px，圖片 frame 自動撐大 */ .product-list { --product-list-default-column-gap: 5px !important; --product-list-horizontal-spacing-factor: 1 !important; } /* [EnamoR] Collection grid 左右間距縮小為 5px */ .product-list { --product-list-default-column-gap: 5px !important; --product-list-horizontal-spacing-factor: 1 !important; } /* [EnamoR] 全站商品圖片統一 2:3 比例 */ .product-card__image, .product-card__image--primary, .product-card__image--secondary { aspect-ratio: 2 / 3 !important; object-fit: cover !important; object-position: center top !important; width: 100% !important; height: auto !important; } /* [EnamoR] SALE 導覽列酒紅色（class 抓法）*/ .nav-link.nav-sale, a.nav-link.nav-sale, .nav-mobile-link.nav-sale { color: #8B1A2B !important; font-weight: 400 !important; } /* 折扣 tag 文字白色 */ .discount-badge { color: #ffffff !important; } .discount-badge svg path, .discount-badge svg { fill: #ffffff !important; color: #ffffff !important; } /* 暫時隱藏贈品進度欄 */ #enamor-progress-wrap, .enamor-dual-sep { display: none !important; }