/* =========================================================== PROMOTIONS V3 — visual-card redesign (2026-05-31) Capsule tabs + gradient visual cards. Tokens on :root AND .pm-sov (sheet is portaled to , outside .wrapper scope). =========================================================== */ /* Stanley palette retheme: red #CC0937 / teal #034F63 / cyan #0CC0FF / off-white #FFFEFC */ :root, .pm-sov { --pm-bg:#05202a; --pm-surface:#0b2f3b; --pm-border:#114655; --pm-border2:#0d3543; --pm-gold:#0CC0FF; --pm-gold-bg:rgba(12,192,255,.12); --pm-gold-border:#0CC0FF; --pm-green:#2dc98a; --pm-green-bg:#0d1a10; --pm-green-border:#1a3520; --pm-purple:#9070e8; --pm-purple-bg:#130e22; --pm-blue:#0CC0FF; --pm-blue-bg:#0d2530; --pm-red:#CC0937; --pm-text:#FFFEFC; --pm-text2:#b9d3db; --pm-text3:#6b8a95; --pm-text4:#456069; } /* ---- full-page modal takeover ---- */ #modal-promo.pm-v2 { padding:0 !important; align-items:stretch !important; } #modal-promo.pm-v2 .modal { width:100vw !important; height:100dvh !important; max-width:none !important; max-height:100dvh !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:var(--pm-bg); overflow:hidden; } #modal-promo.pm-v2 .modal > *:not(.pmw){ display:none !important; } #modal-promo.pm-v2 .modal::before, #modal-promo.pm-v2 .modal::after{ display:none !important; content:none !important; } .pmw{ width:100%; height:100%; } .pm-page{ height:100%; display:flex; flex-direction:column; background:var(--pm-bg); color:var(--pm-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } /* ---- header ---- */ .pm-head{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:12px 12px 8px; border-bottom:1px solid var(--pm-border2); } .pm-back{ width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; background:var(--pm-surface); border:0; border-radius:7px; color:var(--pm-text2); cursor:pointer; padding:0; } .pm-back svg{ width:16px; height:16px; } .pm-back:active{ transform:scale(.92); } .pm-head__title{ flex:1; text-align:center; font-size:13px; font-weight:700; color:#fff; } .pm-head__sp{ width:24px; flex:0 0 24px; } /* ---- capsule tabs ---- */ .pm-tabs{ flex:0 0 46px !important; height:46px; box-sizing:border-box; display:flex; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; padding:0 12px; border-bottom:1px solid var(--pm-border2); -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pm-tabs::-webkit-scrollbar{ display:none; } .pm-tab{ flex:0 0 auto; height:28px !important; min-height:0; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:9px; font-weight:600; padding:0 12px !important; border-radius:16px; border:1px solid var(--pm-border); background:transparent; color:#555; cursor:pointer; white-space:nowrap; } .pm-tab:active{ transform:scale(.95); } .pm-tab.on{ background:rgba(12,192,255,.12); border-color:#0CC0FF; color:#0CC0FF; } /* ---- list ---- */ .pm-scroll{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 12px 0; -webkit-overflow-scrolling:touch; } .pm-scroll::-webkit-scrollbar{ width:0; } .pm-foot-sp{ height:80px; } .pm-group{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; max-width:560px; margin-inline:auto; } .pm-group__lbl{ font-size:8px; font-weight:600; color:#3a3e4d; letter-spacing:1px; text-transform:uppercase; margin:4px 0; } /* ---- visual card (2026-06-04 redesign: 160px image card, overlay text) ---- */ .pm-card{ border-radius:16px; overflow:hidden; border:1px solid var(--pm-border); cursor:pointer; } .pm-card:active{ transform:scale(.99); } .pm-card__vis{ position:relative; width:100%; aspect-ratio:8/3; overflow:hidden; background:#0d1117; } .pm-card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; } .pm-card.is-claimed .pm-card__vis{ opacity:.62; } .pm-card__glow{ position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%, rgba(255,255,255,.06), transparent 60%); pointer-events:none; } .pm-card__wm{ position:absolute; right:12px; top:30%; transform:translateY(-50%); font-size:58px; font-weight:900; opacity:.13; letter-spacing:-2px; line-height:1; white-space:nowrap; } /* bottom dark gradient mask so overlaid text stays readable on any banner */ .pm-card__mask{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 66%); pointer-events:none; z-index:1; } .pm-card__badge{ position:absolute; top:10px; left:10px; z-index:3; font-size:9px; font-weight:800; padding:3px 9px; border-radius:10px; letter-spacing:.4px; box-shadow:0 2px 6px rgba(0,0,0,.4); } .pm-card__badge.hot{ background:#e84040; color:#fff; } .pm-card__badge.new{ background:#2dc98a; color:#080910; } .pm-card__badge.limited{ background:#e8a124; color:#080910; } .pm-card__badge.vip{ background:#9070e8; color:#fff; } .pm-card__badge.free{ background:#2dc98a; color:#080910; } .pm-card__badge.night{ background:#4a8ee8; color:#fff; } /* bottom overlay: title + bonus on the left, claim button on the right */ .pm-card__ov{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:12px 14px; } /* image cards: banner already has the text — only the Claim button, pinned bottom-right */ .pm-card__ov--img{ justify-content:flex-end; } .pm-card__ovtext{ flex:1; min-width:0; } .pm-card.overlay-hidden .pm-card__ovtext{ display:none; } .pm-card__title{ font-size:15px; font-weight:800; color:#fff; line-height:1.15; text-shadow:0 2px 6px rgba(0,0,0,.7); overflow:hidden; text-overflow:ellipsis; } .pm-card__bsub{ font-size:11px; font-weight:600; color:#e5e7eb; margin-left:7px; -webkit-text-fill-color:#e5e7eb; } /* ---- card body ---- */ .pm-card__body{ background:var(--pm-surface); padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .pm-card__left{ flex:1; min-width:0; } .pm-card__sub{ font-size:9px; color:#555; margin-bottom:5px; } .pm-card__tags{ display:flex; flex-wrap:wrap; gap:3px; } .pm-tag{ font-size:8px; font-weight:500; padding:2px 6px; border-radius:4px; background:#1a1c24; color:#555; border:1px solid #252831; white-space:nowrap; } .pm-tag.wr{ background:rgba(12,192,255,.12); color:#0CC0FF; border-color:#0CC0FF; } .pm-tag.green{ background:#0d1a10; color:#2dc98a; border-color:#1a3520; } .pm-tag.blue{ background:#0d1520; color:#4a8ee8; border-color:#1a2535; } .pm-tag.purple{ background:#130e22; color:#9070e8; border-color:#2a1a50; } .pm-card__right{ flex-shrink:0; text-align:right; } .pm-card__bonus{ font-size:22px; font-weight:900; letter-spacing:-.5px; margin-top:3px; line-height:1; white-space:nowrap; color:#fcd34d; text-shadow:0 2px 6px rgba(0,0,0,.6); } /* ---- claim button ---- */ /* Stanley red CTA (CLAIM NOW) — #CC0937 */ .pm-claim{ flex:0 0 auto; padding:8px 20px; border-radius:8px; border:0; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; color:#fff; display:inline-flex; align-items:center; gap:4px; background:#CC0937; box-shadow:0 3px 12px rgba(204,9,55,.45); text-shadow:0 1px 2px rgba(0,0,0,.35); letter-spacing:.5px; } .pm-claim:active{ transform:scale(.95); opacity:.85; } .pm-claim svg{ width:11px; height:11px; } /* 删除旧的分类颜色，全部用统一玻璃感 */ .cl-fire, .cl-emerald, .cl-royal, .cl-ocean, .cl-red{ background:#CC0937; } .cl-done{ background:#1e2028; border:1px solid #252831; color:#555; } .cl-done.live{ color:#aaa; cursor:pointer; } /* ---- wager bar ---- */ .pm-wg{ background:var(--pm-surface); padding:0 10px 8px; } .pm-wg__bar{ height:3px; background:#1e2028; border-radius:3px; overflow:hidden; } .pm-wg__fill{ height:100%; border-radius:3px; transition:width .3s; } .pm-wg__txt{ margin-top:3px; font-size:8px; color:#3a3e4d; } /* ---- coming soon ---- */ .pm-empty{ background:var(--pm-surface); border:1px dashed var(--pm-border); border-radius:12px; padding:22px 12px; text-align:center; } .pm-empty__t{ font-size:12px; font-weight:700; color:var(--pm-text2); } .pm-empty__s{ margin-top:2px; font-size:9px; color:var(--pm-text3); } /* =========================================================== DETAIL SHEET =========================================================== */ .pm-sov{ position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.7); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .24s; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } .pm-sov.on{ opacity:1; } .pm-sheet{ width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; background:#111318; border-radius:18px 18px 0 0; border-top:1px solid var(--pm-border); position:relative; transform:translateY(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); box-shadow:0 -10px 40px rgba(0,0,0,.6); } .pm-sov.on .pm-sheet{ transform:translateY(0); } .pm-grab{ width:32px; height:3px; border-radius:3px; background:#2a2d38; margin:8px auto 0; flex:0 0 auto; } .pm-sx{ position:absolute; top:10px; right:10px; width:28px; height:28px; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); border:0; border-radius:50%; color:#ccc; cursor:pointer; padding:0; } .pm-sx svg{ width:16px; height:16px; } /* sheet top visual */ .pm-vis{ position:relative; flex:0 0 auto; margin:10px 12px 0; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); aspect-ratio:8/3; } .pm-vis--img{ background:none; } .pm-vis__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .pm-vis__ov{ position:absolute; inset:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%); display:flex; align-items:flex-end; padding:12px 14px; } .pm-vis__wm{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:48px; font-weight:900; opacity:.12; letter-spacing:-1px; } .pm-vis__tt{ position:relative; z-index:1; font-size:15px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); line-height:1.2; } .pm-sbody{ flex:1 1 auto; overflow-y:auto; padding:12px 14px 4px; } /* sheet body */ .pm-bonus{ font-size:32px; font-weight:900; letter-spacing:-.5px; margin:14px 0 4px; line-height:1; } .pm-bonus__s{ font-size:14px; font-weight:600; color:#9ca3af; margin-left:8px; } .pm-facts{ display:flex; flex-direction:column; gap:0; margin:12px 0; border:1px solid var(--pm-border); border-radius:10px; overflow:hidden; } .pm-fact{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--pm-border); } .pm-fact:last-child{ border-bottom:none; } .pm-fact__k{ font-size:12px; color:#6b7280; } .pm-fact__v{ font-size:12px; font-weight:600; color:#e5e7eb; text-align:right; } .pm-fact__v.big{ font-size:15px; font-weight:800; } .pm-prizes{ margin-top:14px; background:var(--pm-surface); border:1px solid var(--pm-border); border-radius:10px; padding:10px 12px; } .pm-prizes__t{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--pm-text4); margin-bottom:6px; } .pm-prize{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; } .pm-prize__k{ font-size:11px; color:var(--pm-text2); } .pm-prize__v{ font-size:12px; font-weight:800; color:var(--pm-gold); } /* Terms */ .pm-terms{ margin-top:14px; padding:12px 14px; background:rgba(255,255,255,.03); border-radius:10px; border:1px solid var(--pm-border); } .pm-terms__t{ font-size:10px; font-weight:700; color:#6b7280; letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; } .pm-terms__b{ font-size:11px; color:#9ca3af; line-height:1.6; } .pm-sfoot{ flex:0 0 auto; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--pm-border2); } /* Confirm Claim button */ .pm-cf{ width:100%; padding:14px; border-radius:12px; border:0; font-size:14px; font-weight:800; cursor:pointer; color:#fff; letter-spacing:.3px; } .pm-cf svg{ width:18px; height:18px; } .pm-cf:active{ transform:scale(.98); } .pm-cf.cl-done{ background:#252831; color:#aaa; } .pm-cf__note{ margin-top:8px; font-size:9px; color:var(--pm-text3); text-align:center; } /* =========================================================== TOAST =========================================================== */ .pm-toast{ position:fixed; left:50%; bottom:90px; transform:translate(-50%,12px); z-index:100000; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; color:#fff; max-width:84vw; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.5); opacity:0; transition:opacity .22s, transform .22s; pointer-events:none; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } .pm-toast.on{ opacity:1; transform:translate(-50%,0); } .pm-toast--ok{ background:#15803d; } .pm-toast--error{ background:#dc2626; } .pm-toast--info{ background:#1f2937; }