/* * Mr.Blue 畫面設計參數(WP-47 / F9) * ------------------------------------------------------------------ * 全站的陰影、立體按鈕、圓角只在這個檔案定義;各頁面與元件一律用 var(--mrb-*) 取用。 * FIGMA 設計稿到了之後,只要改這裡的「變數值」,全站同步生效(不用逐頁找寫死的 box-shadow)。 * 載入處:includes/header.php(所有網站頁)與 simple_cart_db.php(購物車頁自帶簡易頁首)。 * 說明文件:docs/功能紀錄/F9_立體度與按鈕.md */ :root { /* ===== 1. 陰影 3 級 ===== */ --mrb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); /* 小:卡片、區塊、表單框 */ --mrb-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.18); /* 中:浮起的按鈕、選單、卡片 hover */ --mrb-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.2); /* 大:彈窗、燈箱 */ --mrb-shadow-sm-up: 0 -2px 8px rgba(0, 0, 0, 0.1); /* 小(向上):貼底的金額列 */ --mrb-shadow-side: 4px 0 24px rgba(0, 0, 0, 0.08); /* 側邊選單抽屜(向右投影) */ --mrb-shadow-inset: inset 2px 2px 6px rgba(0, 0, 0, 0.07), inset -2px -2px 5px rgba(255, 255, 255, 0.85); /* 凹陷:輸入框、價格表底 */ --mrb-shadow-inset-bar: inset 0 3px 6px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.95); /* 凹陷長條(團購第二層分類底、表單欄位;取自 sub.png / form.png) */ --mrb-shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* 上緣高光(搭配其他陰影使用) */ --mrb-shadow-navbar: inset 0 -3px 6px rgba(0, 0, 0, 0.3); /* 頁首藍灰列下緣暗部 */ --mrb-shadow-btn-red: 0 5px 16px rgba(142, 36, 28, 0.38); /* 紅色主按鈕(結帳)投影 */ --mrb-shadow-btn-red-hover: 0 6px 20px rgba(142, 36, 28, 0.45); /* 紅色主按鈕 hover */ /* ===== 2. 圓角 2 級(+ 膠囊) ===== */ --mrb-radius-sm: 8px; /* 小:輸入框、小卡片 */ --mrb-radius-lg: 16px; /* 大:大卡片、彈窗 */ --mrb-radius-pill: 999px; /* 膠囊:立體按鈕、標籤(形狀常數,不算級數) */ /* ===== 3. 立體按鈕(漸層 + 上緣高光 + 下方投影;顏色取自 cart2.png / comparison.png / btn.png / btn-active.png / on.png / off.png / freebuy.png) ===== */ --mrb-3d-highlight: inset 0 2px 1px rgba(255, 255, 255, 0.5); /* 上緣高光 */ --mrb-3d-shade: inset 0 -3px 3px rgba(0, 0, 0, 0.16); /* 下緣暗部 */ --mrb-3d-drop: 0 3px 4px rgba(0, 0, 0, 0.35); /* 下方投影 */ --mrb-3d-shadow: var(--mrb-3d-highlight), var(--mrb-3d-shade), var(--mrb-3d-drop); --mrb-3d-shadow-hover: var(--mrb-3d-highlight), var(--mrb-3d-shade), 0 5px 7px rgba(0, 0, 0, 0.35); --mrb-3d-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --mrb-3d-text: #fff; /* 色票:每色 top → bottom 兩端,按鈕用 linear-gradient(180deg, top, bottom) */ --mrb-3d-red-top: #f26c6c; /* 加入購物車(cart2.png) */ --mrb-3d-red-bottom: #b24343; --mrb-3d-blue-top: #77a3c4; /* 加入比較(comparison.png) */ --mrb-3d-blue-bottom: #567b95; --mrb-3d-steel-top: #89a3b5; /* 分類鈕:選取中(btn.png) */ --mrb-3d-steel-bottom: #5f87a6; --mrb-3d-gray-top: #b6c2c8; /* 分類鈕:未選取(btn-active.png) */ --mrb-3d-gray-bottom: #778894; --mrb-3d-on-top: #a60000; /* ON 開啟(on.png) */ --mrb-3d-on-bottom: #b00000; --mrb-3d-off-top: #a0a0a0; /* ON/OFF 關閉態的灰(off.png) */ --mrb-3d-off-bottom: #565656; --mrb-3d-bar-top: #b5c3cc; /* 標題長條(freebuy.png / plus1tt.png) */ --mrb-3d-bar-bottom: #8fa1ae; --mrb-3d-cta-top: #b13741; /* 大型紅色購買鈕(cart.png) */ --mrb-3d-cta-bottom: #912d35; --mrb-3d-cta-shadow: inset 0 -5px 6px rgba(0, 0, 0, 0.18), inset 0 2px 3px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.25); /* cart.png:內緣暗部 + 下方投影 */ /* 凹陷底色(sub.png / form.png) */ --mrb-inset-bg: #e6ebf1; /* ===== 4. 會員中心(profile / newuserdata)擬態面板:凸起 / 凹陷 / 按鈕 ===== */ --mrb-neu-card: 10px 10px 22px rgba(163, 168, 184, 0.4), -8px -8px 18px rgba(255, 255, 255, 0.85); --mrb-neu-inset: inset 4px 4px 8px rgba(163, 168, 184, 0.35), inset -3px -3px 8px rgba(255, 255, 255, 0.9); --mrb-neu-inset-focus: inset 5px 5px 10px rgba(163, 168, 184, 0.45), inset -4px -4px 10px rgba(255, 255, 255, 1), 0 0 0 2px rgba(45, 80, 120, 0.18); --mrb-neu-btn-primary: 5px 5px 12px rgba(45, 74, 102, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.4); --mrb-neu-btn-gold: 5px 5px 12px rgba(180, 130, 30, 0.35), -3px -3px 8px rgba(255, 255, 255, 0.4); --mrb-neu-btn-soft: 4px 4px 10px rgba(163, 176, 196, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.7); --mrb-neu-panel: 6px 6px 14px rgba(163, 168, 184, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.65); --mrb-neu-popup: 8px 8px 18px rgba(163, 168, 184, 0.4), -5px -5px 14px rgba(255, 255, 255, 0.8); } /* ===== 5. 立體按鈕元件(.mrb-3d-btn):用於商品頁加入購物車 / 加入比較 ===== */ /* 外框尺寸 = 原 120×50 圖片(寬高比 2.4:1),版面不變;可見的膠囊用 ::before 畫在原圖「實心區」的位置 */ .mrb-3d-btn { --mrb-3d-h: 44px; --mrb-3d-top: var(--mrb-3d-red-top); --mrb-3d-bottom: var(--mrb-3d-red-bottom); position: relative; display: inline-block; box-sizing: border-box; height: var(--mrb-3d-h); width: calc(var(--mrb-3d-h) * 2.4); padding: 0; border: 0; background: transparent; color: var(--mrb-3d-text); font-size: calc(var(--mrb-3d-h) * 0.31); font-weight: 700; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; cursor: pointer; } .mrb-3d-btn::before { content: ""; position: absolute; left: 5.8%; right: 6.7%; top: 16%; bottom: 18%; border-radius: var(--mrb-radius-pill); background: linear-gradient(180deg, var(--mrb-3d-top) 0%, var(--mrb-3d-bottom) 100%); box-shadow: var(--mrb-3d-shadow); } .mrb-3d-btn > .mrb-3d-btn__label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; text-shadow: var(--mrb-3d-text-shadow); } .mrb-3d-btn:hover:not(:disabled)::before { box-shadow: var(--mrb-3d-shadow-hover); filter: brightness(1.05); } .mrb-3d-btn:active:not(:disabled)::before { box-shadow: var(--mrb-3d-highlight), var(--mrb-3d-shade); } .mrb-3d-btn:focus-visible { outline: 2px solid rgba(25, 137, 250, 0.6); outline-offset: 1px; border-radius: var(--mrb-radius-pill); } .mrb-3d-btn--red { --mrb-3d-top: var(--mrb-3d-red-top); --mrb-3d-bottom: var(--mrb-3d-red-bottom); } .mrb-3d-btn--blue { --mrb-3d-top: var(--mrb-3d-blue-top); --mrb-3d-bottom: var(--mrb-3d-blue-bottom); } .mrb-3d-btn:disabled { cursor: not-allowed; opacity: 0.65; } /* ===== 6. ON/OFF 狀態標籤(.mrb-toggle):用於商品頁優惠狀態(原 on.png / off.png) ===== */ .mrb-toggle { --mrb-toggle-h: 28px; display: inline-flex; align-items: center; gap: calc(var(--mrb-toggle-h) * 0.07); height: var(--mrb-toggle-h); padding: 0 calc(var(--mrb-toggle-h) * 0.12); box-sizing: border-box; line-height: 1; vertical-align: middle; } .mrb-toggle__seg { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--mrb-toggle-h) * 0.72); min-width: calc(var(--mrb-toggle-h) * 1.4); padding: 0 calc(var(--mrb-toggle-h) * 0.18); border-radius: var(--mrb-radius-pill); background: linear-gradient(180deg, var(--mrb-3d-off-top) 0%, var(--mrb-3d-off-bottom) 100%); box-shadow: var(--mrb-3d-shadow); color: var(--mrb-3d-text); font-size: calc(var(--mrb-toggle-h) * 0.44); font-weight: 800; letter-spacing: 0.04em; text-shadow: var(--mrb-3d-text-shadow); box-sizing: border-box; } .mrb-toggle--on .mrb-toggle__seg:first-child { background: linear-gradient(180deg, var(--mrb-3d-on-top) 0%, var(--mrb-3d-on-bottom) 100%); } .mrb-toggle--off .mrb-toggle__seg:last-child { background: linear-gradient(180deg, var(--mrb-3d-blue-top) 0%, var(--mrb-3d-blue-bottom) 100%); } /* ===== 手機/觸控裝置:輸入欄位字級 16px(2026-10-26 真機清單模擬驗收) ===== * iPhone Safari 在輸入框/下拉字級小於 16px 時,點下去會自動放大畫面;統一 16px 即可避免(雙指縮放照常)。 * 用 !important 是為了蓋過各頁