/* c145 (2026-04-30): Google Fonts @import 移到 HTML for parallel download + 暖 TLS to fonts.gstatic.com。 原本 @import 在 styles bundle 第一行 = render-blocking + 序列下載 (bundle parse → fetch font CSS → fetch woff2)。改 後 font CSS 跟 main bundle 並行下載，preconnect 提早 100-200ms 完成 TLS。 */ :root { color-scheme: dark; --bg: #090d17; --bg-2: #10182b; --card: rgba(18, 24, 45, 0.78); --ink: #edf6ff; --muted: #99aeca; --accent: #00ff88; --accent-2: #00d4ff; --border: rgba(102, 124, 164, 0.22); --line: var(--border); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); --layout-max-width: 1200px; --layout-padding: 40px; --news-content-max: 1680px; --news-home-dock-width: 360px; --news-home-dock-gap: 24px; --news-full-max: 1840px; --news-inline-gutter: clamp(12px, 1.8vw, 32px); --news-rail-width: clamp(340px, 24vw, 430px); --heading-size: 32px; --admin-title-size: 30px; --admin-title-weight: 800; --admin-title-spacing: 0.01em; --admin-title-color: #f8fafc; --admin-title-accent-color: #38bdf8; --admin-title-border: rgba(56, 189, 248, 0.35); --table-padding-y: 6px; --table-padding-x: 8px; --button-height: 32px; --button-font-size: 14.3px; --card-gap: 24px; --font-body: "Noto Sans TC", "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-display: "Space Grotesk", "Noto Sans TC", "Segoe UI", sans-serif; --theme-motion-page-in: 420ms; --theme-motion-hover: 170ms; --theme-motion-pop: 240ms; --public-btn-radius: 999px; --public-btn-ghost-radius: 999px; --public-btn-compact-radius: 999px; --public-btn-primary-bg: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%); --public-btn-primary-border: rgba(167, 255, 224, 0.3); --public-btn-primary-color: #07121d; --public-btn-primary-shadow: 0 16px 32px rgba(0, 255, 136, 0.2); --public-btn-ghost-bg: rgba(13, 20, 39, 0.72); --public-btn-ghost-border: rgba(120, 148, 191, 0.24); --public-btn-ghost-color: #edf6ff; --public-btn-ghost-shadow: 0 12px 30px rgba(2, 6, 23, 0.2); --public-btn-chip-radius: 999px; --public-btn-chip-bg: rgba(14, 22, 42, 0.82); --public-btn-chip-border: rgba(102, 124, 164, 0.28); --public-btn-chip-color: var(--ink); --public-btn-chip-shadow: 0 10px 22px rgba(2, 6, 23, 0.18); --public-btn-chip-active-bg: linear-gradient(135deg, rgba(0, 255, 136, 0.94), rgba(0, 212, 255, 0.92)); --public-btn-chip-active-border: rgba(167, 255, 224, 0.3); --public-btn-chip-active-color: #07121d; --public-btn-chip-active-shadow: 0 16px 28px rgba(0, 255, 136, 0.16); --public-btn-focus-ring: rgba(0, 255, 136, 0.18); --public-btn-letter-spacing: 0.03em; --public-btn-text-transform: none; --public-btn-font-weight: 700; --public-btn-chip-font-weight: 600; --cosmic-surface: rgba(13, 19, 37, 0.72); --cosmic-surface-strong: rgba(16, 23, 43, 0.92); --cosmic-line: rgba(120, 148, 191, 0.18); --cosmic-glow-green: 0 0 18px rgba(0, 255, 136, 0.2), 0 0 36px rgba(0, 255, 136, 0.08); --cosmic-glow-blue: 0 0 18px rgba(0, 212, 255, 0.18), 0 0 32px rgba(0, 212, 255, 0.08); --cosmic-panel-shadow: 0 24px 60px rgba(2, 8, 23, 0.42); /* ---------- Admin semantic tokens (2026-04 table-shell redesign) ---------- */ /* status chip semantic palette — neutral / info / success / warn / danger / accent */ --chip-neutral-bg: rgba(148, 163, 184, 0.12); --chip-neutral-border: rgba(148, 163, 184, 0.28); --chip-neutral-text: #cbd5e1; --chip-info-bg: rgba(56, 189, 248, 0.14); --chip-info-border: rgba(56, 189, 248, 0.38); --chip-info-text: #7dd3fc; --chip-success-bg: rgba(16, 185, 129, 0.14); --chip-success-border: rgba(16, 185, 129, 0.4); --chip-success-text: #34d399; --chip-warn-bg: rgba(245, 158, 11, 0.14); --chip-warn-border: rgba(245, 158, 11, 0.4); --chip-warn-text: #fbbf24; --chip-danger-bg: rgba(244, 63, 94, 0.14); --chip-danger-border: rgba(244, 63, 94, 0.4); --chip-danger-text: #fb7185; --chip-accent-bg: rgba(0, 255, 136, 0.14); --chip-accent-border: rgba(0, 255, 136, 0.38); --chip-accent-text: #4ade80; /* order lifecycle tokens (pending → shipping → done / cancelled) */ --order-pending-color: #fbbf24; --order-shipping-color: #7dd3fc; --order-done-color: #34d399; --order-cancelled-color: #94a3b8; /* VIP / member level palette (VIP0-VIP9, gradient ramp) */ --level-0: #64748b; --level-1: #94a3b8; --level-2: #38bdf8; --level-3: #22d3ee; --level-4: #34d399; --level-5: #a3e635; --level-6: #fbbf24; --level-7: #fb923c; --level-8: #f472b6; --level-9: #c084fc; /* rarity palette (card / gacha) — 沿用既有稀有度顏色系統 */ --rarity-A: #fbbf24; --rarity-B: #c084fc; --rarity-C: #38bdf8; --rarity-D: #22d3ee; /* admin table/hero shell surfaces */ --shell-hero-surface: linear-gradient(135deg, rgba(17, 24, 44, 0.96) 0%, rgba(10, 16, 32, 0.9) 100%); --shell-hero-border: rgba(102, 124, 164, 0.22); --shell-hero-shadow: 0 24px 60px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shell-card-surface: rgba(13, 19, 37, 0.72); --shell-card-border: rgba(102, 124, 164, 0.2); --shell-card-shadow: 0 18px 42px rgba(2, 6, 23, 0.34); --shell-table-head-bg: rgba(15, 23, 42, 0.78); --shell-table-row-hover: rgba(56, 189, 248, 0.06); --shell-table-row-border: rgba(102, 124, 164, 0.12); /* ---------- a11y v7 (2026-04-20) ---------- */ /* Focus ring — cyan 3px solid + 2px offset. WCAG 1.4.11 non-text contrast 3:1 vs dark bg (#38bdf8 on #090d17 ≈ 6.7:1). */ --focus-ring: 3px solid #38bdf8; --focus-ring-offset: 2px; } body.frontend-theme-default { --bg: #121320; --bg-2: #191b2b; --card: rgba(26, 28, 44, 0.78); --line: var(--border); --border: rgba(124, 132, 160, 0.14); --text: var(--ink); --muted: #a4acc4; --text-muted: var(--muted); --text-primary: var(--ink); --layout-max-width: 1280px; --layout-padding: 32px; --font-body: "Noto Sans TC", "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-display: "Space Grotesk", "Noto Sans TC", sans-serif; --public-btn-primary-shadow: 0 10px 20px rgba(0, 255, 136, 0.1); --public-btn-ghost-bg: rgba(22, 25, 39, 0.68); --public-btn-ghost-border: rgba(124, 132, 160, 0.16); --public-btn-ghost-shadow: 0 8px 18px rgba(3, 8, 24, 0.12); --public-btn-chip-bg: rgba(24, 27, 42, 0.7); --public-btn-chip-border: rgba(124, 132, 160, 0.16); --public-btn-chip-shadow: 0 6px 14px rgba(3, 8, 24, 0.1); --public-btn-chip-active-shadow: 0 10px 18px rgba(0, 255, 136, 0.08); --cosmic-surface: rgba(24, 27, 42, 0.7); --cosmic-surface-strong: rgba(27, 30, 46, 0.88); --cosmic-line: rgba(124, 132, 160, 0.14); --cosmic-glow-green: 0 0 10px rgba(0, 255, 136, 0.08), 0 0 18px rgba(0, 255, 136, 0.03); --cosmic-glow-blue: 0 0 10px rgba(0, 212, 255, 0.08), 0 0 18px rgba(0, 212, 255, 0.03); --cosmic-panel-shadow: 0 12px 28px rgba(2, 8, 23, 0.18); } body.frontend-theme-cute { --bg: #ffeaf3; --bg-2: #fff4f9; --card: rgba(255, 255, 255, 0.86); --ink: #4d2e44; --muted: #7f5e75; --accent: #ff6ea8; --accent-2: #ffc85c; --border: rgba(255, 140, 185, 0.28); --line: rgba(255, 140, 185, 0.35); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); } body.frontend-theme-tech { --bg: #030915; --bg-2: #081326; --card: rgba(7, 18, 38, 0.86); --ink: #dce9ff; --muted: #8ea5cc; --accent: #33d1ff; --accent-2: #6d5cff; --border: rgba(51, 209, 255, 0.28); --line: rgba(92, 174, 255, 0.35); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); } body.frontend-theme-board08 { --bg: #fff0f7; --bg-2: #f6e8ff; --card: rgba(255, 249, 253, 0.9); --ink: #3a2940; --muted: #8e7c96; --accent: #ff8bc2; --accent-2: #8bcbff; --border: rgba(255, 162, 205, 0.28); --line: rgba(255, 162, 205, 0.34); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); --font-body: "Noto Sans TC", "Microsoft JhengHei", sans-serif; --font-display: "Fredoka", "Noto Sans TC", sans-serif; --public-btn-radius: 18px; --public-btn-ghost-radius: 999px; --public-btn-compact-radius: 16px; --public-btn-primary-bg: linear-gradient(135deg, #ff8fc8 0%, #ffb4d5 48%, #8bcbff 100%); --public-btn-primary-border: rgba(255, 255, 255, 0.54); --public-btn-primary-color: #fffafd; --public-btn-primary-shadow: 0 16px 28px rgba(255, 139, 194, 0.26); --public-btn-ghost-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 248, 0.86)); --public-btn-ghost-border: rgba(255, 162, 205, 0.36); --public-btn-ghost-color: #7e4367; --public-btn-ghost-shadow: 0 10px 18px rgba(255, 184, 215, 0.18); --public-btn-chip-radius: 18px; --public-btn-chip-bg: rgba(255, 255, 255, 0.84); --public-btn-chip-border: rgba(255, 162, 205, 0.28); --public-btn-chip-color: #734765; --public-btn-chip-shadow: 0 8px 16px rgba(255, 184, 215, 0.15); --public-btn-chip-active-bg: linear-gradient(135deg, rgba(255, 139, 194, 0.94), rgba(139, 203, 255, 0.94)); --public-btn-chip-active-border: rgba(255, 255, 255, 0.55); --public-btn-chip-active-color: #fffafd; --public-btn-chip-active-shadow: 0 14px 24px rgba(255, 139, 194, 0.26); --public-btn-focus-ring: rgba(255, 139, 194, 0.28); --public-btn-letter-spacing: 0.01em; } body.frontend-theme-board23 { --bg: #dde7ff; --bg-2: #f4daff; --card: rgba(248, 251, 255, 0.86); --ink: #1f2747; --muted: #6e76a2; --accent: #6a74ff; --accent-2: #ff8ad8; --border: rgba(106, 116, 255, 0.24); --line: rgba(121, 130, 255, 0.35); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); --font-body: "Noto Sans TC", "Microsoft JhengHei", sans-serif; --font-display: "Space Grotesk", "Noto Sans TC", sans-serif; --public-btn-radius: 14px; --public-btn-ghost-radius: 14px; --public-btn-compact-radius: 10px; --public-btn-primary-bg: linear-gradient(180deg, #8d94ff 0%, #6a74ff 56%, #5963f0 100%); --public-btn-primary-border: rgba(39, 49, 101, 0.88); --public-btn-primary-color: #fcfbff; --public-btn-primary-shadow: 0 5px 0 rgba(55, 64, 143, 0.9), 0 16px 26px rgba(83, 91, 198, 0.24); --public-btn-ghost-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 238, 255, 0.82)); --public-btn-ghost-border: rgba(106, 116, 255, 0.42); --public-btn-ghost-color: #364285; --public-btn-ghost-shadow: 0 4px 0 rgba(106, 116, 255, 0.22), 0 12px 18px rgba(106, 116, 255, 0.12); --public-btn-chip-radius: 14px; --public-btn-chip-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 238, 255, 0.84)); --public-btn-chip-border: rgba(106, 116, 255, 0.34); --public-btn-chip-color: #364285; --public-btn-chip-shadow: 0 4px 0 rgba(106, 116, 255, 0.18), 0 10px 18px rgba(106, 116, 255, 0.12); --public-btn-chip-active-bg: linear-gradient(135deg, #ffd86b 0%, #ff8ad8 52%, #6a74ff 100%); --public-btn-chip-active-border: rgba(43, 54, 124, 0.55); --public-btn-chip-active-color: #1c2245; --public-btn-chip-active-shadow: 0 5px 0 rgba(72, 47, 128, 0.42), 0 14px 24px rgba(106, 116, 255, 0.18); --public-btn-focus-ring: rgba(106, 116, 255, 0.28); --public-btn-letter-spacing: 0.08em; --public-btn-text-transform: uppercase; --public-btn-font-weight: 800; --public-btn-chip-font-weight: 700; } body.frontend-theme-board24 { --bg: #1f1a44; --bg-2: #46368a; --card: rgba(33, 28, 73, 0.86); --ink: #f6f1ff; --muted: #c9bceb; --accent: #b9a6ff; --accent-2: #7de7ff; --border: rgba(211, 201, 255, 0.2); --line: rgba(211, 201, 255, 0.26); --text: var(--ink); --text-muted: var(--muted); --text-primary: var(--ink); --font-body: "Noto Sans TC", "Microsoft JhengHei", sans-serif; --font-display: Georgia, "Noto Serif TC", "Noto Sans TC", serif; --public-btn-radius: 999px; --public-btn-ghost-radius: 999px; --public-btn-compact-radius: 18px; --public-btn-primary-bg: linear-gradient( 135deg, rgba(247, 241, 255, 0.98) 0%, rgba(211, 229, 255, 0.92) 48%, rgba(125, 231, 255, 0.92) 100% ); --public-btn-primary-border: rgba(255, 255, 255, 0.5); --public-btn-primary-color: #211c49; --public-btn-primary-shadow: 0 18px 32px rgba(125, 231, 255, 0.16); --public-btn-ghost-bg: linear-gradient(180deg, rgba(55, 45, 115, 0.86), rgba(32, 27, 72, 0.9)); --public-btn-ghost-border: rgba(201, 188, 235, 0.28); --public-btn-ghost-color: #f2edff; --public-btn-ghost-shadow: 0 12px 24px rgba(11, 14, 34, 0.22); --public-btn-chip-radius: 20px; --public-btn-chip-bg: rgba(40, 32, 87, 0.82); --public-btn-chip-border: rgba(201, 188, 235, 0.22); --public-btn-chip-color: #ede7ff; --public-btn-chip-shadow: 0 12px 22px rgba(9, 11, 28, 0.18); --public-btn-chip-active-bg: linear-gradient( 135deg, rgba(185, 166, 255, 0.95) 0%, rgba(125, 231, 255, 0.9) 100% ); --public-btn-chip-active-border: rgba(255, 255, 255, 0.42); --public-btn-chip-active-color: #1e1a43; --public-btn-chip-active-shadow: 0 16px 28px rgba(125, 231, 255, 0.14); --public-btn-focus-ring: rgba(185, 166, 255, 0.28); --public-btn-letter-spacing: 0.03em; } body.frontend-theme-cute { background: radial-gradient(circle at top, #ffd7ea 0%, var(--bg) 62%); } body.frontend-theme-tech { background: radial-gradient(circle at top, #0b1b3a 0%, var(--bg) 66%); } body.frontend-theme-board08 { background: radial-gradient(circle at 18% 12%, rgba(255, 173, 216, 0.55), transparent 26%), radial-gradient(circle at 82% 8%, rgba(255, 204, 112, 0.36), transparent 24%), linear-gradient(155deg, #fff7fb 0%, var(--bg) 48%, #fff3fa 100%); } body.frontend-theme-board23 { background: radial-gradient(circle at 14% 10%, rgba(255, 216, 107, 0.26), transparent 20%), radial-gradient(circle at 84% 16%, rgba(106, 116, 255, 0.24), transparent 24%), linear-gradient(135deg, #edf2ff 0%, var(--bg) 52%, #f3e6ff 100%); } body.frontend-theme-board24 { background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.08), transparent 16%), radial-gradient(circle at 80% 12%, rgba(185, 166, 255, 0.16), transparent 20%), linear-gradient(145deg, #171337 0%, var(--bg) 48%, #362b78 100%); } body.frontend-theme-cute .topbar { background: rgba(255, 244, 250, 0.92); border-bottom-color: rgba(255, 135, 180, 0.34); } body.frontend-theme-tech .topbar { background: rgba(4, 12, 26, 0.88); border-bottom-color: rgba(58, 165, 255, 0.35); } body.frontend-theme-board08 .topbar { background: rgba(255, 249, 253, 0.92); border-bottom-color: rgba(255, 162, 205, 0.34); } body.frontend-theme-board23 .topbar { background: rgba(250, 250, 255, 0.9); border-bottom-color: rgba(106, 116, 255, 0.32); } body.frontend-theme-board24 .topbar { background: rgba(24, 20, 54, 0.88); border-bottom-color: rgba(185, 166, 255, 0.28); } body.frontend-theme-cute .card { border-radius: 22px; box-shadow: 0 16px 32px rgba(233, 122, 163, 0.2); } body.frontend-theme-tech .card { border-radius: 14px; box-shadow: 0 18px 36px rgba(10, 98, 190, 0.24); } body.frontend-theme-board08 .card { border-radius: 24px; box-shadow: 0 16px 32px rgba(255, 139, 194, 0.16); } body.frontend-theme-board23 .card { border-radius: 20px; box-shadow: 0 18px 34px rgba(106, 116, 255, 0.16); } body.frontend-theme-board24 .card { border-radius: 24px; box-shadow: 0 18px 40px rgba(6, 8, 20, 0.34); } body.frontend-theme-cute .btn.primary { color: #fff; box-shadow: 0 12px 26px rgba(255, 110, 168, 0.32); } body.frontend-theme-tech .btn.primary { color: #041024; box-shadow: 0 12px 26px rgba(51, 209, 255, 0.34); } body.frontend-theme-board08 .btn.primary { color: #ffffff; box-shadow: 0 12px 28px rgba(255, 139, 194, 0.24); } body.frontend-theme-board23 .btn.primary { color: #ffffff; box-shadow: 0 12px 28px rgba(106, 116, 255, 0.22); } body.frontend-theme-board24 .btn.primary { color: #161235; box-shadow: 0 14px 30px rgba(125, 231, 255, 0.18); } body.frontend-theme-cute .store-category-link { border-radius: 16px; background: rgba(255, 255, 255, 0.82); } body.frontend-theme-tech .store-category-link { border-radius: 10px; background: rgba(8, 23, 45, 0.9); } body.frontend-theme-board08 .store-category-link { border-radius: 18px; background: rgba(255, 255, 255, 0.84); } body.frontend-theme-board23 .store-category-link { border-radius: 16px; background: rgba(255, 255, 255, 0.82); } body.frontend-theme-board24 .store-category-link { border-radius: 18px; background: rgba(38, 31, 83, 0.88); } body.frontend-theme-cute .store-card-subtitle, body.frontend-theme-cute .nav a { color: #8a5f7c; } body.frontend-theme-tech .store-card-subtitle, body.frontend-theme-tech .nav a { color: #8ea5cc; } body.frontend-theme-board08 .store-card-subtitle, body.frontend-theme-board08 .nav a { color: #8e7c96; } body.frontend-theme-board23 .store-card-subtitle, body.frontend-theme-board23 .nav a { color: #6e76a2; } body.frontend-theme-board24 .store-card-subtitle, body.frontend-theme-board24 .nav a { color: #c9bceb; } /* Store V3.4 */ .store-layout { align-items: start; } .store-category-pane { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow: auto; } .store-category-sidebar { display: flex; flex-direction: column; gap: 8px; } .store-category-link { width: 100%; border: 1px solid var(--line); background: rgba(11, 19, 37, 0.6); color: var(--text); border-radius: 12px; padding: 10px 12px; font-size: 15.4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .store-category-link:hover { border-color: rgba(99, 102, 241, 0.45); background: rgba(17, 28, 55, 0.88); transform: translateY(-1px); } .store-category-link.active { border-color: rgba(96, 165, 250, 0.7); background: rgba(20, 34, 66, 0.95); color: #fff; } .store-category-link span { color: var(--muted); font-size: 13.2px; margin-left: 10px; } .store-card-link { cursor: pointer; } .store-card { min-height: 330px; } .store-card-thumb { aspect-ratio: 4 / 3; } .store-card-body { gap: 10px; } .store-card-category { font-size: 13.2px; letter-spacing: 0.02em; } .store-card h3 { margin: 0; font-size: 17.6px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .store-card-subtitle { margin: -2px 0 0; font-size: 13.2px; color: rgba(148, 163, 184, 0.95); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .store-card-meta-icons { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } .store-card-actions, .store-card-actions-row { display: none !important; } .store-category-select { min-width: 220px; } @media (min-width: 1440px) { .store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1080px) and (max-width: 1439px) { .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1080px) { .store-category-select { display: none !important; } } @media (max-width: 1079px) { .store-layout { grid-template-columns: 1fr; } .store-category-pane { display: none !important; } .store-toolbar { grid-template-columns: 1fr; } .store-search, .store-sort, .store-category-select { width: 100%; } .store-category-select { display: flex !important; align-items: center; gap: 8px; } } * { box-sizing: border-box; } /* ────────────────────────────────────────────────────────── Phase B #9 ROLLBACK (2026-05-09 condescending-goldberg): 原 catch-all `*, *::before, *::after { animation-duration: 0.01ms !important }` 太激進, 即使 OS reduce-motion 開啟也應該保留決定性 裝飾動畫 (例如首頁 7 個 orbs 的 halo 旋轉/呼吸 + cat-float, hero rim 旋轉等), 這些是品牌視覺的一部分, 不是真的會造成暈眩的快速 閃爍/視差/縮放. 血淚: user 反映「以前都是正常的 一定有一個版本有改動到」, 排查 後確認 Phase B #9 catch-all 用 !important 強制 0.01ms 把所有 pseudo-element 動畫變成靜止 1 frame, 用戶看到「光圈完全不會動」. WCAG 2.3.3 已由各 component 自己的 @media (prefers-reduced-motion) guard 處理 (marine-home.css 已有 5 處 + styles-home.css 多處 + item.css 等), 此 catch-all 反而造成過度壓制, 故移除. 未來新加 component 若需要 a11y guard, 加在自己檔案的 @media block, 不要 再加全局 catch-all. ────────────────────────────────────────────────────────── */ body { margin: 0; font-family: var(--font-body); background: radial-gradient(circle at top, #1e293b, var(--bg)); color: var(--ink); min-height: 100vh; } /* R501ln condescending-curie (2026-05-25): 全站 stacking 修正 — 任何含 .home-marine-bg (position:fixed; z-index:-1 全頁海洋背景層) 的頁面, body 必須是 stacking context, 否則 body 自身不透明背景會「後畫蓋住」負 z-index 子層 → 海洋 背景看不到 (同 R501li 首頁 root cause). R501li 只修了載 marine-home.css 的頁 (body.galaxy.marine); item.html / fairness-verify.html 沒載 marine-home.css 漏網. 用 :has() 一條規則覆蓋全站任何有此背景層的頁, 不改顯示與否 (display:none 仍隱藏), 只確保「該顯示時能正確顯示」. 對已修頁 (R501li) 為 redundant no-op. */ body:has(.home-marine-bg) { isolation: isolate; } .bg-orb { position: fixed; border-radius: 50%; filter: blur(60px); opacity: 0.45; z-index: 0; } .bg-orb-1 { width: 420px; height: 420px; background: #f97316; top: -120px; left: -120px; } .bg-orb-2 { width: 520px; height: 520px; background: #22d3ee; bottom: -200px; right: -140px; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 18px 5vw; background: rgba(11, 15, 26, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* Defensive umbrella — any future logo/image inside topbar or brand-link * is capped to a reasonable size even without its own class-specific rule. * Prevents another "image accidentally rendered at natural 460x195" incident. */ .topbar img, .brand-link img { max-height: 48px; max-width: min(260px, 45vw); width: auto; height: auto; object-fit: contain; } .logo { font-weight: 800; letter-spacing: 0.12em; } .brand-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; max-width: 100%; min-height: 32px; --brand-lockup-text: currentColor; --brand-lockup-accent: #38bdf8; } .brand-logo-image { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(15, 23, 42, 0.85); } /* R501bm angry-cartwright (2026-05-16, owner cross-scope auth): * user: 「所有頁面 LOGO 可以放大一點」 * Desktop 44 → 64, mobile 36 → 52. max-width 微擴避免 logo 被擠. */ .brand-link__image { display: block; height: 64px; width: auto; max-width: min(260px, 48vw); object-fit: contain; } @media (max-width: 640px) { .brand-link__image { height: 52px; max-width: 50vw; } } .brand-logo-text { font-weight: 800; letter-spacing: 0.12em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-link[data-brand-font="modern"] { font-family: "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; } .brand-link[data-brand-font="display"] { font-family: "Trebuchet MS", "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif; } .brand-link[data-brand-font="serif"] { font-family: "Georgia", "Times New Roman", "Noto Serif TC", "PMingLiU", serif; } .brand-link[data-brand-font="mono"] { font-family: "Consolas", "SFMono-Regular", "Roboto Mono", "Courier New", monospace; } .nav { display: flex; gap: 20px; flex-wrap: wrap; } .nav a { color: var(--muted); text-decoration: none; font-weight: 600; } .topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .topbar-actions .btn { white-space: nowrap; } .topbar-actions .btn.is-active { color: #fff; border-color: rgba(56, 189, 248, 0.52); background: rgba(14, 116, 144, 0.22); } .topbar-actions #customerLoginLink { display: none; } .site-music-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 999px; background: rgba(15, 23, 42, 0.64); color: rgba(226, 232, 240, 0.82); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .site-music-toggle:hover { color: #fff; border-color: rgba(56, 189, 248, 0.56); background: rgba(14, 116, 144, 0.2); } .site-music-toggle:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.72); outline-offset: 3px; } .site-music-toggle:active { transform: scale(0.96); } .site-music-toggle.is-active { color: #07111f; border-color: rgba(125, 211, 252, 0.84); background: linear-gradient(135deg, #7dd3fc, #facc15); box-shadow: 0 8px 22px rgba(56, 189, 248, 0.22); } .site-music-toggle.is-unavailable { display: none; } /* 2026-05-07 (crazy-ardinghelli): user mandate「admin 顯示什麼前端就要顯示什麼」 v35d 把 IMG display:none + 用 SVG ::before 取代是因為「PNG 在 24px 擠雜」， 但新 -orb 設計 (gpt-image-2 v2 簡化版) 在 28px 已經清楚可辨。 user 抱怨 「右上角圖案沒變欸」就是因為這條 CSS 一直把 admin 替換的 PNG 藏起來。 復原：顯示 IMG + 拿掉 ::before SVG。is-active 改成 IMG drop-shadow。 */ /* 2026-05-07 (crazy-ardinghelli) v3 specificity fix: .topbar img 規則 (specificity 0,1,1) 贏過 .site-music-toggle__icon (0,1,0) → IMG 被 max-height:48 + width:auto 限制變成 48×48 跑出 38×38 button 外面。 加 .topbar 前綴讓特異度 0,2,0 → wins over .topbar img (0,1,1)。 */ .topbar .site-music-toggle__icon { display: block; width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; pointer-events: none; /* R501bm: SVG 用 currentColor 配 cyan, drop-shadow 給 active 狀態 */ color: rgba(165, 243, 252, 0.85); fill: currentColor; } .site-music-toggle { position: relative; } .site-music-toggle::before { content: none; } .site-music-toggle.is-active .site-music-toggle__icon { color: #67e8f9; filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.8)); } /* ── Notification bell (右上角通知) ────────────────────────────────── Mirrors .site-music-toggle pill styling so the two sit beside each other as a coherent pair. Adds a red dot for unread count and a slide-down panel anchored to the topbar-actions container. */ .site-notification-toggle { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 999px; background: rgba(15, 23, 42, 0.64); color: rgba(226, 232, 240, 0.82); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .site-notification-toggle:hover { color: #fff; border-color: rgba(56, 189, 248, 0.56); background: rgba(14, 116, 144, 0.2); } .site-notification-toggle:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.72); outline-offset: 3px; } .site-notification-toggle:active { transform: scale(0.96); } .site-notification-toggle.has-unread { color: #fff; border-color: rgba(248, 113, 113, 0.6); background: rgba(127, 29, 29, 0.32); } /* 2026-05-07 (crazy-ardinghelli): 跟 .site-music-toggle__icon 同款修法 — 復原 IMG 顯示，移除 v35d SVG ::before override。 */ /* 2026-05-07 (crazy-ardinghelli) v3 specificity fix — same as music-toggle */ .topbar .site-notification-toggle__icon { display: block; width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; pointer-events: none; /* R501bm: SVG currentColor, has-unread 紅色 */ color: rgba(165, 243, 252, 0.85); fill: currentColor; } .site-notification-toggle.has-unread .site-notification-toggle__icon { color: #fca5a5; } .site-notification-toggle::before { content: none; } .site-notification-toggle.has-unread .site-notification-toggle__icon { filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.8)); } /* 2026-05-07 (crazy-ardinghelli) v20u: 聯絡客服 button (鈴鐺右邊). 跟 music + notification toggle 同 38×38 圓 pill 設計。 */ .site-support-toggle { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 999px; background: rgba(15, 23, 42, 0.64); color: rgba(226, 232, 240, 0.82); cursor: pointer; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .site-support-toggle:hover { color: #fff; border-color: rgba(56, 189, 248, 0.56); background: rgba(14, 116, 144, 0.2); } .site-support-toggle:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.72); outline-offset: 3px; } .site-support-toggle:active { transform: scale(0.96); } .topbar .site-support-toggle__icon { display: block; width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; pointer-events: none; /* R501bm: SVG currentColor */ color: rgba(165, 243, 252, 0.85); fill: currentColor; } .site-notification-toggle__dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-size: 12.1px; line-height: 18px; font-weight: 700; text-align: center; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45); border: 1.5px solid rgba(15, 23, 42, 0.95); pointer-events: none; } /* ── Panel ─────────────────────────────────────────────────────────── */ .topbar-actions { position: relative; /* anchor for the absolute-positioned panel */ } /* 2026-05-07 (crazy-ardinghelli): mobile /m/* 用 site-notification-panel--mobile modifier。/m/ 沒有 .topbar-actions 容器可以 anchor，所以 panel 走 position:fixed 定位在 dp-top header 下方。Z-index 必須高於 .dp-top-icon (z:5) 跟 .dp-tabbar (z:50)。 */ .site-notification-panel--mobile { position: fixed !important; top: 64px !important; right: 8px !important; left: auto !important; width: min(360px, calc(100vw - 16px)) !important; max-height: calc(100vh - 80px) !important; z-index: 1500 !important; } .site-notification-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); max-height: min(480px, calc(100vh - 120px)); display: flex; flex-direction: column; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 16px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)); box-shadow: 0 22px 50px rgba(2, 6, 23, 0.56), 0 0 0 1px rgba(56, 189, 248, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1000; overflow: hidden; animation: site-notification-panel-in 0.18s ease-out; } /* 2026-04-28 emergency fix — author CSS `display: flex` on .site-notification-panel was overriding the UA stylesheet's `[hidden] { display: none }` rule (same specificity, author wins on later cascade). Result: panel was permanently visible after first mount. The class+attribute selector below has higher specificity than the bare class rule, so `hidden` actually hides. */ .site-notification-panel[hidden] { display: none !important; } @keyframes site-notification-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .site-notification-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .site-notification-panel__title { font-size: 15.4px; font-weight: 700; color: #e2e8f0; letter-spacing: 0.05em; } /* 2026-05-07 (crazy-ardinghelli): 通知 panel 4 個 admin-replaceable IMG icon */ .site-notification-panel__title-icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; margin-right: 8px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.45)); } .site-notification-panel__close { width: 28px; height: 28px; border: none; background: transparent; color: rgba(226, 232, 240, 0.66); font-size: 24.2px; line-height: 1; cursor: pointer; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .site-notification-panel__close-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; pointer-events: none; transition: transform 0.16s ease, filter 0.16s ease; } .site-notification-panel__close:hover { color: #fff; background: rgba(148, 163, 184, 0.18); } .site-notification-panel__close:hover .site-notification-panel__close-icon { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); } .site-notification-panel__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 16px; color: rgba(148, 163, 184, 0.78); } /* 改成 — 56px hero icon (admin 可替換) */ img.site-notification-panel__empty-icon { width: 56px; height: 56px; max-width: 56px; max-height: 56px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.35)); opacity: 0.92; } /* legacy emoji span fallback (萬一 inject 失敗) */ span.site-notification-panel__empty-icon { font-size: 35.2px; } .site-notification-panel__empty-text { font-size: 14.3px; } .site-notification-panel__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0; } .site-notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.1); color: #e2e8f0; text-decoration: none; transition: background 0.16s ease; cursor: pointer; } .site-notification-item:last-child { border-bottom: none; } .site-notification-item:hover { background: rgba(56, 189, 248, 0.08); } .site-notification-item.is-unread { background: rgba(56, 189, 248, 0.05); } .site-notification-item.is-unread::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; } .site-notification-item { position: relative; } .site-notification-item__icon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 19.8px; border-radius: 8px; background: rgba(148, 163, 184, 0.14); } /* 2026-04-28 — when icon is a PNG (gpt-image-2 升級), 不需要背景 tint 因為 PNG 本身已含光暈. img 填滿 32x32. */ .site-notification-item__icon.site-notification-item__icon--png { background: transparent !important; } .site-notification-item__icon--png img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .site-notification-item--upgrade .site-notification-item__icon { background: linear-gradient(135deg, rgba(250, 204, 21, 0.28), rgba(244, 114, 182, 0.28)); } .site-notification-item--success .site-notification-item__icon { background: linear-gradient(135deg, rgba(74, 222, 128, 0.26), rgba(56, 189, 248, 0.26)); } .site-notification-item--warning .site-notification-item__icon { background: linear-gradient(135deg, rgba(248, 113, 113, 0.26), rgba(251, 146, 60, 0.26)); } .site-notification-item--draw .site-notification-item__icon { background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(56, 189, 248, 0.28)); } .site-notification-item--order .site-notification-item__icon { background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(125, 211, 252, 0.28)); } .site-notification-item__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .site-notification-item__title { font-size: 14.9px; font-weight: 700; color: #f1f5f9; line-height: 1.35; word-wrap: break-word; } .site-notification-item__desc { font-size: 13.8px; color: rgba(203, 213, 225, 0.82); line-height: 1.4; word-wrap: break-word; } .site-notification-item__time { font-size: 12.1px; color: rgba(148, 163, 184, 0.7); letter-spacing: 0.04em; } @media (max-width: 480px) { .site-notification-panel { right: 0; left: auto; width: min(340px, calc(100vw - 24px)); } } /* ── Filter chips (panel head) ─────────────────────────────────────── */ .site-notification-panel__filters { display: flex; gap: 6px; padding: 8px 12px 10px; overflow-x: auto; border-bottom: 1px solid rgba(148, 163, 184, 0.1); scrollbar-width: thin; } .site-notification-panel__filters::-webkit-scrollbar { height: 6px; } .site-notification-panel__filters::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 3px; } .site-notification-chip { flex: 0 0 auto; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(15, 23, 42, 0.4); color: rgba(203, 213, 225, 0.78); font-size: 13.2px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; display: inline-flex; align-items: center; gap: 4px; } .site-notification-chip__icon { /* 2026-04-28 gpt-image-2 PNG 取代 emoji prefix */ width: 16px; height: 16px; flex: 0 0 auto; pointer-events: none; } .site-notification-chip:hover { color: #fff; border-color: rgba(56, 189, 248, 0.5); background: rgba(14, 116, 144, 0.18); } .site-notification-chip.is-active { color: #07111f; border-color: rgba(125, 211, 252, 0.84); background: linear-gradient(135deg, #7dd3fc, #facc15); font-weight: 700; } /* ── Per-item delete button ────────────────────────────────────────── */ .site-notification-item__del { flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: rgba(148, 163, 184, 0.6); font-size: 19.8px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease; display: inline-flex; align-items: center; justify-content: center; } .site-notification-item:hover .site-notification-item__del, .site-notification-item:focus-within .site-notification-item__del { opacity: 1; } .site-notification-item__del:hover { color: #fb7185; background: rgba(251, 113, 133, 0.14); } /* On touch devices show the delete button always (no hover state). */ @media (hover: none) { .site-notification-item__del { opacity: 0.7; } } /* ── /my-notifications page ────────────────────────────────────────── */ .my-notifications-page { padding: 32px 16px 80px; max-width: 760px; margin: 0 auto; } .my-notifications-shell { display: flex; flex-direction: column; gap: 22px; } .my-notifications-head h1 { font-size: 30.8px; font-weight: 800; color: #f1f5f9; margin: 0 0 6px; letter-spacing: 0.02em; } .my-notifications-sub { margin: 0; font-size: 14.3px; color: rgba(203, 213, 225, 0.78); line-height: 1.6; } .my-notifications-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .my-notifications-filters { display: flex; gap: 6px; flex-wrap: wrap; } .my-notifications-meta { font-size: 13.2px; color: rgba(148, 163, 184, 0.78); letter-spacing: 0.05em; } .my-notifications-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 14px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.5)); overflow: hidden; } .my-notifications-list .site-notification-item { border-bottom: 1px solid rgba(148, 163, 184, 0.1); border-radius: 0; } .my-notifications-list li:last-child .site-notification-item { border-bottom: none; } .my-notifications-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 16px; color: rgba(148, 163, 184, 0.78); border: 1px dashed rgba(148, 163, 184, 0.22); border-radius: 14px; } .my-notifications-empty__icon { font-size: 52.8px; opacity: 0.7; } .my-notifications-loadmore { display: flex; justify-content: center; margin-top: 14px; } .my-notifications-login-gate { padding: 60px 16px; text-align: center; border: 1px dashed rgba(148, 163, 184, 0.28); border-radius: 14px; color: rgba(203, 213, 225, 0.86); display: flex; flex-direction: column; align-items: center; gap: 14px; } /* ── "查看全部通知" footer link ─────────────────────────────────────── */ .site-notification-panel__view-all { display: block; padding: 12px 16px; border-top: 1px solid rgba(148, 163, 184, 0.16); text-align: center; color: rgba(125, 211, 252, 0.92); font-size: 13.8px; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; background: rgba(14, 116, 144, 0.12); transition: background 0.15s ease, color 0.15s ease; } .site-notification-panel__view-all:hover { color: #fff; background: rgba(14, 116, 144, 0.28); } /* R501cx angry-cartwright (2026-05-17): ftp-shell + .frontend-theme-preview * cascade retired (~8 KB pre-gzip saved on every customer page that bundles * this file). * * Audit (5-agent deep audit 2026-05-17): all `.ftp-*` selectors (.ftp-shell, * .ftp-topbar, .ftp-dot, .ftp-title, .ftp-badge, .ftp-body, .ftp-subtitle, * .ftp-card, .ftp-thumb, .ftp-info, .ftp-chip, .ftp-topnav, .ftp-field) + * `.frontend-theme-preview[data-theme="..."]` parent selectors have 0 * occurrences in any HTML or JS. They were for an old admin theme picker * preview tile that was removed; rules forgotten. * * KEPT: alive `body.frontend-theme-cute/tech/board08/23/24` rules in * 80c-theme-presets-v2.css are SEPARATE — they apply to the actual themed * customer experience (ui-settings.js applies body class). Don't confuse. * * The @media block below originally had `.frontend-theme-preview` in its * selector list; that one selector removed (other selectors preserved). * * If admin theme picker preview UI returns, restore from git history: * git show R501cw:pages-upload/_frontend-src/styles/10d-user-profile-shell.css * * SENTINEL: r501cx-ftp-shell-retired */ @media (max-width: 1120px) { .auth-provider-grid { grid-template-columns: 1fr; } .auth-provider-card__head { flex-direction: column; } .admin-brand-card { padding: 20px; grid-template-columns: 1fr; } .admin-brand-card .field, .admin-brand-upload, .admin-brand-preview-shell { grid-column: 1; } } .error-text { color: #fca5a5; } .topbar-user { display: flex; align-items: center; gap: 10px; } .topbar-user:empty { display: none; } .mobile-tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px 8px; border-radius: 20px; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(8, 12, 24, 0.9); backdrop-filter: blur(10px); z-index: 60; } .mobile-tabbar a { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-height: 56px; padding: 6px 4px; border-radius: 14px; border: 1px solid transparent; color: rgba(226, 232, 240, 0.82); text-decoration: none; font-size: 12.1px; font-weight: 700; letter-spacing: 0.02em; } .mobile-tabbar__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 16.5px; line-height: 1; } .mobile-tabbar__label { line-height: 1.1; } .mobile-tabbar a.is-active { color: #fff; background: rgba(37, 99, 235, 0.42); border: 1px solid rgba(59, 130, 246, 0.5); } .mobile-tabbar a.is-active .mobile-tabbar__icon { background: rgba(255, 255, 255, 0.18); } .mobile-install-fab { position: fixed; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); border: 1px solid rgba(251, 191, 36, 0.55); background: rgba(245, 158, 11, 0.18); color: #fde68a; border-radius: 999px; padding: 10px 14px; font-size: 13.2px; font-weight: 700; letter-spacing: 0.03em; z-index: 61; box-shadow: 0 10px 30px rgba(2, 6, 23, 0.38); } .mobile-install-fab.is-hidden { display: none; } .user-chip { border: 1px solid rgba(34, 211, 238, 0.45); color: var(--accent-2); background: rgba(34, 211, 238, 0.12); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13.2px; letter-spacing: 0.08em; } .user-name { font-weight: 700; color: var(--ink); } .user-menu { position: relative; } .avatar-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent; padding: 0; display: grid; place-items: center; color: var(--ink); cursor: pointer; overflow: hidden; } .avatar-icon { width: 100%; height: 100%; display: grid; place-items: center; color: var(--accent-2); } .avatar-icon svg, .avatar-icon img, .avatar-icon__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .avatar-icon svg { width: 60%; height: 60%; } /* ── User dropdown panel — game style ─────────────────────── */ .user-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: radial-gradient(ellipse at 30% 0%, rgba(78, 255, 195, 0.06), transparent 60%), linear-gradient(180deg, rgba(10, 15, 28, 0.97), rgba(6, 10, 22, 0.98)); border: 1px solid rgba(230, 187, 102, 0.3); border-radius: 16px; padding: 0; display: none; flex-direction: column; z-index: 6; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 230, 190, 0.08); overflow: hidden; animation: upanelIn 0.2s ease-out; } @keyframes upanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .user-menu.open .user-panel { display: flex; } /* ── Profile header row ───────────────────────────────────── */ .up-profile { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: linear-gradient(135deg, rgba(230, 187, 102, 0.08), rgba(56, 189, 248, 0.04)); border-bottom: 1px solid rgba(230, 187, 102, 0.15); } /* Main clickable area (avatar + nickname) links to personal center. The * pencil beside it stays as a separate link to profile-edit for quick edits. */ .up-profile-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; padding: 4px; margin: -4px; border-radius: 10px; transition: background 0.15s ease; } .up-profile-main:hover { background: rgba(255, 255, 255, 0.04); } .up-avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(230, 187, 102, 0.5); overflow: hidden; flex-shrink: 0; box-shadow: 0 0 12px rgba(230, 187, 102, 0.2); } .up-avatar img { width: 100%; height: 100%; object-fit: cover; } .up-meta { flex: 1; min-width: 0; } .up-nickname { font-size: 16.5px; font-weight: 800; color: #f8fafc; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .up-account { font-size: 12.1px; color: rgba(203, 213, 225, 0.6); margin: 2px 0 0; } .up-edit { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 15.4px; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; } .up-edit:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(230, 187, 102, 0.4); color: #e6bb66; } /* ── Stats grid (points / coins / balance) ────────────────── */ .up-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 12px 12px 10px; border-bottom: 1px solid rgba(230, 187, 102, 0.1); } .up-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; } .up-stat__icon-wrap { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: block; background: radial-gradient(circle, #1a2440 0%, #0b1223 70%); } .up-stat__icon { width: 40px !important; height: 40px !important; max-width: 40px; max-height: 40px; object-fit: cover; display: block; transform: scale(1.55); } .up-stat__value { font-size: 12.1px; font-weight: 800; color: #f8fafc; line-height: 1.2; text-align: center; word-break: keep-all; max-width: 100%; } .up-stat__label { font-size: 11px; color: rgba(203, 213, 225, 0.6); letter-spacing: 0.02em; white-space: nowrap; } .up-stat--points .up-stat__value { color: #4effc3; } .up-stat--coins .up-stat__value { color: #e6bb66; } .up-stat--market .up-stat__value { color: #38bdf8; } /* ── Member level row ─────────────────────────────────────── */ .up-level { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(230, 187, 102, 0.1); text-decoration: none; } .up-level:hover { background: rgba(230, 187, 102, 0.05); } .up-level-badge { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(230, 187, 102, 0.35); } .up-level-badge img { width: 100%; height: 100%; object-fit: cover; } .up-level-name { font-size: 14.3px; font-weight: 700; color: #e6bb66; } .up-level-bonus { margin-left: auto; font-size: 12.1px; font-weight: 700; color: #38bdf8; background: rgba(56, 189, 248, 0.1); padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.2); } /* ── Inventory section ────────────────────────────────────── */ .up-section { padding: 10px 16px; border-bottom: 1px solid rgba(230, 187, 102, 0.1); } .up-section-title { font-size: 11px; font-weight: 700; color: rgba(230, 187, 102, 0.7); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; } .up-inventory { font-size: 14.3px; color: var(--ink, #f8fafc); font-weight: 700; } .up-inv-summary { color: rgba(203, 213, 225, 0.7); } .up-actions { display: flex; gap: 6px; margin-top: 8px; } .up-actions a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 0; border-radius: 8px; background: linear-gradient(135deg, rgba(78, 255, 195, 0.12), rgba(56, 189, 248, 0.08)); border: 1px solid rgba(78, 255, 195, 0.2); color: #4effc3; font-size: 13.2px; font-weight: 700; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .up-actions a:hover { background: linear-gradient(135deg, rgba(78, 255, 195, 0.2), rgba(56, 189, 248, 0.14)); border-color: rgba(78, 255, 195, 0.4); } /* ── Settings + logout ────────────────────────────────────── */ .up-footer { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 8px; } .up-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.2px; color: rgba(203, 213, 225, 0.6); } .up-setting-row .switch { margin-left: auto; } .up-logout { appearance: none; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); color: rgba(203, 213, 225, 0.6); padding: 8px; border-radius: 8px; font-size: 13.2px; font-weight: 600; cursor: pointer; text-align: center; transition: color 0.15s, border-color 0.15s; } .up-logout:hover { color: #fca5a5; border-color: rgba(252, 165, 165, 0.3); } /* ── Legacy compat aliases (keep old selectors working) ──── */ .user-section { display: none; } .user-section-title { display: none; } .user-info { display: none; } .user-info span { display: none; } .user-points { font-weight: 700; } .user-level-row { display: none; } .user-level-badge { display: none; } .user-level-name { display: none; } .user-level-bonus { display: none; } .user-inventory-preview { display: none; } .user-menu-actions { display: none; } .user-inventory-item { display: none; } .user-inventory-item .count { color: var(--accent); font-weight: 700; } .user-panel a, .user-panel button { text-decoration: none; font-weight: 600; } .user-setting-row { display: none; } .user-setting-row .switch { margin-left: auto; } .no-scroll { overflow: hidden; } .page { position: relative; z-index: 1; max-width: var(--layout-max-width); margin: 0 auto; padding: var(--layout-padding) 5vw calc(var(--layout-padding) * 2); display: flex; flex-direction: column; gap: 90px; } .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; position: relative; z-index: 1; } .auth-card { background: rgba(15, 23, 42, 0.85); border: 1px solid var(--border); border-radius: 20px; padding: 32px; width: min(420px, 92vw); display: grid; gap: 16px; text-align: center; } .auth-card-wide { width: min(520px, 92vw); text-align: left; } .auth-card-wide .logo { text-align: center; } .tab-group { display: flex; gap: 10px; } .tab { border: 1px solid var(--border); background: rgba(15, 23, 42, 0.7); color: var(--muted); padding: 10px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; } .tab.active { color: var(--accent); border-color: rgba(249, 115, 22, 0.45); background: rgba(249, 115, 22, 0.15); } .code-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; } .auth-card h1 { margin: 0; } .admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; position: relative; z-index: 1; } .admin-sidebar { background: rgba(11, 15, 26, 0.9); border-right: 1px solid var(--border); padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; } .admin-sidebar nav { display: grid; gap: 6px; } .admin-sidebar a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; } .store-page { position: relative; z-index: 1; } .store-shell { display: block; } .store-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; } .store-category-pane { position: sticky; top: 84px; z-index: 2; padding: 14px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.28); background: linear-gradient(180deg, rgba(10, 16, 30, 0.92), rgba(8, 12, 24, 0.86)); backdrop-filter: blur(12px); box-shadow: 0 18px 32px rgba(2, 6, 23, 0.38); } .store-category-pane-title { margin: 0 0 12px; font-size: 14.3px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .store-category-sidebar { display: grid; gap: 9px; } .store-category-link { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--public-btn-chip-border); border-radius: var(--public-btn-chip-radius); color: var(--public-btn-chip-color); background: var(--public-btn-chip-bg); box-shadow: var(--public-btn-chip-shadow); font-size: 14.3px; font-weight: var(--public-btn-chip-font-weight); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; white-space: nowrap; } .store-category-link span { color: rgba(148, 163, 184, 0.92); font-weight: 700; } .store-category-link:hover { border-color: color-mix(in srgb, var(--public-btn-chip-border) 45%, var(--accent) 55%); transform: translateY(-1px); } .store-category-link.active { border-color: var(--public-btn-chip-active-border); background: var(--public-btn-chip-active-bg); color: var(--public-btn-chip-active-color); box-shadow: var(--public-btn-chip-active-shadow); } .store-category-link:focus-visible { outline: none; box-shadow: var(--public-btn-chip-shadow), 0 0 0 4px var(--public-btn-focus-ring); } .store-main { display: grid; gap: 16px; min-width: 0; } .store-toolbar { position: sticky; top: 84px; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.26); background: rgba(8, 12, 24, 0.9); backdrop-filter: blur(12px); box-shadow: 0 12px 26px rgba(2, 6, 23, 0.36); } .store-search .input-inline { width: 100%; min-height: 40px; } .store-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; font-size: 14.3px; font-weight: 600; } .store-category-select { display: none !important; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; font-size: 14.3px; font-weight: 600; } .store-category-tabs { display: none !important; gap: 8px; } .store-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .store-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.2); background: linear-gradient(180deg, rgba(11, 17, 33, 0.86), rgba(9, 14, 28, 0.9)); box-shadow: 0 14px 28px rgba(3, 7, 18, 0.34); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .store-card:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, 0.44); box-shadow: 0 20px 36px rgba(2, 6, 23, 0.48); } .store-card-hit { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; } .store-card-thumb { position: relative; min-height: 0; aspect-ratio: 4 / 3; background: linear-gradient(140deg, rgba(15, 23, 42, 0.76), rgba(30, 41, 59, 0.62)); display: grid; place-items: center; font-size: 13.2px; letter-spacing: 0.06em; color: rgba(226, 232, 240, 0.72); overflow: hidden; } .store-card-thumb.has-image { background-size: cover; background-position: center 42%; } .store-card-thumb.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.05), rgba(2, 6, 23, 0.5)); } .store-card-body { display: grid; gap: 11px; padding: 14px; position: relative; z-index: 2; } .store-card-category { font-size: 12.1px; color: rgba(125, 211, 252, 0.96); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .store-card h3 { margin: 0; font-size: 17.6px; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .store-card h3 a { color: var(--ink); text-decoration: none; } .store-card h3 a:hover { color: #e2e8f0; } .store-card-subtitle { margin: -6px 0 0; font-size: 13.2px; color: rgba(148, 163, 184, 0.84); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .store-card-meta { display: grid; gap: 7px; color: var(--muted); font-size: 13.2px; } .store-card-meta strong { color: #f8fafc; font-size: 19.8px; font-weight: 800; } .store-card-meta-icons .store-stat { display: flex; align-items: center; gap: 7px; line-height: 1.1; } .store-card-meta-icons .store-stat-icon { width: 14px; height: 14px; color: rgba(148, 163, 184, 0.95); } .store-card-meta-icons .store-stat-icon svg { width: 14px; height: 14px; display: block; fill: currentColor; } .store-card-meta-icons .store-stat-text { color: rgba(203, 213, 225, 0.92); font-size: 13.2px; } .store-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .store-card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .store-card-actions .btn { position: relative; z-index: 2; /* R328 flamboyant-bell (2026-05-12): WCAG 2.5.5 touch target ≥44px (Apple HIG 44pt / Material 48dp). 之前 38px 在手機列表頁主 CTA 易誤觸鄰近卡片. */ min-height: 44px; font-weight: 700; } .store-card-skeleton { border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.14); background: rgba(12, 18, 34, 0.62); } .store-card-skeleton .store-card-thumb { min-height: 180px; background: linear-gradient(120deg, rgba(30, 41, 59, 0.38), rgba(51, 65, 85, 0.22)); } .store-skeleton-line { display: block; height: 12px; border-radius: 999px; background: rgba(148, 163, 184, 0.25); } .store-skeleton-line.short { width: 68%; } .store-drawer-backdrop { position: fixed; inset: 0; z-index: 34; background: rgba(2, 6, 23, 0.64); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .store-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .store-drawer { position: fixed; top: 0; right: 0; width: min(440px, 95vw); height: 100dvh; z-index: 35; border-left: 1px solid rgba(148, 163, 184, 0.28); background: rgba(8, 12, 24, 0.97); backdrop-filter: blur(10px); box-shadow: -14px 0 34px rgba(2, 6, 23, 0.5); padding: 18px; display: grid; align-content: start; gap: 14px; transform: translateX(100%); transition: transform 0.18s ease; overflow-y: auto; } .store-drawer.is-open { transform: translateX(0); } .store-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .store-drawer-head h3 { margin: 0; font-size: 22px; } .store-drawer-subtitle { margin: -6px 0 0; color: rgba(148, 163, 184, 0.94); font-size: 13.2px; line-height: 1.45; } .store-drawer-thumb { min-height: 220px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); display: grid; place-items: center; background: linear-gradient(140deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.58)); color: rgba(203, 213, 225, 0.85); letter-spacing: 0.08em; font-size: 13.2px; } .store-drawer-thumb.has-image { background-size: cover; background-position: center; } .store-drawer-meta { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.52); } .store-drawer-desc { color: rgba(226, 232, 240, 0.92); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .store-drawer-tags { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 1439px) and (min-width: 1080px) { .store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1079px) and (min-width: 768px) { .store-layout { grid-template-columns: 1fr; gap: 16px; } .store-category-pane { display: none; } .store-toolbar { position: static; grid-template-columns: minmax(0, 1fr) auto; } .store-category-select { display: inline-flex !important; } .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .store-layout { grid-template-columns: 1fr; gap: 14px; } .store-category-pane { display: none; } .store-toolbar { position: static; grid-template-columns: 1fr; padding: 12px; } .store-sort, .store-category-select { justify-content: space-between; } .store-category-select { display: inline-flex !important; } .store-grid { grid-template-columns: 1fr; gap: 14px; } .store-drawer { width: 100%; max-width: 100%; border-left: 0; box-shadow: none; } } @media (min-width: 1080px) { .store-category-select { display: none !important; } } .store-card-actions-row { display: flex; flex-wrap: wrap; gap: 8px; } .store-qty-field, .store-cart-qty-field { display: grid; gap: 6px; } .store-qty-field span, .store-cart-qty-field span { font-size: 13.2px; color: var(--muted); } .store-drawer-actions { display: grid; grid-template-columns: 1fr; gap: 8px; } .store-cart-page, .store-orders-page, .store-detail-page, .store-success-page, .store-order-detail-page { position: relative; z-index: 1; } .store-cart-shell, .store-checkout-shell, .store-orders-shell, .store-detail-shell, .store-success-card, .store-order-detail-shell { display: grid; gap: 14px; } .store-cart-rows { display: grid; gap: 10px; } /* v55ha: store-cart cosmic redesign — 從 flat slate-grey 升級成 * glassmorphism + cosmic accent，配合首頁 pool-card 跟 modal 統一視覺 * 語言。這是結帳轉換頁，premium 視覺直接影響 conversion rate。 */ .store-cart-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 14px; background: radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.06), transparent 50%), linear-gradient(180deg, rgba(26, 26, 46, 0.6), rgba(18, 19, 35, 0.78)); transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; } .store-cart-row:hover { border-color: rgba(78, 255, 195, 0.32); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.45); } .store-cart-row-thumb { width: 96px; height: 96px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); display: grid; place-items: center; color: rgba(203, 213, 225, 0.65); text-decoration: none; font-size: 12.1px; background: rgba(8, 14, 27, 0.55); overflow: hidden; } .store-cart-row-thumb.has-image { background-size: cover; background-position: center; } .store-cart-row-main { min-width: 0; display: grid; gap: 8px; } .store-cart-row-main h3 { margin: 0; font-size: 16.5px; line-height: 1.35; } .store-cart-row-main h3 a { color: var(--ink); text-decoration: none; } .store-cart-row-main h3 a:hover { color: rgba(103, 232, 249, 0.95); } .store-cart-row-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13.2px; } .store-cart-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; } .store-cart-row-total { font-size: 18.7px; font-weight: 800; background: linear-gradient(135deg, #00ff88, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; letter-spacing: 0.02em; } /* v55ha: checkout-card 升級成 cosmic gradient + section dividers */ .store-checkout-card { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 22px 22px 18px; background: radial-gradient(circle at 0% 0%, rgba(0, 255, 136, 0.06), transparent 55%), linear-gradient(180deg, rgba(28, 28, 50, 0.78), rgba(18, 19, 35, 0.92)); box-shadow: 0 22px 48px rgba(2, 6, 23, 0.4); display: grid; gap: 14px; } .store-checkout-card h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink, #f8fafc); } .store-checkout-card h3:not(:first-child) { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .store-checkout-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; } .store-checkout-actions .btn.primary { flex: 1; min-height: 48px; font-size: 16.5px; font-weight: 800; background: linear-gradient(135deg, #00ff88, #38bdf8); color: #0f172a; border: 0; box-shadow: 0 12px 28px rgba(0, 255, 136, 0.28); letter-spacing: 0.04em; transition: transform 0.15s ease, box-shadow 0.2s ease; } .store-checkout-actions .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0, 255, 136, 0.38); } /* v55ha: store-cart kv-row (商品金額 / 訂單總額 / 目前點數) — 純 row， * 不要 admin .kv-row 的 border/background 風格。最後一筆「訂單總額」 * 用 gradient text 強調 (visual hierarchy)。 */ .store-cart-page .store-checkout-card .kv-row, .store-checkout-shell .store-checkout-card .kv-row { background: transparent; border: 0; padding: 6px 0; font-size: 15.4px; color: var(--muted, #99aeca); } .store-cart-page .store-checkout-card .kv-row strong, .store-checkout-shell .store-checkout-card .kv-row strong { color: var(--ink, #f8fafc); font-weight: 700; font-size: 16.5px; } /* 訂單總額 (倒數第 2 row) — gradient text 強調 */ .store-cart-page .store-checkout-card .kv-row:nth-last-child(2) strong, .store-checkout-shell .store-checkout-card .kv-row:nth-last-child(2) strong { font-size: 24.2px; font-weight: 800; background: linear-gradient(135deg, #00ff88, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.02em; } /* 訂單總額 row 加 top divider */ .store-cart-page .store-checkout-card .kv-row:nth-last-child(2), .store-checkout-shell .store-checkout-card .kv-row:nth-last-child(2) { padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .store-orders-list { display: grid; gap: 10px; } .store-order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 14px; padding: 12px; background: rgba(10, 15, 30, 0.7); } .store-order-main { display: grid; gap: 6px; } .store-order-main h3 { margin: 0; } .store-order-main p { margin: 0; color: var(--muted); font-size: 14.3px; } .store-order-side { display: grid; justify-items: end; gap: 8px; } .store-order-status { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; border: 1px solid rgba(125, 211, 252, 0.35); background: rgba(14, 116, 144, 0.22); color: rgba(186, 230, 253, 0.96); font-size: 13.2px; font-weight: 700; padding: 4px 10px; } .store-order-status.status-shipping { border-color: rgba(251, 191, 36, 0.4); background: rgba(146, 64, 14, 0.26); color: rgba(254, 240, 138, 0.95); } .store-order-status.status-completed { border-color: rgba(74, 222, 128, 0.4); background: rgba(6, 78, 59, 0.28); color: rgba(187, 247, 208, 0.95); } .store-order-status.status-cancelled { border-color: rgba(248, 113, 113, 0.4); background: rgba(127, 29, 29, 0.32); color: rgba(254, 202, 202, 0.95); } .store-detail-card { display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: 16px; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 16px; padding: 14px; background: rgba(8, 12, 24, 0.75); } .store-detail-image { min-height: 360px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); display: grid; place-items: center; background: rgba(15, 23, 42, 0.7); color: rgba(203, 213, 225, 0.82); letter-spacing: 0.08em; font-size: 13.2px; } .store-detail-image.has-image { background-size: cover; background-position: center; } .store-detail-gallery { display: grid; gap: 10px; } .store-detail-main-image-wrap { border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(15, 23, 42, 0.7); overflow: hidden; } .store-detail-main-image { width: 100%; height: 360px; object-fit: cover; display: block; } .store-detail-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .store-detail-thumb { border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; padding: 0; background: rgba(15, 23, 42, 0.72); overflow: hidden; cursor: pointer; } .store-detail-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; } .store-detail-thumb.is-active { border-color: rgba(34, 211, 238, 0.9); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35); } .store-detail-main { display: grid; gap: 10px; min-width: 0; } .store-detail-main h1 { margin: 0; line-height: 1.35; overflow-wrap: anywhere; } .store-detail-category { color: rgba(103, 232, 249, 0.94); font-size: 14.3px; font-weight: 700; } .store-detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14.3px; font-weight: 600; margin-bottom: 4px; } .store-detail-breadcrumb__seg { color: rgba(103, 232, 249, 0.78); padding: 2px 6px; border-radius: 6px; background: rgba(34, 211, 238, 0.08); letter-spacing: 0.01em; } .store-detail-breadcrumb__seg.is-current { color: rgba(255, 213, 74, 0.95); background: rgba(255, 213, 74, 0.12); } .store-detail-breadcrumb__sep { color: rgba(148, 163, 184, 0.7); font-size: 13.2px; padding: 0 2px; } .store-detail-meta { display: grid; gap: 8px; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 10px; background: rgba(15, 23, 42, 0.5); } .store-detail-desc { margin: 0; color: rgba(226, 232, 240, 0.95); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; } .store-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; } .store-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; } .store-detail-empty, .store-order-login-hint { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 14px; padding: 18px; background: rgba(8, 12, 24, 0.72); display: grid; gap: 10px; } .store-detail-empty h2, .store-order-login-hint h3 { margin: 0; } .store-detail-empty p, .store-order-login-hint p { margin: 0; color: var(--muted); } .store-success-inner { border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 18px; padding: 18px; background: rgba(6, 78, 59, 0.2); display: grid; gap: 12px; } .store-success-badge { width: fit-content; font-size: 13.2px; font-weight: 800; letter-spacing: 0.05em; color: rgba(187, 247, 208, 0.96); border: 1px solid rgba(74, 222, 128, 0.45); background: rgba(6, 95, 70, 0.35); border-radius: 999px; padding: 5px 10px; } .store-success-inner h2 { margin: 0; } .store-success-inner p { margin: 0; color: rgba(216, 254, 229, 0.94); } .store-success-summary { border: 1px solid rgba(167, 243, 208, 0.24); border-radius: 12px; padding: 10px; background: rgba(4, 47, 46, 0.32); display: grid; gap: 8px; } .store-success-actions, .store-order-detail-actions { display: flex; gap: 10px; flex-wrap: wrap; } .store-order-detail-card { border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 16px; padding: 14px; background: rgba(8, 12, 24, 0.75); display: grid; gap: 12px; } .store-order-detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; } .store-order-detail-head h2 { margin: 0; } .store-order-detail-head p { margin: 6px 0 0; color: var(--muted); } .store-order-detail-summary { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 10px; background: rgba(15, 23, 42, 0.5); display: grid; gap: 8px; } .store-order-detail-lines { display: grid; gap: 10px; } .store-order-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 10px; background: rgba(15, 23, 42, 0.42); } .store-order-line-thumb { width: 72px; height: 72px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.22); background: rgba(30, 41, 59, 0.66); display: grid; place-items: center; color: rgba(203, 213, 225, 0.8); text-decoration: none; font-size: 12.1px; } .store-order-line-thumb.has-image { background-size: cover; background-position: center; } .store-order-line-main { min-width: 0; } .store-order-line-main h4 { margin: 0 0 6px; font-size: 15.4px; } .store-order-line-main h4 a { color: var(--ink); text-decoration: none; } .store-order-line-main p { margin: 0; color: var(--muted); font-size: 13.2px; } .store-order-line strong { white-space: nowrap; } @media (max-width: 1079px) { .store-detail-card { grid-template-columns: 1fr; } .store-detail-image { min-height: 300px; } .store-detail-main-image { height: 300px; } } @media (max-width: 767px) { .store-cart-row { grid-template-columns: 1fr; } .store-cart-row-thumb { width: 100%; height: 180px; } .store-order-card { grid-template-columns: 1fr; } .store-order-side { justify-items: start; } .store-order-line { grid-template-columns: 1fr; } .store-order-line-thumb { width: 100%; height: 170px; } } .store-shipping-methods { display: flex; flex-wrap: wrap; gap: 10px; } /* v55ha: pill-style cosmic radio — selected state 用 cosmic green tint */ .store-radio { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 8px 14px; background: rgba(8, 14, 27, 0.55); color: var(--muted, #99aeca); cursor: pointer; font-size: 14.3px; font-weight: 600; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; } .store-radio:hover { border-color: rgba(78, 255, 195, 0.32); color: var(--ink, #f8fafc); } .store-radio:has(input:checked) { border-color: rgba(78, 255, 195, 0.6); color: #4effc3; background: rgba(78, 255, 195, 0.08); } .store-radio input { margin: 0; accent-color: #4effc3; } .store-shipping-form { display: grid; gap: 12px; } .store-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .store-form-grid label, .store-shipping-form > label, .store-shipping-group > label { display: grid; gap: 6px; font-size: 14.3px; color: var(--muted); } .store-shipping-group { display: grid; gap: 10px; } .store-shipping-group.is-hidden { display: none; } .store-orders-toolbar { display: flex; justify-content: flex-end; } .store-order-detail-timeline { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 12px; padding: 12px; background: rgba(15, 23, 42, 0.48); display: grid; gap: 8px; } .store-order-detail-timeline h3 { margin: 0; font-size: 15.4px; } .store-order-detail-timeline ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; } .store-order-detail-timeline li { display: grid; gap: 4px; color: var(--muted); font-size: 14.3px; } .store-order-detail-timeline li strong { color: var(--ink); } .admin-store-orders-filter .admin-store-orders-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .admin-store-orders-list { display: grid; gap: 10px; } .admin-store-order-detail { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 14px; padding: 14px; background: rgba(8, 12, 24, 0.74); display: grid; gap: 12px; } .admin-store-order-detail.empty { color: var(--muted); } .admin-store-order-detail-head h3 { margin: 0; } .admin-store-order-detail-head p { margin: 6px 0 0; color: var(--muted); } .admin-store-order-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .admin-store-order-detail-grid > div { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 10px; padding: 8px 10px; background: rgba(15, 23, 42, 0.44); display: grid; gap: 4px; } .admin-store-order-detail-grid span { color: var(--muted); font-size: 13.2px; } .admin-store-order-contact { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 10px; padding: 10px; background: rgba(15, 23, 42, 0.4); } .admin-store-order-contact h4 { margin: 0 0 6px; font-size: 14.3px; } .admin-store-order-contact p { margin: 0; color: var(--muted); } .admin-store-order-table-wrap { overflow-x: auto; } .admin-store-order-table { width: 100%; border-collapse: collapse; } .admin-store-order-table th, .admin-store-order-table td { border-bottom: 1px solid rgba(148, 163, 184, 0.2); text-align: left; padding: 8px 6px; font-size: 14.3px; } .admin-store-order-table th { color: rgba(203, 213, 225, 0.95); font-weight: 700; } .admin-store-order-update .admin-store-orders-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .admin-store-order-timeline { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 10px; padding: 10px; background: rgba(15, 23, 42, 0.4); } .admin-store-order-timeline h4 { margin: 0 0 8px; } .admin-store-order-timeline ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; } .admin-store-order-timeline li { color: var(--muted); font-size: 14.3px; } .admin-store-order-timeline li strong { display: block; color: var(--ink); } @media (max-width: 1079px) { .store-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-store-orders-filter .admin-store-orders-grid, .admin-store-order-update .admin-store-orders-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-store-order-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .store-form-grid { grid-template-columns: 1fr; } .store-orders-toolbar { justify-content: stretch; } .store-orders-toolbar .store-sort { width: 100%; justify-content: space-between; } .admin-store-orders-filter .admin-store-orders-grid, .admin-store-order-update .admin-store-orders-grid, .admin-store-order-detail-grid { grid-template-columns: 1fr; } } /* ===================================================================== * Admin Store Orders (2026-04 refresh) * ===================================================================== */ /* ===================================================================== * Admin Market Monitor (2026-04 refresh) * ===================================================================== */ .pool-list { grid-template-columns: 1fr; } .pool-card { background: rgba(15, 23, 42, 0.6); } .pool-card.is-selected { border-color: rgba(249, 115, 22, 0.6); box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.2); } .pool-card-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pool-actions { display: flex; gap: 8px; flex-wrap: wrap; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; display: grid; gap: 12px; box-shadow: 0 16px 30px rgba(15, 23, 42, 0.4); } .pool-card { grid-template-rows: auto minmax(160px, 1fr) auto; gap: 0; } .pool-card-top { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: rgba(15, 23, 42, 0.6); } .pool-card-image { position: relative; display: grid; place-items: center; background: rgba(15, 23, 42, 0.55); min-height: 220px; overflow: hidden; cursor: pointer; } .pool-card-image::before { content: ""; position: absolute; inset: 0; background-image: var(--thumb-image); background-size: cover; background-position: center; filter: blur(20px); transform: scale(1.1); opacity: 0; } .pool-card-image.has-image::before { opacity: 0.45; } .pool-card-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; position: relative; z-index: 1; } .pool-card-image video { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1; } .pool-card-image.is-tower-preview img { object-fit: cover; } .pool-card-bottom { display: grid; gap: 8px; padding: 8px 10px 12px; background: rgba(15, 23, 42, 0.7); } .pool-card-bottom .progress { margin: 0; } .pool-name { font-weight: 600; font-size: 15.4px; color: var(--ink); } .draw-overlay { position: fixed; inset: 0; /* v55ew (2026-04-30): 撤回 v55ev 過度透明 — 影片本身就是暗 cosmic 主題， 如果 backdrop 也透明 + mix-blend-mode screen → 兩個 dark blend 變看不見。 回到深色 backdrop 但拿掉 backdrop-blur (那是給 modal 用的)， 這樣影片清楚顯示但無 popup card 框感。 */ background: rgba(3, 5, 12, 0.96); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 30; opacity: 0; pointer-events: none; /* R143 (2026-05-08): user 報「動畫要馬上跳出來 而不是等待」— fade-in 從 0.25s ease → 0.08s 縮短到接近瞬間。R140 已 parallel pre-start， paymentPicker resolve 後 openDrawOverlay 是 sync call，剩下只剩 CSS transition 在拖時間。0.08s 幾乎瞬間出但仍有 smooth 感不會 harsh。 */ transition: opacity 0.08s ease-out; } .draw-overlay.is-visible { opacity: 1; pointer-events: auto; } .draw-handoff-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 35; --flash-in-ms: 190ms; --flash-out-ms: 260ms; } .draw-handoff-flash.is-flash-in { opacity: 1; transition: opacity var(--flash-in-ms) ease-out; } .draw-handoff-flash.is-flash-out { opacity: 0; transition: opacity var(--flash-out-ms) ease-out; } .draw-overlay-card { /* v55ev: 拿掉 card chrome（border / bg / shadow / padding），讓影片直接 full bleed */ width: 100vw; height: 100vh; background: transparent; border: 0; border-radius: 0; padding: 0; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: none; } .draw-video { width: 100vw; height: 100vh; max-height: none; border-radius: 0; /* v55ew: 撤掉 mix-blend-mode: screen（讓影片暗色保留可見） */ background: transparent; object-fit: contain; } .draw-video--intro { display: none; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(2, 6, 23, 0.34); } .draw-skip { /* v55ev: 完全隱藏跳過按鈕（純動畫，no chrome） */ display: none !important; position: absolute; top: 16px; right: 16px; } .draw-skip.is-visible { display: inline-flex; } .draw-result { display: none; gap: 12px; } .draw-result.is-visible { display: grid; } .result-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .result-card { background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: grid; gap: 8px; text-align: center; } .result-image { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: rgba(8, 12, 24, 0.6); } .result-image img { width: 100%; height: 100%; object-fit: contain; } .result-info strong { display: block; font-size: 15.4px; } .result-info span { font-size: 13.2px; color: var(--muted); } .result-count { font-weight: 700; font-size: 13.2px; color: var(--accent); } .result-lord-badge { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(249, 115, 22, 0.14); border: 1px solid rgba(249, 115, 22, 0.26); color: rgba(255, 237, 213, 0.96); font-size: 12.1px; font-style: normal; font-weight: 700; } .draw-result-notice { display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.72); } /* R501ke sad-davinci (2026-05-22 BUG #63): [hidden] + :empty 雙重保險防空白橫槓. owner 報手機 iPhone 16 Pro Safari「全選上方一條空白橫槓不知道幹嘛」, 桌機也防範. R501lj condescending-curie (2026-05-25): 還原進 source. 原本是 R501ke 直接改 styles-customer.css dist (沒同步 source), R501lh 跑 build:frontend 從 source 重組 bundle 時被 strip 掉 → 空白橫槓退化重現. 移進 20-store.css source 讓 build 永久保留. SENTINEL: r501ke-draw-result-notice-empty-guard */ .draw-result-notice[hidden], .draw-result-notice:empty { display: none !important; padding: 0 !important; border: 0 !important; background: none !important; margin: 0 !important; } .draw-result-notice strong { font-size: 16.5px; color: var(--ink); } .draw-result-notice span { color: var(--muted); font-size: 14.3px; line-height: 1.5; } .draw-result-notice.is-lord-crowned { border-color: rgba(249, 115, 22, 0.36); background: linear-gradient(135deg, rgba(120, 53, 15, 0.78), rgba(15, 23, 42, 0.84)); } .draw-result-notice.is-lord-credit { border-color: rgba(56, 189, 248, 0.32); background: linear-gradient(135deg, rgba(8, 47, 73, 0.78), rgba(15, 23, 42, 0.84)); } /* v55fz: 物品庫 grid + cards 重設計（cosmic premium） */ .inventory-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .inventory-card { position: relative; padding: 14px; border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(78, 255, 195, 0.06), transparent 50%), linear-gradient(180deg, rgba(28, 28, 50, 0.78), rgba(15, 23, 42, 0.78)); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); display: grid; gap: 10px; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms ease, box-shadow 220ms ease; } .inventory-card:hover { transform: translateY(-2px); border-color: rgba(78, 255, 195, 0.28); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(78, 255, 195, 0.16); } .inventory-card.is-selected { border-color: rgba(78, 255, 195, 0.55); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), 0 0 0 2px rgba(78, 255, 195, 0.32), inset 0 0 0 1px rgba(78, 255, 195, 0.18); } .inventory-thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 30% 30%, rgba(78, 255, 195, 0.06), transparent 60%), linear-gradient(135deg, rgba(8, 12, 24, 0.85), rgba(15, 23, 42, 0.7)); display: grid; place-items: center; position: relative; } .inventory-thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); } .inventory-card:hover .inventory-thumb img { transform: scale(1.04); } .inventory-meta { display: grid; gap: 4px; min-width: 0; } .inventory-meta strong { font-size: 15.4px; font-weight: 800; color: var(--ink, #f8fafc); line-height: 1.35; /* clamp 2 行 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .inventory-meta span { font-size: 12.1px; color: var(--muted, #99aeca); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inventory-count { font-weight: 800; font-size: 15.4px; color: #4effc3; letter-spacing: 0.02em; } .inventory-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid rgba(148, 163, 184, 0.08); } /* v55fz: status badge color-code by status */ .inventory-status.badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.06em; } .inventory-card[data-status="stored"] .inventory-status.badge { background: rgba(78, 255, 195, 0.14); color: #4effc3; border: 1px solid rgba(78, 255, 195, 0.32); } .inventory-card[data-status="listed"] .inventory-status.badge { background: rgba(56, 189, 248, 0.14); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.32); } .inventory-card[data-status="ship_requested"] .inventory-status.badge { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.32); } .inventory-card[data-status="shipped"] .inventory-status.badge { background: rgba(168, 85, 247, 0.14); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.32); } .inventory-card[data-status="delivered"] .inventory-status.badge { background: rgba(34, 197, 94, 0.14); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.32); } .inventory-card[data-status="recycled"] .inventory-status.badge, .inventory-card[data-status="recycle"] .inventory-status.badge { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.28); } .inventory-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* R501m8 recursing-edison (2026-05-26): owner feedback — 物品庫 4 顆 action button (上架市集 / 申請出貨 / 回收成星砂幣 / 前往市集) 在 flex:1 等寬下, 「回收成星砂幣」6 字會被擠壓 truncate (用戶 screenshot 看到「回收成集」= truncated 顯示). 改 flex: 1 1 auto + min-content size + 字級放大, 每顆 button 按字數自動寬, 多餘空間平分. white-space:nowrap 保留 (避免折行 讓卡片高度不一致), 但 flex-basis: max-content 確保不被擠. */ .inventory-actions .btn { flex: 1 1 auto; min-width: max-content; font-size: 14.5px; font-weight: 700; padding: 8px 12px; white-space: nowrap; letter-spacing: 0.02em; } /* R501m8: 物品庫價格 chip (賞品市值) — 放在 inventory-meta 下方, 跟 .inventory-bid 同款 pill 但用金色突顯「值錢」感. ⚠️ 選擇器特異度: 必須 .inventory-meta .inventory-price 才能壓過 既有 `.inventory-meta span` (0,2,0) rule, 否則 font-size + color 會被搶. */ .inventory-meta .inventory-price, .inventory-card .inventory-price { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(245, 158, 11, 0.10) 100%); border: 1px solid rgba(251, 191, 36, 0.32); color: #fbbf24; font-size: 12.8px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: visible; max-width: 100%; text-shadow: 0 0 6px rgba(251, 191, 36, 0.18); text-overflow: clip; } .inventory-meta .inventory-price__label, .inventory-card .inventory-price__label { opacity: 0.78; font-weight: 600; } .inventory-meta .inventory-price.inventory-price__recycle, .inventory-card .inventory-price.inventory-price__recycle { color: #4effc3; border-color: rgba(78, 255, 195, 0.32); background: linear-gradient(135deg, rgba(78, 255, 195, 0.14) 0%, rgba(16, 185, 129, 0.10) 100%); text-shadow: 0 0 6px rgba(78, 255, 195, 0.18); } .inventory-bid { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(56, 189, 248, 0.10); border: 1px solid rgba(56, 189, 248, 0.24); color: #38bdf8; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* --- v55fz: inventory status tabs 重設計 --- */ .inventory-status-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4)); border: 1px solid rgba(148, 163, 184, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); align-items: center; } .inventory-status-tab { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; /* R328: WCAG 2.5.5 ≥44px (R292 修了 m/inventory.css 但漏這個桌機共用) */ min-height: 44px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: rgba(226, 232, 240, 0.7); font-size: 14.3px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms ease; white-space: nowrap; flex: 0 0 auto; } .inventory-status-tab:hover { background: rgba(78, 255, 195, 0.06); color: #f8fafc; } .inventory-status-tab:focus-visible { outline: 2px solid rgba(78, 255, 195, 0.55); outline-offset: 2px; } .inventory-status-tab.is-active { background: linear-gradient(135deg, rgba(0, 255, 136, 0.18), rgba(56, 189, 248, 0.18)); border-color: rgba(78, 255, 195, 0.45); color: #f8fafc; box-shadow: 0 4px 16px rgba(0, 255, 136, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } /* v55fz: status-aware tint when active — each tab gets its own color */ .inventory-status-tab[data-status="ship"].is-active { background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(251, 191, 36, 0.14)); border-color: rgba(245, 158, 11, 0.45); box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18); } .inventory-status-tab[data-status="listed"].is-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(34, 211, 238, 0.14)); border-color: rgba(56, 189, 248, 0.45); box-shadow: 0 4px 16px rgba(56, 189, 248, 0.18); } .inventory-status-tab[data-status="recycle"].is-active { background: linear-gradient(135deg, rgba(148, 163, 184, 0.20), rgba(100, 116, 139, 0.14)); border-color: rgba(148, 163, 184, 0.45); box-shadow: 0 4px 16px rgba(148, 163, 184, 0.16); } /* R501hl sad-davinci (2026-05-20): tab icon — 16px font, 微微 lift, inactive state opacity 0.6 (less attention), active 1.0 */ .inventory-status-tab__icon { display: inline-flex; align-items: center; font-size: 16.5px; line-height: 1; opacity: 0.65; transition: opacity 160ms ease, transform 160ms ease; } .inventory-status-tab.is-active .inventory-status-tab__icon { opacity: 1; transform: scale(1.08); } .inventory-status-tab:hover .inventory-status-tab__icon { opacity: 0.95; } .inventory-status-tab__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: rgba(226, 232, 240, 0.78); font-size: 12.1px; font-weight: 800; letter-spacing: 0; border: 1px solid transparent; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .inventory-status-tab.is-active .inventory-status-tab__count { background: rgba(0, 0, 0, 0.32); color: #f8fafc; border-color: rgba(255, 255, 255, 0.08); } .inventory-status-tab[data-count-zero="true"] .inventory-status-tab__count { opacity: 0.42; } @media (max-width: 600px) { .inventory-status-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 14px; } .inventory-status-tabs::-webkit-scrollbar { display: none; } .inventory-status-tab { padding: 7px 14px; /* R328: WCAG 2.5.5 ≥44px (mobile media query, 之前 36px) */ min-height: 44px; font-size: 13.2px; } .inventory-status-tab__count { min-width: 22px; height: 20px; font-size: 11px; } } /* v55ga: inventory toolbar 升級 */ .inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.32)); border: 1px solid rgba(148, 163, 184, 0.10); } .inventory-bulk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .inventory-selected { font-size: 13.2px; font-weight: 600; color: var(--muted, #99aeca); letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.08); border: 1px solid rgba(148, 163, 184, 0.16); } /* v55ga: 全選 checkbox row */ .inventory-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: 14.3px; font-weight: 600; color: var(--muted, #99aeca); cursor: pointer; user-select: none; letter-spacing: 0.02em; } .inventory-selectall input[type="checkbox"] { width: 18px; height: 18px; accent-color: #4effc3; cursor: pointer; } /* ============================================================ R501hp sad-davinci (2026-05-20): premium inventory toolbar user verbatim「全選後 批量回收星砂幣 有點像是預設的文字 系統文字 的感受 我希望有我們網頁的特別感」. marine 漸層 + cyan 全選 + 琥珀星砂幣回收 + 圖示前綴. ============================================================ */ .inventory-toolbar--premium { position: relative; padding: 14px 18px; border-radius: 18px; background: radial-gradient(120% 180% at 0% 0%, rgba(56, 189, 248, 0.10), transparent 60%), radial-gradient(120% 180% at 100% 100%, rgba(251, 191, 36, 0.08), transparent 60%), linear-gradient(180deg, rgba(8, 14, 27, 0.78), rgba(13, 22, 41, 0.58)); border: 1px solid rgba(78, 255, 195, 0.18); box-shadow: 0 2px 20px rgba(8, 14, 27, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); overflow: hidden; } .inventory-toolbar--premium::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(78, 255, 195, 0.45), rgba(56, 189, 248, 0.55), rgba(251, 191, 36, 0.38), transparent ); pointer-events: none; } /* 全選 — 自製 box, hide native checkbox 但保留 a11y */ .inventory-toolbar--premium .inventory-selectall { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; font-size: 14.3px; font-weight: 700; color: #cffafe; letter-spacing: 0.08em; cursor: pointer; user-select: none; border-radius: 999px; background: rgba(8, 14, 27, 0.55); border: 1px solid rgba(78, 255, 195, 0.22); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .inventory-toolbar--premium .inventory-selectall:hover { border-color: rgba(78, 255, 195, 0.45); background: rgba(15, 23, 42, 0.7); box-shadow: 0 0 16px rgba(78, 255, 195, 0.18); } /* native checkbox 隱藏但保留 focusable */ .inventory-toolbar--premium .inventory-selectall input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .inventory-toolbar--premium .inventory-selectall__box { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid rgba(78, 255, 195, 0.42); background: linear-gradient(180deg, rgba(8, 14, 27, 0.9), rgba(13, 22, 41, 0.7)); transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .inventory-toolbar--premium .inventory-selectall__box::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #06121f; border-bottom: 2px solid #06121f; transform: rotate(-45deg) translateY(-1px); opacity: 0; transition: opacity 140ms ease, transform 160ms ease; } .inventory-toolbar--premium .inventory-selectall input:checked ~ .inventory-selectall__box { border-color: #4effc3; background: linear-gradient(180deg, #6dffd0, #2ee4a8); box-shadow: 0 0 14px rgba(78, 255, 195, 0.55); } .inventory-toolbar--premium .inventory-selectall input:checked ~ .inventory-selectall__box::after { opacity: 1; transform: rotate(-45deg) translateY(0); } .inventory-toolbar--premium .inventory-selectall input:indeterminate ~ .inventory-selectall__box { border-color: #4effc3; background: linear-gradient(180deg, rgba(78, 255, 195, 0.55), rgba(46, 228, 168, 0.4)); box-shadow: 0 0 14px rgba(78, 255, 195, 0.45); } .inventory-toolbar--premium .inventory-selectall input:indeterminate ~ .inventory-selectall__box::after { content: ""; width: 10px; height: 0; border: 1.5px solid #06121f; border-radius: 1px; background: #06121f; transform: none; opacity: 1; } .inventory-toolbar--premium .inventory-selectall input:focus-visible ~ .inventory-selectall__box { outline: 2px solid #4effc3; outline-offset: 2px; } .inventory-toolbar--premium .inventory-selectall input:disabled ~ .inventory-selectall__box { opacity: 0.4; cursor: not-allowed; } /* 已選 N — cyan pill */ .inventory-toolbar--premium .inventory-selected { display: inline-flex; align-items: center; gap: 4px; font-size: 13.2px; font-weight: 700; letter-spacing: 0.12em; color: #67e8f9; background: linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(14, 165, 233, 0.10)); border: 1px solid rgba(34, 211, 238, 0.34); padding: 5px 12px; border-radius: 999px; text-shadow: 0 0 8px rgba(56, 189, 248, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* 批量按鈕 base — 3 種 variant 共用骨架 */ .inventory-bulk-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 14.9px; font-weight: 700; letter-spacing: 0.06em; color: #e0f2fe; background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(13, 22, 41, 0.55)); border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 12px; cursor: pointer; transition: transform 140ms ease, border-color 180ms ease, box-shadow 200ms ease, background 180ms ease, color 160ms ease; font-family: inherit; white-space: nowrap; } .inventory-bulk-btn:hover:not(:disabled) { transform: translateY(-1px); } .inventory-bulk-btn:active:not(:disabled) { transform: translateY(0); } .inventory-bulk-btn:disabled { opacity: 0.42; cursor: not-allowed; filter: saturate(0.5); } .inventory-bulk-btn:focus-visible { outline: 2px solid #4effc3; outline-offset: 2px; } .inventory-bulk-btn__icon { font-size: 16.5px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); } .inventory-bulk-btn__label { font-weight: 700; } .inventory-bulk-btn__hint { display: inline-block; font-size: 11.6px; font-weight: 600; letter-spacing: 0.1em; padding: 2px 7px; margin-left: 2px; border-radius: 999px; background: rgba(8, 14, 27, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(224, 242, 254, 0.78); } /* 批量上架 (cyan/teal) */ .inventory-bulk-btn--list { background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(14, 165, 233, 0.12)), linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(13, 22, 41, 0.6)); border-color: rgba(56, 189, 248, 0.4); color: #cffafe; } .inventory-bulk-btn--list:hover:not(:disabled) { border-color: rgba(56, 189, 248, 0.7); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .inventory-bulk-btn--list .inventory-bulk-btn__hint { background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.42); color: #cffafe; } /* 批量取消上架 (muted slate) */ .inventory-bulk-btn--cancel { background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.6)); border-color: rgba(148, 163, 184, 0.3); color: #cbd5e1; } .inventory-bulk-btn--cancel:hover:not(:disabled) { border-color: rgba(148, 163, 184, 0.55); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.6); color: #e2e8f0; } /* 批量回收成星砂幣 (amber/gold — star sand main CTA) */ .inventory-bulk-btn--recycle { background: linear-gradient(180deg, rgba(251, 191, 36, 0.28), rgba(245, 158, 11, 0.18)), linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(13, 22, 41, 0.6)); border-color: rgba(251, 191, 36, 0.55); color: #fef3c7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .inventory-bulk-btn--recycle:hover:not(:disabled) { border-color: rgba(251, 191, 36, 0.85); box-shadow: 0 6px 22px rgba(245, 158, 11, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.12); color: #fffbeb; } .inventory-bulk-btn--recycle .inventory-bulk-btn__icon { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)); } .inventory-bulk-btn--recycle .inventory-bulk-btn__hint { background: linear-gradient(180deg, rgba(251, 191, 36, 0.35), rgba(245, 158, 11, 0.22)); border-color: rgba(251, 191, 36, 0.6); color: #fffbeb; } /* 緊湊布局: 中型螢幕之下換行對齊 */ @media (max-width: 720px) { .inventory-toolbar--premium { padding: 12px 14px; gap: 10px; } .inventory-toolbar--premium .inventory-bulk-actions { gap: 8px; width: 100%; justify-content: flex-end; } .inventory-bulk-btn { padding: 8px 12px; font-size: 13.8px; letter-spacing: 0.04em; } .inventory-bulk-btn__hint { display: none; /* 手機隱藏 hint pill 節省空間, label 已含意義 */ } } .inventory-select { position: absolute; top: 10px; left: 10px; /* R501gs sad-davinci (2026-05-20): z-index: 2 讓勾選框浮在 .inventory-thumb 之上. 之前無 z-index → .inventory-thumb (position:relative, 後 DOM) 在同 stacking order 後者勝 → 縮圖蓋住勾選框, user 無法勾. mobile 版 ( m/inventory.css L1152) 已有 z-index:2, 桌機要補. */ z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(6px); } .inventory-select-checkbox { width: 16px; height: 16px; accent-color: rgba(56, 189, 248, 1); } .text-ok { color: rgba(34, 197, 94, 0.92); font-weight: 650; } .text-bad { color: rgba(239, 68, 68, 0.9); font-weight: 650; } .store-page--fusion { display: grid; gap: 28px; } .store-hero-panel, .store-shell-v2 { width: min(100%, 1280px); margin: 0 auto; } .store-hero-panel { padding: 28px 30px; border-radius: 28px; border: 1px solid rgba(120, 132, 255, 0.18); background: radial-gradient(circle at top left, rgba(78, 255, 195, 0.2), transparent 34%), radial-gradient(circle at bottom right, rgba(57, 189, 255, 0.18), transparent 38%), linear-gradient(180deg, rgba(9, 14, 28, 0.92), rgba(7, 11, 23, 0.94)); box-shadow: 0 26px 56px rgba(2, 6, 23, 0.42); } .store-hero-panel--simple { padding: 24px 30px; } .store-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.72fr); gap: 24px; align-items: stretch; } .store-hero-panel--simple .store-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .store-hero-copy { display: grid; gap: 18px; min-width: 0; } .store-kicker { margin: 0; font-size: 13.2px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(110, 231, 255, 0.92); } .store-hero-copy h1 { margin: 0; font-size: clamp(37.4px, 4vw, 57.2px); line-height: 1.02; letter-spacing: -0.04em; } .store-hero-desc { margin: 0; max-width: 760px; font-size: 16.5px; line-height: 1.8; color: rgba(226, 232, 240, 0.76); } .store-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .store-hero-stats { display: grid; gap: 12px; } .store-stat-card { display: grid; gap: 6px; padding: 18px 20px; border-radius: 20px; border: 1px solid rgba(140, 158, 255, 0.18); background: linear-gradient(180deg, rgba(13, 20, 37, 0.9), rgba(7, 11, 21, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .store-stat-card span { font-size: 13.2px; color: rgba(148, 163, 184, 0.86); } .store-stat-card strong { font-size: clamp(24.2px, 3vw, 37.4px); letter-spacing: -0.04em; } .store-shell-v2 { padding: 0; } .store-layout-v2 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; } .store-aside { position: sticky; top: 88px; min-width: 0; } .store-category-bar { padding: 0; overflow: hidden; } .store-category-bar--aside { position: sticky; top: 88px; max-height: calc(100vh - 108px); display: flex; flex-direction: column; } .store-category-bar--aside .store-category-bar__body { overflow-y: auto; scrollbar-width: thin; flex: 1 1 auto; min-height: 0; } .store-category-bar--aside .store-category-bar__body::-webkit-scrollbar { width: 6px; } .store-category-bar--aside .store-category-bar__body::-webkit-scrollbar-thumb { background: rgba(95, 105, 145, 0.4); border-radius: 3px; } .store-category-bar__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 18px 10px; border-bottom: 1px solid rgba(95, 105, 145, 0.18); } .store-category-bar--aside .store-category-bar__head { padding: 16px 16px 10px; } .store-category-bar__head h2 { margin: 0; font-size: 22px; } .store-category-bar__stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .store-category-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(95, 105, 145, 0.28); } .store-category-stat__value { font-weight: 800; font-size: 15.4px; color: rgba(110, 231, 255, 0.95); letter-spacing: 0.02em; } .store-category-stat__label { font-size: 12.1px; color: rgba(148, 163, 184, 0.8); letter-spacing: 0.08em; } .store-category-bar__body { padding: 14px 18px 18px; display: grid; gap: 10px; } .store-category-bar--aside .store-category-bar__body { padding: 10px 12px 18px; gap: 6px; } .store-category-bar__stats, .store-category-stat, .store-category-stat__value, .store-category-stat__label { display: none !important; } .store-category-tab__chevron { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 999px; background: rgba(105, 196, 255, 0.14); color: rgba(155, 225, 255, 0.9); font-size: 12.1px; line-height: 1; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .store-category-tab.has-children:hover .store-category-tab__chevron { background: rgba(105, 196, 255, 0.28); color: #cdeaff; } .store-category-tab.has-children.is-active .store-category-tab__chevron { transform: rotate(180deg); background: rgba(0, 255, 136, 0.2); color: #d0ffe6; } .store-category-tabs-row--vertical .store-category-tab__count { margin-left: auto; } .store-category-tabs-row--vertical .store-category-tab.has-children .store-category-tab__count { margin-right: 2px; } .store-category-tabs-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .store-category-tabs-row[hidden] { display: none !important; } .store-category-tabs-row::-webkit-scrollbar { height: 6px; } .store-category-tabs-row::-webkit-scrollbar-thumb { background: rgba(95, 105, 145, 0.4); border-radius: 3px; } .store-category-tabs-row--vertical { flex-direction: column; align-items: stretch; gap: 4px; overflow-x: visible; padding-bottom: 2px; } .store-category-tabs-row--child { padding-top: 6px; border-top: 1px dashed rgba(95, 105, 145, 0.22); } .store-category-tabs-row--vertical.store-category-tabs-row--child { margin-top: 6px; padding-top: 8px; padding-left: 6px; border-left: 1px dashed rgba(95, 105, 145, 0.22); border-top: 0; } .store-category-children-inline { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px 14px; padding: 6px 0 6px 8px; border-left: 2px solid rgba(105, 196, 255, 0.28); } .store-category-children-inline .store-category-tab--child { font-size: 13.8px; padding: 8px 10px; border-radius: 10px; background: rgba(11, 18, 34, 0.56); } .store-category-children-inline .store-category-tab--child:hover { background: rgba(13, 24, 46, 0.82); } .store-category-children-inline .store-category-tab--child.is-active { background: linear-gradient(180deg, rgba(19, 54, 54, 0.88), rgba(11, 26, 30, 0.96)); } .store-category-children-inline .store-category-tab--child-all { font-size: 13.2px; color: rgba(148, 163, 184, 0.92); } .store-category-tabs-row--drawer { overflow-x: visible; flex-wrap: wrap; } .store-category-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(95, 105, 145, 0.3); border-radius: 999px; background: rgba(11, 18, 34, 0.72); color: rgba(226, 232, 240, 0.9); font: inherit; font-size: 14.3px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease; } .store-category-tabs-row--vertical .store-category-tab { width: 100%; justify-content: flex-start; border-radius: 12px; padding: 10px 12px; white-space: normal; text-align: left; } .store-category-tab:hover { transform: translateY(-1px); border-color: rgba(105, 226, 255, 0.5); background: rgba(13, 24, 46, 0.88); } .store-category-tab.is-active { border-color: rgba(78, 255, 195, 0.62); background: linear-gradient(180deg, rgba(19, 54, 54, 0.96), rgba(11, 26, 30, 0.98)); color: #eafff5; box-shadow: 0 10px 24px rgba(4, 12, 26, 0.36), 0 0 10px rgba(0, 255, 136, 0.12); } .store-category-tab.is-empty { opacity: 0.5; } .store-category-tab.is-empty:hover { opacity: 0.85; } .store-category-tab--home { padding: 10px 14px; font-size: 15.4px; } .store-category-tab--all { background: linear-gradient(180deg, rgba(28, 48, 90, 0.9), rgba(10, 20, 40, 0.95)); border-color: rgba(148, 163, 184, 0.35); } .store-category-tab--all.is-active { background: linear-gradient(180deg, rgba(58, 108, 220, 0.82), rgba(28, 60, 140, 0.92)); border-color: rgba(105, 196, 255, 0.82); color: #eef4ff; box-shadow: 0 10px 24px rgba(4, 12, 26, 0.36), 0 0 14px rgba(105, 196, 255, 0.22); } .store-category-tab__icon { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 15.4px; line-height: 1; } .store-category-tab__icon img, .store-category-tab__icon svg { width: 20px; height: 20px; object-fit: contain; } .store-category-tab__label { font-weight: 600; letter-spacing: 0.01em; } .store-category-tab__count { flex: none; min-width: 22px; padding: 2px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); color: rgba(226, 232, 240, 0.92); font-size: 12.1px; font-weight: 700; text-align: center; letter-spacing: 0.02em; margin-left: auto; } .store-category-tab.is-active .store-category-tab__count { background: rgba(0, 255, 136, 0.18); color: rgba(210, 255, 230, 0.95); } .store-category-tab--all.is-active .store-category-tab__count { background: rgba(105, 196, 255, 0.25); color: #eaf5ff; } .store-category-tab__depth-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255, 213, 74, 0.14); color: #ffd54a; border: 1px solid rgba(255, 213, 74, 0.4); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; } .store-category-tab[data-depth="1"] .store-category-tab__depth-badge { background: rgba(34, 211, 238, 0.16); color: #8be6f5; border-color: rgba(34, 211, 238, 0.42); } .store-category-tab[data-depth="2"] .store-category-tab__depth-badge { background: rgba(168, 85, 247, 0.18); color: #c4a6f5; border-color: rgba(168, 85, 247, 0.44); } .store-category-tab[data-depth="3"] .store-category-tab__depth-badge, .store-category-tab[data-depth="4"] .store-category-tab__depth-badge, .store-category-tab[data-depth="5"] .store-category-tab__depth-badge { background: rgba(236, 72, 153, 0.18); color: #f5a6c8; border-color: rgba(236, 72, 153, 0.44); } .store-category-tab.is-depth-1 { margin-left: 4px; } .store-category-tab.is-depth-2 { margin-left: 12px; } .store-category-tab.is-depth-3, .store-category-tab.is-depth-4, .store-category-tab.is-depth-5 { margin-left: 18px; } .store-category-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 6px; border-top: 1px dashed rgba(95, 105, 145, 0.18); margin-top: 2px; } .store-category-breadcrumb[hidden] { display: none !important; } .store-category-breadcrumb__seg { appearance: none; background: transparent; border: 0; color: rgba(148, 163, 184, 0.9); font: inherit; font-size: 13.8px; font-weight: 600; padding: 4px 8px; border-radius: 8px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .store-category-breadcrumb__seg:hover { color: rgba(105, 226, 255, 1); background: rgba(14, 30, 50, 0.6); } .store-category-breadcrumb__seg.is-current { color: rgba(255, 213, 74, 0.95); cursor: default; } .store-category-breadcrumb__sep { color: rgba(95, 105, 145, 0.6); font-size: 14.3px; padding: 0 2px; } .store-drawer-panel__body { padding: 14px 18px 22px; display: grid; gap: 12px; } .store-catalog-panel { border-radius: 24px; border: 1px solid rgba(132, 145, 255, 0.16); background: linear-gradient(180deg, rgba(8, 13, 25, 0.9), rgba(6, 10, 20, 0.94)); box-shadow: 0 20px 42px rgba(2, 6, 23, 0.34); } .store-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 0; } .store-section-label { margin: 0 0 6px; font-size: 12.1px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(110, 231, 255, 0.78); } .store-panel-head h2, .store-drawer-panel__head h2 { margin: 0; font-size: 22px; } .store-main { display: grid; gap: 18px; min-width: 0; } .store-category-list { display: grid; gap: 10px; padding: 18px 20px 22px; } .store-category-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(95, 105, 145, 0.3); border-radius: 16px; background: rgba(11, 18, 34, 0.72); color: rgba(226, 232, 240, 0.9); font: inherit; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .store-category-btn:hover { transform: translateY(-1px); border-color: rgba(105, 226, 255, 0.4); background: rgba(13, 24, 46, 0.88); } .store-category-btn.is-active { border-color: rgba(78, 255, 195, 0.48); background: linear-gradient(180deg, rgba(21, 54, 54, 0.94), rgba(11, 26, 30, 0.96)); box-shadow: 0 12px 28px rgba(4, 12, 26, 0.32), 0 0 12px rgba(0, 255, 136, 0.08); } .store-category-btn.is-active .store-category-btn__meta { background: rgba(0, 255, 136, 0.18); color: rgba(0, 255, 136, 0.9); } .store-category-btn__main { min-width: 0; display: inline-flex; align-items: center; gap: 10px; } .store-category-btn__icon { flex: none; width: 1.35rem; text-align: center; font-size: 1.1rem; line-height: 1; } .store-category-btn__label { min-width: 0; font-size: 15.4px; font-weight: 600; overflow-wrap: anywhere; } .store-category-btn__meta { flex: none; min-width: 28px; padding: 4px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); font-size: 13.2px; font-weight: 700; color: rgba(226, 232, 240, 0.9); text-align: center; } /* v62 toolbar polish — base rules only. Theme overrides * (80e fusion / 80f demo) layer on top and are NOT touched here. * Grid: row 1 search spans both cols; row 2 col 1 = actions, col 2 = meta chip. */ .store-toolbar-v2 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 14px; padding: 18px 20px; border-radius: 22px; background: linear-gradient( 180deg, rgba(14, 22, 42, 0.55) 0%, rgba(8, 12, 24, 0.35) 100% ); border: 1px solid rgba(255, 255, 255, 0.05); } .store-toolbar-v2__search { grid-column: 1 / -1; } .store-search-field { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 4px 18px 4px 6px; border: 1px solid rgba(111, 125, 165, 0.32); border-radius: 999px; background: rgba(6, 11, 24, 0.82); transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .store-search-field__icon { width: 34px; height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 16.5px; line-height: 1; color: #8be6f5; background: rgba(34, 211, 238, 0.14); border: 1px solid rgba(34, 211, 238, 0.22); border-radius: 999px; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .store-search-field .input-inline { border: 0; background: transparent; min-height: 0; padding: 0; box-shadow: none; font-size: 16px; color: rgba(255, 255, 255, 0.95); } .store-search-field .input-inline::placeholder { color: rgba(148, 163, 184, 0.55); font-weight: 500; letter-spacing: 0.01em; } .store-search-field:hover { border-color: rgba(34, 211, 238, 0.28); } .store-search-field:focus-within { border-color: rgba(34, 211, 238, 0.55); background: rgba(6, 11, 24, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 4px rgba(34, 211, 238, 0.1), 0 8px 26px -12px rgba(34, 211, 238, 0.35); } .store-search-field:focus-within .store-search-field__icon { background: rgba(34, 211, 238, 0.25); border-color: rgba(34, 211, 238, 0.55); color: #fff; transform: scale(1.05); } .store-toolbar-v2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } .store-sort-control { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; height: 42px; border-radius: 999px; border: 1px solid rgba(111, 125, 165, 0.3); background: rgba(10, 15, 28, 0.72); color: rgba(210, 220, 240, 0.82); font-size: 14.3px; font-weight: 600; letter-spacing: 0.02em; } .store-sort-control > span { font-size: 12.7px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.78); white-space: nowrap; flex-shrink: 0; } .store-sort-control .input-inline { /* R328: WCAG 2.5.5 ≥44px (sort dropdown 之前 34px tap area 太小) */ min-height: 44px; padding: 0 28px 0 10px; border: 0; background: transparent; color: #f8fafc; font-weight: 600; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, rgba(148, 163, 184, 0.6) 50%), linear-gradient(135deg, rgba(148, 163, 184, 0.6) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; appearance: none; } .store-sort-control:focus-within { border-color: rgba(34, 211, 238, 0.45); background: rgba(14, 20, 36, 0.95); } .store-view-toggle { display: inline-flex; gap: 0; padding: 3px; background: rgba(6, 11, 24, 0.72); border: 1px solid rgba(111, 125, 165, 0.3); border-radius: 999px; } .store-view-btn { min-width: 58px; /* R328: WCAG 2.5.5 ≥44px (grid/list view toggle 之前 34px) */ min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(210, 220, 240, 0.7); font-size: 14.3px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .store-view-btn:hover { color: rgba(255, 255, 255, 0.96); } .store-view-btn.is-active { background: linear-gradient( 180deg, rgba(34, 211, 238, 0.28) 0%, rgba(34, 211, 238, 0.14) 100% ); color: #fff; box-shadow: 0 4px 12px -4px rgba(34, 211, 238, 0.35); } .store-mobile-filter-btn { display: none; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(111, 125, 165, 0.3); background: rgba(10, 15, 28, 0.72); font-weight: 600; } .store-results-meta { font-size: 13.8px; font-weight: 600; color: rgba(148, 163, 184, 0.92); padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; justify-self: end; align-self: center; } .store-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px; } .store-products-grid.is-list { grid-template-columns: 1fr; } /* v64 fix: theme overrides (.store-page--fusion/demo/demo-v3) set * grid-template-columns with higher specificity and override the * .is-list modifier, so clicking 列表 view kept 4 columns. Force * list mode to 1fr across all themes. !important is intentional — * .is-list is a state class that must win over theme. */ body .store-products-grid.is-list { grid-template-columns: 1fr !important; } .store-card-v2 { position: relative; overflow: hidden; display: grid; gap: 0; border-radius: 22px; border: 1px solid rgba(105, 116, 156, 0.22); background: radial-gradient(circle at top left, rgba(78, 255, 195, 0.08), transparent 34%), linear-gradient(180deg, rgba(11, 17, 32, 0.94), rgba(7, 11, 21, 0.96)); box-shadow: 0 18px 36px rgba(2, 6, 23, 0.3); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .store-card-v2:hover { transform: translateY(-3px); border-color: rgba(104, 230, 255, 0.34); box-shadow: 0 24px 40px rgba(2, 6, 23, 0.42); } .store-card-v2--list { grid-template-columns: 240px minmax(0, 1fr); } .store-card-v2--skeleton { min-height: 380px; } .store-card-v2--list.store-card-v2--skeleton { min-height: 220px; } .store-card-v2__hit { position: absolute; inset: 0; z-index: 1; } .store-card-v2__media { position: relative; min-height: 280px; background: radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.14), transparent 52%), linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(10, 15, 28, 0.98)); } .store-card-v2--list .store-card-v2__media { min-height: 100%; } .store-card-v2__media.has-image { background-size: cover; background-position: center; } .store-card-v2__media.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.06), rgba(2, 6, 23, 0.48)); } .store-card-v2__body { position: relative; z-index: 2; display: grid; gap: 14px; padding: 18px; } .store-card-v2__headline h3 { margin: 0; font-size: 19.8px; line-height: 1.45; overflow-wrap: anywhere; } .store-card-v2__subtitle { margin: 6px 0 0; font-size: 14.3px; color: rgba(148, 163, 184, 0.78); } .store-card-v2__summary { margin: 0; font-size: 14.3px; line-height: 1.7; color: rgba(203, 213, 225, 0.78); } .store-card-v2__tags { display: flex; flex-wrap: wrap; gap: 8px; } .store-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(95, 106, 146, 0.3); background: rgba(10, 16, 29, 0.82); font-size: 12.1px; font-weight: 700; color: rgba(226, 232, 240, 0.86); } .store-chip--primary { border-color: rgba(104, 230, 255, 0.3); color: rgba(125, 211, 252, 0.98); } .store-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.82); font-size: 12.1px; font-weight: 700; letter-spacing: 0.04em; } .store-badge--featured { background: rgba(0, 255, 136, 0.9); color: #0a0a1a; } .store-badge--low { background: rgba(245, 158, 11, 0.88); color: #0a0a1a; animation: store-badge-pulse 2s ease-in-out infinite; } .store-badge--soldout { background: rgba(239, 68, 68, 0.85); color: #fff; } @keyframes store-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .store-card-v2__badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; gap: 8px; } .store-card-v2__price { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(7, 11, 21, 0.82); border: 1px solid rgba(104, 230, 255, 0.22); font-size: 14.3px; font-weight: 800; color: #f8fafc; } .store-card-v2__price--inline { position: static; justify-self: start; } .store-card-v2__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13.2px; font-weight: 700; letter-spacing: 0.22em; color: rgba(226, 232, 240, 0.58); } .store-stock { display: grid; gap: 8px; } .store-stock__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.2px; color: rgba(148, 163, 184, 0.84); } .store-stock__meta strong { color: #f8fafc; } .store-stock__bar { height: 7px; border-radius: 999px; background: rgba(30, 41, 59, 0.82); overflow: hidden; } .store-stock__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(74, 222, 128, 0.96), rgba(125, 211, 252, 0.96)); transition: width 0.5s ease; } .store-stock__bar--low span { background: linear-gradient(90deg, rgba(245, 158, 11, 0.9), rgba(251, 191, 36, 0.9)); } .store-stock__bar--empty span { width: 0 !important; background: rgba(239, 68, 68, 0.5); } .store-card-v2__actions, .store-card-v2__list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ── Hover quick-action overlay ── */ .store-card-v2__quick-actions { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .store-card-v2:hover .store-card-v2__quick-actions { opacity: 1; transform: translateY(0); } .store-quick-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.7); font-size: 17.6px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .store-quick-btn:hover { background: rgba(0, 0, 0, 0.65); color: #fff; } .store-quick-btn--wishlisted, .store-quick-btn.is-active { background: rgba(239, 68, 68, 0.75); color: #fff; } .store-quick-btn--wishlisted:hover, .store-quick-btn.is-active:hover { background: rgba(239, 68, 68, 0.9); } /* ── Add-to-cart CTA glow ── */ .store-card-v2__actions .btn.primary { transition: background 0.2s ease, box-shadow 0.3s ease, transform 0.12s ease; } .store-card-v2__actions .btn.primary:hover:not(:disabled) { box-shadow: 0 0 16px rgba(0, 255, 136, 0.25); } .store-card-v2__actions .btn.primary:active:not(:disabled) { transform: scale(0.97); } /* ── Sidebar stats ── */ .store-sidebar-stats { margin-top: 18px; padding: 16px 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); display: grid; gap: 8px; } .store-sidebar-stats__row { display: flex; align-items: center; justify-content: space-between; font-size: 13.2px; color: rgba(148, 163, 184, 0.4); } .store-sidebar-stats__value { color: rgba(0, 255, 136, 0.55); } /* ── Empty state ── */ .store-empty-v2 { padding: 48px 24px; color: rgba(148, 163, 184, 0.88); text-align: center; } .store-empty-v2__icon { font-size: 52.8px; color: rgba(148, 163, 184, 0.15); margin-bottom: 16px; } .store-empty-v2__text { font-size: 15.4px; color: rgba(148, 163, 184, 0.5); margin-bottom: 12px; } .store-empty-v2__clear { display: inline-block; font-size: 13.2px; color: rgba(0, 255, 136, 0.55); background: none; border: 0; cursor: pointer; padding: 4px 8px; transition: color 0.2s ease; } .store-empty-v2__clear:hover { color: rgba(0, 255, 136, 0.9); } .store-drawer-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(8px); } .store-drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(420px, calc(100vw - 20px)); padding: 20px; background: rgba(5, 9, 18, 0.96); border-left: 1px solid rgba(111, 125, 165, 0.3); transform: translateX(100%); transition: transform 0.22s ease; } .store-drawer-panel.is-open { transform: translateX(0); } .store-drawer-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .store-skeleton-line { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, rgba(30, 41, 59, 0.7), rgba(71, 85, 105, 0.4), rgba(30, 41, 59, 0.7)); background-size: 200% 100%; animation: store-skeleton-shimmer 1.15s linear infinite; } .store-skeleton-line.short { width: 48%; } @keyframes store-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 1200px) { .store-layout-v2 { grid-template-columns: 1fr; } .store-aside { display: none; } .store-mobile-filter-btn { display: inline-flex; } .store-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .store-category-bar__head { flex-direction: column; align-items: flex-start; gap: 10px; } .store-category-bar__stats { justify-content: flex-start; } .store-category-tab--home { padding: 8px 12px; font-size: 14.9px; } .store-category-tab__count { font-size: 11.6px; } .store-category-breadcrumb { font-size: 13.2px; } } @media (max-width: 960px) { .store-hero-panel, .store-shell-v2 { width: min(100%, calc(100vw - 24px)); } .store-hero-grid { grid-template-columns: 1fr; } .store-toolbar-v2__actions { justify-content: flex-start; } .store-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; } .store-card-v2--list { grid-template-columns: 1fr; } } @media (max-width: 640px) { .store-hero-panel { padding: 22px 18px; } .store-toolbar-v2, .store-panel-head, .store-category-list { padding-left: 16px; padding-right: 16px; } .store-products-grid { grid-template-columns: 1fr; gap: 14px; padding: 16px; } .store-card-v2__media { min-height: 240px; } } @media (hover: none) { .store-card-v2__quick-actions { opacity: 1; transform: translateY(0); } } /* ============================================================ * R332 flamboyant-bell (2026-05-12): CRITICAL — fix market modals * 全部 silent broken (since c169r 2026-05-01 加 `.modal { display: none }` * FOUC base rule). market.js 4689 行只 toggle is-hidden (老 pattern), * 沒像 inventory.js 那樣 also toggle is-visible (R271 standard). * * 序列: * Before open: class="modal is-hidden" → display: none (from .modal.is-hidden) * market.js remove("is-hidden"): class="modal" → display: none (from base!) * 結果: 6 個 market modal 永遠不顯示 → 用戶按「上架/購買/建立買單/最佳買入/ * 最佳賣出/更新買單」all silent fail no visual feedback. * * 防衛 fix (scoped to 6 market modal IDs, 避免影響其他 modal pattern): * 當 modal 沒 is-hidden class 時, 強制 display: grid (.modal.is-visible * 已有的規則). * 同時補 .modal-card animation (因為原 .modal.is-visible .modal-card * animation 需要 is-visible class, 沒這 class 不會跑 entrance animation). * ============================================================ */ #marketActionModal:not(.is-hidden), #marketBuyModal:not(.is-hidden), #marketOrderModal:not(.is-hidden), #marketBestBuyModal:not(.is-hidden), #marketBestSellModal:not(.is-hidden), #buyOrderUpdateModal:not(.is-hidden) { display: grid !important; animation: modal-backdrop-fade 220ms ease-out; } #marketActionModal:not(.is-hidden) .modal-card, #marketBuyModal:not(.is-hidden) .modal-card, #marketOrderModal:not(.is-hidden) .modal-card, #marketBestBuyModal:not(.is-hidden) .modal-card, #marketBestSellModal:not(.is-hidden) .modal-card, #buyOrderUpdateModal:not(.is-hidden) .modal-card { animation: modal-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1); } @media (max-width: 560px) { #marketActionModal:not(.is-hidden) .modal-card, #marketBuyModal:not(.is-hidden) .modal-card, #marketOrderModal:not(.is-hidden) .modal-card, #marketBestBuyModal:not(.is-hidden) .modal-card, #marketBestSellModal:not(.is-hidden) .modal-card, #buyOrderUpdateModal:not(.is-hidden) .modal-card { animation: modal-card-in-mobile 280ms cubic-bezier(0.16, 1, 0.3, 1); } } .market-list-form { display: grid; gap: 12px; } .market-list-field { display: grid; gap: 6px; font-size: 13.2px; color: var(--muted); } .market-list-field .input-inline { min-width: 0; } .market-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .market-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .market-filters .input-inline { width: auto; } .market-checkbox { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.35); color: var(--muted); font-size: 13.2px; user-select: none; } .market-checkbox input { width: 16px; height: 16px; } /* R407 flamboyant-bell (2026-05-13): auto-follow toggle + floor input * 在 listToMarketModal 內. 設計理念: hint 文字小, toggle 大可點, floor input * conditional 展開 (.is-hidden 預設隱藏). */ .market-autofollow { display: grid; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(8, 12, 24, 0.42); border: 1px solid rgba(78, 255, 195, 0.18); } .market-autofollow__toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; } .market-autofollow__toggle input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: #4effc3; cursor: pointer; } .market-autofollow__toggle-text { display: flex; flex-direction: column; gap: 2px; } .market-autofollow__toggle-text strong { font-size: 15.4px; font-weight: 700; color: #f8fafc; } .market-autofollow__toggle-text small { font-size: 13.2px; color: rgba(207, 230, 255, 0.65); line-height: 1.4; } .market-autofollow__floor { display: grid; gap: 6px; padding-left: 28px; /* Slide-down 視覺: 從 toggle 下方展開 */ } .market-autofollow__floor.is-hidden { display: none; } .market-autofollow__floor-label { font-size: 13.2px; font-weight: 600; color: rgba(78, 255, 195, 0.85); } .market-autofollow__floor-hint { font-size: 12.1px; color: rgba(207, 230, 255, 0.55); line-height: 1.45; } /* R412 flamboyant-bell (2026-05-13): 具體例子 — 把抽象的「自動跟單」用一個 * 數字情境演給用戶看 (100→79→59→停50). User verbatim「如果有人價格比他低 * 上架到市集 他也會慢慢變是嗎 要跟用戶提醒這個按鈕幹嘛的」. 在 toggle 跟 * floor 中間出現, 永遠可見不靠 hover. */ .market-autofollow__example { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: linear-gradient( 135deg, rgba(78, 255, 195, 0.08) 0%, rgba(34, 211, 238, 0.06) 100% ); border: 1px dashed rgba(78, 255, 195, 0.28); } .market-autofollow__example-title { margin: 0; font-size: 13.2px; font-weight: 700; color: rgba(78, 255, 195, 0.95); letter-spacing: 0.02em; } .market-autofollow__example-list { margin: 0; padding-left: 22px; display: grid; gap: 4px; } .market-autofollow__example-list li { font-size: 13.2px; line-height: 1.55; color: rgba(207, 230, 255, 0.82); } .market-autofollow__example-list li strong { color: #f8fafc; font-weight: 700; padding: 0 3px; background: rgba(8, 12, 24, 0.45); border-radius: 4px; } .market-autofollow__example-foot { margin: 0; font-size: 12.1px; color: rgba(207, 230, 255, 0.62); font-style: italic; } /* R501mf recursing-edison (2026-05-26): 5% 平台手續費告知 block. * Owner mandate: 「卖家上架到成功交易后，需要收取5%手续费，也需要在上架前告知用户」. * 出現在 listToMarketModal 內, 永遠可見, 動態顯示「你輸入 X → 你實收 X-fee」. * gold accent (跟其他 chip 一致) + 醒目 padding, 不被 user 漏掉. */ .market-fee-notice { display: grid; gap: 8px; padding: 12px 14px; margin-top: 10px; border-radius: 10px; background: linear-gradient( 135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.08) 100% ); border: 1px dashed rgba(251, 191, 36, 0.42); } .market-fee-notice__title { margin: 0; font-size: 13.2px; font-weight: 700; color: #fde68a; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; } .market-fee-notice__desc { margin: 0; font-size: 12.65px; line-height: 1.55; color: rgba(254, 243, 199, 0.78); } .market-fee-notice__preview { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.65px; color: rgba(254, 243, 199, 0.92); } .market-fee-notice__preview .market-fee-notice__label { color: rgba(254, 243, 199, 0.58); } .market-fee-notice__preview strong { font-weight: 800; color: #fff7cf; } .market-fee-notice__preview .market-fee-notice__net { color: #fde68a; font-weight: 800; } /* R408 flamboyant-bell (2026-05-13): 「我的上架」card 上的 auto-follow 指示 * badge. 跟「上架中」一行對齊, 醒目但不搶眼. 帶 hover tooltip 解釋機制. */ .market-card__autofollow { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; background: linear-gradient( 135deg, rgba(78, 255, 195, 0.16) 0%, rgba(34, 211, 238, 0.16) 100% ); border: 1px solid rgba(78, 255, 195, 0.32); font-size: 13.2px; font-weight: 600; color: rgba(78, 255, 195, 0.96); cursor: help; width: fit-content; letter-spacing: 0.02em; } .market-card__autofollow-icon { display: inline-flex; font-size: 14.3px; line-height: 1; } .market-card__autofollow-label { display: inline-flex; align-items: center; gap: 6px; } .market-card__autofollow-floor { padding: 1px 7px; border-radius: 999px; background: rgba(8, 12, 24, 0.56); border: 1px solid rgba(207, 230, 255, 0.18); color: rgba(207, 230, 255, 0.85); font-size: 12.1px; font-weight: 600; letter-spacing: 0; } .market-search { flex: 1 1 260px; max-width: 420px; } .market-sort { flex: 0 0 auto; } .market-official { opacity: 0.92; } .market-ask { font-weight: 700; color: rgba(251, 191, 36, 0.95); } .market-bid { font-weight: 700; color: rgba(34, 197, 94, 0.92); } .market-price-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 12.1px; font-weight: 700; border: 1px solid rgba(148, 163, 184, 0.28); background: rgba(148, 163, 184, 0.12); color: var(--ink); } .market-price-badge.is-discount { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.16); } .market-price-badge.is-premium { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.16); } .market-price-badge.is-neutral { border-color: rgba(148, 163, 184, 0.28); background: rgba(148, 163, 184, 0.12); } .market-floor-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 12.1px; font-weight: 700; border: 1px solid rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.16); color: var(--ink); } .market-group { border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.62)); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); } .market-group-summary { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "thumb meta" "actions actions"; gap: 14px 16px; padding: 14px; align-items: start; cursor: pointer; list-style: none; } .market-group-summary > .market-group-thumb { grid-area: thumb; aspect-ratio: 1 / 1; } .market-group-summary > .market-meta { grid-area: meta; min-width: 0; gap: 6px; align-self: center; } .market-group-summary > .market-group-actions { grid-area: actions; width: 100%; } .market-group-summary:hover { background: rgba(8, 12, 24, 0.18); } .market-group-summary::-webkit-details-marker { display: none; } .market-group[open] .market-group-summary { border-bottom: 1px solid rgba(148, 163, 184, 0.12); } .market-group-body { padding: 0 12px 12px; } .market-last-trade { font-weight: 600; color: rgba(148, 163, 184, 0.92); } .market-spread { font-weight: 600; color: rgba(148, 163, 184, 0.92); } .market-depth { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(8, 12, 24, 0.14); } .market-depth-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .market-depth-head strong { font-size: 13.2px; letter-spacing: 0.02em; } .market-depth-last { font-size: 13.2px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .market-depth-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .market-depth-col { display: grid; gap: 6px; } .market-depth-col-title { font-size: 12.1px; color: var(--muted); letter-spacing: 0.05em; } .market-depth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.2px; padding: 2px 0; } .market-depth-row.is-clickable { cursor: pointer; padding: 6px 8px; margin: -4px -6px; border-radius: 10px; } .market-depth-row.is-clickable:hover { background: rgba(8, 12, 24, 0.22); } .market-depth-qty { color: var(--muted); font-variant-numeric: tabular-nums; } .market-trades { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.12); background: rgba(8, 12, 24, 0.14); } .market-trades-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .market-trades-head strong { font-size: 13.2px; letter-spacing: 0.02em; } .market-trades-hint { font-size: 12.1px; color: var(--muted); letter-spacing: 0.05em; } .market-tape { margin-top: 10px; display: grid; gap: 6px; } .market-tape-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(8, 12, 24, 0.12); border: 1px solid rgba(148, 163, 184, 0.12); font-size: 13.2px; } .market-tape-row.is-up .market-tape-price { color: rgba(34, 197, 94, 0.95); } .market-tape-row.is-down .market-tape-price { color: rgba(239, 68, 68, 0.95); } .market-tape-time { color: var(--muted); font-variant-numeric: tabular-nums; } .market-tape-price { font-weight: 700; font-variant-numeric: tabular-nums; } .market-tape-qty { color: var(--muted); font-variant-numeric: tabular-nums; justify-self: end; } .market-tape-empty { color: var(--muted); font-size: 13.2px; padding: 6px 2px; } .market-offer-list { display: grid; margin-top: 10px; border-radius: 14px; overflow: hidden; background: transparent; border: 1px solid rgba(148, 163, 184, 0.12); } .market-offer { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 12px; background: rgba(8, 12, 24, 0.14); } .market-offer + .market-offer { border-top: 1px solid rgba(148, 163, 184, 0.12); } .market-offer:hover { background: rgba(8, 12, 24, 0.22); } .market-offer-meta { display: grid; gap: 4px; } .market-offer-meta strong { font-size: 14.3px; } .market-offer-sub { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.2px; color: var(--muted); align-items: center; } .market-offer-right { display: grid; gap: 8px; justify-items: end; } .market-offer-price { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.2px; color: var(--muted); justify-content: flex-end; } @media (max-width: 640px) { .market-group-summary { grid-template-columns: 84px 1fr; } .market-group-actions { grid-column: 2 / -1; justify-self: start; } .market-depth-grid { grid-template-columns: 1fr; } .market-offer { grid-template-columns: 1fr; } .market-offer-right { justify-items: start; } .market-offer-price { justify-content: flex-start; } } .market-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .market-card { background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 12px; max-width: 320px; width: 100%; } /* --- market skeleton loading ------------------------------------------ Shown in #marketList while the listings + buy-orders + snapshot APIs settle. Replaced automatically the moment renderMarketGroups runs (it wipes innerHTML before painting real cards). */ .market-card--skeleton { pointer-events: none; animation: market-skel-fade-in 240ms ease-out both; } .market-card--skeleton .market-skel, .market-card--skeleton .market-thumb { background: linear-gradient( 100deg, rgba(30, 41, 59, 0.55) 0%, rgba(56, 189, 248, 0.16) 48%, rgba(30, 41, 59, 0.55) 100% ); background-size: 220% 100%; animation: market-skel-shimmer 1.6s ease-in-out infinite; border-radius: 8px; } .market-card--skeleton .market-thumb { border-radius: 12px; } .market-card--skeleton .market-skel-line { height: 12px; } .market-card--skeleton .market-skel-line--title { height: 16px; width: 72%; } .market-card--skeleton .market-skel-line--short { width: 40%; } .market-card--skeleton .market-skel-line--medium { width: 58%; } .market-card--skeleton .market-skel-btn { height: 38px; border-radius: 999px; width: 100%; } @keyframes market-skel-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } } @keyframes market-skel-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .market-card--skeleton, .market-card--skeleton .market-skel, .market-card--skeleton .market-thumb { animation: none; } } /* --- richer empty state for #marketEmpty ------------------------------ Replaces the flat "目前沒有可顯示的市集商品" text with a treasure chest icon, guidance copy, and a jump-back-to-pools CTA. JS still toggles display between "block" and "none", so the root stays block-level. */ .market-empty { padding: 56px 20px 40px; text-align: center; } .market-empty__inner { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; max-width: 380px; margin: 0 auto; } .market-empty__icon { width: 76px; height: 76px; color: var(--accent, #22d3ee); opacity: 0.92; filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.28)); animation: market-empty-float 4.2s ease-in-out infinite; } .market-empty__title { font-size: 19.8px; font-weight: 600; color: var(--text, #eff6ff); margin: 4px 0 0; letter-spacing: 0.02em; } .market-empty__hint { font-size: 14.9px; line-height: 1.7; color: var(--muted, rgba(226, 232, 240, 0.72)); margin: 0; } .market-empty__cta { margin-top: 8px; } @keyframes market-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .market-empty__icon { animation: none; } } /* --- market card CTA hierarchy --------------------------------------- Primary (一鍵買入) is the dominant action. 購買最低價 is the single-unit alternative and reads as ghost. 掛求購 sits next to it. 一鍵賣出 is a sell-side action, so tint it amber to signal the opposite direction from the cyan buy path. */ .market-group-actions { display: flex; flex-wrap: wrap; gap: 8px; } .market-action { flex: 1 1 calc(50% - 8px); min-width: 0; justify-content: center; } .market-action--buy { flex-basis: 100%; order: 0; } .market-action--single { order: 1; } .market-action--buyorder { order: 2; } .market-action--sell { order: 3; color: #fbbf24; border-color: rgba(251, 191, 36, 0.42); } .market-action--sell:hover:not(:disabled) { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.6); } .market-action--sell:disabled { color: rgba(251, 191, 36, 0.38); border-color: rgba(251, 191, 36, 0.16); } @media (min-width: 720px) { .market-action--buy { flex-basis: 100%; } } /* --- "我的" section tabs ----------------------------------------------- Replaces the vertical stack of 我的上架 / 我的買單 / 我的成交 with a tab strip — only one section is visible at a time. Keeps page short for buyers, focused for sellers. */ .my-market-tabs { display: flex; gap: 8px; margin: 0 0 20px; padding: 6px; border-radius: 14px; background: rgba(15, 23, 42, 0.42); border: 1px solid rgba(148, 163, 184, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); } .my-market-tab { flex: 1 1 0; min-width: 0; appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 12px 14px; color: rgba(226, 232, 240, 0.72); font-size: 15.4px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; text-align: center; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; } .my-market-tab:hover { background: rgba(56, 189, 248, 0.08); color: #f8fafc; } .my-market-tab:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.55); outline-offset: 2px; } .my-market-tab.is-active { background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(34, 211, 238, 0.14)); border-color: rgba(56, 189, 248, 0.45); color: #f8fafc; box-shadow: 0 6px 18px rgba(56, 189, 248, 0.18); } .market-tab-hidden { display: none !important; } @media (max-width: 600px) { .my-market-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .my-market-tab { flex: 0 0 auto; padding: 10px 20px; } } .market-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: rgba(8, 12, 24, 0.6); /* R397: tier-color halo ring via box-shadow + border, set per [data-level-effect] */ border: 1px solid rgba(148, 163, 184, 0.18); transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .market-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* R397 A. tier-color halo per admin flip_effect (10 colors mirror inventory) */ .market-thumb[data-level-effect="red"] { border-color: rgba(248, 113, 113, 0.45); box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18), 0 0 18px rgba(248, 113, 113, 0.25); } .market-thumb[data-level-effect="gold"] { border-color: rgba(250, 204, 21, 0.45); box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18), 0 0 18px rgba(250, 204, 21, 0.25); } .market-thumb[data-level-effect="purple"] { border-color: rgba(192, 132, 252, 0.42); box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.16), 0 0 16px rgba(192, 132, 252, 0.22); } .market-thumb[data-level-effect="blue"] { border-color: rgba(96, 165, 250, 0.42); box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16), 0 0 16px rgba(96, 165, 250, 0.22); } .market-thumb[data-level-effect="cyan"] { border-color: rgba(103, 232, 249, 0.4); box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.14), 0 0 14px rgba(103, 232, 249, 0.20); } .market-thumb[data-level-effect="green"] { border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.14), 0 0 14px rgba(74, 222, 128, 0.20); } .market-thumb[data-level-effect="pink"] { border-color: rgba(244, 114, 182, 0.42); box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.16), 0 0 16px rgba(244, 114, 182, 0.22); } .market-thumb[data-level-effect="orange"] { border-color: rgba(251, 146, 60, 0.42); box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.16), 0 0 16px rgba(251, 146, 60, 0.22); } .market-thumb[data-level-effect="white"] { border-color: rgba(226, 232, 240, 0.30); box-shadow: 0 0 0 2px rgba(226, 232, 240, 0.10), 0 0 12px rgba(226, 232, 240, 0.14); } .market-thumb[data-level-effect="rainbow"] { border-color: rgba(250, 204, 21, 0.5); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.16), 0 0 18px rgba(250, 204, 21, 0.22); } /* R397 B. Listings count badge — float top-right of thumb */ .market-thumb__count { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(34, 211, 238, 0.92), rgba(56, 189, 248, 0.92)); color: #0a1a2c; font-size: 13.2px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0; box-shadow: 0 4px 10px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); pointer-events: none; } /* R397 D. 🔥 Hot badge — float top-left of thumb when recently traded */ .market-thumb__hot { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 3px 8px 3px 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(251, 146, 60, 0.95)); color: #fff; font-size: 12.1px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 4px 10px rgba(248, 113, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); pointer-events: none; animation: marketHotPulse 2.2s ease-in-out infinite; } .market-thumb__hot span { font-size: 11.6px; font-weight: 700; } @keyframes marketHotPulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(248, 113, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); } 50% { transform: scale(1.05); box-shadow: 0 6px 16px rgba(248, 113, 113, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); } } @media (prefers-reduced-motion: reduce) { .market-thumb__hot { animation: none; } } .market-meta { display: grid; gap: 8px; } .market-meta strong { font-size: 17.6px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.35; color: #f8fafc; } /* --- Steam-mode spread widget -------------------------------------- ASK | spread | BID. The ASK block is the "market price" the buyer pays right now; the BID block is what a seller can instantly cash out at. Visually splitting them lets a user read the state of the market in a single glance without parsing a prose sentence. */ .market-spread-widget { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(8, 12, 24, 0.38); border: 1px solid rgba(148, 163, 184, 0.14); } /* R400 #1 UIUX: 無 bid 時隱整 block, ASK 滿版 + sparkline 右側 chip-style */ .market-spread-widget.market-spread-widget--no-bid { grid-template-columns: 1fr auto; padding: 9px 12px; } .market-spread-widget.market-spread-widget--no-bid .market-spread-center { align-items: flex-end; padding: 0; } .market-spread-widget.market-spread-widget--no-bid .market-spread-center .market-spread-value { margin-top: 4px; } .market-spread-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .market-spread-block--bid { text-align: right; } .market-spread-label { font-size: 12.1px; font-weight: 500; letter-spacing: 0.04em; color: rgba(226, 232, 240, 0.55); text-transform: uppercase; } .market-spread-price { font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1.1; color: #f8fafc; font-variant-numeric: tabular-nums; } /* R397 C. Steam-style — 市價 dominant (買家 focus), 買價收 secondary. * Ask 24px / Bid 14px 1.7x size ratio. Both keep accent color. */ .market-spread-block--ask .market-spread-price { color: #22d3ee; font-size: 28.6px; font-weight: 800; letter-spacing: -0.01em; text-shadow: 0 0 18px rgba(34, 211, 238, 0.18); } .market-spread-block--bid .market-spread-price { color: #fbbf24; font-size: 16.5px; font-weight: 600; } .market-spread-block--ask .market-spread-label { color: rgba(34, 211, 238, 0.75); font-weight: 700; } .market-spread-price--empty { color: rgba(226, 232, 240, 0.35) !important; font-weight: 500; } .market-spread-depth { font-size: 12.1px; color: rgba(226, 232, 240, 0.58); font-variant-numeric: tabular-nums; } .market-spread-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; } .market-spread-value { font-size: 12.1px; font-weight: 600; color: rgba(226, 232, 240, 0.72); padding: 4px 10px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); white-space: nowrap; } /* R388 flamboyant-bell (2026-05-13): Steam-style upgrades to spread widget. * 4 個 new visual elements: mini sparkline + trend arrow + last-trade pulse + * depth dots. 全部 graceful — 沒資料時 element 不 render, 維持原 layout. */ /* Mini sparkline (7-day price line chart, inline SVG) */ .market-sparkline { display: block; width: 56px; height: 20px; opacity: 0.92; } .market-sparkline--up polyline { stroke: #4ade80; filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4)); } .market-sparkline--down polyline { stroke: #f87171; filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.4)); } /* Trend arrow + % change chip (inline 在 askPrice 下方) */ .market-spread-trend { display: inline-flex; align-items: center; gap: 2px; font-size: 12.1px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: 6px; margin-top: 2px; align-self: flex-start; } .market-spread-block--bid .market-spread-trend { align-self: flex-end; } .market-spread-trend--up { color: #4ade80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.22); } .market-spread-trend--down { color: #f87171; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.22); } .market-spread-trend--flat { color: rgba(226, 232, 240, 0.55); background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.22); } /* Depth dots — ••••• Steam-style at-a-glance density */ .market-spread-depth__dots { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 1px; color: rgba(34, 211, 238, 0.7); margin-right: 4px; } .market-spread-block--bid .market-spread-depth__dots { color: rgba(251, 191, 36, 0.7); } /* Last-trade pulse chip — top-right of card meta */ .market-last-trade-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(74, 222, 128, 0.10), rgba(34, 211, 238, 0.06)); border: 1px solid rgba(74, 222, 128, 0.24); font-size: 11.6px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(187, 247, 208, 0.95); letter-spacing: 0.02em; align-self: flex-start; margin-top: -2px; margin-bottom: 2px; } .market-last-trade-chip__pulse { position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); flex-shrink: 0; } .market-last-trade-chip__pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid rgba(74, 222, 128, 0.5); animation: marketLastTradePulse 2s ease-out infinite; } @keyframes marketLastTradePulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .market-last-trade-chip__pulse::after { animation: none; } } @media (max-width: 480px) { .market-spread-widget { padding: 8px 10px; } .market-spread-price { font-size: 18.7px; } .market-spread-label { font-size: 11px; } } /* --- Body actions (secondary CTAs inside the drawer) --------------- */ .market-group-actions--body { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; border-bottom: 1px solid rgba(148, 163, 184, 0.08); margin-bottom: 12px; } .market-group-actions--body .market-action { flex: 1 1 calc(50% - 6px); min-width: 120px; justify-content: center; } /* Summary keeps just the primary CTA — make it full-width, punchy. */ .market-group-actions--summary { display: flex; gap: 8px; width: 100%; } .market-group-actions--summary .market-action--buy { flex: 1 1 100%; justify-content: center; font-size: 16.5px; padding-top: 10px; padding-bottom: 10px; } /* --- Buy modal: 5-minute reservation countdown ---------------------- */ .market-buy-reservation { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.22); color: rgba(226, 232, 240, 0.92); font-size: 14.3px; line-height: 1.45; margin-top: 8px; margin-bottom: 4px; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .market-buy-reservation__icon { font-size: 17.6px; opacity: 0.85; } .market-buy-reservation[data-state="warning"] { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.4); color: #fde68a; } .market-buy-reservation[data-state="expired"] { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #fecaca; } .market-buy-reservation[data-state="blocked"] { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.44); color: #fecaca; } .market-buy-reservation[data-state="idle"] { display: none; } /* --- Listing card: "reserved by another buyer" chip ----------------- */ .market-group[data-reserved="other"] { opacity: 0.55; filter: saturate(0.7); } .market-reserved-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); color: #fbbf24; font-size: 12.1px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .market-sub, .market-price-row { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.2px; color: var(--muted); align-items: center; } .market-sub .dot, .market-price-row .dot { opacity: 0.6; } .market-total { color: var(--ink); font-weight: 700; } .market-suggest-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; font-size: 13.2px; color: var(--muted); } .market-suggest-row .btn { margin-left: auto; } .market-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .pool-draw-options { display: flex; flex-wrap: wrap; gap: 6px; } .card .thumb { height: clamp(170px, 20vw, 220px); background: linear-gradient(140deg, rgba(249, 115, 22, 0.2), rgba(34, 211, 238, 0.2)); display: grid; place-items: center; font-weight: 700; color: var(--ink); position: relative; cursor: pointer; overflow: hidden; } .card .thumb::before { content: ""; position: absolute; inset: 0; background-image: var(--thumb-image); background-size: cover; background-position: center; filter: blur(18px); transform: scale(1.1); opacity: 0; transition: opacity 0.2s ease; } .card .thumb.has-image::before { opacity: 0.45; } .card .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; position: relative; z-index: 1; } .thumb-overlay { position: absolute; left: 12px; right: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; } .thumb-overlay.top { top: 12px; } .thumb-overlay.bottom { bottom: 12px; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(8, 12, 24, 0), rgba(8, 12, 24, 0.75)); padding: 22px 10px 10px; border-radius: 12px; } .thumb-price { font-weight: 700; font-size: 15.4px; color: var(--ink); text-shadow: 0 2px 12px rgba(15, 23, 42, 0.6); } .card .card-body { padding: 0 16px 16px; display: grid; gap: 10px; } .pagination { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; } .pagination .page-label { color: var(--muted); font-size: 14.3px; } /* A11y: visually hidden but readable to screen readers. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* R329 flamboyant-bell (2026-05-12): WCAG 2.4.1 Bypass Blocks — skip-link for keyboard users. 對齊 inventory R296 pattern (m/inventory.css 已有). 放 40b-shared-components.css 讓所有 customer 頁 (styles-customer.css bundle) 都共用. Visually hidden until focus, slide-in 視覺. */ .skip-link { position: fixed; top: -100px; left: 16px; z-index: 9999; padding: 12px 18px; background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #0f172a; font-size: 15.4px; font-weight: 800; text-decoration: none; border-radius: 999px; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4); transition: top 200ms cubic-bezier(0.16, 1, 0.3, 1); } .skip-link:focus, .skip-link:focus-visible { top: 16px; outline: 3px solid #fef3c7; outline-offset: 2px; } /* A11y: unified keyboard focus ring across interactive elements. * Uses :focus-visible so mouse clicks don't show it. */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid #00d4ff; outline-offset: 2px; border-radius: 6px; } /* Tighter ring on circular / icon buttons */ .carousel-control:focus-visible, .modal-close:focus-visible { outline-offset: 1px; border-radius: 999px; } .card-info { display: grid; gap: 6px; } .card .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 14.3px; color: var(--muted); } .card .status { font-weight: 700; color: var(--accent-2); } .draw-options { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border); } .draw-option { border-radius: var(--public-btn-chip-radius); border: 1px solid transparent; background: transparent; color: var(--public-btn-chip-color); padding: 8px 16px; font-size: 13.2px; font-weight: var(--public-btn-chip-font-weight); letter-spacing: var(--public-btn-letter-spacing); text-transform: var(--public-btn-text-transform); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .draw-option.active { border-color: var(--public-btn-chip-active-border); background: var(--public-btn-chip-active-bg); color: var(--public-btn-chip-active-color); box-shadow: var(--public-btn-chip-active-shadow); } .modal-message { margin: 8px 0 0; color: var(--ink); line-height: 1.5; } .draw-option:hover { color: var(--public-btn-chip-color); background: rgba(255, 255, 255, 0.08); } .draw-option:disabled { opacity: 0.6; cursor: not-allowed; } .draw-option:focus-visible { outline: none; box-shadow: var(--public-btn-chip-shadow), 0 0 0 4px var(--public-btn-focus-ring); } .card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .card-tag { border-radius: 999px; padding: 4px 10px; font-size: 12.1px; background: rgba(34, 211, 238, 0.18); color: var(--accent-2); } .progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.2px; } .progress-track { position: relative; flex: 1; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border); overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .empty { display: none; text-align: center; color: var(--muted); } .detail { display: grid; gap: 32px; } .detail-hero { display: grid; grid-template-columns: minmax(240px, 360px) 1fr minmax(220px, 280px); gap: 32px; align-items: center; } .detail-main { display: grid; gap: 12px; } .detail-thumb { height: 320px; border-radius: 20px; overflow: hidden; background: linear-gradient(140deg, rgba(249, 115, 22, 0.25), rgba(34, 211, 238, 0.25)); display: grid; place-items: center; font-weight: 700; } .detail-thumb img { width: 100%; height: 100%; object-fit: cover; } .detail-tags { color: var(--muted); margin: 6px 0 14px; } .detail-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; } .detail-meta div { display: grid; gap: 6px; color: var(--muted); } .detail-meta strong { color: var(--ink); font-size: 22px; } .detail-actions { display: flex; gap: 12px; flex-wrap: wrap; } .detail-side { display: grid; gap: 16px; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border); padding: 20px; border-radius: 18px; } .detail-side span { color: var(--muted); font-size: 14.3px; } .detail-side strong { font-size: 22px; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .detail-grid.is-tabbed { grid-template-columns: 1fr; } .detail-card { background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border); padding: 20px; border-radius: 16px; } .detail-card ul { padding-left: 20px; color: var(--muted); } /* R501p (2026-05-27): R501mw 移除整個 detail-lord-card panel, dead CSS 刪除 */ .detail-lord-champion-slot[hidden] { display: none !important; } .detail-tower-slot[hidden] { display: none !important; } /* ── Shared empty-state illustration component ─────────────────── * Used on list pages (my-coupons, my-watchlist, my-cdk, my-addresses, * my-recycle-history, my-points-history, my-coins-history) when * there are no records yet. Shows a NanoBanana 2 illustration plus * a forward-looking title + hint so the absence feels intentional * rather than broken. */ .empty-state { display: grid; gap: 14px; place-items: center; padding: 48px 20px; text-align: center; color: rgba(255, 255, 255, 0.65); animation: empty-state-fade-in 0.4s ease-out; } .empty-state__icon { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; opacity: 0.92; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.02); } .empty-state__icon img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.3); } .empty-state__title { font-size: 18.7px; font-weight: 700; color: rgba(255, 255, 255, 0.85); margin: 0; } .empty-state__hint { font-size: 14.3px; color: rgba(255, 255, 255, 0.55); max-width: 320px; line-height: 1.65; margin: 0; } .empty-state__hint a { color: #4effc3; text-decoration: none; font-weight: 600; } .empty-state__hint a:hover { text-decoration: underline; } @keyframes empty-state-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Illustrated steps (homepage 抽獎流程) ─────────────────── * Replaces the plain circle-number steps with premium NanoBanana 2 * illustrations + title + description. Laid out horizontally on * wide screens, stacked on mobile. * * Specificity guard (body prefix) is deliberate — the existing * `body.frontend-theme-default .page.home-page.page-composer-home * .steps li` rule in 80f-demo-structure.css has a stronger selector * and would otherwise override the layout. */ body .steps.steps--illustrated { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin: 20px 0 0 !important; padding: 0 !important; list-style: none !important; } @media (min-width: 720px) { body .steps.steps--illustrated { grid-template-columns: repeat(3, 1fr) !important; } } body .steps.steps--illustrated li { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; gap: 14px !important; align-items: center !important; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; background: linear-gradient(135deg, rgba(230, 187, 102, 0.04), rgba(34, 211, 238, 0.04)) !important; transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important; } body .steps.steps--illustrated li:hover { transform: translateY(-2px) !important; border-color: rgba(230, 187, 102, 0.22) !important; background: linear-gradient(135deg, rgba(230, 187, 102, 0.07), rgba(34, 211, 238, 0.07)) !important; } body .steps.steps--illustrated .step-icon { width: 72px !important; height: 72px !important; flex: 0 0 72px !important; min-width: 72px !important; background: transparent !important; border: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body .steps.steps--illustrated .step-icon img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; display: block !important; filter: drop-shadow(0 6px 14px rgba(0, 212, 255, 0.22)); } body .steps.steps--illustrated .step-body { display: grid !important; gap: 4px !important; min-width: 0 !important; flex: 1 !important; } body .steps.steps--illustrated .step-title { font-size: 16.5px !important; font-weight: 700 !important; color: var(--ink, #f8fafc) !important; letter-spacing: 0.02em !important; } body .steps.steps--illustrated .step-desc { font-size: 14.3px !important; color: rgba(226, 232, 240, 0.72) !important; line-height: 1.55 !important; } body .steps.steps--illustrated li span:first-child:not(.step-icon) { display: none !important; } /* c153 (2026-05-01): View Transitions API — cross-document smooth fade. Triggered by in HTML. Browsers WITHOUT support fall back to instant page swap (no animation, no broken state). Chrome 126+, Safari 18+, Edge 126+. Firefox: working. 配合 c152 prefetch — prefetched 頁面 + view-transition = 真正接近 SPA-router 體感（瞬切 + smooth fade）。 */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /* 尊重 user 的 prefers-reduced-motion 設定 — 跳過動畫直接 cut */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* Profile personal center — recovered from commit 3ecd478 (latest complete version) */ /* Includes avatar cropper modal added in feat(profile): avatar upload circle cropper */ /* See AGENTS.md RULE 2: never write to built output files. */ .profile-page { max-width: 880px; margin: 0 auto; padding: 32px 24px 80px; } .profile-shell { display: flex; flex-direction: column; gap: 24px; } .profile-hero { display: flex; align-items: center; gap: 24px; padding: 28px 32px; border-radius: 22px; background: radial-gradient(120% 100% at 20% 0%, rgba(255, 205, 125, 0.18), transparent 60%), linear-gradient(180deg, rgba(24, 26, 44, 0.66) 0%, rgba(10, 12, 26, 0.82) 100%); border: 1px solid rgba(255, 215, 150, 0.18); box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.12), 0 18px 42px rgba(2, 8, 18, 0.28); } .profile-hero__avatar { position: relative; flex: 0 0 auto; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: #0a0f1e; } .profile-hero__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; } .profile-hero__avatar-ring { position: absolute; inset: -4px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #f3d48c 0%, #a96e20 50%, #f3d48c 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .profile-hero__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .profile-hero__eyebrow { font-size: 12.1px; letter-spacing: 0.24em; color: rgba(255, 232, 198, 0.7); margin: 0; text-transform: uppercase; } .profile-hero__title { margin: 0; font-size: clamp(24.2px, 3vw, 33px); color: #f8fafc; letter-spacing: 0.02em; } .profile-hero__account { margin: 0; color: rgba(226, 232, 240, 0.78); font-size: 14.3px; } .profile-hero__account span { color: #ffe5a8; font-weight: 700; } .profile-login-gate { padding: 48px 24px; text-align: center; border-radius: 18px; background: rgba(24, 26, 44, 0.52); border: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 16px; } .profile-login-gate.is-hidden, .profile-form.is-hidden { display: none; } .profile-form { display: flex; flex-direction: column; gap: 18px; } .profile-card { padding: 22px 24px; border-radius: 18px; background: rgba(18, 20, 36, 0.64); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 14px; } .profile-card__head h2 { margin: 0 0 4px; font-size: 17.6px; letter-spacing: 0.02em; color: #f8fafc; } .profile-card__hint { margin: 0; color: rgba(203, 213, 225, 0.72); font-size: 13.8px; line-height: 1.55; } /* Optional inline icon for section heads that want a visual (e.g. the * shield on 安全設定). Follows the ai-image-integration SKILL: the * container is transparent / border:none / overflow:visible so the * alpha edge never reveals a container disc or ring. Glow comes from * filter: drop-shadow, never from background:. */ .profile-card__head--with-icon { display: flex; align-items: center; gap: 14px; } .profile-card__head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .profile-card__icon { flex: 0 0 auto; width: 56px; height: 56px; display: block; background: transparent; border: none; overflow: visible; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(250, 204, 21, 0.25)); } .profile-nickname-row { display: flex; gap: 10px; align-items: stretch; } .profile-nickname-row input { flex: 1 1 auto; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(10, 12, 24, 0.5); color: #f8fafc; font-size: 15.4px; letter-spacing: 0.02em; min-height: 42px; } .profile-nickname-row input:focus { outline: none; border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18); } /* Avatar grid is now two packs (luxe + pixel). Each pack gets its own heading and its own row of circular tiles; the container stacks them. */ .profile-avatar-grid { display: flex; flex-direction: column; gap: 14px; } .profile-avatar-pack-heading { margin: 0; font-size: 12.7px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 232, 198, 0.72); font-weight: 700; } .profile-avatar-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; } .profile-avatar-choice { appearance: none; border: 2px solid rgba(148, 163, 184, 0.2); background: rgba(10, 12, 24, 0.5); padding: 4px; border-radius: 50%; aspect-ratio: 1 / 1; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; display: flex; align-items: center; justify-content: center; } .profile-avatar-choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Pixel-pack tiles: nearest-neighbour so the 8-bit sprites stay crisp at small sizes instead of turning into a smudge. */ .profile-avatar-choice[data-pack="pixel"] img { image-rendering: pixelated; image-rendering: crisp-edges; } .profile-avatar-choice:hover { transform: translateY(-2px); border-color: rgba(255, 215, 150, 0.45); } .profile-avatar-choice.is-active { border-color: #e6bb66; box-shadow: 0 0 0 2px rgba(230, 187, 102, 0.35), 0 8px 18px rgba(230, 187, 102, 0.22); } .profile-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .profile-upload-status { color: rgba(203, 213, 225, 0.72); font-size: 13.8px; } .form-message[data-tone="error"] { color: #fca5a5; } .form-message[data-tone="success"] { color: #86efac; } .form-message[data-tone="warn"] { color: #fcd34d; } .form-message[data-tone="pending"] { color: rgba(226, 232, 240, 0.7); } @media (max-width: 560px) { .profile-hero { flex-direction: column; text-align: center; padding: 24px; } .profile-hero__avatar { width: 96px; height: 96px; } .profile-nickname-row { flex-direction: column; } .profile-avatar-grid { grid-template-columns: repeat(4, 1fr); } } /* ==================================================================== * R501 blissful-bhaskara (2026-05-15): 7-day login streak (.pc-streak7-*) * 桌機個人介面「每日登入獎勵」card. 位置: renderTasksTabbed (任務中心) 上方. * Feature-flagged: backend /api/me/daily-streak7 enabled=true 時 render. * Visual lang: cosmic cyan/purple palette (premium orb 透明 PNG 為 reward icon), * amber halo glow for today's claimable cell, 灰階 + ✓ overlay for claimed, * dim opacity 0.4 for future days. * Full spec: docs/engineering/daily-login-7day-streak.md * ==================================================================== */ .pc-streak7-card { /* Override the default pc-section-card with cosmic gradient + subtle cyan rim. Distinguishes daily reward callout from regular task card. */ background: radial-gradient(120% 100% at 50% 0%, rgba(34, 211, 238, 0.10), transparent 55%), linear-gradient(180deg, rgba(20, 24, 50, 0.78) 0%, rgba(10, 14, 32, 0.86) 100%); border: 1px solid rgba(34, 211, 238, 0.22); box-shadow: inset 0 1px 0 rgba(220, 240, 255, 0.10), 0 18px 42px rgba(2, 8, 18, 0.28), 0 0 0 1px rgba(34, 211, 238, 0.06); position: relative; overflow: hidden; } .pc-streak7-card::before { /* Ambient nebula sheen drifting behind orbs */ content: ""; position: absolute; inset: -20% -10% auto -10%; height: 70%; background: radial-gradient(60% 100% at 20% 50%, rgba(34, 211, 238, 0.10), transparent 70%), radial-gradient(50% 100% at 80% 50%, rgba(168, 85, 247, 0.10), transparent 70%); filter: blur(20px); pointer-events: none; opacity: 0.7; z-index: 0; } .pc-streak7-card > * { position: relative; z-index: 1; } .pc-streak7__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .pc-streak7__head h2 { margin: 0; font-size: 1.155rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(248, 250, 252, 0.95); } .pc-streak7__progress-text { font-size: 0.935rem; color: rgba(34, 211, 238, 0.85); font-weight: 600; } .pc-streak7__cycles { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.792rem; font-weight: 600; background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.32); } /* 7-day grid — auto-fit on narrow screens, 7 columns on wide */ .pc-streak7__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; margin-bottom: 16px; } @media (max-width: 640px) { .pc-streak7__grid { /* On narrow desktop layouts shrink gap; on phone (handled by /m/me) this file is also part of styles-customer.css but mobile uses /m/me.html with dp-me-streak7-* classes instead. Profile.html on phone width still renders these .pc-streak7-* selectors though. */ gap: 6px; } } .pc-streak7__cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(148, 163, 184, 0.12); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .pc-streak7__cell.is-future { opacity: 0.5; } /* R501fz angry-cartwright (2026-05-18, owner mandate): 桌機 profile.js 同款 emerald-strong claimed state (對齊 popup + m/me-arcade) */ .pc-streak7__cell.is-claimed { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(20, 83, 45, 0.32)), rgba(15, 23, 42, 0.55); border-color: rgba(34, 197, 94, 0.65); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), inset 0 1px 0 rgba(187, 247, 208, 0.18); opacity: 0.92; } .pc-streak7__cell.is-today { background: radial-gradient(100% 100% at 50% 0%, rgba(245, 158, 11, 0.18), transparent 60%), rgba(15, 23, 42, 0.55); border-color: rgba(245, 158, 11, 0.6); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3), 0 0 18px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 215, 130, 0.18); transform: translateY(-2px); } /* R501fz: today + claimed combo — claimed style wins, 殺掉橘色 translate */ .pc-streak7__cell.is-today.is-claimed { background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(20, 83, 45, 0.38)), rgba(15, 23, 42, 0.6); border-color: rgba(34, 197, 94, 0.75); box-shadow: 0 0 0 1.5px rgba(34, 197, 94, 0.4), 0 0 14px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(187, 247, 208, 0.25); transform: translateY(0); } /* Orb wrapper holds: cosmic PNG bg + reward emoji overlay + state badge */ .pc-streak7__orb-wrap { position: relative; width: 56px; height: 56px; display: grid; place-items: center; } .pc-streak7__orb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; /* Premium image; do NOT wrap in border or bg — image already has all the visual design (sealed orb + gold band + halo). CLAUDE.md skill `premium-icon-button-no-frame` 警告: 套容器框會破壞 premium 質感. */ } .pc-streak7__cell.is-today .pc-streak7__orb { animation: pc-streak7-orb-breath 2.6s ease-in-out infinite; } @keyframes pc-streak7-orb-breath { 0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 4px rgba(245, 158, 11, 0.4)); } 50% { transform: scale(1.06); filter: brightness(1.12) drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)); } } /* R501fz: orb 灰階更深 + emerald tint, 殺掉 today breath 動畫 (today + claimed combo) */ .pc-streak7__cell.is-claimed .pc-streak7__orb { filter: grayscale(1) brightness(0.45) sepia(0.3) hue-rotate(70deg); opacity: 0.65; animation: none; } .pc-streak7__cell.is-future .pc-streak7__orb { filter: grayscale(0.4) brightness(0.78); } /* Reward emoji centered on top of orb (small, bright) */ .pc-streak7__reward { position: relative; z-index: 2; font-size: 1.21rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; } /* State overlay (✓ for claimed, ⚡ for ready) — top-right corner */ /* R501fz: ✓ badge 20px → 26px, 加 glow + linear gradient */ .pc-streak7__state { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.99rem; font-weight: 900; background: linear-gradient(135deg, rgba(74, 222, 128, 1), rgba(22, 163, 74, 1)); color: #052e16; z-index: 4; border: 2px solid rgba(15, 23, 42, 0.95); box-shadow: 0 0 8px rgba(34, 197, 94, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); } .pc-streak7__state--ready { background: rgba(245, 158, 11, 0.95); color: #422006; animation: pc-streak7-ready-pulse 1.4s ease-in-out infinite; } @keyframes pc-streak7-ready-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } } .pc-streak7__daynum { font-size: 0.77rem; font-weight: 700; color: rgba(226, 232, 240, 0.82); letter-spacing: 0.02em; } .pc-streak7__cell.is-today .pc-streak7__daynum { color: #fbbf24; } /* R501fz: claimed cell daynum emerald 色 + 加粗 (JS 改文字「✓ 今日」/「✓ Day N」) */ .pc-streak7__cell.is-claimed .pc-streak7__daynum { color: rgba(187, 247, 208, 0.95); font-weight: 800; } .pc-streak7__cell.is-today.is-claimed .pc-streak7__daynum { color: rgba(187, 247, 208, 0.95); } /* Footer: claim button + reset countdown */ .pc-streak7__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .pc-streak7__claim { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.55); background: linear-gradient(135deg, rgba(245, 158, 11, 0.92) 0%, rgba(217, 119, 6, 0.92) 100%); color: #1a1206; font-weight: 800; font-size: 1.045rem; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.45); transition: transform 180ms ease, box-shadow 180ms ease; position: relative; overflow: hidden; } .pc-streak7__claim:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(245, 158, 11, 0.42), inset 0 1px 0 rgba(255, 240, 200, 0.55); } .pc-streak7__claim:active { transform: translateY(0); } .pc-streak7__claim:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .pc-streak7__claim.is-loading::after { /* Subtle shimmer sweep during request */ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: pc-streak7-shimmer 1.2s linear infinite; } @keyframes pc-streak7-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .pc-streak7__claim-icon { font-size: 1.21rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); } .pc-streak7__claim-done { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.32); color: #86efac; font-weight: 600; font-size: 1.012rem; } .pc-streak7__reset { font-size: 0.902rem; color: rgba(148, 163, 184, 0.85); } .pc-streak7__reset [data-streak7-countdown] { font-variant-numeric: tabular-nums; color: rgba(34, 211, 238, 0.92); font-weight: 600; margin-left: 4px; } /* Success burst when claim succeeds (1.6s) */ .pc-streak7-card--claimed { animation: pc-streak7-card-claimed 1.6s ease-out; } @keyframes pc-streak7-card-claimed { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 35% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0.22), 0 18px 42px rgba(2, 8, 18, 0.28); } 100% { box-shadow: 0 18px 42px rgba(2, 8, 18, 0.28); } } @media (max-width: 560px) { /* On phone, profile.html still uses these selectors (responsive) — keep cells legible but slightly tighter */ .pc-streak7__orb-wrap { width: 44px; height: 44px; } .pc-streak7__reward { font-size: 1.045rem; } .pc-streak7__daynum { font-size: 0.715rem; } .pc-streak7__cell { padding: 8px 2px; gap: 4px; } .pc-streak7__claim { padding: 10px 18px; font-size: 0.968rem; } } /* ==================================================================== * R501g blissful-bhaskara (2026-05-15): daily-streak7 popup modal * 進站自動彈窗 — daily-streak7-popup.js 動態 insert .streak7-popup-mount * 到 body。第一次造訪 (or 4 小時 cooldown 過) + 已登入 + canClaim 時觸發。 * SENTINEL: r501g-daily-streak7-popup-css * ==================================================================== */ .streak7-popup-mount { position: fixed; inset: 0; z-index: 12000; opacity: 0; transition: opacity 280ms ease; pointer-events: none; } .streak7-popup-mount.streak7-popup--visible { opacity: 1; pointer-events: auto; } .streak7-popup-mount.streak7-popup--leaving { opacity: 0; pointer-events: none; } .streak7-popup__backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.15), transparent 50%), rgba(2, 6, 18, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 24px; /* R501bt angry-cartwright (2026-05-16): 用戶 verbatim「客戶還是說首頁載入完成 * 畫面就動不了 全部載入前可以」. 拿掉 body.style.overflow lock 後, 改靠 * touch-action: none 攔住 backdrop 上的 scroll touch — 防止 user 在 modal * 區域滑動觸發底層 page scroll (modal stuck-state 看起來像「卡住」). */ touch-action: none; overscroll-behavior: contain; } .streak7-popup__card { /* card 內容自己可以 scroll (內部 list / countdown 可能超出 viewport) */ touch-action: auto; } .streak7-popup__card { position: relative; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: hidden; border-radius: 24px; background: radial-gradient(140% 110% at 50% 0%, rgba(34, 211, 238, 0.16), transparent 55%), linear-gradient(180deg, rgba(20, 24, 50, 0.94) 0%, rgba(10, 14, 32, 0.96) 100%); border: 1px solid rgba(34, 211, 238, 0.34); box-shadow: inset 0 1px 0 rgba(220, 240, 255, 0.18), 0 24px 60px rgba(2, 8, 18, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.1), 0 0 80px rgba(34, 211, 238, 0.18); padding: 28px 24px 24px; transform: scale(0.92) translateY(20px); transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .streak7-popup-mount.streak7-popup--visible .streak7-popup__card { transform: scale(1) translateY(0); } .streak7-popup__x { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.2); color: rgba(226, 232, 240, 0.7); font-size: 1.54rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background 180ms ease, color 180ms ease; } .streak7-popup__x:hover { background: rgba(148, 163, 184, 0.28); color: rgba(226, 232, 240, 0.95); } .streak7-popup__hero { position: relative; text-align: center; margin-bottom: 20px; padding: 8px 0 12px; } .streak7-popup__hero-glow { position: absolute; inset: -40% 10% auto 10%; height: 140%; background: radial-gradient(60% 100% at 30% 50%, rgba(34, 211, 238, 0.25), transparent 70%), radial-gradient(50% 100% at 75% 50%, rgba(168, 85, 247, 0.18), transparent 70%), radial-gradient(50% 100% at 50% 30%, rgba(245, 158, 11, 0.18), transparent 70%); filter: blur(24px); z-index: 0; pointer-events: none; animation: streak7-popup-hero-drift 6s ease-in-out infinite alternate; } @keyframes streak7-popup-hero-drift { from { transform: translateX(-8px) scale(1); opacity: 0.85; } to { transform: translateX(8px) scale(1.04); opacity: 1; } } .streak7-popup__title { position: relative; z-index: 1; margin: 0 0 6px; font-size: 1.54rem; font-weight: 800; letter-spacing: 0.04em; color: #f8fafc; text-shadow: 0 2px 8px rgba(34, 211, 238, 0.32); } .streak7-popup__subtitle { position: relative; z-index: 1; margin: 0; font-size: 1.012rem; color: rgba(226, 232, 240, 0.85); letter-spacing: 0.02em; } .streak7-popup__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; } .streak7-popup__cell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px; border-radius: 12px; background: rgba(15, 23, 42, 0.42); border: 1px solid rgba(148, 163, 184, 0.14); position: relative; min-height: 78px; } .streak7-popup__cell.is-future { opacity: 0.5; } .streak7-popup__cell.is-claimed { background: rgba(15, 23, 42, 0.55); border-color: rgba(34, 197, 94, 0.28); } .streak7-popup__cell.is-today { background: radial-gradient(100% 100% at 50% 0%, rgba(245, 158, 11, 0.22), transparent 60%), rgba(15, 23, 42, 0.55); border-color: rgba(245, 158, 11, 0.7); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 0 18px rgba(245, 158, 11, 0.28), inset 0 1px 0 rgba(255, 215, 130, 0.22); animation: streak7-popup-today-pulse 2.4s ease-in-out infinite; } @keyframes streak7-popup-today-pulse { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(-3px); } } .streak7-popup__orb-wrap { position: relative; width: 44px; height: 44px; display: grid; place-items: center; } .streak7-popup__orb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .streak7-popup__cell.is-today .streak7-popup__orb { animation: streak7-popup-orb-breath 2.6s ease-in-out infinite; } @keyframes streak7-popup-orb-breath { 0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)); } 50% { transform: scale(1.12); filter: brightness(1.18) drop-shadow(0 0 14px rgba(245, 158, 11, 0.7)); } } .streak7-popup__cell.is-claimed .streak7-popup__orb { filter: grayscale(0.7) brightness(0.6); } .streak7-popup__cell.is-future .streak7-popup__orb { filter: grayscale(0.4) brightness(0.78); } .streak7-popup__reward { position: relative; z-index: 2; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); pointer-events: none; } .streak7-popup__state { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 0.726rem; font-weight: 800; background: rgba(34, 197, 94, 0.95); color: #052e16; z-index: 3; border: 1.5px solid rgba(15, 23, 42, 0.85); } .streak7-popup__state--ready { background: rgba(245, 158, 11, 0.95); color: #422006; animation: streak7-popup-ready 1.4s ease-in-out infinite; } @keyframes streak7-popup-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); } } .streak7-popup__daynum { font-size: 0.726rem; font-weight: 700; color: rgba(226, 232, 240, 0.8); letter-spacing: 0.01em; line-height: 1; } .streak7-popup__cell.is-today .streak7-popup__daynum { color: #fbbf24; } .streak7-popup__cta-block { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .streak7-popup__cta-preview { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.012rem; color: rgba(226, 232, 240, 0.92); font-weight: 600; } .streak7-popup__cta-emoji { font-size: 1.43rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } .streak7-popup__claim { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.58); background: linear-gradient(135deg, rgba(250, 192, 50, 0.95) 0%, rgba(217, 119, 6, 0.95) 100%); color: #1a1206; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.42), inset 0 1px 0 rgba(255, 240, 200, 0.55); transition: transform 180ms ease, box-shadow 180ms ease; position: relative; overflow: hidden; } .streak7-popup__claim:hover { transform: translateY(-1px); } .streak7-popup__claim:active { transform: translateY(0); } .streak7-popup__claim:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .streak7-popup__claim.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: streak7-popup-shimmer 1.2s linear infinite; } @keyframes streak7-popup-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .streak7-popup__claim-icon { font-size: 1.21rem; } .streak7-popup__later { background: transparent; border: none; color: rgba(148, 163, 184, 0.7); font-size: 0.935rem; cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(148, 163, 184, 0.4); transition: color 180ms ease; } .streak7-popup__later:hover { color: rgba(226, 232, 240, 0.95); } .streak7-popup__reset { text-align: center; font-size: 0.858rem; color: rgba(148, 163, 184, 0.78); } .streak7-popup__reset [data-streak7-popup-countdown] { font-variant-numeric: tabular-nums; color: rgba(34, 211, 238, 0.95); font-weight: 600; margin-left: 4px; } /* Success state ----------------------------------------------------------- */ .streak7-popup__card--success { text-align: center; padding: 36px 28px 28px; background: radial-gradient(140% 110% at 50% 0%, rgba(245, 158, 11, 0.25), transparent 55%), linear-gradient(180deg, rgba(20, 24, 50, 0.96) 0%, rgba(10, 14, 32, 0.98) 100%); border-color: rgba(245, 158, 11, 0.5); } .streak7-popup__success-icon { font-size: 4.4rem; margin-bottom: 12px; display: inline-block; filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.55)); animation: streak7-popup-success-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes streak7-popup-success-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } } .streak7-popup__success-title { margin: 0 0 8px; font-size: 1.65rem; font-weight: 800; color: #fbbf24; letter-spacing: 0.04em; } .streak7-popup__success-reward { margin: 0 0 6px; font-size: 1.155rem; color: rgba(248, 250, 252, 0.95); font-weight: 700; } .streak7-popup__success-cycle { margin: 0 0 16px; font-size: 1.012rem; color: rgba(34, 211, 238, 0.92); } .streak7-popup__success-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; } .streak7-popup__success-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.55); background: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.1) 100%); color: rgba(34, 211, 238, 0.95); font-weight: 700; font-size: 1.045rem; text-decoration: none; transition: background 180ms ease; } .streak7-popup__success-btn:hover { background: rgba(34, 211, 238, 0.28); } .streak7-popup__success-dismiss { background: transparent; border: none; color: rgba(148, 163, 184, 0.72); font-size: 0.924rem; cursor: pointer; padding: 4px; } .streak7-popup__success-dismiss:hover { color: rgba(226, 232, 240, 0.95); } /* Success burst confetti — 8 sparkles fan out */ .streak7-popup__success-burst { position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; } .streak7-popup__success-burst span { position: absolute; top: 60px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #fbbf24, #f97316); opacity: 0; animation: streak7-popup-burst 1.2s ease-out forwards; } .streak7-popup__success-burst span:nth-child(1) { --angle: 0deg; animation-delay: 0.05s; } .streak7-popup__success-burst span:nth-child(2) { --angle: 45deg; animation-delay: 0.10s; background: linear-gradient(135deg, #22d3ee, #0ea5e9); } .streak7-popup__success-burst span:nth-child(3) { --angle: 90deg; animation-delay: 0.15s; } .streak7-popup__success-burst span:nth-child(4) { --angle: 135deg; animation-delay: 0.20s; background: linear-gradient(135deg, #a855f7, #7c3aed); } .streak7-popup__success-burst span:nth-child(5) { --angle: 180deg; animation-delay: 0.05s; } .streak7-popup__success-burst span:nth-child(6) { --angle: 225deg; animation-delay: 0.12s; background: linear-gradient(135deg, #22d3ee, #0ea5e9); } .streak7-popup__success-burst span:nth-child(7) { --angle: 270deg; animation-delay: 0.18s; } .streak7-popup__success-burst span:nth-child(8) { --angle: 315deg; animation-delay: 0.08s; background: linear-gradient(135deg, #a855f7, #7c3aed); } @keyframes streak7-popup-burst { 0% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(calc(-50% + cos(var(--angle)) * 120px), calc(-50% + sin(var(--angle)) * 120px)); } } /* Narrow viewport tuning */ @media (max-width: 480px) { .streak7-popup__card { padding: 22px 18px 18px; border-radius: 20px; } .streak7-popup__title { font-size: 1.32rem; } .streak7-popup__grid { gap: 4px; } .streak7-popup__cell { padding: 8px 2px; min-height: 70px; } .streak7-popup__orb-wrap { width: 38px; height: 38px; } .streak7-popup__reward { font-size: 0.935rem; } .streak7-popup__daynum { font-size: 0.66rem; } .streak7-popup__claim { padding: 12px 20px; font-size: 1.034rem; } } /* ============================================================================= * 46b-customer-login-polish.css * R399 (2026-05-13 loving-archimedes) — Customer login page UIUX 全套升級 * * User mandate: 「優化登入頁面的UIUX 背景什麼的」 * * 設計方向: 對齊 R374-R397 lord-throne / yifan UI 海洋主題 — cinematic 海底 * 全景 BG + glassmorphism auth-card + Cinzel serif title + cyan glow form + * coral-cyan gradient button + 海洋系 social-login-btn. * * Scope: 只 affect .customer-login-page body. 不動 admin login (login.html). * * 結構: * 1. Body BG — cinematic ocean (R399 sea-throne 同款風格) * 2. Auth card — glassmorphism + gradient border * 3. Logo + title — Cinzel serif 皇室字型 * 4. Tabs — cyan-coral active state * 5. Form inputs — cyan focus ring * 6. Primary button — gradient + glow * 7. Social login buttons — keep brand color + add cyan accent * 8. Animation — subtle 上升 bubbles * ============================================================================= */ /* ---------- 1. Body background (cinematic ocean) ---------- * R402 (loving-archimedes 2026-05-13): R401 沒用 !important → galaxy-theme.css * 的 body.galaxy { background: ... !important } 把我新加的 cinematic BG 蓋過去. * 結果用戶看 /customer-login 是舊紫色 galaxy nebula, 不是新海洋 bg. * 加 !important 鎖死覆寫. 也加 background-size/position 配合 (galaxy-theme 4 個 * !important properties 都要全套覆寫). */ body.galaxy:has(.customer-login-page), body.galaxy.customer-login-body, body:has(main.customer-login-page) { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(2, 8, 22, 0.35) 0%, rgba(2, 8, 22, 0.7) 60%, rgba(2, 8, 22, 0.9) 100%), linear-gradient(180deg, rgba(2, 8, 22, 0.55) 0%, rgba(5, 15, 38, 0.75) 100%), url('/assets/login/login-bg-r399-1024.webp') center center / cover no-repeat scroll, linear-gradient(180deg, #050a1c 0%, #0a1a2e 100%) !important; background-attachment: scroll, scroll, scroll, scroll !important; background-size: auto, auto, cover, auto !important; background-position: center, center, center, center !important; /* R405 (loving-archimedes 2026-05-13): iOS Safari URL bar 收合會讓 100vh * 超出可視高度. 用 100dvh (dynamic viewport, iOS 15.4+ / Chrome 108+) 配合 * 100vh fallback 老 browser. */ min-height: 100vh; min-height: 100dvh; } /* Smaller bg image on mobile to save bandwidth — fallback css-only handle */ @media (max-width: 480px) { body.galaxy:has(.customer-login-page), body.galaxy.customer-login-body, body:has(main.customer-login-page) { background: radial-gradient(ellipse 80% 50% at 50% 45%, rgba(2, 8, 22, 0.45) 0%, rgba(2, 8, 22, 0.85) 70%, rgba(2, 8, 22, 0.95) 100%), url('/assets/login/login-bg-r399-768.webp') center center / cover no-repeat scroll, linear-gradient(180deg, #050a1c 0%, #0a1a2e 100%) !important; background-attachment: scroll, scroll, scroll !important; background-size: auto, cover, auto !important; background-position: center, center, center !important; } } /* Hide existing decorative .bg-orb elements on login page (we use bg image now) * R402: 加 customer-login-body fallback 給 iOS Safari < 16.4 (沒 :has()). */ body:has(.customer-login-page) .bg-orb, body.customer-login-body .bg-orb { display: none; } /* ---------- 2. Auth card glassmorphism + ornate frame ---------- */ .customer-login-page .auth-card, .customer-login-page .auth-card-wide { /* Glassmorphism — translucent navy with cyan tint */ background: linear-gradient(180deg, rgba(8, 26, 50, 0.72) 0%, rgba(2, 10, 25, 0.85) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); /* Multi-layer cyan/coral ornate frame (R375 lord-throne 同款 9 層 box-shadow) */ border: 2px solid transparent; background-image: linear-gradient(180deg, rgba(8, 26, 50, 0.72) 0%, rgba(2, 10, 25, 0.85) 100%), linear-gradient(135deg, #22d3ee 0%, #7be5ff 25%, #f87171 50%, #7be5ff 75%, #22d3ee 100%); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(124, 231, 255, 0.45), inset 0 0 0 3px rgba(248, 113, 113, 0.06), inset 0 0 60px rgba(124, 231, 255, 0.08), 0 0 0 1px rgba(124, 231, 255, 0.28), 0 0 0 4px rgba(0, 30, 50, 0.5), 0 0 0 5px rgba(190, 240, 255, 0.12), 0 0 40px -8px rgba(124, 231, 255, 0.45), 0 0 80px -20px rgba(248, 113, 113, 0.2), 0 28px 64px rgba(2, 6, 14, 0.6); padding: 36px 32px; position: relative; overflow: visible; } /* ---------- 3. Logo polish ---------- */ .customer-login-page .auth-card .logo { margin-bottom: 6px; } .customer-login-page .auth-card .logo img { height: 56px !important; filter: drop-shadow(0 0 14px rgba(124, 231, 255, 0.6)) drop-shadow(0 4px 8px rgba(2, 8, 22, 0.6)); } /* ---------- 4. Title — Cinzel + Noto Serif TC gradient ---------- */ .customer-login-page .auth-card h1 { font-family: "Cinzel", "Noto Serif TC", "PingFang TC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, serif; font-weight: 700; font-size: clamp(26.4px, 3vw, 35.2px); letter-spacing: 0.06em; background: linear-gradient(135deg, #ffffff 0%, #d6f8ff 40%, #7be5ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(124, 231, 255, 0.55)) drop-shadow(0 0 36px rgba(248, 113, 113, 0.2)) drop-shadow(0 2px 6px rgba(2, 8, 18, 0.55)); text-align: center; margin: 8px 0 4px; } .customer-login-page .auth-card #authIntro { color: rgba(214, 248, 255, 0.7); font-size: 14.9px; line-height: 1.6; text-align: center; margin: 0 0 18px; } /* ---------- 5. Auth tabs ---------- */ .customer-login-page .auth-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; border-bottom: 1px solid rgba(124, 231, 255, 0.15); padding-bottom: 14px; } .customer-login-page .auth-tab { flex: 1; border: 1px solid rgba(124, 231, 255, 0.25); background: rgba(2, 12, 28, 0.5); color: rgba(214, 248, 255, 0.6); padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 15.4px; letter-spacing: 0.04em; transition: all 0.2s ease; } .customer-login-page .auth-tab:hover { border-color: rgba(124, 231, 255, 0.55); color: rgba(214, 248, 255, 0.9); } .customer-login-page .auth-tab.is-active, .customer-login-page .auth-tab[aria-selected="true"] { border-color: rgba(124, 231, 255, 0.85); background: linear-gradient(135deg, rgba(34, 211, 238, 0.25) 0%, rgba(248, 113, 113, 0.15) 100%); color: #d6f8ff; box-shadow: 0 0 14px rgba(124, 231, 255, 0.35), inset 0 1px 0 rgba(190, 240, 255, 0.2); } /* ---------- 6. Form inputs — cyan focus ring ---------- */ .customer-login-page .admin-form label { display: grid; gap: 6px; color: rgba(214, 248, 255, 0.85); font-size: 14.3px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 14px; } .customer-login-page .admin-form input[type="text"], .customer-login-page .admin-form input[type="password"], .customer-login-page .admin-form input[type="tel"], .customer-login-page .admin-form input[type="email"] { width: 100%; padding: 12px 14px; background: rgba(2, 12, 28, 0.65); border: 1px solid rgba(124, 231, 255, 0.3); border-radius: 10px; color: #d6f8ff; font-size: 16.5px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .customer-login-page .admin-form input::placeholder { color: rgba(123, 229, 255, 0.4); } .customer-login-page .admin-form input:focus, .customer-login-page .admin-form input:focus-visible { outline: none; border-color: rgba(124, 231, 255, 0.9); background: rgba(2, 12, 28, 0.85); box-shadow: 0 0 0 3px rgba(124, 231, 255, 0.18), 0 0 14px rgba(124, 231, 255, 0.35), inset 0 1px 0 rgba(190, 240, 255, 0.1); } /* R404 (loving-archimedes 2026-05-13): browser autofill (Chrome / Safari) * 預設給 input 黃/白 BG, 破壞 R401 深 navy + cyan input 設計. * 用 inset box-shadow 蓋住 autofill 黃色 BG, text-fill-color 設 cyan. * 12s transition 延遲讓 autofill 動畫穩定後才套色 (Chrome 12s 改色 trick). */ .customer-login-page .admin-form input:-webkit-autofill, .customer-login-page .admin-form input:-webkit-autofill:hover, .customer-login-page .admin-form input:-webkit-autofill:focus, .customer-login-page .admin-form input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px rgba(2, 12, 28, 0.92) inset !important; box-shadow: 0 0 0 1000px rgba(2, 12, 28, 0.92) inset !important; -webkit-text-fill-color: #d6f8ff !important; caret-color: #d6f8ff; border-color: rgba(124, 231, 255, 0.5) !important; transition: background-color 12s ease-in-out 0s, color 12s ease-in-out 0s; } .customer-login-page .admin-form input:-webkit-autofill:focus, .customer-login-page .admin-form input:-webkit-autofill:focus-visible { -webkit-box-shadow: 0 0 0 1000px rgba(2, 12, 28, 0.92) inset, 0 0 0 3px rgba(124, 231, 255, 0.22) !important; box-shadow: 0 0 0 1000px rgba(2, 12, 28, 0.92) inset, 0 0 0 3px rgba(124, 231, 255, 0.22) !important; border-color: rgba(124, 231, 255, 0.9) !important; } .customer-login-page .password-field { position: relative; } .customer-login-page .password-field input { padding-right: 44px; } .customer-login-page .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; background: transparent; border: 0; cursor: pointer; opacity: 0.5; transition: opacity 0.15s; } .customer-login-page .password-toggle:hover { opacity: 1; } .customer-login-page .password-toggle::before { content: "👁"; font-size: 19.8px; } .customer-login-page .password-toggle[aria-pressed="true"]::before { content: "👁‍🗨"; } /* ---------- 7. Primary submit button — gradient + glow ---------- */ .customer-login-page .form-actions { margin-top: 8px; } .customer-login-page .form-actions .btn.primary, .customer-login-page button.btn.primary { width: 100%; padding: 14px 20px; background: linear-gradient(135deg, #22d3ee 0%, #7be5ff 40%, #f87171 100%); border: 0; border-radius: 12px; color: #051018; font-weight: 800; font-size: 17.1px; letter-spacing: 0.08em; cursor: pointer; font-family: "Cinzel", "Noto Serif TC", inherit; position: relative; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; box-shadow: 0 0 22px rgba(124, 231, 255, 0.45), 0 0 40px -8px rgba(248, 113, 113, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(2, 8, 22, 0.2); } .customer-login-page .form-actions .btn.primary:hover, .customer-login-page button.btn.primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 28px rgba(124, 231, 255, 0.65), 0 0 56px -6px rgba(248, 113, 113, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(2, 8, 22, 0.2); } .customer-login-page .form-actions .btn.primary:active, .customer-login-page button.btn.primary:active { transform: translateY(0); filter: brightness(0.95); } .customer-login-page .form-actions .btn.ghost, .customer-login-page button.btn.ghost { width: 100%; padding: 12px 20px; background: rgba(2, 12, 28, 0.55); border: 1px solid rgba(124, 231, 255, 0.4); border-radius: 12px; color: rgba(214, 248, 255, 0.85); font-weight: 600; font-size: 15.4px; cursor: pointer; transition: all 0.15s; } .customer-login-page .form-actions .btn.ghost:hover, .customer-login-page button.btn.ghost:hover { background: rgba(2, 12, 28, 0.75); border-color: rgba(124, 231, 255, 0.7); color: #d6f8ff; } .customer-login-page .form-hint { color: rgba(214, 248, 255, 0.55); font-size: 13.8px; text-align: center; margin: 10px 0 0; } .customer-login-page .form-hint .link-btn { background: transparent; border: 0; color: #7be5ff; cursor: pointer; font-weight: 600; text-decoration: underline; font-size: inherit; padding: 0 4px; } .customer-login-page .form-hint .link-btn:hover { color: #d6f8ff; } /* ============================================================================= * R432 (2026-05-13 loving-archimedes) — Login UIUX 第 2 輪 polish * * User: 「要不要回去更新登入頁面的UIUX了」 * * 3 個高 ROI 改進: * A. Auth-card 進場動畫 — page load fade + slide-up * B. Submit button :disabled loading 視覺 (灰階 + cyan spinner) * C. Form switch fade (登入↔註冊↔重設 切換動畫) * ============================================================================= */ /* ---------- A. Auth card 進場動畫 ---------- */ @keyframes login-card-enter { 0% { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(8px); } 60% { filter: blur(2px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } .customer-login-page .auth-card, .customer-login-page .auth-card-wide { animation: login-card-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } @media (prefers-reduced-motion: reduce) { .customer-login-page .auth-card, .customer-login-page .auth-card-wide { animation: none; } } /* ---------- B. Submit button loading state (visual cue) ---------- */ .customer-login-page .form-actions .btn.primary:disabled, .customer-login-page button.btn.primary:disabled, .customer-login-page .form-actions .btn.primary[disabled], .customer-login-page button.btn.primary[disabled] { cursor: wait; position: relative; color: rgba(5, 16, 24, 0.7) !important; filter: brightness(0.85); transform: none !important; pointer-events: none; } .customer-login-page .form-actions .btn.primary:disabled::after, .customer-login-page button.btn.primary:disabled::after, .customer-login-page .form-actions .btn.primary[disabled]::after, .customer-login-page button.btn.primary[disabled]::after { content: ""; position: absolute; top: 50%; right: 14px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid rgba(5, 16, 24, 0.25); border-top-color: #051018; animation: login-btn-spin 0.7s linear infinite; pointer-events: none; } @keyframes login-btn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .customer-login-page .form-actions .btn.primary:disabled::after, .customer-login-page button.btn.primary:disabled::after { animation: none; border: 2px solid #051018; border-top-color: rgba(5, 16, 24, 0.25); } } /* ---------- C. Form switch fade transition ---------- */ /* 不能單純 display:none → block transition (沒 intermediate state). * 用 will-change + opacity/transform + 短 delay 處理. */ .customer-login-page .admin-form, .customer-login-page .auth-social-section { transition: opacity 0.25s ease-out, transform 0.25s ease-out; } .customer-login-page .admin-form:not(.is-hidden):not([hidden]) { opacity: 1; transform: translateY(0); /* fade-in only, no slide visible (display:none → block is instant) */ animation: login-form-fadein 0.32s ease-out both; } @keyframes login-form-fadein { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .customer-login-page .admin-form:not(.is-hidden):not([hidden]) { animation: none; } } /* R408 (loving-archimedes 2026-05-13): R401 兩個 layout BUG fix — * registerForm / resetForm 用 `.code-row` (grid 1fr auto) 排「驗證碼 input + 發送按鈕」. * * BUG A: R401 `.customer-login-page button.btn.ghost { width: 100% }` 過於 generic * → code-row 內「發送驗證碼」button 被拉滿, 破壞 grid auto col 排版. * FIX: width: auto + 較小 padding, white-space: nowrap 防文字斷行. * * BUG B: R401 `.admin-form label { margin-bottom: 14px }` 套到 code-row 內的 label * → 跟旁邊 grid sibling button 的底線 (align-items: end) 對齊歪掉 14px. * FIX: 去掉 margin-bottom on code-row 內的 label. */ .customer-login-page .code-row .btn.ghost { width: auto; padding: 10px 14px; font-size: 14.3px; white-space: nowrap; align-self: end; } .customer-login-page .code-row label { margin-bottom: 0; } /* ============================================================================= * R436 (2026-05-13 loving-archimedes) — Login UIUX 深度優化第 3 輪 * * User: 「深度優化登入意麵的UIUX」 * * 5 個大改進: * A. 4 角 ornate gem 裝飾 (reuse R366 corner-gem PNG) * B. Auth tabs 滑動底線指示器 (sliding underline) * C. Custom SVG 眼睛 toggle (CSS-drawn, 取代 👁 emoji) * D. Input field 前綴 icon (phone/password/code emoji) * E. Error message shake animation * ============================================================================= */ /* ---------- A. Auth card 4 角 ornate gem 裝飾 (R375 lord-throne 同款 PNG) ---------- */ .customer-login-page .auth-card, .customer-login-page .auth-card-wide { position: relative; } .customer-login-page .auth-card::before, .customer-login-page .auth-card::after, .customer-login-page .auth-card-wide::before, .customer-login-page .auth-card-wide::after { content: ""; position: absolute; width: 48px; height: 48px; background-image: url("/assets/lord-throne/corner-gem-r366-256.webp"); background-repeat: no-repeat; background-size: contain; background-position: top left; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 10px rgba(124, 231, 255, 0.55)) drop-shadow(0 0 4px rgba(248, 113, 113, 0.25)); opacity: 0.85; } /* top-left */ .customer-login-page .auth-card::before, .customer-login-page .auth-card-wide::before { top: 0; left: 0; transform: rotate(0deg); } /* top-right */ .customer-login-page .auth-card::after, .customer-login-page .auth-card-wide::after { top: 0; right: 0; transform: rotate(90deg); } /* R437 (loving-archimedes 2026-05-13): bottom-left + bottom-right corners * via HTML . 補齊 4 corner gem 視覺完整. */ .customer-login-page .auth-card .auth-card__corner-bl, .customer-login-page .auth-card .auth-card__corner-br, .customer-login-page .auth-card-wide .auth-card__corner-bl, .customer-login-page .auth-card-wide .auth-card__corner-br { position: absolute; width: 48px; height: 48px; background-image: url("/assets/lord-throne/corner-gem-r366-256.webp"); background-repeat: no-repeat; background-size: contain; background-position: top left; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 10px rgba(124, 231, 255, 0.55)) drop-shadow(0 0 4px rgba(248, 113, 113, 0.25)); opacity: 0.85; } .customer-login-page .auth-card .auth-card__corner-bl, .customer-login-page .auth-card-wide .auth-card__corner-bl { bottom: 0; left: 0; transform: rotate(270deg); } .customer-login-page .auth-card .auth-card__corner-br, .customer-login-page .auth-card-wide .auth-card__corner-br { bottom: 0; right: 0; transform: rotate(180deg); } /* ---------- B. Auth tabs sliding underline indicator ---------- */ .customer-login-page .auth-tabs { position: relative; } .customer-login-page .auth-tabs::after { content: ""; position: absolute; bottom: 4px; left: 0; width: 50%; height: 2px; background: linear-gradient(90deg, transparent 10%, #22d3ee 30%, #f87171 50%, #22d3ee 70%, transparent 90%); box-shadow: 0 0 8px rgba(124, 231, 255, 0.6); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; border-radius: 2px; } /* 註冊 tab active → indicator slides right */ .customer-login-page .auth-tabs:has(.auth-tab[data-auth-view="register"].is-active)::after, .customer-login-page .auth-tabs:has(.auth-tab[data-auth-view="register"][aria-selected="true"])::after { transform: translateX(100%); } @media (prefers-reduced-motion: reduce) { .customer-login-page .auth-tabs::after { transition: none; } } /* ---------- C. Custom CSS eye toggle (取代 👁 emoji 跨平台不一致) ---------- */ .customer-login-page .password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: transparent; border: 0; cursor: pointer; opacity: 0.55; transition: opacity 0.15s; } .customer-login-page .password-toggle:hover { opacity: 1; } .customer-login-page .password-toggle::before { content: "" !important; position: absolute; inset: 8px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; background-position: center; } .customer-login-page .password-toggle[aria-pressed="true"]::before { background-image: url("data:image/svg+xml;utf8,"); } /* ---------- D. Input field 前綴 icon (phone/password/code) ---------- */ /* CSS only — 用 label 內 input 同層 ::before, 但 label 是 grid 不好定位. * 改 attribute-based padding-left + background-image 套到 input. */ .customer-login-page .admin-form input[name="account"], .customer-login-page .admin-form input[name="phone"] { padding-left: 42px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; } .customer-login-page .admin-form input[name="password"], .customer-login-page .admin-form input[name="confirmPassword"] { padding-left: 42px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; } .customer-login-page .admin-form input[name="code"] { padding-left: 42px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 12px center; background-size: 18px 18px; } /* Focus state — icon 變亮 */ .customer-login-page .admin-form input:focus { background-image: var(--focus-icon-bg, none); } .customer-login-page .admin-form input[name="account"]:focus, .customer-login-page .admin-form input[name="phone"]:focus { background-image: url("data:image/svg+xml;utf8,"); } .customer-login-page .admin-form input[name="password"]:focus, .customer-login-page .admin-form input[name="confirmPassword"]:focus { background-image: url("data:image/svg+xml;utf8,"); } /* ---------- E. Error message shake animation ---------- */ @keyframes login-error-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .customer-login-page .form-message:not(:empty) { animation: login-error-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @media (prefers-reduced-motion: reduce) { .customer-login-page .form-message:not(:empty) { animation: none; } } /* Real-time validation visual hint: input :valid green border when phone/code/password format OK */ .customer-login-page .admin-form input:not(:placeholder-shown):valid { border-color: rgba(74, 222, 128, 0.45); } .customer-login-page .admin-form input:not(:placeholder-shown):invalid { border-color: rgba(244, 114, 114, 0.45); } /* R437: :focus 比 :valid/:invalid 後 declared, 但同 specificity 我希望 focus 仍贏 * (focused 時用戶在編輯, 顯示 cyan focus glow 比 valid 綠邊更重要). * 提高 :focus border 為 !important 強制贏過上方 :valid/:invalid border-color. */ .customer-login-page .admin-form input:focus, .customer-login-page .admin-form input:focus-visible { border-color: rgba(124, 231, 255, 0.9) !important; } /* R437: scroll-margin 給 mobile keyboard 開時 input 不會被遮住. * iOS Safari 自動 scrollIntoView 但常常剛好 input 緊貼 keyboard 上緣. * 80px 給足 breathing room (約 1 個 input 高度). */ .customer-login-page .admin-form input { scroll-margin-top: 80px; scroll-margin-bottom: 80px; } /* ============================================================================= * R444 (2026-05-13 loving-archimedes) — 密碼規則 strength hint * * register / reset password input 加 pattern=^(?=.*[a-zA-Z])(?=.*\d).{6,}$ * 配合 視覺顯示規則 + 即時 valid/invalid 顏色. * * 狀態: * empty (placeholder-shown) → gray 預設訊息 * typed valid (符合 pattern) → green ✓ + 訊息 * typed invalid → red ✗ + 訊息 * ============================================================================= */ .customer-login-page .password-strength-hint { display: block; margin-top: 6px; padding: 6px 10px; font-size: 12.7px; letter-spacing: 0.03em; color: rgba(123, 229, 255, 0.55); background: rgba(2, 12, 28, 0.4); border-radius: 6px; border-left: 2px solid rgba(124, 231, 255, 0.3); transition: color 0.2s, background 0.2s, border-color 0.2s; } /* CSS sibling selector — input + button(toggle) + .password-strength-hint NOT siblings * (hint outside .password-field wrapper). Use parent label's :has() to detect input state. * iOS 16.4+ / Chrome 105+ for :has(). Older browsers default gray. */ .customer-login-page label:has(.password-field input[name="password"]:valid) .password-strength-hint, .customer-login-page label:has(.password-field input[name="password"]:not(:placeholder-shown):valid) .password-strength-hint { color: #4ade80; background: rgba(74, 222, 128, 0.08); border-left-color: rgba(74, 222, 128, 0.6); } .customer-login-page label:has(.password-field input[name="password"]:not(:placeholder-shown):invalid) .password-strength-hint { color: #fda4af; background: rgba(244, 114, 114, 0.08); border-left-color: rgba(244, 114, 114, 0.55); } /* Add checkmark / cross icon via ::before */ .customer-login-page .password-strength-hint::before { content: "ℹ "; font-weight: 700; opacity: 0.9; } .customer-login-page label:has(.password-field input[name="password"]:not(:placeholder-shown):valid) .password-strength-hint::before { content: "✓ "; color: #4ade80; } .customer-login-page label:has(.password-field input[name="password"]:not(:placeholder-shown):invalid) .password-strength-hint::before { content: "✗ "; color: #fda4af; } /* ============================================================================= * R451 (2026-05-13 loving-archimedes) — confirmPassword 即時 match indicator * * 配套 customer-login.js setCustomValidity API — confirmPassword 跟 password * 不一致時 mark :invalid → CSS 觸發紅色 hint + ✗ icon. * ============================================================================= */ .customer-login-page .password-match-hint { display: block; margin-top: 6px; padding: 6px 10px; font-size: 12.7px; letter-spacing: 0.03em; color: rgba(123, 229, 255, 0.55); background: rgba(2, 12, 28, 0.4); border-radius: 6px; border-left: 2px solid rgba(124, 231, 255, 0.3); transition: color 0.2s, background 0.2s, border-color 0.2s; } .customer-login-page .password-match-hint::before { content: "ℹ "; font-weight: 700; opacity: 0.9; } /* Valid (password matches) → green */ .customer-login-page label:has(.password-field input[name="confirmPassword"]:not(:placeholder-shown):valid) .password-match-hint { color: #4ade80; background: rgba(74, 222, 128, 0.08); border-left-color: rgba(74, 222, 128, 0.6); } .customer-login-page label:has(.password-field input[name="confirmPassword"]:not(:placeholder-shown):valid) .password-match-hint::before { content: "✓ "; color: #4ade80; } /* Invalid (mismatch, JS setCustomValidity 觸發) → red */ .customer-login-page label:has(.password-field input[name="confirmPassword"]:not(:placeholder-shown):invalid) .password-match-hint { color: #fda4af; background: rgba(244, 114, 114, 0.08); border-left-color: rgba(244, 114, 114, 0.55); } .customer-login-page label:has(.password-field input[name="confirmPassword"]:not(:placeholder-shown):invalid) .password-match-hint::before { content: "✗ "; color: #fda4af; } /* Override valid text to «密碼一致» / invalid to «密碼不一致» */ .customer-login-page label:has(.password-field input[name="confirmPassword"]:not(:placeholder-shown):valid) .password-match-hint { visibility: hidden; height: 0; margin: 0; padding: 0; border: 0; } /* Hide visually when valid (no need to remind user when match) — saves vertical space */ .customer-login-page .form-message { margin: 8px 0 0; padding: 10px 12px; font-size: 14.3px; color: #fda4af; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.3); border-radius: 8px; display: none; } .customer-login-page .form-message:not(:empty) { display: block; } /* ---------- 8. Social login buttons ---------- */ .customer-login-page .auth-social-section { margin-bottom: 16px; } .customer-login-page .social-login-btn { width: 100%; padding: 12px 16px; border-radius: 10px; border: 0; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; } .customer-login-page .social-login-btn--line { background: linear-gradient(135deg, #06c755 0%, #04a847 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(6, 199, 85, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .customer-login-page .social-login-btn--facebook { background: linear-gradient(135deg, #1877f2 0%, #145dbf 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .customer-login-page .social-login-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .customer-login-page .auth-divider { position: relative; text-align: center; margin: 14px 0; color: rgba(123, 229, 255, 0.55); font-size: 13.2px; letter-spacing: 0.1em; } .customer-login-page .auth-divider::before, .customer-login-page .auth-divider::after { content: ""; position: absolute; top: 50%; width: 30%; height: 1px; background: linear-gradient(to right, transparent, rgba(124, 231, 255, 0.25), transparent); } .customer-login-page .auth-divider::before { left: 0; } .customer-login-page .auth-divider::after { right: 0; } /* ---------- 9. Animated rising bubbles (subtle) ---------- */ .customer-login-page::before, .customer-login-page::after { content: ""; position: fixed; bottom: -80px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(214, 248, 255, 0.8), rgba(124, 231, 255, 0.2)); pointer-events: none; z-index: 0; animation: login-bubble-rise 14s linear infinite; } .customer-login-page::before { left: 18%; animation-delay: 0s; } .customer-login-page::after { right: 22%; animation-delay: 6s; width: 6px; height: 6px; } @keyframes login-bubble-rise { 0% { bottom: -10px; opacity: 0; transform: translateX(0); } 10% { opacity: 0.6; } 50% { transform: translateX(20px); } 90% { opacity: 0.6; } 100% { bottom: 102vh; opacity: 0; transform: translateX(-10px); } } @media (prefers-reduced-motion: reduce) { .customer-login-page::before, .customer-login-page::after { animation: none; display: none; } } /* ---------- 10. Mobile responsive ---------- */ @media (max-width: 480px) { .customer-login-page .auth-card, .customer-login-page .auth-card-wide { padding: 24px 20px; width: min(420px, 94vw); } .customer-login-page .auth-card h1 { font-size: 24.2px; } .customer-login-page .auth-card .logo img { height: 46px !important; } .customer-login-page .form-actions .btn.primary, .customer-login-page button.btn.primary { padding: 13px 18px; font-size: 16.5px; } } /* ---------- 11. Topbar 對比 (登入頁 topbar 透明化讓 bg 露出) * R402: 加 customer-login-body fallback 給 iOS Safari < 16.4 (沒 :has()). */ body:has(.customer-login-page) .topbar, body.customer-login-body .topbar { background: linear-gradient(180deg, rgba(2, 8, 22, 0.7) 0%, rgba(2, 8, 22, 0.35) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(124, 231, 255, 0.18); } /* * R501av angry-cartwright (2026-05-16, owner cross-scope auth): * 福利池頁面 redesign — 對齊 /m/me 高設計水準 (marine gradient + cyan glow + * gold accents). 之前 R501as 太樸素被 owner 反映「UIUX 怪怪的不夠好」. * * Design language (繼承自 /m/me + /index.html): * - Marine base: rgba(15, 30, 68) → rgba(5, 14, 38) 深海軍藍 * - Cyan accent: #67e8f9 / #22d3ee / rgba(103, 232, 249, 0.30) border * - Gold premium: linear-gradient(135deg, #fbbf24, #f59e0b) for VIP / hero badge * - Multi-layer radial gradients (corners + center) * - backdrop-filter blur(14px) saturate(140%) for glassmorphism * - text-shadow / drop-shadow glow on key elements * * SENTINEL: rewards-page-css-r501av * Scoped via body[data-layout-page="rewards"] / body[data-layout-page="m-rewards"] */ /* ============== Marine background layer (page-scoped) ============== */ body[data-layout-page="rewards"], body[data-layout-page="m-rewards"] { background: radial-gradient(circle at 20% 8%, rgba(103, 232, 249, 0.12), transparent 50%), radial-gradient(circle at 80% 92%, rgba(251, 191, 36, 0.08), transparent 55%), radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.04), transparent 70%), linear-gradient(180deg, #050a1c 0%, #0a1228 50%, #050a1c 100%); min-height: 100vh; min-height: 100svh; } /* Subtle godrays */ body[data-layout-page="rewards"]::before, body[data-layout-page="m-rewards"]::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(140deg, transparent 0%, rgba(103, 232, 249, 0.06) 35%, transparent 50%), linear-gradient(220deg, transparent 0%, rgba(34, 211, 238, 0.04) 45%, transparent 55%); opacity: 0.7; } /* Plankton particles (4 dots, slow drift) */ body[data-layout-page="rewards"]::after, body[data-layout-page="m-rewards"]::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(2px 2px at 18% 22%, rgba(103, 232, 249, 0.4), transparent), radial-gradient(1px 1px at 72% 38%, rgba(251, 191, 36, 0.35), transparent), radial-gradient(2px 2px at 42% 78%, rgba(103, 232, 249, 0.3), transparent), radial-gradient(1px 1px at 88% 62%, rgba(167, 243, 252, 0.4), transparent); background-size: 100% 100%; animation: rewards-plankton-drift 28s ease-in-out infinite; } @keyframes rewards-plankton-drift { 0%, 100% { transform: translate(0, 0); opacity: 0.7; } 50% { transform: translate(8px, -12px); opacity: 1; } } /* ============== Desktop /rewards ============== */ .rewards-page { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 24px 16px 80px; } /* R501aw: 拿掉 hero 大塊後 — 縮成小 login chip 在頂端 (僅在 user 未登入時顯示) */ .rewards-login-chip { display: inline-block; margin: 0 0 20px; padding: 8px 16px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); color: rgba(254, 240, 138, 0.92); font-size: 14.3px; } .rewards-login-chip a { color: #fde68a; font-weight: 700; text-decoration: underline; } /* ============== Hero — large with treasure chest + stats ============== */ .rewards-hero { position: relative; margin-bottom: 32px; padding: 36px 28px 32px; border-radius: 24px; background: radial-gradient(circle at 20% 10%, rgba(103, 232, 249, 0.22), transparent 55%), radial-gradient(circle at 85% 90%, rgba(251, 191, 36, 0.18), transparent 55%), linear-gradient(180deg, rgba(15, 30, 68, 0.92), rgba(10, 22, 51, 0.88)); border: 1px solid rgba(103, 232, 249, 0.32); box-shadow: 0 14px 40px rgba(5, 10, 28, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: hidden; } .rewards-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 50%, rgba(251, 191, 36, 0.1), transparent 40%); pointer-events: none; } .rewards-hero__content { position: relative; z-index: 1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .rewards-hero__icon { font-size: 61.6px; filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.55)); animation: rewards-chest-bob 3.2s ease-in-out infinite; } @keyframes rewards-chest-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } } .rewards-hero__text { flex: 1; min-width: 220px; } .rewards-hero__title { margin: 0 0 8px; font-size: clamp(30.8px, 4vw, 46.2px); font-weight: 900; letter-spacing: 0.04em; background: linear-gradient(135deg, #67e8f9 0%, #c4b5fd 35%, #fde68a 70%, #67e8f9 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 32px rgba(103, 232, 249, 0.45); animation: rewards-title-shimmer 6s ease-in-out infinite; } @keyframes rewards-title-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .rewards-hero__subtitle { margin: 0; color: rgba(226, 232, 240, 0.82); font-size: clamp(14.3px, 1.5vw, 17.6px); letter-spacing: 0.04em; } /* Stats bar */ .rewards-hero__stats { position: relative; z-index: 1; display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .rewards-stat { flex: 1; min-width: 140px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(8, 14, 32, 0.7), rgba(15, 30, 68, 0.55)); border: 1px solid rgba(103, 232, 249, 0.22); backdrop-filter: blur(8px); } .rewards-stat__label { display: block; font-size: 12.1px; color: rgba(165, 243, 252, 0.78); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; } .rewards-stat__value { display: block; font-size: 26.4px; font-weight: 900; color: #f1f5f9; font-family: "Space Grotesk", ui-monospace, monospace; } .rewards-stat__value--gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rewards-stat__value--cyan { background: linear-gradient(135deg, #67e8f9, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rewards-hero__hint { margin-top: 16px; padding: 10px 16px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); color: rgba(254, 240, 138, 0.92); font-size: 14.3px; display: inline-flex; align-items: center; gap: 8px; } .rewards-hero__hint a { color: #fde68a; font-weight: 700; text-decoration: underline; } /* ============== Grid + Cards ============== */ .rewards-grid-section { position: relative; z-index: 1; } .rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .rewards-grid[data-loading] { pointer-events: none; } .rewards-card { position: relative; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(103, 232, 249, 0.1), transparent 50%), linear-gradient(180deg, rgba(15, 30, 68, 0.88), rgba(8, 14, 32, 0.92)); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 12px 32px rgba(5, 10, 28, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease; } /* Available (可抽) — cyan glow + breathing */ .rewards-card.is-eligible { border-color: rgba(103, 232, 249, 0.45); box-shadow: 0 12px 32px rgba(5, 10, 28, 0.6), 0 0 24px rgba(34, 211, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); animation: rewards-card-breathe 3.6s ease-in-out infinite; } @keyframes rewards-card-breathe { 0%, 100% { box-shadow: 0 12px 32px rgba(5, 10, 28, 0.6), 0 0 24px rgba(34, 211, 238, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08); } 50% { box-shadow: 0 16px 40px rgba(5, 10, 28, 0.66), 0 0 36px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12); } } .rewards-card.is-eligible:hover { transform: translateY(-6px); border-color: rgba(103, 232, 249, 0.75); } /* Blocked (擋住) — muted + lock */ .rewards-card.is-blocked { opacity: 0.85; } .rewards-card.is-blocked .rewards-card__media { filter: grayscale(0.65) brightness(0.7); } .rewards-card__link { display: block; text-decoration: none; color: inherit; } .rewards-card.is-blocked .rewards-card__link { cursor: not-allowed; } .rewards-card__media { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.2), transparent 50%), linear-gradient(135deg, rgba(15, 30, 68, 0.95), rgba(8, 14, 32, 0.85)); overflow: hidden; transition: filter 0.3s ease; } .rewards-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .rewards-card.is-eligible:hover .rewards-card__image { transform: scale(1.04); } /* Hero badge — top-left */ .rewards-card__hero-badge { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c1917; font-size: 12.1px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.32); } /* Status overlay icon — center bottom on media */ .rewards-card__status-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; } .rewards-card__lock-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30.8px; background: rgba(15, 30, 68, 0.88); border: 2px solid rgba(148, 163, 184, 0.45); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .rewards-card.is-eligible .rewards-card__lock-icon { display: none; } .rewards-card__body { padding: 18px; position: relative; } .rewards-card__title { font-size: 19.8px; font-weight: 800; color: #f1f5f9; margin: 0 0 10px; line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .rewards-card__status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .rewards-card__badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-size: 13.2px; font-weight: 700; letter-spacing: 0.04em; } .rewards-card__badge--ok { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 211, 238, 0.18)); color: #86efac; border: 1px solid rgba(103, 232, 249, 0.45); box-shadow: 0 0 16px rgba(34, 197, 94, 0.22); } .rewards-card__badge--blocked { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.32); } .rewards-card__remaining { font-size: 13.2px; color: rgba(165, 243, 252, 0.82); font-family: "Space Grotesk", monospace; padding: 2px 8px; background: rgba(34, 211, 238, 0.1); border-radius: 6px; } .rewards-card__gates { list-style: none; margin: 0 0 14px; padding: 10px 12px; background: rgba(8, 14, 32, 0.45); border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.12); display: flex; flex-direction: column; gap: 5px; } .rewards-card__gate { display: flex; align-items: center; gap: 8px; font-size: 13.2px; color: rgba(203, 213, 225, 0.82); } .rewards-card__gate.is-passed { color: rgba(134, 239, 172, 0.95); } .rewards-card__gate.is-blocked { color: rgba(253, 164, 175, 0.85); } .rewards-card__gate-icon { font-weight: 800; font-size: 12.1px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .rewards-card__gate.is-passed .rewards-card__gate-icon { background: rgba(34, 197, 94, 0.22); color: #86efac; } .rewards-card__gate.is-blocked .rewards-card__gate-icon { background: rgba(220, 38, 38, 0.22); color: #fca5a5; } .rewards-card__reset { font-size: 13.2px; color: rgba(165, 243, 252, 0.78); margin: 0 0 12px; padding: 8px 12px; background: rgba(34, 211, 238, 0.1); border-radius: 8px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; } .rewards-card__reset::before { content: "⏱"; font-size: 15.4px; } /* CTA Button */ .rewards-card__cta { margin-top: 4px; } .rewards-card__cta-btn { display: block; width: 100%; padding: 12px 20px; border-radius: 12px; text-align: center; font-size: 15.4px; font-weight: 800; letter-spacing: 0.06em; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid; } .rewards-card__cta-btn--primary { background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #050a1c; border-color: rgba(103, 232, 249, 0.62); box-shadow: 0 8px 24px rgba(34, 211, 238, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.32); } .rewards-card__cta-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(34, 211, 238, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .rewards-card__cta-btn--blocked { background: rgba(15, 30, 68, 0.5); color: rgba(203, 213, 225, 0.6); border-color: rgba(148, 163, 184, 0.2); cursor: not-allowed; } /* Skeleton */ .rewards-card--skeleton .rewards-card__media, .rewards-card__title-skeleton, .rewards-card__gates-skeleton { background: linear-gradient( 90deg, rgba(103, 232, 249, 0.06) 0%, rgba(103, 232, 249, 0.14) 50%, rgba(103, 232, 249, 0.06) 100% ); background-size: 200% 100%; animation: rewards-shimmer 1.4s ease-in-out infinite; } .rewards-card__title-skeleton { height: 22px; margin-bottom: 10px; border-radius: 6px; } .rewards-card__gates-skeleton { height: 60px; border-radius: 8px; } @keyframes rewards-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Empty state */ .rewards-empty { text-align: center; padding: 80px 24px; border-radius: 24px; background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.08), transparent 60%), linear-gradient(180deg, rgba(15, 30, 68, 0.65), rgba(8, 14, 32, 0.7)); border: 1px dashed rgba(103, 232, 249, 0.3); } .rewards-empty__icon { font-size: 70.4px; margin-bottom: 16px; display: block; filter: drop-shadow(0 0 16px rgba(103, 232, 249, 0.45)); animation: rewards-chest-bob 3.2s ease-in-out infinite; } .rewards-empty p { margin: 0 0 24px; font-size: 17.6px; color: rgba(226, 232, 240, 0.82); } .rewards-error { text-align: center; padding: 40px 24px; color: rgba(253, 164, 175, 0.92); background: rgba(220, 38, 38, 0.08); border-radius: 16px; border: 1px solid rgba(220, 38, 38, 0.32); } /* ============== Mobile /m/rewards ============== */ .dp-rewards-page { position: relative; z-index: 1; padding: 12px 12px 96px; } /* R501aw: 手機 login chip (拿掉 hero 大塊後) */ .dp-rewards-login-chip { display: block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); color: rgba(254, 240, 138, 0.92); font-size: 13.2px; text-align: center; } .dp-rewards-login-chip a { color: #fde68a; font-weight: 700; text-decoration: underline; } .dp-rewards-hero { position: relative; margin-bottom: 16px; padding: 20px 18px; border-radius: 18px; background: radial-gradient(circle at 20% 10%, rgba(103, 232, 249, 0.2), transparent 60%), radial-gradient(circle at 85% 90%, rgba(251, 191, 36, 0.14), transparent 55%), linear-gradient(180deg, rgba(15, 30, 68, 0.92), rgba(10, 22, 51, 0.88)); border: 1px solid rgba(103, 232, 249, 0.3); box-shadow: 0 10px 28px rgba(5, 10, 28, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06); text-align: center; } .dp-rewards-hero__icon { font-size: 39.6px; display: inline-block; margin-bottom: 6px; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.55)); animation: rewards-chest-bob 3.2s ease-in-out infinite; } .dp-rewards-hero__title { margin: 0 0 4px; font-size: 24.2px; font-weight: 900; letter-spacing: 0.04em; background: linear-gradient(135deg, #67e8f9 0%, #fde68a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(103, 232, 249, 0.4); } .dp-rewards-hero__subtitle { color: rgba(226, 232, 240, 0.78); font-size: 13.2px; margin: 0; letter-spacing: 0.04em; } .dp-rewards-hero__hint { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.32); color: rgba(254, 240, 138, 0.92); font-size: 12.1px; margin-top: 10px; } .dp-rewards-hero__hint a { color: #fde68a; font-weight: 700; } .dp-rewards-stats { display: flex; gap: 8px; margin-top: 14px; } .dp-rewards-stat { flex: 1; padding: 8px 10px; border-radius: 10px; background: rgba(8, 14, 32, 0.6); border: 1px solid rgba(103, 232, 249, 0.22); } .dp-rewards-stat__label { display: block; font-size: 11px; color: rgba(165, 243, 252, 0.78); letter-spacing: 0.1em; margin-bottom: 2px; } .dp-rewards-stat__value { display: block; font-size: 19.8px; font-weight: 900; font-family: "Space Grotesk", monospace; } .dp-rewards-stat__value--cyan { background: linear-gradient(135deg, #67e8f9, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dp-rewards-stat__value--gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dp-rewards-list { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; } .dp-rewards-item { position: relative; display: flex; text-decoration: none; color: inherit; background: radial-gradient(circle at 0% 0%, rgba(103, 232, 249, 0.08), transparent 50%), linear-gradient(180deg, rgba(15, 30, 68, 0.9), rgba(8, 14, 32, 0.92)); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(5, 10, 28, 0.55); transition: transform 0.2s ease, border-color 0.2s ease; } .dp-rewards-item.is-eligible { border-color: rgba(103, 232, 249, 0.5); box-shadow: 0 8px 22px rgba(5, 10, 28, 0.55), 0 0 20px rgba(34, 211, 238, 0.18); } .dp-rewards-item.is-eligible:active { transform: scale(0.98); } .dp-rewards-item.is-blocked { opacity: 0.78; } .dp-rewards-item.is-blocked .dp-rewards-item__media { filter: grayscale(0.6) brightness(0.7); } .dp-rewards-item__media { position: relative; flex: 0 0 116px; aspect-ratio: 1 / 1; background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.2), transparent 60%), linear-gradient(135deg, rgba(15, 30, 68, 0.95), rgba(8, 14, 32, 0.85)); overflow: hidden; } .dp-rewards-item__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dp-rewards-item__hero-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c1917; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.45); } .dp-rewards-item__lock-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; } .dp-rewards-item.is-eligible .dp-rewards-item__lock-overlay { display: none; } .dp-rewards-item__lock-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19.8px; background: rgba(15, 30, 68, 0.88); border: 2px solid rgba(148, 163, 184, 0.45); backdrop-filter: blur(4px); } .dp-rewards-item__body { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dp-rewards-item__title { font-size: 16.5px; font-weight: 800; color: #f1f5f9; margin: 0; line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-rewards-item__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.1px; font-weight: 700; width: fit-content; } .dp-rewards-item__badge--ok { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 211, 238, 0.18)); color: #86efac; border: 1px solid rgba(103, 232, 249, 0.45); } .dp-rewards-item__badge--blocked { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.32); } .dp-rewards-item__gates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .dp-rewards-item__gate { font-size: 12.1px; color: rgba(203, 213, 225, 0.78); display: flex; align-items: center; gap: 4px; } .dp-rewards-item__gate.is-passed { color: rgba(134, 239, 172, 0.85); } .dp-rewards-item__gate.is-blocked { color: rgba(253, 164, 175, 0.82); } .dp-rewards-item__reset { font-size: 12.1px; color: rgba(165, 243, 252, 0.78); margin: 0; padding: 4px 8px; background: rgba(34, 211, 238, 0.08); border-radius: 6px; width: fit-content; } .dp-rewards-item--skeleton .dp-rewards-item__media, .dp-rewards-item__title-skeleton, .dp-rewards-item__gates-skeleton { background: linear-gradient( 90deg, rgba(103, 232, 249, 0.06) 0%, rgba(103, 232, 249, 0.14) 50%, rgba(103, 232, 249, 0.06) 100% ); background-size: 200% 100%; animation: rewards-shimmer 1.4s ease-in-out infinite; } .dp-rewards-item__title-skeleton { height: 16px; margin-bottom: 6px; border-radius: 4px; } .dp-rewards-item__gates-skeleton { height: 40px; border-radius: 6px; } .dp-rewards-empty { text-align: center; padding: 56px 16px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.08), transparent 60%), linear-gradient(180deg, rgba(15, 30, 68, 0.6), rgba(8, 14, 32, 0.7)); border: 1px dashed rgba(103, 232, 249, 0.3); } .dp-rewards-empty__icon { font-size: 52.8px; margin-bottom: 12px; display: block; filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.45)); } .dp-rewards-empty p { margin-bottom: 18px; font-size: 15.4px; color: rgba(226, 232, 240, 0.78); } .dp-rewards-error { text-align: center; padding: 28px 16px; color: rgba(253, 164, 175, 0.9); background: rgba(220, 38, 38, 0.08); border-radius: 12px; border: 1px solid rgba(220, 38, 38, 0.3); } /* Topbar title icon — only on /m/rewards */ body[data-layout-page="m-rewards"] .dp-topbar__title { background: linear-gradient(135deg, #67e8f9 0%, #fde68a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; letter-spacing: 0.04em; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { body[data-layout-page="rewards"]::after, body[data-layout-page="m-rewards"]::after, .rewards-hero__icon, .dp-rewards-hero__icon, .rewards-empty__icon, .rewards-hero__title, .rewards-card.is-eligible { animation: none !important; } } /* * R501bl angry-cartwright (2026-05-16, owner cross-scope auth): * Mobile thermal relief — 砍最重 3 個 GPU killer 在小螢幕. * * User report: 「高階手機也會極速發熱」 * * 原因深查: * - m/marine-theme.css 33 infinite animation + 16 backdrop-filter * - 90-item-public-redesign 31 infinite animation + 24 backdrop-filter * - 80h-homepage-abyssal.css 5 infinite + 18 backdrop-filter * - marine-home.css 24 infinite animation + 8 backdrop-filter * - 加上多處 mix-blend-mode * * 每個 backdrop-filter 都建一個 GPU compositing layer; iOS Safari 同時 * 處理 30+ blur layers + 70+ infinite animation = GPU 永不休息 → 發熱. * * CLAUDE.md skill mobile-lag-check 警告 bundle <500KB 前不該動 blur, 但 user * complaint 已 active. 中間方案: <= 720px 觸發 thermal relief. * * 桌機 (>720px) 保留全部視覺 (GPU 強, 不受影響). * * SENTINEL: mobile-thermal-relief-r501bl */ @media (max-width: 720px) { /* ======================================================================== * 1. backdrop-filter blur 全砍 — GPU compositing layer 大量殺 * 替代視覺: 仍有 semi-opaque 半透明 (rgba bg), 看起來像「玻璃」但無 blur * ======================================================================== */ *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ======================================================================== * 2. mix-blend-mode 全砍 — iOS Safari 文件級 perf killer * ======================================================================== */ *, *::before, *::after { mix-blend-mode: normal !important; } /* ======================================================================== * 3. 砍特定 heavy infinite animation (不全砍, 保留必要的 spinner/loader/cta pulse) * R501bg 已修了 marine-bg godrays, 這裡補其他大型 GPU layer * ======================================================================== */ /* gacha-stage 全螢幕 rotating conic gradient — 8s linear infinite 持續轉 */ .gacha-stage__burst::before { animation: none !important; } /* 旁邊的 center pulse */ .gacha-stage__burst::after { animation: none !important; } /* gacha-card glow / shimmer / ray — reveal 後不必持續 pulse */ .gacha-card__back { animation: none !important; } .gacha-card__glow, .gacha-card__rays, .gacha-card__particles { animation: none !important; } /* rewards card breathe — R501av 加的 (砍 infinite) */ .rewards-card.is-eligible { animation: none !important; } /* marine bg plankton — R501bg 已減到 3 顆但每顆仍 14s infinite */ .dp-marine-bg__plankton span { animation: none !important; } /* marine bg image drift */ .dp-marine-bg__image { animation: none !important; } /* godrays — R501bg 已停 animation 但保險再強制 */ .dp-marine-bg__godrays { animation: none !important; } /* hero title shimmer — R501av 加的 6s loop, 也砍 */ .rewards-hero__title, .dp-rewards-hero__title { animation: none !important; background-position: 0% 50% !important; } /* light burst / star sparkle — 任何 hot bg 元素的 infinite light effect */ .home-marine-bg__godrays, .home-marine-bg__plankton span { animation: none !important; } } /* ============================================================================ * prefers-reduced-motion: 用戶在 iOS 設定 → 輔助使用 → 動態效果 / Android * Settings → Accessibility → Remove animations 設了「減少動態效果」. * 不論桌機/手機, 都走最省 GPU 路線. * ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; mix-blend-mode: normal !important; } } /* v55hc: footer cosmic upgrade — 從 slate-grey 換 cosmic glassmorphism * + green-cyan title 一致全站 visual language。每頁底部用戶 scroll 到 * 必看，提升 brand 信任感。 */ .footer-legal-shell { max-width: min(var(--layout-max-width), calc(100vw - 32px)); margin: 0 auto; padding: 28px 28px 22px; border-radius: 24px; border: 1px solid rgba(78, 255, 195, 0.16); background: radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.06), transparent 50%), radial-gradient(circle at 0% 100%, rgba(0, 255, 136, 0.05), transparent 50%), linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(8, 14, 27, 0.85)); box-shadow: 0 22px 48px rgba(2, 6, 23, 0.32); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); } .footer-legal-title { margin: 0 0 16px; font-size: 13.2px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; background: linear-gradient(135deg, #4effc3, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer-legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 24px; } .footer-legal-list { display: grid; gap: 10px; } .footer-legal-item { display: grid; gap: 6px; min-width: 0; } .footer-legal-line { color: #f8fafc; font-size: 16.5px; line-height: 1.65; word-break: break-word; } .footer-legal-line--company { font-size: 17.6px; font-weight: 700; letter-spacing: 0.02em; } .footer-legal-line-label { color: rgba(226, 232, 240, 0.78); } .footer-legal-line-value { color: #f8fafc; font-weight: 600; } .footer-legal-label { font-size: 13.2px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(148, 163, 184, 0.82); } .footer-legal-value { color: #f8fafc; font-weight: 600; word-break: break-word; } .footer-legal-link { color: inherit; text-decoration: none; } .footer-legal-link:hover { text-decoration: underline; } .footer-legal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* v55hc: footer-legal-pill cosmic — hover green-cyan accent (action items * like 客服信箱 / 退款政策) */ .footer-legal-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(8, 14, 27, 0.55); color: rgba(226, 232, 240, 0.85); font-size: 14.3px; font-weight: 600; text-decoration: none; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; } .footer-legal-pill:hover { border-color: rgba(78, 255, 195, 0.4); color: #4effc3; background: rgba(78, 255, 195, 0.06); } .footer-legal-copy { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, 0.16); color: rgba(226, 232, 240, 0.66); font-size: 14.3px; } .btn { text-decoration: none; padding: 0 18px; border-radius: var(--public-btn-radius); border: 1px solid transparent; font-weight: var(--public-btn-font-weight); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--button-height); line-height: var(--button-height); font-size: var(--button-font-size); letter-spacing: var(--public-btn-letter-spacing); text-transform: var(--public-btn-text-transform); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; position: relative; isolation: isolate; overflow: hidden; } .btn.primary { background: var(--public-btn-primary-bg); border-color: var(--public-btn-primary-border); color: var(--public-btn-primary-color); box-shadow: var(--public-btn-primary-shadow); } .btn.ghost { border-color: var(--public-btn-ghost-border); color: var(--public-btn-ghost-color); background: var(--public-btn-ghost-bg); box-shadow: var(--public-btn-ghost-shadow); } /* v55hd: .btn.danger 變體 — 破壞性動作（刪除/取消上架/回收/移除）視覺 * 區分自 .btn.ghost (中性 cancel)。紅色 palette + hover 加深，避免用 * 戶誤觸。比直接寫 inline color 統一管理。 */ .btn.danger { border-color: rgba(239, 68, 68, 0.32); color: #fca5a5; background: rgba(239, 68, 68, 0.08); box-shadow: none; } .btn.danger:hover:not(:disabled) { border-color: rgba(239, 68, 68, 0.55); color: #fff; background: linear-gradient(135deg, rgba(239, 68, 68, 0.32), rgba(220, 38, 38, 0.4)); box-shadow: 0 8px 22px rgba(239, 68, 68, 0.32); } .btn.danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28); } /* v55hd: .btn.success 變體 — 重要正向動作（確認儲值/送出訂單已升級用 * primary，但部分 secondary 確認也可用此）。cosmic green + 暗底適合 * 次要 confirm action 比 primary 顯眼度低一階。 */ .btn.success { border-color: rgba(34, 197, 94, 0.32); color: #86efac; background: rgba(34, 197, 94, 0.08); box-shadow: none; } .btn.success:hover:not(:disabled) { border-color: rgba(34, 197, 94, 0.55); color: #fff; background: linear-gradient(135deg, rgba(34, 197, 94, 0.32), rgba(22, 163, 74, 0.4)); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.32); } .btn.success:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28); } .btn:hover { transform: translateY(-2px); } .btn:focus-visible { outline: none; box-shadow: var(--public-btn-primary-shadow), 0 0 0 4px var(--public-btn-focus-ring); } .btn.ghost:focus-visible { box-shadow: var(--public-btn-ghost-shadow), 0 0 0 4px var(--public-btn-focus-ring); } .btn:disabled { opacity: 0.58; cursor: not-allowed; transform: none; } .btn-compact { padding: 8px 12px; font-size: 14.3px; border-radius: var(--public-btn-compact-radius); } .admin-simple .btn-compact { padding: 0 16px; font-size: var(--button-font-size); border-radius: 10px; line-height: var(--button-height); height: var(--button-height); } .admin-form { display: grid; gap: 14px; max-width: 520px; } .admin-form label { display: grid; gap: 6px; color: var(--muted); font-size: 15.4px; } .admin-form input, .admin-form select, .admin-form textarea { background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border); color: var(--ink); padding: 10px 12px; border-radius: 10px; } .admin-form textarea { resize: vertical; } .form-hint { display: block; margin-top: 6px; font-size: 13.2px; color: rgba(148, 163, 184, 0.9); line-height: 1.4; } .range-row { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; } .ui-form { max-width: 860px; } .ui-form__section { display: grid; gap: 16px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--border); } .ui-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .ui-form__field-wide { grid-column: 1 / -1; } .ui-form__stack { display: grid; gap: 14px; } .ui-form__checkbox { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; } .ui-form__checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; } .audio-upload-row { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.18); background: radial-gradient(130% 140% at 100% 0%, rgba(34, 211, 238, 0.1), transparent 58%), rgba(15, 23, 42, 0.48); } .audio-upload-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .audio-upload-row__head strong { display: block; color: #f8fafc; font-size: 16.5px; } .audio-upload-row__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .audio-upload-row__actions .btn { justify-content: center; min-width: 92px; } @media (max-width: 720px) { .footer { padding: 24px 16px 48px; } .footer-legal-shell { padding: 20px; border-radius: 18px; } .footer-legal-grid, .ui-form__grid { grid-template-columns: 1fr; } .audio-upload-row__head { flex-direction: column; } .audio-upload-row__actions { justify-content: stretch; } .audio-upload-row__actions .btn { width: 100%; } .ui-form__field-wide { grid-column: auto; } } .is-hidden { display: none; } .form-actions { display: flex; gap: 10px; } /* v55gy: premium toast pattern — empty stays hidden, has-content 自動 * 變 banner with icon + tone-aware tint。整站一致的訊息呈現語言。 * * Backward compat: * - .form-message (default) = info tone (cosmic green-cyan) * - .form-message[data-tone="error"] OR .is-error = red * - .form-message[data-tone="success"] = green * - .form-message[data-tone="warn"] = amber * - .form-message[data-tone="pending"] = muted grey * - .form-message:empty = display:none (legacy 邊界情境保留) */ .form-message { margin: 0; font-size: 14.3px; font-weight: 600; line-height: 1.55; color: var(--accent-2); } .form-message:empty { display: none; } .form-message:not(:empty) { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; background: linear-gradient( 135deg, rgba(0, 255, 136, 0.1), rgba(56, 189, 248, 0.06) ); border: 1px solid rgba(78, 255, 195, 0.32); color: #4effc3; animation: formMessageIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); } /* Icon dot — flexible svg mask 不夠安全（CSP 對 mask 有時嚴格），改用 * unicode emoji，CSS 控制大小一致 */ .form-message:not(:empty)::before { content: "ⓘ"; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 15.4px; line-height: 1; font-weight: 800; border-radius: 50%; background: rgba(78, 255, 195, 0.18); color: currentColor; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", "PingFang TC", "Microsoft JhengHei", sans-serif; } /* Error tone — red palette */ .form-message[data-tone="error"]:not(:empty), .form-message.is-error:not(:empty) { background: linear-gradient( 135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.04) ); border-color: rgba(239, 68, 68, 0.32); color: #fca5a5; } .form-message[data-tone="error"]:not(:empty)::before, .form-message.is-error:not(:empty)::before { content: "✕"; background: rgba(239, 68, 68, 0.18); } /* Success tone */ .form-message[data-tone="success"]:not(:empty) { background: linear-gradient( 135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04) ); border-color: rgba(34, 197, 94, 0.32); color: #86efac; } .form-message[data-tone="success"]:not(:empty)::before { content: "✓"; background: rgba(34, 197, 94, 0.18); } /* Warn tone — amber */ .form-message[data-tone="warn"]:not(:empty) { background: linear-gradient( 135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.04) ); border-color: rgba(245, 158, 11, 0.32); color: #fcd34d; } .form-message[data-tone="warn"]:not(:empty)::before { content: "!"; background: rgba(245, 158, 11, 0.18); } /* Pending — neutral muted */ .form-message[data-tone="pending"]:not(:empty) { background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.22); color: rgba(226, 232, 240, 0.78); } .form-message[data-tone="pending"]:not(:empty)::before { content: "…"; background: rgba(148, 163, 184, 0.18); } @keyframes formMessageIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .form-hint { margin: 0; color: var(--muted); font-size: 15.4px; } .link-btn { background: none; border: none; color: var(--accent); font-weight: 800; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; } .admin-list { display: grid; gap: var(--card-gap); position: relative; z-index: 1; } .admin-title-block { display: flex; align-items: baseline; gap: 8px; } .admin-id { font-size: 13.2px; color: var(--muted); font-weight: 600; } .admin-desc { margin: 6px 0 0; color: var(--muted); font-size: 13.2px; line-height: 1.5; } .admin-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: start; background: var(--card); border: 1px solid var(--border); padding: 16px; border-radius: 16px; } .admin-thumb { width: 96px; height: 96px; border-radius: 14px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.7); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); font-size: 13.2px; } .admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .admin-info h3 { margin: 0; font-size: 19.8px; } .admin-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .status-pill { padding: 2px 10px; border-radius: 999px; font-size: 13.2px; font-weight: 600; border: 1px solid transparent; } .status-pill.active { color: #86efac; background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.4); } .status-pill.draft { color: #fde68a; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.38); } .status-pill.inactive { color: #fca5a5; background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.35); } .admin-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: 13.2px; } .admin-stats { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .admin-stat.admin-weight-inline { grid-column: 1 / -1; } .admin-weight { border: 0; border-radius: 0; padding: 0; background: transparent; } .admin-weight-summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; } .admin-weight-summary::-webkit-details-marker { display: none; } .admin-weight-value { font-size: 13.2px; font-weight: 800; color: var(--ink); } .admin-weight-body { display: none; margin-top: 10px; gap: 6px; } .admin-weight.is-open .admin-weight-body, .admin-weight[open] .admin-weight-body { display: grid; } .admin-weight-row input { flex: 1; min-width: 0; } .admin-weight-inline .admin-weight-row input { padding: 8px 10px; } .admin-weight-inline .admin-weight-hint { display: none; } .admin-weight-hint, .admin-weight-msg { display: block; font-size: 13.2px; color: var(--muted); line-height: 1.4; } .admin-weight-msg.is-error { color: rgba(248, 113, 113, 0.95); } .admin-weight-msg.is-ok { color: rgba(52, 211, 153, 0.95); } .admin-stat { background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; } .admin-stat .label { display: block; font-size: 12.1px; color: var(--muted); margin-bottom: 2px; } .admin-actions { display: flex; flex-direction: column; gap: 8px; } .admin-product-results-panel { display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(102, 124, 164, 0.22); border-radius: 18px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(8, 13, 26, 0.88)), rgba(15, 23, 42, 0.72); box-shadow: 0 18px 46px rgba(2, 6, 23, 0.26); min-width: 0; } .admin-product-results-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 2px 2px 12px; border-bottom: 1px solid rgba(102, 124, 164, 0.18); } .admin-product-results-panel__title { display: grid; gap: 4px; min-width: 0; } .admin-product-results-panel__title span { color: #7dd3fc; font-size: 12.1px; font-weight: 800; letter-spacing: 0.08em; } .admin-product-results-panel__title h3 { margin: 0; color: var(--ink); font-size: 19.8px; line-height: 1.25; text-wrap: balance; } .admin-product-results-panel__summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.28); background: rgba(8, 145, 178, 0.12); color: rgba(186, 230, 253, 0.94); font-size: 13.2px; font-weight: 700; white-space: nowrap; } .admin-product-results-panel .admin-list { gap: 12px; } .admin-product-results-panel .admin-item { grid-template-columns: 96px minmax(0, 1fr) auto; background: rgba(8, 13, 26, 0.72); border-color: rgba(102, 124, 164, 0.2); border-radius: 14px; content-visibility: auto; contain-intrinsic-size: 130px; } .admin-product-results-panel .admin-info, .admin-product-results-panel .admin-title-block { min-width: 0; } .admin-product-results-panel .admin-title-row { align-items: flex-start; } .admin-product-results-panel .admin-info h3 { line-height: 1.25; overflow-wrap: anywhere; word-break: normal; } .admin-product-results-panel .admin-stats { grid-template-columns: repeat(4, minmax(86px, 1fr)); } .admin-product-results-panel .admin-stat { min-width: 0; } .admin-product-results-panel .admin-stat strong { display: block; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .admin-product-results-panel__message { min-height: 22px; padding: 0 2px; } .admin-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; } .admin-pagination__button, .admin-pagination__gap { min-width: 44px; min-height: 40px; border-radius: 10px; font-size: 13.2px; font-weight: 800; } .admin-pagination__button { border: 1px solid rgba(102, 124, 164, 0.28); background: rgba(15, 23, 42, 0.7); color: #cbd5e1; cursor: pointer; touch-action: manipulation; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .admin-pagination__button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.5); background: rgba(8, 145, 178, 0.16); color: #f2faff; } .admin-pagination__button:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.72); outline-offset: 2px; } .admin-pagination__button.is-current { border-color: rgba(45, 212, 191, 0.6); background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(45, 212, 191, 0.22)); color: #f8fafc; } .admin-pagination__button:disabled { opacity: 0.42; cursor: not-allowed; } .admin-pagination__gap { display: inline-flex; align-items: center; justify-content: center; color: rgba(148, 163, 184, 0.82); } @media (prefers-reduced-motion: reduce) { .admin-pagination__button { transition: none; } } .assignment-list { display: grid; gap: 10px; } .assignment-item { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border); padding: 12px; border-radius: 12px; } .assignment-title { display: flex; align-items: center; gap: 10px; } .assignment-order { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.6); color: var(--ink); } .preview-card { display: grid; gap: 10px; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.6); } .table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); } .admin-table { width: 100%; border-collapse: collapse; min-width: 520px; } .admin-table thead th { background: rgba(15, 23, 42, 0.85); position: sticky; top: 0; z-index: 1; } .admin-table th, .admin-table td { padding: var(--table-padding-y) var(--table-padding-x); text-align: left; border-bottom: 1px solid var(--border); } .admin-table th { font-size: 14.3px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .admin-table.resizable { table-layout: fixed; } .admin-table.resizable th, .admin-table.resizable td { position: relative; overflow: hidden; text-overflow: ellipsis; } .admin-table tbody tr { background: rgba(15, 23, 42, 0.38); transition: background 0.2s ease; } .admin-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.25); } .admin-table tbody tr:hover { background: rgba(56, 189, 248, 0.12); } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; } .input-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.6); color: var(--ink); font-size: 14.3px; } .pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .badge.ok { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.4); color: var(--accent-2); } .badge.warn { background: rgba(249, 115, 22, 0.18); border-color: rgba(249, 115, 22, 0.35); color: rgba(253, 186, 116, 0.95); } .badge.muted { background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.25); color: var(--muted); } .admin-table td.table-warn { color: rgba(253, 186, 116, 0.95); font-weight: 700; } .row-item { display: flex; align-items: center; gap: 12px; } .row-thumb { width: 44px; height: 44px; border-radius: 12px; background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .row-thumb img { width: 100%; height: 100%; object-fit: cover; } .row-thumb span { font-size: 13.2px; color: var(--muted); } .row-text strong { display: block; } .row-meta { margin-top: 4px; font-size: 13.2px; color: var(--muted); } .code-block { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13.2px; line-height: 1.45; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(15, 23, 42, 0.65); color: var(--ink); } /* v55hb: .input-inline cosmic upgrade — 100+ instance 受惠 * (search / filter / login form / recharge picker / admin form 等)。 * focus / hover 用 cosmic green-cyan accent，