/* =========================== 全域主題變數（Light / Dark） =========================== */ :root{ /*Hero*/ --heroV-height:100%; --heroI-height:100vh; /* 基礎色 */ --bg: #ffffff; --fg: #0f172a; --muted: #64748b; /* 容器與卡片 */ --card: #f8fafc; --card-fg: var(--fg); --border: rgba(0,0,0,.08); --shadow: 0 10px 22px rgba(0,0,0,.18); /* 導覽列 */ --nav-bg: rgba(0,0,0,.85); --nav-fg: #ffffff; /* Hero / 疊層 */ --hero-bg: #000000; --hero-overlay-top: rgba(0,0,0,.35); --hero-overlay-mid: rgba(0,0,0,.25); --hero-overlay-btm: rgba(0,0,0,.45); --hero-caption-shadow: 0 3px 12px rgba(0,0,0,.6); /* 按鈕 */ --btn-bg: #2563eb; --btn-fg: #ffffff; --btn-muted-bg: #334155; --btn-like-bg: #2b6cb0; --btn-yt-bg: #cc0000; /* 產品資訊 */ --price: #b58900; --stock: #667085; /* 圖片切換鈕 */ --img-nav-bg: rgba(0,0,0,.45); --img-nav-fg: #ffffff; /* Modal / Backdrop */ --backdrop: rgba(0,0,0,.45); /* Burger */ --burger-stroke: #ffffff; /* 版面尺寸 */ --container-px: 20px; --section-gap: 3rem; --radius-card: 12px; --radius-btn: 12px; --grid-gap: 16px; /* 動畫 */ --ease: .22s ease; /*商品頁欄數*/ --grid-pxs: 2; --grid-psm: 3; --grid-pmd: 4; --grid-plg: 6; --grid-pxl: 6; /*首頁欄數*/ --grid-hxs: 2; --grid-hsm: 3; --grid-hmd: 4; --grid-hlg: 4; --grid-hxl: 4; /*圖文頁欄數*/ --grid-ixs: 2; --grid-ism: 3; --grid-imd: 4; --grid-ilg: 6; --grid-ixl: 6; /*自訂標籤*/ --custom-chip-font-size: 12px; --custom-chip-pad-y: 6px; --custom-chip-pad-x: 8px; /*詳情左上標籤*/ --officialdetail-badge-lefttop-font-size: 12px; --official-chip-pad-y: 4px; --official-chip-pad-x: 10px; --chip-bg: #1e293b; --chip-fg: #fff; --official-chip-bg-promo: #b91c1c; --official-chip-bg-new: #2563eb; --official-chip-bg-hot: #ea580c; --official-chip-bg-limited: #0f766e; /*首頁官方標籤*/ --officialHome-badge-lefttop-font-size: 12px; --officialHome-chip-pad-y: 4px; --officialHome-chip-pad-x: 8px; /*feature chip用 --btn-bg*/ --officialHome-chip-bg-limited: #ef4444; --officialHome-chip-bg-sale: #f59e0b; --officialHome-chip-bg-hot: #ea580c; --officialHome-chip-bg-new: #22c55e; /*詳情圖片下方標籤*/ --detail-badge-below-font-size: 12px; --detail-badge-below-pad-y: 4px; --detail-badge-below-pad-x: 10px; } /* Light 模式保持原本的 :root */ /* Dark 模式覆寫：支援與兩種情況 */ /*:is(:root[data-theme="dark"], body.dark-theme){*/ :root[data-theme="dark"]{ --bg: #0f172a; --fg: #e5e7eb; --muted: #94a3b8; --card: #0b1220; --card-fg: var(--fg); --border: rgba(255,255,255,.08); --shadow: 0 10px 22px rgba(0,0,0,.35); --nav-bg: rgba(15,23,42,.9); --nav-fg: #ffffff; --price: #facc15; --stock: #94a3b8; --img-nav-bg: rgba(0,0,0,.55); --burger-stroke: #ffffff; } /* Light · Pink */ :root[data-palette="pink"]{ /* 基底 */ --bg: #fdf2f8; /* 背景更淺，內容可讀 */ --fg: #3a0a2a; /* 主要文字深一點 */ --muted: #9d4b7a; /* 容器/卡片 */ --card: #fff0f6; --card-fg: #4b1540; --border: rgba(58,10,42,.12); --shadow: 0 10px 22px rgba(58,10,42,.12); /* 導覽/覆蓋 */ --nav-bg: color-mix(in oklab, #ec4899 18%, #000 75%); /* 半透明帶主色 */ --nav-fg: #fff; --hero-bg: #0b0b0b; --hero-overlay-top: rgba(0,0,0,.35); --hero-overlay-mid: rgba(0,0,0,.25); --hero-overlay-btm: rgba(0,0,0,.45); /* 按鈕/互動 */ --btn-bg: #ec4899; /* pink-500 */ --btn-fg: #fff; --btn-like-bg: #d946ef; /* fuchsia-500 */ --btn-muted-bg: #be185d; /* rose-700 */ --btn-bg-hover: #db2777; /* pink-600 */ /* 其它語意 */ --price: #b91c1c; /* 價格(紅) */ --img-nav-bg: rgba(0,0,0,.40); --img-nav-fg: #fff; } /* Dark · Pink */ :is(:root[data-theme="dark"], body.dark-theme)[data-palette="pink"]{ --bg: #1a0e17; /* 深底而非純紫，避免壓垮對比 */ --fg: #f8e7f2; --muted: #f0abfc; /* 輕度粉紫文字 */ --card: #4a1028; --card-fg: #ffd1e6; --border: rgba(255,209,230,.14); --shadow: 0 10px 22px rgba(0,0,0,.35); --nav-bg: color-mix(in oklab, #ec4899 26%, #000 70%); --nav-fg: #fff; --btn-bg: #f472b6; /* pink-400 */ --btn-fg: #1f0a16; --btn-like-bg: #e879f9; /* fuchsia-400 */ --btn-muted-bg: #9f1239; /* rose-800 */ --btn-bg-hover: #fb7185; /* rose-400 */ --price: #f43f5e; --img-nav-bg: rgba(0,0,0,.55); --img-nav-fg: #fff; } /* Light · Blue */ :root[data-palette="blue"]{ --bg:#f8fbff; --fg:#0b1b34; --muted:#647aa3; --card:#ffffff; --card-fg:var(--fg); --border:rgba(11,27,52,.12); --shadow:0 10px 22px rgba(11,27,52,.10); --nav-bg: color-mix(in oklab, #2563eb 18%, #000 75%); --nav-fg:#fff; --btn-bg:#2563eb; --btn-fg:#fff; --btn-bg-hover:#1d4ed8; --btn-like-bg:#0ea5e9; --btn-muted-bg:#1e3a8a; --price:#b45309; --img-nav-bg:rgba(0,0,0,.40); --img-nav-fg:#fff; } /* Dark · Blue */ :is(:root[data-theme="dark"], body.dark-theme)[data-palette="blue"]{ --bg:#0b172a; --fg:#e6eefc; --muted:#a5b4fc; --card:#0b1220; --card-fg:#e6eefc; --border:rgba(230,238,252,.14); --shadow:0 10px 22px rgba(0,0,0,.35); --nav-bg: color-mix(in oklab, #2563eb 26%, #000 70%); --nav-fg:#fff; --btn-bg:#60a5fa; --btn-fg:#0b172a; --btn-bg-hover:#3b82f6; --btn-like-bg:#38bdf8; --btn-muted-bg:#1e3a8a; --price:#f59e0b; --img-nav-bg:rgba(0,0,0,.55); --img-nav-fg:#fff; } /* Light · Emerald */ :root[data-palette="emerald"]{ --bg:#f3fbf7; --fg:#062015; --muted:#5c8f7a; --card:#ffffff; --card-fg:var(--fg); --border:rgba(6,32,21,.12); --shadow:0 10px 22px rgba(6,32,21,.10); --nav-bg: color-mix(in oklab, #10b981 18%, #000 75%); --nav-fg:#fff; --btn-bg:#10b981; --btn-fg:#083a2a; --btn-bg-hover:#059669; --btn-like-bg:#34d399; --btn-muted-bg:#065f46; --price:#0d9488; --img-nav-bg:rgba(0,0,0,.40); --img-nav-fg:#fff; } /* Dark · Emerald */ :is(:root[data-theme="dark"], body.dark-theme)[data-palette="emerald"]{ --bg:#071a14; --fg:#dcfce7; --muted:#a7f3d0; --card:#0d251e; --card-fg:#dcfce7; --border:rgba(220,252,231,.14); --shadow:0 10px 22px rgba(0,0,0,.35); --nav-bg: color-mix(in oklab, #10b981 26%, #000 70%); --nav-fg:#eafff6; --btn-bg:#34d399; --btn-fg:#062015; --btn-bg-hover:#10b981; --btn-like-bg:#5eead4; --btn-muted-bg:#064e3b; --price:#2dd4bf; --img-nav-bg:rgba(0,0,0,.55); --img-nav-fg:#fff; } /* Light · Amber */ :root[data-palette="amber"]{ --bg:#fffdf5; --fg:#271a05; --muted:#a37d3f; --card:#ffffff; --card-fg:var(--fg); --border:rgba(39,26,5,.12); --shadow:0 10px 22px rgba(39,26,5,.10); --nav-bg: color-mix(in oklab, #f59e0b 18%, #000 75%); --nav-fg:#fff; --btn-bg:#f59e0b; --btn-fg:#271a05; --btn-bg-hover:#d97706; --btn-like-bg:#fbbf24; --btn-muted-bg:#92400e; --price:#b45309; --img-nav-bg:rgba(0,0,0,.40); --img-nav-fg:#fff; } /* Dark · Amber */ :is(:root[data-theme="dark"], body.dark-theme)[data-palette="amber"]{ --bg:#1a1407; --fg:#fff7e6; --muted:#fde68a; --card:#211708; --card-fg:#fff7e6; --border:rgba(255,247,230,.14); --shadow:0 10px 22px rgba(0,0,0,.35); --nav-bg: color-mix(in oklab, #f59e0b 26%, #000 70%); --nav-fg:#fff; --btn-bg:#fbbf24; --btn-fg:#1a1407; --btn-bg-hover:#f59e0b; --btn-like-bg:#fde68a; --btn-muted-bg:#78350f; --price:#f59e0b; --img-nav-bg:rgba(0,0,0,.55); --img-nav-fg:#fff; } /* Light · Violet */ :root[data-palette="violet"]{ --bg:#faf8ff; --fg:#170a2b; --muted:#7a6bb0; --card:#ffffff; --card-fg:var(--fg); --border:rgba(23,10,43,.12); --shadow:0 10px 22px rgba(23,10,43,.10); --nav-bg: color-mix(in oklab, #7c3aed 18%, #000 75%); --nav-fg:#fff; --btn-bg:#7c3aed; --btn-fg:#fff; --btn-bg-hover:#6d28d9; --btn-like-bg:#a78bfa; --btn-muted-bg:#4c1d95; --price:#8b5cf6; --img-nav-bg:rgba(0,0,0,.40); --img-nav-fg:#fff; } /* Dark · Violet */ :is(:root[data-theme="dark"], body.dark-theme)[data-palette="violet"]{ --bg:#0f0a1f; --fg:#efe9ff; --muted:#c4b5fd; --card:#171131; --card-fg:#efe9ff; --border:rgba(239,233,255,.14); --shadow:0 10px 22px rgba(0,0,0,.35); --nav-bg: color-mix(in oklab, #7c3aed 26%, #000 70%); --nav-fg:#fff; --btn-bg:#a78bfa; --btn-fg:#0f0a1f; --btn-bg-hover:#8b5cf6; --btn-like-bg:#c4b5fd; --btn-muted-bg:#312e81; --price:#c084fc; --img-nav-bg:rgba(0,0,0,.55); --img-nav-fg:#fff; } /* =========================== Reset / 基礎 =========================== */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial} html,body{background:var(--bg);color:var(--fg);} /* =========================== HERO（影片與疊層） =========================== */ .hero{ position:relative; height:var(--heroI-height); overflow:hidden; background:var(--hero-bg); } .hero iframe{ position:absolute; inset:0; width:100%; height:var(--heroV-height); pointer-events:none; } .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient( to bottom, var(--hero-overlay-top), var(--hero-overlay-mid) 60%, var(--hero-overlay-btm) ); } .hero-slogan{ position:absolute; left:50%; bottom:12vh; transform:translateX(-50%); color:#fff; font-weight:800; font-size:clamp(28px,5vw,64px); text-shadow:var(--hero-caption-shadow); z-index:3; } .yt-meta{ position:absolute; top:14px; left:16px; z-index:40; display:flex; align-items:center; gap:12px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45); } .yt-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; background:#222; border:1px solid rgba(255,255,255,.25) } .yt-texts{ line-height:1.1 } .yt-channel{ font-weight:700; opacity:.95 } .yt-title{ font-size:12px; opacity:.9; max-width:min(60vw,520px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .yt-actions{ position:absolute; top:12px; right:12px; z-index:40; display:flex; gap:10px } .yt-btn{ display:inline-block; padding:6px 10px; font-size:12px; color:#fff; text-decoration:none; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2); border-radius:6px; backdrop-filter:saturate(140%) blur(6px); } .yt-btn:hover{ background:rgba(0,0,0,.7) } .yt-fab{ position:absolute; right:14px; top:40%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:10px } .fab-btn{ width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(0,0,0,.55); cursor:pointer; backdrop-filter:saturate(140%) blur(6px); } .fab-btn:hover{ background:rgba(0,0,0,.7) } /* =========================== NAVBAR（置於內容層，sticky） =========================== */ .site-nav{ position:sticky; top:0; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:14px var(--container-px); background:var(--nav-bg); color:var(--nav-fg); box-shadow:0 4px 18px rgba(0,0,0,.25); backdrop-filter:saturate(140%) blur(6px); } .site-nav .brand{ font-weight:800 } .site-nav a{ color:var(--nav-fg); text-decoration:none; margin-left:18px; opacity:.95 } .site-nav a:hover{ opacity:1 } /* =========================== 內容層 =========================== */ .wrap{ max-width:1024px; margin:0 auto; padding:80px var(--container-px); } section{ padding:30px 0; border-bottom:1px solid var(--border) } /* =========================== Theme / Speech buttons =========================== */ .ui-floating{ position:fixed; right:16px; bottom:16px; z-index:50; display:flex; flex-direction:column; gap:10px } .ui-btn{ width:46px; height:46px; border-radius:var(--radius-btn); border:1px solid var(--border); display:grid; place-items:center; background:var(--card); color:var(--card-fg); box-shadow:var(--shadow); cursor:pointer; transition:background-color var(--ease), color var(--ease), border-color var(--ease); } /* =========================== Burger Menu（固定右上） =========================== */ #burger_menu{ position: fixed; top: 7vh; right: 3vw; z-index: 100; cursor: pointer; transition: transform .25s ease; } #burger_menu:hover{ transform: scale(1.1); } #burger_svg{ width:46px; height:46px; border-radius:12px; cursor:pointer; } #burger_svg .line{ stroke: var(--burger-stroke); stroke-width:2.2; stroke-linecap:round; transition: transform .22s ease, opacity .18s ease; } #burger_svg .l1{ transform-origin:10px 10px; } #burger_svg .l2{ transform-origin:10px 10px; } #burger_svg .l3{ transform-origin:10px 10px; } #burger_svg.open .l1{ transform: translateY(6px) rotate(45deg); } #burger_svg.open .l2{ opacity: 0; } #burger_svg.open .l3{ transform: translateY(-6px) rotate(-45deg); } /* =========================== Modal =========================== */ .modal{ position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: var(--backdrop); z-index: 100; } .modal.open { display: flex; animation: modal-fade .18s ease-out both; } @keyframes modal-fade { from {opacity:0} to {opacity:1} } .modal-content{ width: min(92vw, 760px); background: var(--bg); color: var(--fg); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.35); transform: translateY(6px) scale(.98); opacity: 0; animation: pop .22s ease-out .05s both; } @keyframes pop { to {transform: translateY(0) scale(1); opacity:1} } .modal-header{ padding: 10px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: flex-end; background: var(--card); } .modal-header .close{ cursor: pointer; font-size: 22px; line-height: 1; } .modal-body{ padding: 14px 16px 18px; max-height: min(72vh, 760px); overflow: auto; } /* =========================== ERP 選單 =========================== */ .erp-nav{ display: grid; gap: 6px; } .erp-nav details{ border:1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--card-fg); } .erp-nav summary{ list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center; gap:10px; padding:10px 12px; font-weight:600; } .erp-nav summary::-webkit-details-marker{ display:none; } .erp-nav .badge{ margin-left:auto; font-size:12px; opacity:.65; background: rgba(0,0,0,.06); padding:2px 8px; border-radius:999px; } .erp-nav .children{ padding:6px 12px 12px 18px; display:grid; gap:6px; } .erp-nav .leaf{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background: rgba(0,0,0,.04); cursor:pointer; } .erp-nav .leaf:hover{ background: rgba(0,0,0,.08); } .erp-nav summary{ position:relative; } .erp-nav summary::after{ content:"▸"; margin-left:auto; font-size:14px; opacity:.75; transition: transform .18s ease; } .erp-nav details[open] > summary::after{ transform: rotate(90deg); } /* =========================== Hero 圖片輪播（images 模式） =========================== */ .hero-images{ position:absolute; inset:0; } .hero-images .hero-slide{ position:absolute; inset:0; display:block; } .hero-images img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-caption{ position:absolute; left:50%; bottom:12vh; transform:translateX(-50%); color:#fff; font-weight:700; font-size:clamp(18px,2vw,24px); text-shadow:0 2px 8px rgba(0,0,0,.5); } .hero-btn{ position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,.4); color:#fff; border:none; font-size:32px; line-height:1; padding:.3em .5em; border-radius:50%; cursor:pointer; z-index:20; transition: background .3s ease, transform .2s; } .hero-btn:hover{ background: rgba(0,0,0,.65); transform: translateY(-50%) scale(1.1); } .hero-btn-left{ left:20px; } .hero-btn-right{ right:20px; } /* =========================== 兩層 Hero（底層固定，內容捲動） =========================== */ .hero-bg{ position: fixed; top:0; left:0; width:100%; height:100vh; z-index:0; overflow:hidden; background:var(--hero-bg); } .hero-bg iframe, .hero-bg img{ width:100%; height:100%; object-fit:cover; pointer-events:none; } body.layered-hero #hero{ display:none; } /* 主要內容：給間距（與 hero 分隔） */ /*#main_doc{ position:relative; z-index:1; background:transparent; padding-top: var(--section-gap); padding-left: var(--container-px); padding-right: var(--container-px); } #main_doc { display: block !important; opacity: 1 !important; visibility: visible !important; min-height: 100vh; }*/ #main_doc { position: relative; z-index: 1; background: transparent; padding-top: var(--section-gap); padding-left: var(--container-px); padding-right: var(--container-px); display: block; opacity: 1; visibility: visible; min-height: 100vh; } /* 當進入商品詳情頁（含有 .prod-detail 時）覆蓋樣式 */ #main_doc:has(.prod-detail) { background: #0b132b !important; z-index: 10 !important; padding: 0 !important; } /* =========================== 商品列表（RWD 欄數） =========================== */ .prod-grid{ display:grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-pxs), minmax(0, 1fr));/*變數為欄數*/ align-items:start; } @media (min-width: 640px){ .prod-grid{ grid-template-columns: repeat(var(--grid-psm), minmax(0, 1fr)); } } @media (min-width: 768px){ .prod-grid{ grid-template-columns: repeat(var(--grid-pmd), minmax(0, 1fr)); } } @media (min-width: 1024px){ .prod-grid{ grid-template-columns: repeat(var(--grid-plg), minmax(0, 1fr)); } } @media (min-width: 1280px){ .prod-grid{ grid-template-columns: repeat(var(--grid-pxl), minmax(0, 1fr)); } } /*首頁*/ .prod-grid1{ display:grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-hxs), minmax(0, 1fr)); align-items:start; } @media (min-width: 640px){ .prod-grid1{ grid-template-columns: repeat(var(--grid-hsm), minmax(0, 1fr)); } } @media (min-width: 768px){ .prod-grid1{ grid-template-columns: repeat(var(--grid-hmd), minmax(0, 1fr)); } } @media (min-width: 1024px){ .prod-grid1{ grid-template-columns: repeat(var(--grid-hlg), minmax(0, 1fr)); } } @media (min-width: 1280px){ .prod-grid1{ grid-template-columns: repeat(var(--grid-hxl), minmax(0, 1fr)); } } /*圖文頁*/ .prod-grid2{ display:grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-ixs), minmax(0, 1fr)); align-items:start; } @media (min-width: 640px){ .prod-grid2{ grid-template-columns: repeat(var(--grid-ism), minmax(0, 1fr)); } } @media (min-width: 768px){ .prod-grid2{ grid-template-columns: repeat(var(--grid-imd), minmax(0, 1fr)); } } @media (min-width: 1024px){ .prod-grid2{ grid-template-columns: repeat(var(--grid-ilg), minmax(0, 1fr)); } } @media (min-width: 1280px){ .prod-grid2{ grid-template-columns: repeat(var(--grid-ixl), minmax(0, 1fr)); } } /* 卡片 */ .prod-card{ background: var(--card); color: var(--card-fg); border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow); transition: background-color var(--ease), color var(--ease), box-shadow var(--ease); } /* 圖片 1:1 方形 */ .prod-image-wrap{ position:relative; width:100%; padding-top:100%; overflow:hidden; cursor:pointer; } .prod-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .25s ease; } .prod-image-wrap:hover .prod-img{ transform: scale(1.03); } /* 切圖按鈕 */ .img-nav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:none; background: var(--img-nav-bg); color: var(--img-nav-fg); font-size:18px; } .img-left{ left:8px; } .img-right{ right:8px; } /* 內容 */ .prod-body{ padding:12px; } /*.prod-title{ font-weight:700; margin-bottom:6px; text-align:center; }*/ /* 產品卡標題樣式 */ .prod-title { font-size: 1rem; /* ← 這裡改大小，例如 1.25rem, 18px, 20px 都可以 */ font-weight: 800; /* 字重 */ line-height: 1.3; margin: 6px 0; color: var(--fg); text-align: center; /* 若要置中 */ } .prod-price{ color: var(--price); margin-bottom:4px; text-align:center; } .prod-stock{ font-size:12px; color: var(--stock); margin-bottom:10px; text-align:center; } .prod-actions{ display:flex; gap:8px; } /* 按鈕 */ .btn{ padding:6px 10px; border:0; border-radius:8px; cursor:pointer; background: var(--btn-bg); color: var(--btn-fg); transition: opacity .2s ease, background-color var(--ease), color var(--ease); } .btn:hover{ opacity:.9; } .btn-yt{ background: #ff0000; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; padding: 0; box-shadow: 0 3px 8px rgba(0,0,0,.25); } .btn-yt:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgba(0,0,0,.35); } .btn-yt .yt-icon { width: 24px; height: 24px; fill: #fff; } body[data-theme="dark"] .btn-yt { box-shadow: 0 4px 10px rgba(255,255,255,.15); } .btn-yt svg{ margin-right:0; } .btn-like{ background: var(--btn-like-bg); } .btn-desc{ background: var(--btn-muted-bg); } .btn:disabled{ opacity:.5; cursor:not-allowed; } /* 分頁 */ .prod-pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 24px; } .pg-btn{ padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:inherit; } .pg-btn[disabled]{ opacity:.4; cursor:not-allowed; } .pg-info{ opacity:.8; } /* =========================== 興趣彈窗 =========================== */ .interest-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:1000; } .interest-backdrop.open{ display:flex; } .interest-modal{ width:min(92vw, 560px); background: var(--card); color: var(--card-fg); border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.4); } .interest-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); } .interest-close{ background:transparent; border:0; color:inherit; font-size:20px; cursor:pointer; } .interest-body{ padding:14px 16px; } .interest-body .interest-title{ font-weight:700; margin-bottom:8px; } .interest-text{ width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background: rgba(255,255,255,.06); color: inherit; } .interest-footer{ display:flex; gap:8px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--border); } .btn-cancel{ background: var(--btn-muted-bg); } .btn-send{ background:#16a34a; color:#fff; } /*==================================================================*/ /* 基底：尚未進場 */ .aos-lite { --distance: 24px; --dur: 800ms; --ease: cubic-bezier(.22,.61,.36,1); --delay: 0ms; opacity: 0; transform: translateY(var(--distance)) scale(0.98); filter: blur(0px); transition: opacity var(--dur) var(--ease) var(--delay), transform var(--dur) var(--ease) var(--delay), filter var(--dur) var(--ease) var(--delay); will-change: opacity, transform, filter; } /* 進場後 */ .aos-lite.is-inview { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* 模式（方向/型態） */ .anim-fade-up { transform: translateY(var(--distance)) scale(1); } .anim-fade-right { transform: translateX(calc(var(--distance) * -1)); } .anim-fade-left { transform: translateX(var(--distance)); } .anim-zoom-in { transform: scale(.92); } .anim-flip-up { transform: rotateX(8deg) translateY(var(--distance)); transform-origin: bottom; } .anim-blur-in { filter: blur(6px); } /* 模式的最終狀態 */ .anim-fade-right.is-inview, .anim-fade-left.is-inview, .anim-zoom-in.is-inview, .anim-flip-up.is-inview { transform: none; } .anim-blur-in.is-inview { filter: blur(0); } /* 使用者偏好減少動畫：直接顯示 */ @media (prefers-reduced-motion: reduce) { .aos-lite { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* 讓卡片動畫樣式更穩（提高權重） */ .prod-card.aos-lite{ opacity: 0; transform: translateY(var(--distance, 24px)) scale(0.98); transition: opacity var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms), transform var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms), filter var(--dur, 800ms) var(--ease, cubic-bezier(.22,.61,.36,1)) var(--delay, 0ms); will-change: opacity, transform, filter; } .prod-card.aos-lite.is-inview{ opacity: 1; transform: none; } /* 模式（方向/型態）— 同樣疊在 prod-card 上提高權重 */ .prod-card.anim-fade-right { transform: translateX(calc(var(--distance, 24px) * -1)); } .prod-card.anim-fade-left { transform: translateX(var(--distance, 24px)); } .prod-card.anim-zoom-in { transform: scale(.92); } .prod-card.anim-flip-up { transform: rotateX(8deg) translateY(var(--distance, 24px)); transform-origin: bottom; } .prod-card.anim-blur-in { filter: blur(6px); } .prod-card.anim-fade-right.is-inview, .prod-card.anim-fade-left.is-inview, .prod-card.anim-zoom-in.is-inview, .prod-card.anim-flip-up.is-inview { transform: none; } .prod-card.anim-blur-in.is-inview { filter: none; } #chat-toggle svg { width: 22px; height: 22px; fill: currentColor; } #btn-facebook svg, #btn-instagram svg, #btn-line svg { width: 22px; height: 22px; fill: currentColor; } /* ===== 線上留言 Popup ===== */ .lead-backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.45); z-index: 200; } .lead-backdrop.open { display: flex; animation: modal-fade .2s ease-out both; } .lead-modal { width: min(92vw, 480px); background: var(--card, #fff); color: var(--card-fg, #000); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; animation: pop .25s ease-out both; } .lead-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border, #ccc); font-weight: 700; } .lead-close { background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; } .lead-body { padding: 16px 18px 22px; display: grid; gap: 10px; } .lead-body input[type="text"], .lead-body textarea { width: 100%; border: 1px solid var(--border, #ccc); border-radius: 8px; padding: 8px; background: var(--bg, #fff); color: inherit; } .lead-agree { font-size: 14px; display:flex; align-items:center; gap:6px; } .lead-feedback { color:#c00; font-size:14px; display:none; margin-top:4px; } .btn-send { margin-top: 10px; padding:10px 16px; border:0; border-radius:8px; background:#2563eb; color:#fff; font-weight:700; cursor:pointer; transition: background .2s; } .btn-send:hover { background:#1d4ed8; } .interest-label { display: block; margin: 10px 0 4px; font-weight: 600; color: var(--fg); } .interest-contact, .interest-text { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 15px; background: rgba(255,255,255,0.05); color: inherit; } .interest-contact:focus, .interest-text:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); } /* Product Detail */ .prod-detail .pd-back{ margin-bottom:14px; } .pd-header{ margin: 4px 0 18px; } .pd-title{ font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 0 0 6px; } .pd-sub{ display:flex; gap:12px; align-items:center; color:var(--muted); } .pd-sub .pd-stock{ font-size: 14px; } .pd-hero{ position:relative; border-radius: var(--radius-card); overflow:hidden; box-shadow: var(--shadow); } .pd-hero-img{ width:100%; display:block; object-fit:cover; } .pd-hero-has-carousel .pd-slides{ position:relative; height:min(66vh, 720px); } .pd-hero-has-carousel .pd-slide{ position:absolute; inset:0; opacity:0; transition:opacity .3s ease; } .pd-hero-has-carousel .pd-slide.is-active{ opacity:1; } .pd-hero-has-carousel img{ width:100%; height:100%; object-fit:cover; } .pd-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; background: rgba(0,0,0,.45); color:#fff; font-size:20px; } .pd-nav-left{ left:10px; } .pd-nav-right{ right:10px; } .pd-section{ margin-top:22px; } .pd-h3{ font-size: clamp(18px, 2.2vw, 22px); margin:0 0 10px; font-weight:800; } .pd-text{ line-height:1.7; } .pd-illu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } @media (min-width: 768px){ .pd-illu-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .pd-illu-img{ width:100%; height:100%; object-fit:cover; border-radius:10px; } .pd-video{ position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow: var(--shadow); } .pd-video iframe{ position:absolute; inset:0; width:100%; height:100%; } /*#main_doc, .prod-detail.wrap { display:block!important; opacity:1!important; visibility:visible!important; color:#fff!important; background:#0b132b!important; position:relative; z-index:100; min-height:100vh; padding:20px; } .prod-detail img { display:block; width:100%; max-width:600px; margin:20px auto; border-radius:12px; }*/ /* 商品詳情頁最外層容器 */ /*#main_doc .prod-detail { position: relative; z-index: 5; display: block; width: 100%; min-height: 100vh; padding: 24px 20px; color: #fff; background-color: #0b132b; font-family: system-ui, sans-serif; } */ /* 標題與副標題 */ .prod-detail .pd-title { font-size: clamp(22px, 3.6vw, 36px); font-weight: 800; margin-bottom: 8px; } .prod-detail .pd-sub { font-size: 15px; opacity: 0.85; margin-bottom: 14px; } /* Hero 圖 */ .prod-detail .pd-hero-img { width: 100%; max-width: 600px; margin: 20px auto; border-radius: 12px; display: block; } /* 商品說明 */ .prod-detail .pd-h3 { font-size: 20px; font-weight: 700; margin: 20px 0 10px; } .prod-detail .pd-text { line-height: 1.75; opacity: 0.95; } /* 返回鈕 */ #pd-back { display: inline-block; margin-bottom: 15px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; } #pd-back:hover { background: rgba(255,255,255,0.2); } #main_doc .prod-detail.aos-lite{ opacity:1 !important; transform:none !important; filter:none !important; } .hero-slogan { white-space: pre-line; /* 允許 \n 換行 */ } /* =========================== About / Contact（吃主題變數） =========================== */ /* 詳情頁容器與背景，改為吃 var */ #main_doc .prod-detail { position: relative; z-index: 5; display: block; width: 100%; min-height: 100vh; padding: 24px var(--container-px); background: var(--bg); color: var(--fg); box-shadow: none; } /* 若希望進入詳情頁時整個 main_doc 換底色，用主題背景即可 */ #main_doc:has(.prod-detail) { background: var(--bg) !important; z-index: 10 !important; padding: 0 !important; } /* 標題、次標題 */ .pd-header { margin: 4px 0 18px; } .pd-title { font-size: clamp(22px, 3.6vw, 36px); font-weight: 800; color: var(--fg); } .pd-sub { display:flex; gap:12px; align-items:center; color: var(--muted); } /* 區塊標題/文字 */ .pd-section { margin-top: 22px; } .pd-h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; color: var(--fg); } .pd-text { line-height: 1.75; color: var(--fg); opacity: .95; } /* 主圖與輪播容器 */ .pd-hero { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--card); color: var(--card-fg); box-shadow: var(--shadow); border: 1px solid var(--border); } .pd-hero-img { width: 100%; display: block; object-fit: cover; } .pd-hero-has-carousel .pd-slides { position: relative; height: min(66vh, 720px); } .pd-hero-has-carousel .pd-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; } .pd-hero-has-carousel .pd-slide.is-active { opacity: 1; } .pd-hero-has-carousel img { width: 100%; height: 100%; object-fit: cover; } /* 輪播左右鍵 → 改吃主題 */ .pd-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; background: var(--img-nav-bg); color: var(--img-nav-fg); font-size:20px; } .pd-nav-left{ left:10px; } .pd-nav-right{ right:10px; } /* 影片區塊 → 外框吃卡片樣式 */ .pd-video{ position:relative; padding-top:56.25%; border-radius: var(--radius-card); overflow:hidden; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--border); } .pd-video iframe{ position:absolute; inset:0; width:100%; height:100%; } /* 多圖文網格 */ .pd-illu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--grid-gap); } @media (min-width: 768px){ .pd-illu-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } .pd-illu-img{ width:100%; height:100%; object-fit:cover; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--card); } /* 返回按鈕：用主題按鈕色 */ #pd-back{ display:inline-block; margin-bottom:14px; padding:6px 12px; border-radius: var(--radius-btn); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; cursor:pointer; transition: opacity .2s ease, background-color var(--ease), color var(--ease), border-color var(--ease); } #pd-back:hover{ opacity:.9; } /* =========================== 內嵌「線上留言」表單（吃主題） =========================== */ .lead-inline{ display: grid; gap: 12px; max-width: 720px; background: transparent; /* 直接使用頁面背景 */ } .lead-inline label{ color: var(--fg); font-weight: 600; } .lead-inline input[type="text"], .lead-inline textarea{ width: 100%; padding: 10px 12px; background: var(--card); color: var(--card-fg); border: 1px solid var(--border); border-radius: var(--radius-card); transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease), color var(--ease); } .lead-inline input[type="text"]::placeholder, .lead-inline textarea::placeholder{ color: var(--muted); } .lead-inline input[type="text"]:focus, .lead-inline textarea:focus{ outline: none; border-color: var(--btn-bg); box-shadow: 0 0 0 2px color-mix(in oklab, var(--btn-bg) 25%, transparent); } /* 同意條款 */ .lead-agree{ display:flex; align-items:center; gap:6px; color: var(--fg); font-size: 14px; } /* 送出鈕用主題按鈕色 */ .lead-inline .btn-send{ padding: 10px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); border: 0; cursor: pointer; transition: opacity .2s ease, background-color var(--ease), color var(--ease); } .lead-inline .btn-send:hover{ opacity: .9; } /* 表單訊息（成功/錯誤）— 用更通用的可讀色 */ .lead-feedback{ min-height:22px; font-size:14px; } .lead-feedback.ok { color: color-mix(in oklab, #22c55e 92%, var(--fg)); } .lead-feedback.err { color: color-mix(in oklab, #ef4444 92%, var(--fg)); } /* =========================== 一致性微調（和你的既有 token 對齊） =========================== */ .btn{ background: var(--btn-bg); color: var(--btn-fg); } .btn-like{ background: var(--btn-like-bg); color: #fff; } .btn-desc{ background: var(--btn-muted-bg); color: #fff; } .btn:disabled{ opacity:.5; cursor:not-allowed; } /* =========================== Footer（吃主題變數 + aos-lite） =========================== */ /* =========================== Footer (clean, single source) =========================== */ /* 1) Theme tokens（依你的全站變數而定，可再微調） */ :root{ --footer-bg: var(--card); --footer-fg: var(--card-fg); --footer-border: var(--border); --footer-shadow: var(--shadow); --footer-accent: var(--btn-bg); /* 用於雙層背景與徽章 */ --footer-surface: color-mix(in oklab, var(--card) 98%, transparent); --footer-surface-strong: color-mix(in oklab, var(--card) 94%, transparent); --footer-gradient: linear-gradient( 180deg, color-mix(in oklab, var(--btn-bg) 6%, transparent) 0%, transparent 38%, color-mix(in oklab, var(--fg) 4%, transparent) 100% ); --footer-badge-bg: rgba(0,0,0,.06); } :root[data-theme="dark"]{ --footer-bg: color-mix(in oklab, var(--card) 92%, transparent); --footer-surface: color-mix(in oklab, var(--card) 90%, transparent); --footer-surface-strong: color-mix(in oklab, var(--card) 86%, transparent); --footer-gradient: linear-gradient( 180deg, color-mix(in oklab, var(--btn-bg) 10%, transparent) 0%, transparent 40%, color-mix(in oklab, var(--fg) 8%, transparent) 100% ); --footer-badge-bg: rgba(255,255,255,.06); } /* 2) Footer 容器：雙層背景 + 邊框陰影 */ #site-footer{ background: var(--footer-gradient), var(--footer-surface); color: var(--footer-fg); border-top: 1px solid var(--footer-border); box-shadow: var(--footer-shadow); position: relative; } /* 頂部一道很淡的色帶（層次） */ #site-footer::before{ content:""; position:absolute; inset:0 0 auto 0; height:10px; background: linear-gradient(90deg, color-mix(in oklab, var(--footer-accent) 35%, transparent), transparent 60% ); opacity:.15; pointer-events:none; } /* 3) 內容區（上半部） */ #site-footer .footer-top{ max-width: 1200px; margin: 0 auto; padding: 48px var(--container-px); display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 900px){ #site-footer .footer-top{ grid-template-columns: 1.2fr 1fr 1fr; } } #site-footer .ft-col{ position:relative; } #site-footer .ft-about{ line-height: 1.7; opacity: .95; } /* 標題 + 漸層底線（吃品牌色） */ #site-footer .ft-title{ font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; margin: 0 0 12px 0; color: var(--footer-fg); } #site-footer .ft-title::after{ content:""; display:block; width:64px; height:3px; margin-top:8px; border-radius:999px; background: linear-gradient(90deg, color-mix(in oklab, var(--footer-accent) 100%, transparent), transparent 85% ); opacity:.9; } /* 聯絡資訊列表 */ #site-footer .ft-list{ list-style:none; padding:0; margin:0 0 14px; } #site-footer .ft-list li{ display:flex; gap:8px; align-items:flex-start; padding:6px 0; line-height:1.55; color: inherit; } #site-footer .ft-list a{ color: inherit; text-decoration:none; border-bottom:1px solid transparent; transition: border-color var(--ease), color var(--ease), opacity var(--ease); } #site-footer .ft-list a:hover{ border-color: color-mix(in oklab, var(--footer-accent) 65%, transparent); opacity:.95; } #site-footer .ft-ico{ width:22px; display:inline-block; opacity:.9 } /* 社群 */ #site-footer .ft-social{ display:flex; gap:12px; align-items:center; margin:2px 0 12px; } #site-footer .ft-social a{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background: var(--footer-surface-strong); box-shadow: inset 0 0 0 1px var(--footer-border); color: inherit; transition: transform .18s ease, box-shadow var(--ease), background-color var(--ease); } #site-footer .ft-social a:hover{ transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); } #site-footer .ft-social svg{ width:24px; height:24px; fill: currentColor; } /* LINE 區塊（ID + 按鈕） */ #site-footer .ft-line{ display:grid; gap:10px; } #site-footer .ft-line-id{ padding:6px 10px; border-radius:999px; background: var(--footer-surface-strong); width: fit-content; } /* 按鈕（沿用站內主按鈕 token） */ #site-footer .ft-line-btn, #site-footer .ft-chat{ display:inline-block; background: var(--btn-bg); color: var(--btn-fg); text-decoration:none; padding:10px 18px; border-radius: var(--radius-btn); font-weight:700; box-shadow: var(--footer-shadow); transition: opacity .2s ease, transform .18s ease; } #site-footer .ft-line-btn:hover, #site-footer .ft-chat:hover{ opacity:.92; transform: translateY(-1px); } /* 4) 版權列 */ #site-footer .footer-copy{ border-top:1px solid var(--footer-border); background: color-mix(in oklab, var(--footer-surface) 92%, transparent); color: var(--footer-fg); text-align:center; padding:14px 10px; font-size:14px; } /* 5)（可選）aos-lite 漸入動態 */ #site-footer .ft-col.aos-lite{ --distance: 16px; --dur: 720ms; opacity: 0; transform: translateY(var(--distance)) scale(.98); will-change: opacity, transform; transition: opacity var(--dur) var(--ease) var(--delay, 0ms), transform var(--dur) var(--ease) var(--delay, 0ms); } #site-footer .ft-col.aos-lite.is-inview{ opacity: 1; transform: none; } /*======================================================================*/ /* 首頁段落標題 */ .home-sec-hd{ display:flex; align-items:center; justify-content:space-between; margin: 8px 0 12px; } .home-sec-title{ font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; color: var(--fg); } /* 卡片角標（tag） */ /*首頁官方標籤*/ .prod-image-wrap{ position:relative; } .prod-badge{ position:absolute; left:8px; top:8px; padding:var(--officialHome-chip-pad-y) var(--officialHome-chip-pad-x); border-radius:999px; font-size:var(--officialHome-badge-lefttop-font-size , 12px); font-weight:700; background: var(--footer-badge-bg, rgba(0,0,0,.06)); color: var(--card-fg); border:1px solid var(--border); box-shadow: var(--shadow); } /* 各標籤微色差（用主色混合，不硬編） */ .badge-featured{ background: color-mix(in oklab, var(--btn-bg) 12%, var(--card)); } .badge-limited { background: color-mix(in oklab, var(--officialHome-chip-bg-limited,#ef4444) 16%, var(--card)); } .badge-sale { background: color-mix(in oklab, var(--officialHome-chip-bg-sale,#f59e0b) 18%, var(--card)); } .badge-hot { background: color-mix(in oklab, var(--officialHome-chip-bg-hot,#e11d48) 16%, var(--card)); } .badge-new { background: color-mix(in oklab, var(--officialHome-chip-bg-new,#22c55e) 18%, var(--card)); } /* 促銷價樣式 */ .price-old{ color: var(--muted); } .price-promo{ color: var(--price); font-weight: 800; } .btn-like:hover { filter: brightness(1.1); transform: translateY(-1px); } /* 關閉全域 hero（非首頁時加在） */ body[data-hero="off"] .hero, body[data-hero="off"] .hero-bg { display: none !important; } /*=================================Banner=============================*/ #menu { margin: 0 auto var(--section-gap); } #menu { display: block; width: 100%; margin: 0 auto var(--section-gap); position: relative; z-index: 1; } #menu .bn { position: relative; height: var(--banner-height, 25vh); border-radius: 16px; overflow: hidden; background: var(--card); z-index: 2; } #menu .bn-slide { position:absolute; inset:0; background-size:cover; background-position:var(--bn-pos, center center); opacity:0; transition: opacity var(--bn-dur, 600ms) ease; } #menu .bn-slide.is-active { opacity:1; } #menu .bn-overlay { position:absolute; inset:0; pointer-events:none; background: color-mix(in oklab, var(--fg) 6%, transparent); opacity: var(--bn-overlay, .15); } #menu .bn-slogan{ position:absolute; left:24px; bottom:18px; padding:10px 14px; border-radius:12px; background: rgba(0,0,0,.35); color:#fff; font-weight:800; line-height:1.3; white-space: pre-line; text-shadow: 0 2px 8px rgba(0,0,0,.45); backdrop-filter: saturate(140%) blur(6px); box-shadow: var(--shadow); } /* 容器：放在圖片區左上，跟內建角標對齊，換行排列 */ .prod-image-wrap .prod-badges { position: absolute; left: 8px; top: 40px; /* 讓出內建角標的高度（可依實際角標高度微調） */ display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 16px); z-index: 2; } /* 單顆小籤：圓角、內距、半透明陰影讓文字浮起來 */ /*自訂標籤*/ .prod-image-wrap .prod-badges .chip { display: inline-block; font-size: var(--custom-chip-font-size, 12px); line-height: 1; padding: var(--custom-chip-pad-y) var(--custom-chip-pad-x); border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 6px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.25); opacity: .98; } /*詳情左上標籤*/ .detail-badges { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .detail-chip { display:inline-flex; align-items:center; gap:6px; padding: var(--official-chip-pad-y) var(--official-chip-pad-x); border-radius:999px; font-size: var(--officialdetail-badge-lefttop-font-size, 12px); line-height:1; background: var(--chip-bg, #1e293b); color: var(--chip-fg, #fff); border: 1px solid rgba(255,255,255,.08); } .detail-chip[data-kind="promo"] { background:var(--official-chip-bg-promo,#b91c1c); } .detail-chip[data-kind="new"] { background:var(--official-chip-bg-new,#2563eb); } .detail-chip[data-kind="hot"] { background:var(--official-chip-bg-hot,#ea580c); } .detail-chip[data-kind="limited"] { background:var(--official-chip-bg-limited,#0f766e); } /* 既有：.figure-badges 是左上角絕對定位 */ /* 新增修飾符，當在圖片下方使用時覆寫為「非絕對定位 + 置中」 */ .figure-badges--below { position: static !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .figure-badges--below .detail-chip { padding: 4px 10px; /* 下方版位可稍微大一點可讀性更好 */ font-size: 12px; } /* illustration 區塊：左右並排 */ .pd-illu-flex { display: flex; align-items: flex-start; gap: 24px; margin: 28px 0; } /* 左欄圖片 ≈ 1/5 螢幕寬 */ .pd-illu-imgWrap { flex: 0 0 20vw; /* 固定佔 20vw */ max-width: 20vw; } .pd-illu-img { width: 100%; height: auto; display: block; border-radius: 16px; } /* 右欄文字 ≈ 2/5 螢幕寬（圖片 2 倍） */ .pd-illu-textWrap { flex: 0 0 40vw; /* 固定佔 40vw */ max-width: 40vw; } /* 讓整個區塊不會因 wrap 的最大寬度而看起來過窄 */ .prod-detail.wrap .pd-illu-flex { width: 100%; } /* 平板：比 20/40 稍寬一點，避免文字太擠 */ @media (max-width: 1024px) { .pd-illu-imgWrap { flex-basis: 28vw; max-width: 28vw; } .pd-illu-textWrap { flex-basis: 60vw; max-width: 60vw; } } /* 手機：改縱排，滿版 */ @media (max-width: 640px) { .pd-illu-flex { flex-direction: column; } .pd-illu-imgWrap, .pd-illu-textWrap { flex: none; max-width: 100%; } } /* 兩欄基礎容器：大螢幕兩欄、手機改直排 */ .pd-row { display: grid; grid-column-gap: 24px; grid-row-gap: 24px; align-items: start; margin: 24px 0; } /* 2/3：等寬兩欄 */ .pd-row--equal { grid-template-columns: 1fr 1fr; } /* 4/5：圖文比例 1/5 : 2/5，其餘留白（共 5/5），不額外塞空 DIV */ .pd-row--2to1 { grid-template-columns: 20% 40%; justify-content: start; /* 避免被拉滿 */ } .pd-row--img-left { justify-content: start; } .pd-row--img-right { justify-content: end; } /* 讓圖片區塊別被文字寬度影響 */ .pd-col--img .pd-hero, .pd-col--img .pd-hero-img { width: 100%; height: auto; } /* 讓說明區自然排版 */ .pd-col--text .pd-desc { margin: 0; } /* 在等寬模式時反轉左右欄位（不改 HTML） */ .pd-row--equal.pd-row--reverse { direction: rtl; } .pd-row--equal.pd-row--reverse > * { direction: ltr; } /* 手機（<= 900px）一律直排，避免擠壓 */ @media (max-width: 900px) { .pd-row, .pd-row--equal, .pd-row--2to1 { grid-template-columns: 1fr !important; } .pd-row--img-right, .pd-row--img-left { justify-content: stretch; } } /* === product_detail_arr 4/5 專用 === */ .pd-grid-1-2of5 { display: grid; grid-template-columns: minmax(180px, 20%) minmax(320px, 40%); gap: 24px; align-items: start; justify-content: center; /* 兩欄總寬置中，不會貼左或貼右 */ margin: 24px 0; } /* 右圖左文（模式 5） */ .pd-grid-1-2of5.pd-reverse { direction: rtl; } .pd-grid-1-2of5.pd-reverse > * { direction: ltr; } /* 1:1 圖塊（不吃舊的 .pd-hero 樣式） */ .pd-imgbox { width: 100%; max-width: 420px; /* 圖塊不會太大 */ aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; margin-inline: auto; /* 小螢幕時圖置中 */ } .pd-imgbox > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 右側文字欄 */ .pd-textbox { max-width: 60ch; align-self: center; } .pd-textbox .pd-h3 { margin-top: 0; } /* 手機改直排 */ @media (max-width: 1024px) { .pd-grid-1-2of5, .pd-grid-1-2of5.pd-reverse { grid-template-columns: 1fr !important; justify-content: stretch; } .pd-textbox { text-align: center; margin-inline: auto; } }