/* ============================================================================ * opentix-skin.css — MVP_v0703_OPENTIX風皮（拉斐爾｜設計官） * 機制：version.js 選「MVP_v0703_OPENTIX風」→ .skin-opentix → 本檔覆蓋 theme.css token。 * theme.css 高度 var 驅動，覆蓋 token 即 cascade 全站；少數硬寫色/形狀另補。 * 定位：套 OPENTIX（兩廳院售票網）那種「輕盈、留白、內容導向」的消費者級視覺語言。 * 極度輕盈、留白多、白卡＋柔和擴散陰影＋大圓角、editorial 字排、柔和圓潤按鈕。 * ★ 品牌強調色維持 momo 洋紅 #eb2f96（看全部/主按鈕/連結/選中）；其餘走 OPENTIX 柔和語言。 * 只換視覺（色/邊/圓角/陰影/間距/字級），不動 layout grid，不改結構、不改功能。 * ========================================================================== */ /* ── 1. 設計 token 全量覆蓋（cascade 驅動全站，多數收斂靠這段一次收掉）──── */ body.skin-opentix { /* Magenta 色階＝momo 品牌洋紅 ramp；magenta-6 = #eb2f96 ＝品牌強調色 */ --magenta-1:#fff2f8; --magenta-2:#ffe0ee; --magenta-3:#ffc2dd; --magenta-4:#ff97c4; --magenta-5:#f95fac; --magenta-6:#eb2f96; --magenta-7:#c8267f; --magenta-8:#a01c66; --magenta-9:#78124d; --magenta-10:#500a34; --color-primary:#eb2f96; --color-primary-hover:#f95fac; --color-primary-active:#c8267f; --color-primary-bg:#fff2f8; --momo:#eb2f96; /* 中性字階：OPENTIX editorial 近黑主字 + 柔灰次字（副標更淺、更呼吸） */ --color-text:#2b2b33; --color-text-secondary:#6f6f7a; --color-text-tertiary:#a2a2ad; /* 邊框/分隔：極淡，OPENTIX 偏「無框、靠留白與陰影分區」 */ --color-border:#ececf0; --color-border-secondary:#f2f2f5; --color-split:rgba(20,20,40,.045); /* 頁面底更淺的中性灰，內容區靠白卡浮起 */ --color-bg-layout:#f5f5f7; --bg:#f5f5f7; --gray-2:#fafafb; --gray-3:#f5f5f7; --gray-4:#eeeef2; --color-bg-container:#fff; --color-bg-mask:rgba(28,28,40,.38); /* 圓角：OPENTIX 大圓角語言 base 12 / LG 16 / SM 10 / XS 8 */ --border-radius:12px; --border-radius-lg:16px; --border-radius-sm:10px; --border-radius-xs:8px; /* 字型堆疊：editorial system + 繁中，行高放寬、字距舒服 */ --font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",Roboto,sans-serif; --font-size:14px; --line-height:1.72; /* OPENTIX 不用重漸層：品牌漸層 → 洋紅實心；柔面 → 極淡粉白 */ --brand-gradient:#eb2f96; --brand-gradient-h:#eb2f96; --brand-gradient-soft:#fdf4f9; /* 柔和擴散陰影三階（極輕、大範圍暈開，OPENTIX 標誌性的「浮起感」）*/ --box-shadow-tertiary:0 2px 10px rgba(20,20,40,.04); --box-shadow:0 4px 20px rgba(20,20,40,.05),0 1px 3px rgba(20,20,40,.03); --box-shadow-drawer-right:-8px 0 32px rgba(20,20,40,.08),-2px 0 8px rgba(20,20,40,.04); font-family:var(--font-family); line-height:var(--line-height); letter-spacing:.1px; } /* ── 2. 全站留白放大：主內容區、section、頁首（OPENTIX 呼吸感的核心）────── */ body.skin-opentix #page-root { background:#f5f5f7; } body.skin-opentix .page, body.skin-opentix .page-body, body.skin-opentix .content-wrap { padding:28px 32px; } body.skin-opentix .page-head { margin-bottom:24px; padding-bottom:4px; } body.skin-opentix .section, body.skin-opentix .block, body.skin-opentix .panel { margin-bottom:28px; } body.skin-opentix .card + .card, body.skin-opentix .kpi + .kpi { margin-top:0; } /* ── 3. 標題排印：加大加粗、副標淺灰放大行距、字距舒服（editorial）───────── */ body.skin-opentix .page-head h1, body.skin-opentix .grad-text { background:none !important; -webkit-text-fill-color:initial !important; background-clip:initial !important; -webkit-background-clip:initial !important; color:#1f1f2b !important; font-weight:800; font-size:26px; letter-spacing:-.2px; line-height:1.3; } body.skin-opentix .page-head h1 .badge { -webkit-text-fill-color:initial !important; } body.skin-opentix .page-head .sub, body.skin-opentix .page-sub, body.skin-opentix .page-head p { color:#8a8a95; font-size:14.5px; line-height:1.75; font-weight:400; margin-top:6px; } body.skin-opentix .card-head .title, body.skin-opentix h2, body.skin-opentix h3 { font-weight:700; letter-spacing:-.1px; color:#26262f; } /* ── 4. 卡片 Card：白底 + 大圓角 16 + 柔和擴散陰影 + 邊框拿掉 + 內距加大 ──── */ body.skin-opentix .card { border-radius:16px; border:1px solid transparent; background:#fff; box-shadow:0 4px 20px rgba(20,20,40,.05),0 1px 3px rgba(20,20,40,.03); padding:22px 24px; } body.skin-opentix .card:hover { box-shadow:0 8px 30px rgba(20,20,40,.08),0 2px 6px rgba(20,20,40,.04); } body.skin-opentix .card-head { border-bottom:1px solid #f2f2f5; padding:4px 0 16px; margin-bottom:16px; } body.skin-opentix .card-head .title { font-size:17px; font-weight:700; color:#26262f; } /* ── 5. 按鈕 Button：pill 大圓角、柔和、低飽和；primary 洋紅低調、hover 柔和 ─ */ body.skin-opentix .btn { height:38px; padding:0 20px; border-radius:20px; border:1px solid #e6e6ec; background:#fff; color:#3a3a44; font-size:14px; font-weight:600; box-shadow:none; transition:background .2s, border-color .2s, color .2s, box-shadow .2s; } body.skin-opentix .btn:hover { border-color:#d8d8e0; background:#fafafb; color:#1f1f2b; } body.skin-opentix .btn:active { background:#f2f2f5; } body.skin-opentix .btn.primary, body.skin-opentix .btn.pink, body.skin-opentix .btn-tour { background:#eb2f96 !important; border:1px solid #eb2f96 !important; color:#fff !important; box-shadow:0 4px 14px rgba(235,47,150,.22) !important; filter:none !important; } body.skin-opentix .btn.primary:hover, body.skin-opentix .btn.pink:hover, body.skin-opentix .btn-tour:hover { background:#f95fac !important; border-color:#f95fac !important; color:#fff !important; box-shadow:0 6px 18px rgba(235,47,150,.28) !important; filter:none !important; } body.skin-opentix .btn.primary:active, body.skin-opentix .btn.pink:active { background:#c8267f !important; border-color:#c8267f !important; } body.skin-opentix .btn.danger, body.skin-opentix .btn.xs.danger { border-color:#ffd0d0; color:#e0484b; background:#fff; } body.skin-opentix .btn.danger:hover, body.skin-opentix .btn.xs.danger:hover { border-color:#ffb3b3; color:#d1383b; background:#fff7f7; } body.skin-opentix .btn.sm { height:32px; padding:0 14px; font-size:13px; border-radius:18px; } body.skin-opentix .btn.xs { height:28px; padding:0 12px; font-size:12px; border-radius:16px; } body.skin-opentix .btn.lg { height:46px; padding:0 26px; font-size:16px; border-radius:24px; } body.skin-opentix .btn:disabled { opacity:1; color:#bdbdc7; border-color:#eeeef2; background:#f7f7f9; box-shadow:none; } /* 「看全部 / 更多」類文字連結：洋紅強調（OPENTIX 標誌性的彩色 CTA 文字）*/ body.skin-opentix a, body.skin-opentix .link, body.skin-opentix .see-all, body.skin-opentix .more-link { color:#eb2f96; } body.skin-opentix a:hover, body.skin-opentix .link:hover { color:#c8267f; } /* ── 6. 表格 Table：去重框線、行距寬鬆的清爽列表、hover 淡底（editorial list）─ */ body.skin-opentix .tbl { font-size:14px; border:none; border-radius:14px; border-collapse:separate; border-spacing:0; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(20,20,40,.04); } body.skin-opentix .tbl th { background:#fff; color:#9a9aa5; font-weight:600; font-size:12.5px; letter-spacing:.3px; border-bottom:1px solid #f2f2f5; padding:14px 18px; text-transform:none; } body.skin-opentix .tbl td { border-bottom:1px solid #f5f5f7; padding:16px 18px; color:#33333d; line-height:1.6; } body.skin-opentix .tbl tr:last-child td { border-bottom:none; } body.skin-opentix .tbl tr:hover td { background:#fbf5f9; } body.skin-opentix .tbl tr.best td { background:#fdf4f9; } /* 其他頁自刻表格（.tc-tbl 等）hover 收斂成柔和淡粉 */ body.skin-opentix .tc-tbl tr:hover td, body.skin-opentix table tr:hover td { background:#fbf5f9; } /* 純文字清單（像 OPENTIX 右側「藝術節」列表）：無框、寬行距、hover 淡底圓角 */ body.skin-opentix .list-item, body.skin-opentix .lst-row, body.skin-opentix li.row { border:none; border-bottom:1px solid #f5f5f7; padding:14px 12px; border-radius:10px; } body.skin-opentix .list-item:hover, body.skin-opentix .lst-row:hover { background:#fbf5f9; } /* ── 7. 表單 Input / Select / Textarea：淡框、大圓角 12、focus 洋紅柔光環 ──── */ body.skin-opentix input:not([type=checkbox]):not([type=radio]):not([type=range]), body.skin-opentix select, body.skin-opentix textarea { border:1px solid #e6e6ec; border-radius:12px; font-family:inherit; color:#2b2b33; background:#fbfbfc; padding:9px 14px; transition:border-color .2s, box-shadow .2s, background .2s; } body.skin-opentix input:not([type=checkbox]):not([type=radio]):not([type=range]):hover, body.skin-opentix select:hover, body.skin-opentix textarea:hover { border-color:#ffb3d6; background:#fff; } body.skin-opentix input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, body.skin-opentix select:focus, body.skin-opentix textarea:focus { border-color:#eb2f96 !important; box-shadow:0 0 0 3px rgba(235,47,150,.12); outline:none; background:#fff; } body.skin-opentix input::placeholder, body.skin-opentix textarea::placeholder { color:#b6b6c0; } /* 共用搜尋框 / copilot 輸入：pill 圓角、柔框 */ body.skin-opentix .cb-search { height:40px; border-radius:20px; border:1px solid #e6e6ec; background:#fbfbfc; } body.skin-opentix .cb-search:focus-within { border-color:#eb2f96; box-shadow:0 0 0 3px rgba(235,47,150,.12); background:#fff; } body.skin-opentix .copilot-input textarea:focus { border-color:#eb2f96 !important; box-shadow:0 0 0 3px rgba(235,47,150,.12); } /* ── 8. radio / checkbox：選中洋紅 ──────────────────────────────────────── */ body.skin-opentix input[type=checkbox], body.skin-opentix input[type=radio] { accent-color:#eb2f96; width:17px; height:17px; } body.skin-opentix input[type=range] { accent-color:#eb2f96; } /* ── 9. Tabs：輕量化、留白大、active 洋紅字 + 柔和洋紅底線、hover 主色 ────── */ body.skin-opentix .tabs { border-bottom:1px solid #f2f2f5; gap:8px; } body.skin-opentix .tabs .tab { color:#7a7a85; font-weight:500; padding:14px 4px; margin-right:36px; font-size:14.5px; } body.skin-opentix .tabs .tab:hover { color:#eb2f96; } body.skin-opentix .tabs .tab.active { color:#eb2f96; border-bottom-color:#eb2f96; font-weight:700; } /* ── 10. 分類/狀態標籤 Badge → 彩色小字（去底/極淡底、無實心、無邊）──────── */ body.skin-opentix .badge { border-radius:8px; line-height:20px; padding:1px 8px; font-size:11.5px; font-weight:600; border:none; background:transparent; letter-spacing:.2px; } body.skin-opentix .badge.blue { background:transparent; color:#3a7de0; } body.skin-opentix .badge.green { background:transparent; color:#2fa35a; } body.skin-opentix .badge.orange { background:transparent; color:#e08a2b; } body.skin-opentix .badge.purple { background:transparent; color:#7d4fd8; } body.skin-opentix .badge.red { background:transparent; color:#e0484b; } body.skin-opentix .badge.cyan { background:transparent; color:#1fa5a5; } body.skin-opentix .badge.yellow { background:transparent; color:#c99a06; } body.skin-opentix .badge.gray { background:transparent; color:#8a8a95; } body.skin-opentix .badge.pink { background:transparent; color:#eb2f96; } /* 需要「片狀」語意的狀態（如進行中）保留極淡底 pill，維持可辨識 */ body.skin-opentix .badge.solid, body.skin-opentix .badge.status { background:#fdf4f9; border-radius:12px; padding:2px 10px; } /* 側欄「新」標：洋紅淡底 pill */ body.skin-opentix .tag-new { background:#fff2f8; color:#c8267f; border:none; border-radius:10px; } /* ── 11. KPI 卡（OPENTIX 輕盈統計卡）：白底大圓角、柔陰影、數字大深、label 灰 ─ */ body.skin-opentix .kpi { border:1px solid transparent; border-radius:16px; background:#fff; padding:20px 22px; box-shadow:0 4px 20px rgba(20,20,40,.05),0 1px 3px rgba(20,20,40,.03); } body.skin-opentix .kpi::before { background:var(--bar, #eb2f96); border-radius:16px 0 0 16px; } body.skin-opentix .kpi:hover { box-shadow:0 8px 30px rgba(20,20,40,.08); } body.skin-opentix .kpi .k-label { color:#9a9aa5; font-size:13px; letter-spacing:.2px; } body.skin-opentix .kpi .k-value { color:#1f1f2b; font-weight:800; letter-spacing:-.5px; } /* ── 12. Modal / Drawer：大圓角、柔和大暈陰影、留白內距、mask 柔化 ─────────── */ body.skin-opentix .mask { background:rgba(28,28,40,.38); backdrop-filter:blur(2px); } body.skin-opentix .modal { border-radius:20px; box-shadow:0 24px 60px rgba(20,20,40,.18),0 4px 16px rgba(20,20,40,.08); border:none; } body.skin-opentix .drawer { box-shadow:-8px 0 32px rgba(20,20,40,.10),-2px 0 8px rgba(20,20,40,.05); border:none; } body.skin-opentix .drawer-head, body.skin-opentix .modal-head { border-bottom:1px solid #f2f2f5; font-size:18px; font-weight:700; color:#1f1f2b; padding:20px 24px; } body.skin-opentix .modal-foot { border-top:1px solid #f2f2f5; justify-content:flex-end; gap:10px; padding:16px 24px; } body.skin-opentix .modal-body, body.skin-opentix .drawer-body { padding:20px 24px; } /* ── 13. Sidebar Menu：輕量、留白、柔和選中態（洋紅淡底大圓角）───────────── */ body.skin-opentix #sidebar { background:#fff; border-right:1px solid #f2f2f5; } body.skin-opentix .nav-item { border-radius:12px; margin:2px 10px; padding:9px 14px; color:#6f6f7a; } body.skin-opentix .nav-item:hover { background:#fafafb; color:#2b2b33; } body.skin-opentix .nav-item.active { background:#fff2f8; color:#c8267f; font-weight:700; } body.skin-opentix .nav-group-label, body.skin-opentix .nav-group .label { color:#b6b6c0; font-size:10.5px; letter-spacing:1px; padding:12px 22px 4px; } /* ── 14. Topbar：輕量化、留白、無重邊框 ─────────────────────────────────── */ body.skin-opentix #topbar, body.skin-opentix .topbar { background:rgba(255,255,255,.86); backdrop-filter:blur(8px); border-bottom:1px solid #f2f2f5; box-shadow:none; } /* ── 15. Segmented（.seg / .ui-ownerseg）──白片浮於淺灰軌、選中洋紅淡底 ───── */ body.skin-opentix .seg { background:#f2f2f5; border:none; border-radius:20px; padding:3px; gap:2px; } body.skin-opentix .seg span, body.skin-opentix .seg button { border-radius:16px; color:#6f6f7a; padding:6px 14px; } body.skin-opentix .seg span.on, body.skin-opentix .seg button.on { background:#fff !important; color:#eb2f96 !important; font-weight:700; box-shadow:0 2px 8px rgba(20,20,40,.08); } body.skin-opentix .ui-ownerseg { border-color:#ececf0; border-radius:16px; overflow:hidden; } body.skin-opentix .ui-ownerseg .os-seg { border-left-color:#f2f2f5; color:#4a4a54; } body.skin-opentix .ui-ownerseg .os-seg:hover { background:#fafafb; } body.skin-opentix .ui-ownerseg .os-seg.on, body.skin-opentix .ui-ownerseg .os-seg.on:hover { background:#eb2f96; color:#fff; } /* ── 16. Switch（.toggle）/ progress bar → 洋紅 ───────────────────────────── */ body.skin-opentix .toggle.on { background:#eb2f96; } body.skin-opentix .bar-fill { background:#eb2f96; border-radius:8px; } body.skin-opentix .bar, body.skin-opentix .progress { background:#f2f2f5; border-radius:8px; } /* ── 17. 頁面 JS「硬寫」桃紅/紫漸層底（var 抓不到）→ OPENTIX 柔白面板 ────── */ body.skin-opentix [style*="fff0f6"], body.skin-opentix [style*="f9f0ff"] { background:#fdf4f9 !important; border-color:transparent !important; } body.skin-opentix .hero-card { background:#fff !important; border:none !important; border-radius:20px; box-shadow:0 4px 20px rgba(20,20,40,.05) !important; } /* ── 18. Toast → OPENTIX 白卡：柔和大圓角 + 柔陰影 ────────────────────────── */ body.skin-opentix .toast { background:#fff; color:#2b2b33; border:none; border-radius:16px; font-size:14px; box-shadow:0 8px 30px rgba(20,20,40,.14),0 2px 8px rgba(20,20,40,.06); } /* ── 19. 上傳區 dragger：柔淡虛線、淺底、主色 hover ───────────────────────── */ body.skin-opentix .upload-zone { background:#fdf4f9; border:2px dashed #ffc2dd; border-radius:16px; } body.skin-opentix .upload-zone:hover { border-color:#eb2f96; background:#fff2f8; } body.skin-opentix .upload-zone .uz-ico { color:#eb2f96; box-shadow:0 2px 10px rgba(235,47,150,.12); } body.skin-opentix .upload-zone .uz-bar > i { background:#eb2f96; } /* ── 20. 品牌標誌 / 頭像：漸層 → 洋紅實心（維持品牌色）─────────────────── */ body.skin-opentix .brand .logo, body.skin-opentix .brand .brand-logo, body.skin-opentix .user-chip .avatar { background:#eb2f96 !important; border-radius:12px; } /* ── 21. empty-state：OPENTIX 留白大、柔和、CTA pill 洋紅 ─────────────────── */ body.skin-opentix .empty-state { padding:56px 24px; color:#9a9aa5; } body.skin-opentix .empty-state .es-cta { border-radius:20px; } /* ── 22. 縮圖/圖片優先卡片：大圓角、內容導向（圖上標題下）───────────────── */ body.skin-opentix .thumb, body.skin-opentix .cover, body.skin-opentix .card-media, body.skin-opentix .card img { border-radius:14px; } body.skin-opentix .card-title, body.skin-opentix .item-title { font-weight:700; font-size:15.5px; color:#26262f; letter-spacing:-.1px; line-height:1.45; } body.skin-opentix .card-meta, body.skin-opentix .item-meta { color:#9a9aa5; font-size:12.5px; }