@charset "utf-8"; /* ============================================================================ DG百家樂娛樂城(dg38.net)/action/ 改版樣式表 —— base.css 取代式:不覆蓋 style.css / member.css,由 head_clean.php 單獨載入,自己撐完整版面。 色票對齊 dg38.net 前台 WP(Astra/Elementor 全域):白底 #FFFFFF + 主金 #F9C349 + 內文 #1E1810。 天條 54:與 WP 端共用色票/字級/按鈕樣式,但版面結構各走各的(不複製 WP 的區塊順序)。 還原方式:控制器把 view 指回舊樣板即可,本檔與舊檔無任何耦合。 ========================================================================== */ /* ---------------------------------------------------------------- 設計 token */ :root { /* 底色:白底(對齊 WP 前台實測 #FFFFFF / #F6F7F8 / #F0EFEC,天條 54 色票共用) */ --bg: #FFFFFF; --bg-2: #F6F7F8; --bg-3: #F0EFEC; /* 輸入框底 */ --panel: #FFFFFF; --panel-2: #F6F7F8; /* 表頭 / 抬升面 */ --panel-hi: #F0EFEC; /* 線(白底一律用深色細線,不能再用白色疊層——白疊白會整條消失) */ --line: rgba(30,24,16,.12); --line-2: rgba(30,24,16,.20); --line-gold: rgba(249,195,73,.55); /* 品牌色 —— 金(2026-09-10 改:量 WP 首頁「實際渲染出來」的色,不是 Astra 全域變數。 天條 54 共用不只色票、尺寸也要對齊前台實測值 —— 先前抽全域變數 #F9C349, 但 WP 首頁真正在用的是下面這組更深的金棕,所以看起來「風格沒延伸」。 取樣自 dg38.net 首頁:導覽字 #884F05、標題 #3E2D08、頁首CTA #DB8F00、內容CTA #64490D */ --gold: #884F05; /* WP 導覽/連結金:白底約 7.5:1,給文字 */ --gold-hi: #64490D; /* WP 內容 CTA 的深金棕:白底約 8.7:1,也給 hover 文字 */ --gold-fill: #DB8F00; /* WP 頁首 CTA 橘金:實心底,配 --on-gold 深字(約 6.6:1) */ --gold-dim: #C9A33C; /* 裝飾金:邊框用,不給成句文字 */ --orange: #DB8F00; /* 金按鈕實心底(WP 頁首 CTA 同色) */ --orange-hi: #FFB100; /* WP 強調亮金:hover 用 */ --head: #3E2D08; /* WP 標題色(深咖啡金),白底約 11:1 */ --teal: #17795F; /* 狀態用,白底可讀 */ --teal-dim: #3d9e88; --on-gold: #1E1810; /* 金底上的深字(對 #F9C349 約 10:1) */ /* 壓在深色上的孤島:hero 主視覺(深圖+遮罩)、底部導覽列、卡片徽章。 這些區域翻白底後仍是深底,裡面一律用下面三個 token,不可用 --txt/--gold */ --on-dark: #F4F1EB; --on-dark-2: #C9C2B6; --gold-on-dark: #F9C349; /* 文字(對齊 WP #1E1810 內文 / #4D4A46 次要) */ --txt: #1E1810; --txt-2: #4D4A46; --txt-3: #6E6A64; /* 弱字:只給標籤/時間戳;白底約 5.3:1 */ --txt-on-p: #1E1810; /* 狀態(白底可讀版,原本的淺色是給近黑底用的) */ --ok: #17795F; --warn: #8A6100; --bad: #C0392B; /* 間距尺度(天條 37:單一尺度,不逐處手調) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; /* 區塊間距:三個斷點各一組,不共用(天條 37) */ --sect: 32px; /* 區塊之間 */ --sect-top: 20px; /* 首區塊貼頁首 */ --sect-end: 40px; /* 尾端留白 */ --edge: 16px; /* 內容左右安全距 */ /* 版面 */ --header-h: 56px; --rail-w: 136px; --bnav-h: 62px; --maxw: 1200px; --r1: 8px; --r2: 12px; --r3: 16px; --r4: 22px; /* 字級(天條 34/42:內文 16、區塊標題 24) */ --f-h1: 28px; --f-h2: 24px; --f-h3: 19px; --f-body: 16px; --f-sm: 14px; --shadow: 0 2px 10px rgba(30,24,16,.08); --shadow-lg: 0 10px 30px rgba(30,24,16,.14); } @media (min-width: 768px) { :root { --sect: 40px; --sect-top: 24px; --sect-end: 56px; --edge: 24px; --header-h: 60px; } } @media (min-width: 1024px) { :root { --sect: 56px; --sect-top: 32px; --sect-end: 72px; --edge: 32px; --header-h: 64px; } } /* ---------------------------------------------------------------- 基礎重置 */ *, *::before, *::after { box-sizing: border-box; } /* 捲軸條全站隱藏,捲動照常(Owner 要求:所有頁面卷軸不要出現) */ * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { width: 0; height: 0; display: none; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--txt); font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; font-size: var(--f-body); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; border: 0; vertical-align: middle; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-hi); } ul, ol { margin: 0; padding: 0; list-style: none; } /* 標題吃 WP 首頁實測的深咖啡金 #3E2D08(不是內文的近黑),風格才跟前台是同一套 */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.35; color: var(--head); } h1 { font-size: var(--f-h1); } h2 { font-size: var(--f-h2); } h3 { font-size: var(--f-h3); } h4 { font-size: 17px; } p { margin: 0 0 var(--s3); } p:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* 容器:限寬置中(天條 55),左右用長寫,不用 padding 簡寫 —— 簡寫會清掉 main 的 padding-bottom */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); } /* 區塊只設上間距(天條 38) */ .sect { margin-top: var(--sect); } .sect:first-child { margin-top: var(--sect-top); } .sect-hd { display: flex; align-items: baseline; gap: var(--s3); margin-top: 0; } .sect-hd h1, .sect-hd h2 { font-size: var(--f-h2); letter-spacing: .01em; } .sect-hd .en { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-3); font-weight: 500; } .sect-hd .more { margin-left: auto; font-size: var(--f-sm); color: var(--gold); display: inline-flex; align-items: center; gap: 2px; padding: 12px 4px; margin-top: -12px; margin-bottom: -12px; /* 版面不變,但按得到 */ } /* 滿版背景區塊(天條 39):背景鋪滿視窗寬,內容再限寬 */ .full { width: 100%; } /* ---------------------------------------------------------------- 頁首 */ .hd { position: fixed; inset: 0 0 auto 0; z-index: 1030; height: var(--header-h); background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .hd-in { height: 100%; display: flex; align-items: center; gap: var(--s3); max-width: var(--maxw); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); } .hd-logo { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; } .hd-logo img { height: 36px; width: auto; display: block; } .hd-nav { display: none; margin-left: var(--s5); } @media (min-width: 992px) { .hd-nav { display: flex; align-items: center; gap: var(--s1); } } .hd-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; color: var(--txt-2); font-size: 15px; font-weight: 500; border-radius: var(--r1); } .hd-nav a:hover { color: var(--gold); background: rgba(30,24,16,.05); } .hd-nav a.on { color: var(--gold); background: rgba(249,195,73,.26); } .hd-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } /* 登入後的餘額塊(Owner:頁首要有餘額點數) */ .hd-bal { display: none; align-items: center; gap: var(--s2); height: 40px; padding: 0 var(--s3); background: var(--bg-2); border: 1px solid var(--line-gold); border-radius: var(--r4); } @media (min-width: 480px) { .hd-bal { display: inline-flex; } } .hd-bal .id { font-size: 13px; color: var(--txt-3); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-bal .amt { font-size: 15px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; } .hd-bal .amt::before { content: ""; } .hd-bal .unit { font-size: 12px; color: var(--txt-3); margin-left: -2px; } .hd-bal .rf { width: 30px; height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(30,24,16,.07); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } /* 視覺 30px,點擊區撐到 44(天條 34) */ .hd-bal .rf::after { content: ""; position: absolute; inset: -7px; } .hd-bal .rf:hover { background: rgba(249,195,73,.38); } /* ---------------------------------------------------------------- 按鈕系統 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--s5); font-size: var(--f-body); font-weight: 700; line-height: 1; /* WP 前台的按鈕是「實心底 + 小圓角」,不是膠囊描邊 —— 對齊它才像同一套視覺 */ border: 1px solid transparent; border-radius: var(--r1); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, color .15s; } /* 主要:WP 頁首 CTA 的橘金實心 #DB8F00,配深字(約 6.6:1;白字只有 2.6:1 不合格,不照抄) */ .btn-gold { background: var(--gold-fill); color: var(--on-gold); } .btn-gold:hover { background: var(--orange-hi); color: var(--on-gold); } /* 次要:WP 內容 CTA 的深金棕實心 #64490D + 白字(約 8.7:1) */ .btn-line { background: var(--gold-hi); border-color: var(--gold-hi); color: #fff; } .btn-line:hover { background: var(--gold); border-color: var(--gold); color: #fff; } .btn-ghost { background: var(--bg-2); border-color: var(--line); color: var(--txt); } .btn-ghost:hover { background: var(--panel-hi); color: var(--txt); } .btn-sm { min-height: 44px; padding: 0 var(--s4); font-size: var(--f-sm); } .btn-block { display: flex; width: 100%; } .btn[disabled], .btn.is-off { opacity: .55; cursor: not-allowed; } /* 電腦版按鈕系統(≥992px):主要送出 280×48 置中,一頁只留一顆實心 */ @media (min-width: 992px) { .btn-submit { width: 280px; height: 48px; margin-left: auto; margin-right: auto; } } /* 左右兩顆同一行(Owner:如果做成按鈕都同一行、左右兩顆) */ .btn-pair { display: flex; gap: var(--s3); } .btn-pair > .btn { flex: 1 1 0; } /* 沒有 class 的裸 button 不要掉回瀏覽器預設白底(對比 1.14 的來源) */ button { font-family: inherit; font-size: var(--f-body); } button:not([class]) { min-height: 44px; padding: 0 var(--s4); background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r1); cursor: pointer; } /* ---------------------------------------------------------------- 跑馬燈公告 */ .mq { display: flex; align-items: center; gap: var(--s3); height: 40px; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); } .mq-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; margin-left: var(--edge); background: rgba(249,195,73,.32); color: var(--gold); border-radius: var(--r1); font-size: 13px; font-weight: 700; } .mq-track { flex: 1 1 auto; overflow: hidden; white-space: nowrap; } .mq-track span { display: inline-block; padding-left: 100%; font-size: var(--f-sm); color: var(--txt-2); animation: mq-run 38s linear infinite; } @keyframes mq-run { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .mq-track span { animation: none; padding-left: 0; } .mq-track { overflow-x: auto; } } /* ---------------------------------------------------------------- 主視覺 */ .hero { position: relative; overflow: hidden; border-radius: var(--r3); background: var(--panel); } .hero img { width: 100%; display: block; aspect-ratio: 10 / 3; object-fit: cover; } .hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: var(--s3); } .hero-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(30,24,16,.22); cursor: pointer; position: relative; } .hero-dots i::after { content: ""; position: absolute; inset: -18px; } .hero-dots i.on { background: var(--gold); width: 22px; border-radius: 4px; } /* ---------------------------------------------------------------- 大廳:側欄 + 卡片 */ .lobby { display: block; } @media (min-width: 992px) { .lobby { display: flex; align-items: flex-start; gap: var(--s6); } } /* 分類軌:桌機直式側欄,手機橫向捲動列 */ .rail { display: flex; gap: var(--s2); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s2); } .rail a { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 88px; min-height: 66px; padding: var(--s2) var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); color: var(--txt-2); font-size: var(--f-sm); font-weight: 500; white-space: nowrap; /* 四個中文字不要斷成兩行 */ } .rail a img, .rail a i { width: 26px; height: 26px; display: block; font-size: 22px; line-height: 1; color: var(--gold); } .rail a.on { color: var(--on-gold); border-color: transparent; background: linear-gradient(180deg, var(--gold-hi), var(--orange)); } .rail a.on img, .rail a.on i { color: var(--on-gold); } @media (min-width: 992px) { .rail { flex: 0 0 var(--rail-w); flex-direction: column; overflow: visible; position: sticky; top: calc(var(--header-h) + var(--s4)); padding-bottom: 0; } .rail a { width: 100%; min-width: 0; flex-direction: row; justify-content: flex-start; gap: var(--s2); padding: 0 var(--s3); min-height: 48px; } .rail a i { font-size: 18px; width: 18px; height: 18px; } } .lobby-body { flex: 1 1 auto; min-width: 0; } /* 遊戲卡格狀 用 flex 不用 grid:grid 的空軌道會在卡片數少於欄數時留一格空白, flex 只是靠左排。卡片寬度都是容器的同一等分,各分區大小一致(不為了填滿而拉伸)。 */ .grid-g { display: flex; flex-wrap: wrap; gap: var(--s3); } .grid-g > * { min-width: 0; flex: 0 1 calc((100% - var(--s3)) / 2); } @media (min-width: 560px) { .grid-g > * { flex-basis: calc((100% - 2 * var(--s3)) / 3); } } @media (min-width: 768px) { .grid-g > * { flex-basis: calc((100% - 3 * var(--s3)) / 4); } } @media (min-width: 992px) { .grid-g { gap: var(--s4); } .grid-g > * { flex-basis: calc((100% - 3 * var(--s4)) / 4); } } @media (min-width: 1200px) { .grid-g > * { flex-basis: calc((100% - 4 * var(--s4)) / 5); } } /* 一兩張卡的分區改成橫幅卡:圖在左、字在右、跨滿整列 */ .grid-g.few > * { flex: 1 1 100%; } @media (min-width: 560px) { .grid-g.few .gcard { display: flex; align-items: stretch; } .grid-g.few .gcard-fig { flex: 0 0 38%; max-width: 320px; } .grid-g.few .gcard-fig img { aspect-ratio: auto; height: 100%; min-height: 160px; } .grid-g.few .gcard-bd { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: var(--s5); } .grid-g.few .gcard-bd .nm { font-size: var(--f-h3); } } .gcard { display: block; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; color: var(--txt); } .gcard:hover { border-color: var(--line-gold); color: var(--txt); } .gcard:hover .gcard-fig img { transform: scale(1.04); } .gcard-fig { position: relative; overflow: hidden; background: var(--bg-3); } .gcard-fig img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .28s ease; } .gcard-bd { padding: var(--s3); } .gcard-bd .nm { font-size: var(--f-body); font-weight: 700; line-height: 1.4; } .gcard-bd .en { display: block; margin-top: 2px; font-size: 12px; letter-spacing: .06em; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gcard .tag { position: absolute; top: var(--s2); left: var(--s2); padding: 4px 8px; border-radius: var(--r1); background: rgba(30,24,16,.86); color: var(--gold-on-dark); font-size: 12px; font-weight: 700; line-height: 1.2; } .gcard .tag.teal { color: #6FD6B6; } /* 兩欄區間讓落單的最後一張跨滿,不留尾巴(天條 55) */ @media (max-width: 559px) { .grid-g > :last-child:nth-child(odd) { flex-basis: 100%; } .grid-g > :last-child:nth-child(odd) .gcard-fig img { aspect-ratio: 2 / 1; } } /* 產品卡(首頁 DG 產品:像 dg66 那樣一排產品;6 張走 2/3 欄不留落單尾巴,天條 55) */ .grid-prod { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .grid-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } } .grid-prod > * { min-width: 0; } .gcard.prod .gcard-fig img { aspect-ratio: 4 / 3; } .gcard.prod .gcard-bd { padding: var(--s4); } .gcard.prod .gcard-bd .desc { /* 成句內文一律 16(Owner:一般文字 16;天條 34),不因為在小卡裡就降級 */ margin-top: var(--s2); font-size: var(--f-body); color: var(--txt-2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gcard.prod .go { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s3); font-size: var(--f-sm); font-weight: 700; color: var(--gold); } .gcard.prod:hover .go { color: var(--gold-hi); } /* 首屏 CTA 條(免費試玩 / 體驗金) */ .cta { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s7) var(--s5); text-align: center; background: linear-gradient(135deg, rgba(249,195,73,.28), rgba(201,163,60,.14)); border: 1px solid var(--line-gold); border-radius: var(--r3); } .cta h2 { font-size: var(--f-h2); } .cta p { color: var(--txt-2); } @media (min-width: 768px) { .cta { flex-direction: row; justify-content: space-between; text-align: left; } .cta .cta-actions { flex: 0 0 auto; } } .cta .cta-actions { display: flex; gap: var(--s3); } /* ---------------------------------------------------------------- 首頁 hero(圖上疊真文字,天條 24) */ /* 滿版貼齊視窗兩側、圓角 0、比例 10:3 —— 全部對齊 WP 前台的 banner 實測值 (WP 1280 寬時是 1280x384、圓角 0、貼邊)。原本內縮 + 16px 圓角像一張卡片, 跟前台的橫幅完全不是同一個語言,這是 Owner 說「尺寸不對、風格沒延伸」的主因。 滿版分兩段做,不整段吃 vw:視窗還沒超過限寬時,容器寬度就等於視窗寬, 直接把容器內距抵銷掉最穩(固定值,不受捲軸/vw 誤差影響 —— 768 用 vw 會算出 800 而溢出); 超過限寬之後容器被限住置中,才需要 vw 把它拉回視窗兩側。 width 一定要明寫:aspect-ratio 是雙向的,一旦 min-height 生效(768 時比例算出的 230 小於下限 240),它會反過來把寬度撐成 240x10/3=800 而溢出。寫死寬度後它只作用在高度上。 */ .hero-hd { position: relative; border-radius: 0; overflow: hidden; background: var(--panel); margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); width: calc(100% + 2 * var(--edge)); aspect-ratio: 10 / 3; min-height: 240px; } @media (min-width: 1264px) { /* = --maxw 1200 + 兩側 --edge 32 */ .hero-hd { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } } /* 手機不鎖比例:鎖了高度就由螢幕寬決定,但字幕高度是固定的 —— 390px 會把「官方直營」那行切掉 16px,360px 整行跑到框外。改由內容撐高、只給下限。 */ @media (max-width: 767px) { .hero-hd { aspect-ratio: auto; min-height: 200px; } } .hero-hd .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; } .hero-hd .slide.on { opacity: 1; } .hero-hd .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-hd .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,6,4,.92) 0%, rgba(8,6,4,.62) 42%, rgba(8,6,4,.05) 72%, transparent 100%); } @media (max-width: 767px) { .hero-hd .scrim { background: linear-gradient(0deg, rgba(8,6,4,.90) 0%, rgba(8,6,4,.74) 55%, rgba(8,6,4,.58) 100%); } } /* hero 滿版後字幕要跟內容容器切齊,不能只給固定 40px —— 內容左邊界 =(視窗寬 - 限寬)/2 + 內容安全距,螢幕越寬差越多。 */ .hero-hd .cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); max-width: 66%; padding-left: max(var(--s8), calc((100vw - var(--maxw)) / 2 + var(--edge))); padding-right: var(--s8); } /* 手機改 relative:讓字幕自己撐出 hero 高度(圖與遮罩仍 absolute 鋪滿),就不會再有裁切 */ @media (max-width: 767px) { .hero-hd .cap { position: relative; justify-content: flex-start; gap: var(--s2); /* 手機收緊行距,直接讓框變矮 */ padding: var(--s4) var(--edge) var(--s5); max-width: 100%; } } .hero-hd .kick { color: var(--gold-on-dark); font-weight: 700; letter-spacing: .12em; font-size: var(--f-sm); } .hero-hd .cap h1 { color: #fff; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.18; text-shadow: 0 2px 14px rgba(0,0,0,.7); } .hero-hd .cap h1 b { color: var(--gold-on-dark); } .hero-hd .cap .sub { color: var(--on-dark); font-size: var(--f-body); text-shadow: 0 1px 8px rgba(0,0,0,.7); } .hero-hd .cap .btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); } .hero-hd .dots { position: absolute; z-index: 3; bottom: var(--s4); right: var(--s5); display: flex; gap: 6px; } /* 手機字幕改 relative 之後內容排滿整個 hero,已經沒有空角落放絕對定位的指示點: 放右下會壓到按鈕(還帶 ::after inset:-14px 熱區,點按鈕會誤觸換頁), 放右上會壓到標語。改成進入排版流、排在字幕下方靠右,才是真的不重疊。 底部留白改由這一行提供,所以 .cap 的下 padding 同步收掉。 */ @media (max-width: 767px) { .hero-hd .cap { padding-bottom: var(--s2); } .hero-hd .dots { position: static; justify-content: flex-end; padding: 0 var(--s5) var(--s4); } } .hero-hd .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; position: relative; } .hero-hd .dots i::after { content: ""; position: absolute; inset: -14px; } .hero-hd .dots i.on { background: var(--gold-on-dark); width: 20px; border-radius: 4px; } /* ---------------------------------------------------------------- 首頁快捷入口(大 tiles) */ .qtiles { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 768px) { .qtiles { grid-template-columns: repeat(4, minmax(0,1fr)); } } .qtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 96px; padding: var(--s4); text-align: center; color: var(--txt); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-gold); border-radius: var(--r2); } .qtile:hover { border-color: var(--gold); color: var(--txt); } .qtile i { font-size: 28px; color: var(--gold); line-height: 1; } .qtile .t { font-weight: 700; font-size: var(--f-body); } .qtile .s { font-size: 12px; color: var(--txt-3); } /* ---------------------------------------------------------------- 為什麼選 DG(特色條) */ .feats { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 768px) { .feats { grid-template-columns: repeat(4, minmax(0,1fr)); } } .feat { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); } .feat i { font-size: 30px; color: var(--gold); line-height: 1; } .feat .t { font-weight: 700; font-size: var(--f-h3); } .feat p { color: var(--txt-2); font-size: var(--f-body); margin: 0; line-height: 1.6; } /* ---------------------------------------------------------------- 快捷/優惠卡 */ .grid-q { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .grid-q { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .grid-q > * { min-width: 0; } .qcard { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); color: var(--txt); } .qcard:hover { border-color: var(--line-gold); color: var(--txt); } .qcard i { font-size: 22px; color: var(--gold); line-height: 1; } .qcard .t { font-size: var(--f-body); font-weight: 700; } .qcard .s { display: block; font-size: 13px; color: var(--txt-3); } /* 活動橫幅卡 */ .grid-p { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .grid-p { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-p > :last-child:nth-child(odd) { grid-column: span 2; } .grid-p > :last-child:nth-child(odd) > img { aspect-ratio: 20 / 3; } } .grid-p > * { min-width: 0; } .pcard { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; color: var(--txt); } .pcard:hover { border-color: var(--line-gold); color: var(--txt); } .pcard > img, .pcard > picture > img { width: 100%; display: block; aspect-ratio: 10 / 3; object-fit: cover; } .pcard .bd { padding: var(--s4); } .pcard .bd h3 { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard .bd p { margin-top: 6px; font-size: var(--f-body); color: var(--txt-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------------------------------------------------------------- 面板 / 表單 */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); } .panel > * { min-width: 0; } .panel-hd { display: flex; align-items: center; gap: var(--s2); margin-top: 0; } .panel-hd h2, .panel-hd h3 { font-size: var(--f-h3); } .form-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form-grid > * { min-width: 0; } .fld { min-width: 0; } .fld > label, .fld > .lb { display: block; margin-bottom: 6px; font-size: var(--f-sm); font-weight: 500; color: var(--txt-2); } .fld .val { font-size: var(--f-body); color: var(--txt); } .fld .val.empty { color: var(--txt-3); } input[type="text"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input:not([type]), select, textarea, .form-control { width: 100%; min-height: 44px; padding: 10px var(--s3); background: var(--bg-3); color: var(--txt); border: 1px solid var(--line-2); border-radius: var(--r1); font-size: var(--f-body); font-family: inherit; line-height: 1.5; } textarea { min-height: 96px; } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239c968a'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(249,195,73,.45); outline: 0; } input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--txt-3); opacity: 1; } /* 檔案選擇:原生按鈕的字改不掉,用 label 當按鈕 */ .pickwrap input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pickbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); background: var(--bg-2); color: var(--txt); border: 1px solid var(--line-2); border-radius: var(--r1); font-size: var(--f-sm); font-weight: 500; cursor: pointer; } .pickbtn:hover { background: var(--panel-hi); } .pickname { margin-left: var(--s2); font-size: var(--f-sm); color: var(--txt-3); } .hint { font-size: var(--f-body); color: var(--txt-2); } .note { font-size: var(--f-body); color: var(--txt-2); line-height: 1.6; } /* 狀態籤 */ .st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r4); font-size: 13px; font-weight: 700; line-height: 1.4; } .st.done { background: rgba(23,121,95,.10); color: #12664F; } .st.todo { background: rgba(249,195,73,.36); color: var(--warn); } .st.wait { background: rgba(86,196,168,.16); color: var(--teal); } /* ---------------------------------------------------------------- 會員中心 */ .mc { display: block; } @media (min-width: 1024px) { .mc { display: flex; align-items: flex-start; gap: var(--s6); } .mc-side { flex: 0 0 210px; position: sticky; top: calc(var(--header-h) + var(--s4)); } .mc-body { flex: 1 1 auto; min-width: 0; } } /* 手機不要同時出現側欄與分頁列 */ .mc-side { display: none; } @media (min-width: 1024px) { .mc-side { display: block; } } .mc-side a { display: flex; align-items: center; gap: var(--s3); min-height: 46px; padding: 0 var(--s4); color: var(--txt-2); font-size: var(--f-body); border-radius: var(--r1); } .mc-side a + a { margin-top: var(--s1); } .mc-side a i { font-size: 18px; color: var(--txt-3); } .mc-side a:hover { background: rgba(30,24,16,.05); color: var(--txt); } .mc-side a.on { background: rgba(249,195,73,.32); color: var(--gold); } .mc-side a.on i { color: var(--gold); } /* 手機分頁列:一體式分段控制列(6 等分,圖示在上文字在下、單行不折,不捲動) 當前頁是金色藥丸;整條包在單一深色容器裡,不再是六個外框方塊(比較有質感) */ .mc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); padding: 4px; } @media (min-width: 1024px) { .mc-tabs { display: none; } } .mc-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 56px; padding: 8px 2px; border-radius: var(--r1); color: var(--txt-3); font-size: 11px; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; text-align: center; } .mc-tabs a i { font-size: 19px; color: var(--txt-3); } .mc-tabs a.on { background: linear-gradient(180deg, var(--gold-hi), var(--orange)); color: var(--on-gold); box-shadow: 0 2px 8px rgba(0,0,0,.35); } .mc-tabs a.on i { color: var(--on-gold); } /* 會員頁標題帶 */ .mc-top { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) 0; } .mc-top .back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: var(--txt-2); font-size: 20px; } .mc-top h1 { font-size: var(--f-h2); } .mc-top .sub { font-size: var(--f-sm); color: var(--txt-3); } /* 餘額總覽 */ .sum-band { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .sum-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sum-band > * { min-width: 0; } .stat { padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); } .stat .k { font-size: var(--f-sm); color: var(--txt-3); } .stat .v { margin-top: 2px; font-size: 22px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; word-break: break-all; } .stat.teal .v { color: var(--teal); } /* 任務卡 */ .task { border: 1px solid var(--line-gold); background: linear-gradient(180deg, rgba(249,195,73,.24), transparent 60%); } .task .steps { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); } @media (min-width: 768px) { .task .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .task .steps > * { min-width: 0; } .step { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r2); } .step .no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(249,195,73,.34); color: var(--gold); font-size: var(--f-sm); font-weight: 700; } .step.ok .no { background: rgba(110,231,183,.16); color: var(--ok); } .step .t { font-size: var(--f-body); font-weight: 700; } .step .d { margin-top: var(--s1); font-size: var(--f-body); color: var(--txt-2); } .step .btn { margin-top: var(--s3); } @keyframes task-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(249,195,73,0); } 50% { box-shadow: 0 0 0 6px rgba(249,195,73,.60); } } .task.flash { animation: task-flash 1.1s ease 2; } /* 折疊卡(帳戶管理:收起只看標題 + 狀態籤) */ details.fold { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; } details.fold + details.fold { margin-top: var(--s3); } details.fold > summary { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4); cursor: pointer; list-style: none; font-weight: 700; } details.fold > summary::-webkit-details-marker { display: none; } details.fold > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; color: var(--txt-3); font-weight: 400; transition: transform .2s; } details.fold[open] > summary::after { transform: rotate(180deg); } details.fold > summary .st { margin-left: auto; margin-right: var(--s2); } details.fold > summary .st ~ ::after { margin-left: 0; } .fold-bd { padding: 0 var(--s4) var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); } /* ---------------------------------------------------------------- 表格 */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); } /* 表格內文也算內文,不是標籤 —— 天條 34 的 16px 底線一樣適用 */ table.tbl { width: 100%; font-size: var(--f-body); background: var(--panel); } table.tbl.wide { min-width: 640px; } table.tbl th, table.tbl td { padding: 12px var(--s3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--panel); } table.tbl th { background: var(--panel-2); color: var(--txt-2); font-weight: 700; font-size: 13px; } table.tbl tbody tr:last-child td { border-bottom: 0; } table.tbl td { color: var(--txt); } table.tbl th:first-child, table.tbl td:first-child, table.tbl th:last-child, table.tbl td:last-child { width: 1%; } .tbl-scroll-hint { margin-top: var(--s2); font-size: 13px; color: var(--txt-3); display: none; } .can-scroll .tbl-scroll-hint { display: block; } .tbl-empty { padding: var(--s8) var(--s4); text-align: center; color: var(--txt-3); } /* 載入更多 */ .more-row { display: flex; justify-content: center; margin-top: var(--s4); } /* ---------------------------------------------------------------- 底部固定導覽 */ .bnav { position: fixed; inset: auto 0 0 0; z-index: 1035; height: var(--bnav-h); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); padding: 0 var(--s2); background: rgba(30,24,16,.97); /* 深色底部列:對齊 WP 前台 #1E1810,白底頁面的錨點 */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(30,24,16,.9); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 992px) { .bnav { display: none; } } .bnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); min-height: 44px; position: relative; color: var(--on-dark-2); font-size: 12px; line-height: 1.15; } .bnav a i { font-size: 20px; line-height: 1; } .bnav a.on { color: var(--gold-on-dark); } .bnav a.on::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--gold-on-dark); border-radius: 0 0 2px 2px; } /* 中央強調鈕(儲值/試玩之類) */ .bnav a.hot i { color: var(--gold-on-dark); } /* ---------------------------------------------------------------- 版面骨架 */ .page { padding-top: var(--header-h); } main { display: block; padding-bottom: var(--sect-end); } /* 手機底部固定列的留白 */ @media (max-width: 991px) { main { padding-bottom: calc(var(--bnav-h) + var(--sect-end)); } } /* 漂浮客服 */ .cs-float { position: fixed; right: var(--s4); z-index: 1032; bottom: calc(var(--bnav-h) + var(--s4) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); } @media (min-width: 992px) { .cs-float { bottom: var(--s6); } } .cs-float .cs-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: linear-gradient(180deg, var(--gold-hi), var(--orange)); color: var(--on-gold); font-size: 24px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow); cursor: pointer; } .cs-float .cs-list { display: none; flex-direction: column; gap: var(--s2); padding: var(--s3); min-width: 172px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r2); box-shadow: var(--shadow-lg); } .cs-float.open .cs-list { display: flex; } .cs-float .cs-list a { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); color: var(--txt); font-size: var(--f-sm); border-radius: var(--r1); background: var(--bg-2); } .cs-float .cs-list a:hover { background: rgba(249,195,73,.30); color: var(--gold); } /* ---------------------------------------------------------------- 彈窗相容層 舊 login.js / bootstrap 用 inline style.display 開關,所以佈局走 block + margin, 寫 flex 會被 inline style 蓋掉。Owner:彈窗約 7.5 成螢幕。 */ .modal { display: none; /* 少了這行會整頁吃掉點擊 */ position: fixed; inset: 0; z-index: 1050; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,.72); -webkit-overflow-scrolling: touch; } .modal.show, .modal.in { display: block; } .modal-dialog { position: relative; width: 75vw; max-width: 440px; margin: 12vh auto; } @media (min-width: 992px) { .modal-dialog { width: 75vw; max-width: 460px; } } .modal-content { background: var(--panel); color: var(--txt); border: 1px solid var(--line-2); border-radius: var(--r3); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 75vh; display: flex; flex-direction: column; } .modal-header { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex: 0 0 auto; } .modal-title, .modal-header h4 { font-size: var(--f-h3); font-weight: 700; margin: 0; } .modal-header .close, button.close { margin-left: auto; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--txt-2); font-size: 24px; line-height: 1; cursor: pointer; opacity: 1; } .modal-header .close:hover, button.close:hover { color: var(--gold); } .modal-body { padding: var(--s5); overflow-y: auto; flex: 1 1 auto; } .modal-footer { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); flex: 0 0 auto; } .modal-backdrop { display: none !important; } .modal-body .form-group + .form-group { margin-top: var(--s4); } .modal-body label { display: block; margin-bottom: 6px; font-size: var(--f-sm); color: var(--txt-2); } /* 舊樣板的 alert */ .alert { padding: var(--s3) var(--s4); border-radius: var(--r1); font-size: var(--f-sm); } .alert-danger { background: rgba(255,143,136,.14); color: var(--bad); border: 1px solid rgba(255,143,136,.3); } .alert-success { background: rgba(110,231,183,.14); color: var(--ok); border: 1px solid rgba(110,231,183,.3); } /* bootstrap 殘留的工具 class,新樣板也會用到 */ .text-center { text-align: center; } .d-none { display: none !important; } @media (min-width: 992px) { .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } } .mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } /* 讀不到圖時不要露出破圖的 alt 文字疊在版面上 */ .gcard-fig img, .pcard > img, .hero img { color: transparent; font-size: 0; } /* ---------------------------------------------------------------- 優惠 */ .acards { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); } .acards > * { min-width: 0; } .acard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; } .acard > img, .acard > picture > img { width: 100%; display: block; aspect-ratio: 10 / 3; object-fit: cover; } .acard-hd { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); } .acard-hd h2 { font-size: var(--f-h3); flex: 1 1 auto; min-width: 0; } .acard-bd { padding: 0 var(--s5) var(--s5); } .acard details > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-gold); border-radius: var(--r4); color: var(--gold); font-size: var(--f-sm); font-weight: 700; cursor: pointer; list-style: none; } .acard details > summary::-webkit-details-marker { display: none; } .acard details > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-weight: 400; transition: transform .2s; } .acard details[open] > summary::after { transform: rotate(180deg); } .acard details[open] > summary { border-radius: var(--r4) var(--r4) 0 0; } .acard-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } /* 活動內文是後台存的整份 HTML,樣式在這裡統一接住,不逐則改內容 */ .legacy { margin-top: var(--s4); font-size: var(--f-body); line-height: 1.8; color: var(--txt-2); } .legacy :where(h1, h2, h3, h4, h5) { margin: var(--s5) 0 var(--s2); font-size: var(--f-h3); color: var(--txt); } .legacy :where(h1, h2, h3, h4, h5):first-child { margin-top: 0; } .legacy p { margin: 0 0 var(--s3); } .legacy :where(ul, ol) { margin: 0 0 var(--s3); padding-left: 1.4em; list-style: disc; } .legacy ol { list-style: decimal; } .legacy li { margin-bottom: var(--s1); } .legacy a { color: var(--gold); text-decoration: underline; } .legacy img { max-width: 100%; height: auto; border-radius: var(--r1); } .legacy strong, .legacy b { color: var(--txt); } .legacy table { width: 100%; margin: var(--s3) 0; font-size: var(--f-body); background: var(--bg-3); border-radius: var(--r1); overflow: hidden; } .legacy :where(th, td) { padding: 10px var(--s3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } .legacy th { background: var(--panel-2); color: var(--txt); font-weight: 700; } .legacy [style*="color"] { color: var(--txt-2) !important; } .legacy [style*="color:#ff0000"], .legacy [style*="color: #ff0000"], .legacy [style*="color:#FF0000"], .legacy [style*="color:red"], .legacy [style*="color:#f00"] { color: var(--bad) !important; } .legacy [style*="background"] { background: transparent !important; } .legacy-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------------------------------------------------------------- 零碎 */ .mc-side .panel { padding: var(--s3); } .stat .v.sm { font-size: 18px; } .cap-row { display: flex; align-items: center; gap: var(--s3); } .cap-row input { flex: 1 1 auto; min-width: 0; } .pickwrap { position: relative; } .pickwrap .pickbtn { margin-top: 2px; } .twzipcode select, .twzipcode input { width: 100%; } /* ---------------------------------------------------------------- 儲值(兩段式選擇 + 金額) 掛鉤沿用舊 deposit2.php:.payment-item / .sub-payment-item / #subCVSGroup 等 / #payment / #amount, 只換皮成深金;圖示改用 bootstrap-icons(比原本的文字方塊漂亮)。 */ .dep .payment-list { display: flex; flex-direction: column; gap: var(--s3); } .dep .payment-item { display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); cursor: pointer; transition: border-color .15s, background .15s; } .dep .payment-item:hover { border-color: var(--line-gold); } .dep .payment-item.active { border-color: var(--gold); background: rgba(249,195,73,.26); } .dep .icon-box { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r2); display: flex; align-items: center; justify-content: center; background: rgba(249,195,73,.28); color: var(--gold); font-size: 24px; } .dep .icon-box svg { width: 24px; height: 24px; } .dep .item-info { flex: 1 1 auto; min-width: 0; } .dep .item-name { font-size: var(--f-body); font-weight: 700; color: var(--txt); } .dep .item-desc { font-size: 13px; color: var(--txt-3); margin-top: 2px; } .dep .select-indicator { width: 22px; height: 22px; flex: 0 0 auto; border: 2px solid var(--line-2); border-radius: 50%; position: relative; } .dep .payment-item.active .select-indicator { border-color: var(--gold); background: var(--gold); } .dep .payment-item.active .select-indicator::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* 子選項 */ .dep .sub-payment-group { display: none; flex-direction: column; gap: var(--s2); padding: 0 0 var(--s2) 58px; } .dep .sub-payment-item { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s3); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r1); font-size: var(--f-sm); font-weight: 600; color: var(--txt-2); cursor: pointer; } .dep .sub-payment-item.active { border-color: var(--gold); color: var(--gold); background: rgba(249,195,73,.26); } .dep .brand-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; } /* 金額卡 */ .dep .amount-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); } .dep .amount-input-group { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-bottom: var(--s4); } .dep .currency-symbol { color: var(--gold); font-size: 26px; font-weight: 800; } .dep .amount-input { background: transparent; border: 0; border-bottom: 2px solid var(--line-2); color: var(--txt); font-size: 30px; font-weight: 800; text-align: center; width: 60%; min-height: 52px; padding: 0; outline: none; font-variant-numeric: tabular-nums; } .dep .amount-input:focus { border-bottom-color: var(--gold); box-shadow: none; } .dep .quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); } .dep .quick-btn { min-height: 44px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r1); color: var(--txt); font-size: var(--f-sm); font-weight: 700; cursor: pointer; } .dep .quick-btn:hover { border-color: var(--gold); color: var(--gold); } .dep .info-box { margin-top: var(--s4); padding: var(--s4); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r2); font-size: var(--f-sm); color: var(--txt-2); line-height: 1.9; } .dep .rate-box { margin-top: var(--s3); padding: var(--s3) var(--s4); background: rgba(86,196,168,.1); border: 1px solid rgba(86,196,168,.28); border-radius: var(--r1); font-size: var(--f-sm); color: var(--txt); } .dep .rate-box b { color: var(--teal); } /* 超商店號查詢:次要連結也做成 44px 可點膠囊(天條 34),不留 24px 的內嵌文字連結 */ .qlinks { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); vertical-align: middle; } .qlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r1); color: var(--gold); font-size: var(--f-sm); font-weight: 500; } .qlinks a:hover { border-color: var(--line-gold); background: rgba(249,195,73,.26); } /* ---------- 同意條款列與獨立文字連結:補天條 34 的底線(純新增,不改既有規則) ---------- .fld > .lb 吃的是 --f-sm(14px),原生 checkbox 是 13x13 —— 同意條款是送出的必要條件, 算主要操作,要 44x44;那一行字是內文,要 16px。 .taplink 給「已經有帳號了?直接登入」這種獨立的次要連結,行高撐到 32px。 */ /* 選擇器要寫成 .fld > .consent 才壓得過上面的 .fld > label(0,1,1); 只寫 .consent(0,1,0)會輸,字級就還是 14px。 */ .fld > .consent, .consent { display: flex; align-items: center; gap: var(--s3); min-height: 44px; margin: 0; cursor: pointer; font-size: var(--f-body); font-weight: 400; color: var(--txt-2); line-height: 1.5; } .consent input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--gold-fill); } /* 驗證碼圖:.cap-row 是 flex,輸入框吃 width:100% 當 flex-basis, 加起來一定超過容器 → 兩個一起收縮,圖被壓回原始的 90x25(比 44px 的觸控底線還小), 而且 img 的 width/height 屬性是「表現層提示」,輸給樣式表裡任何一條 img 規則。 所以這裡明寫:不收縮、固定 120x44、object-fit 保持原比例不拉變形。 */ .cap-row img { flex: 0 0 auto; width: 120px; height: 44px; object-fit: contain; background: #fff; } .taplink { display: inline-block; padding: 6px 4px; min-height: 32px; line-height: 20px; } /* ---------------------------------------------------------------- 公開內容頁(2026-09-11 新增) About / Guide / Pages/user_contract / Live / Slot / Keno / Sport / Esport / News / 各廠商電子遊戲頁。 這批頁面的共同處境:只有成段文字與清單,**舊頁引用的圖線上全部 404** (assets/img/ 整個目錄不存在;assets/www/images/ 只剩 pay-icon 等少數幾支; upload/games/ 的縮圖也 404)—— 所以版面一律以文字撐,不預留圖位。 全部純新增,上面任何一條都沒有動(天條 49)。 */ /* 長文主題卡。.feats 原本是首頁「為什麼選 DG」那種一句話短文用的四欄, 這裡每一格是一整段說明(21點那段有 200 多字),四欄會擠成一行三個字。 */ .feats.two { grid-template-columns: 1fr; } @media (min-width: 768px) { .feats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .feats.two .feat { align-items: flex-start; } /* 分組小標(籃球 / 棒球 / 冰球…):比 h2 小一階,跟區塊標題分得開 */ .sub-hd { display: flex; align-items: center; gap: var(--s2); margin-top: var(--sect); font-size: var(--f-h3); font-weight: 700; color: var(--head); } .sub-hd::before { content: ""; width: 4px; height: 1em; border-radius: 2px; background: var(--gold-fill); } /* 條款/使用說明這種整段文字。.legacy 的 th/td 是 nowrap —— 那是給後台貼進來的窄表格用的, 但這裡每一格都是整句話(博牌規則那張),nowrap 會把表格撐到幾千 px 寬。 */ .legacy.prose :where(th, td) { white-space: normal; vertical-align: top; } .legacy.prose table { min-width: 520px; } .legacy.prose :where(ul, ol) { padding-left: 1.6em; } /* 遊戲清單:沒有縮圖可用,卡片只有名字 + 一顆按鈕,所以不走 .gcard-fig 那條。 */ .glist { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .glist { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .glist { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .glist > * { min-width: 0; } .gitem { display: flex; flex-direction: column; gap: var(--s2); min-height: 96px; padding: var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r2); } .gitem .nm { font-size: var(--f-body); font-weight: 700; line-height: 1.4; color: var(--txt); overflow-wrap: anywhere; } .gitem .go { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: auto; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-gold); border-radius: var(--r1); background: var(--bg-2); color: var(--gold); font-size: var(--f-sm); font-weight: 700; } .gitem .go:hover { background: rgba(249,195,73,.26); color: var(--gold-hi); } .gitem[hidden] { display: none; } /* 分類頁籤(電子遊戲頁的「全部 / 各分類」)。橫向捲,不換行擠成三行。 */ .gtabs { display: flex; gap: var(--s2); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--s2); } .gtabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r4); color: var(--txt-2); font-size: var(--f-sm); font-weight: 500; white-space: nowrap; } .gtabs a.on { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); font-weight: 700; } /* 頁尾那排「上一頁/下一頁」。舊 pager 吐的是