/* ╔══════════════════════════════════════════════════════════════════╗ ║ GENERATED FILE — DO NOT EDIT. ║ ║ Built by tools/build-css.mjs from css/main.css. ║ ║ Edit css/_base.css or css/components/*.css, then re-run: ║ ║ node tools/build-css.mjs ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* main.css — generated manifest. Build: node tools/build-css.mjs @import order == cascade order. Numeric prefix == cascade position. Edit a component file or add a new @import here, then rebuild. */ /* ── sections / components (cascade-ordered) ── */ /* Afacad — score-orb numerals only (see .ztor-score__value). Imported here so all 16 pages get it through the one shared stylesheet. */ @import url('https://fonts.googleapis.com/css2?family=Afacad:wght@600;700&display=swap'); /* Focus ring — brand orange site-wide. Replaces the browser default (blue) for any element that doesn't define its own :focus-visible. */ :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* 觸控裝置 tap 也會標 :focus-visible → 按過的鈕殘留橘框（mtd-bar／短劇／播放器 ⚙ 三度個案修）→ 治本：focus ring 是給實體鍵盤的，觸控環境整站關（Dolly 0727） */ @media (hover: none) and (pointer: coarse) { :focus-visible { outline: none; } } /* 桌機滑鼠同理（Dolly 0803「一勞永逸」）：滑鼠點擊後 JS 搬焦點（開彈窗聚焦 關閉鈕等）也會亮環——ds.js 開頭把最後輸入形態寫到 ， pointer 模式整站關環；按 Tab／方向鍵切回 keyboard，環立刻恢復。 !important 是刻意的：這條是站規，要壓過所有元件自訂的 :focus-visible 橘環（77 條），否則又回到逐顆豁免的打地鼠。 */ html[data-input="pointer"] :focus-visible { outline: none !important; } /* 未來功能閘（0803 Dolly）：確定會回來、但現階段不上的區塊掛這個屬性—— markup 與資料填充都留在原位，恢復＝把屬性拿掉即可，不用挖 git 歷史。 !important 是必要的：[hidden] 會被元件自己的 display（inline-flex 等） 蓋掉（feedback_hidden_attr_display_override），這條必須無條件贏。 目前使用者：創作者頁的 活動/排行榜 tab、頭號粉絲、關於。 */ [data-future-feature] { display: none !important; } /* ============================================================ Ztor 2.0 — Components Mirrors Figma component sets: - Button (Type × Size × State) - IconButton (State + Icon swap) - Header (State=Before Login | After Login) ============================================================ */ /* ───────────────────────────────────────── BUTTON variants: primary | ghost | yellow-ghost | destructive sizes: lg | md | sm states: default | :hover | :active | :disabled ───────────────────────────────────────── */ /* Raised-pill effect for solid brand buttons — SINGLE SOURCE. Used by .btn--primary.btn--lg AND the header login button (.header__login-btn). Change here → both stay in sync. */ :root { --shadow-btn-primary-raised: rgba(255, 255, 255, 0.85) 0 1.4px 0.5px -1px inset, /* top light edge */ color-mix(in srgb, var(--brand-900) 18%, transparent) 0 -3px 4px -2px inset, /* warm underside */ color-mix(in srgb, var(--brand-ink) 30%, transparent) 0 2px 5px -2px, /* contact shadow */ color-mix(in srgb, var(--brand-ink) 15%, transparent) 0 6px 14px -6px; /* soft lift */ } .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: box-shadow 150ms var(--ease-out), background 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 120ms var(--ease-out); } /* Physical press — the button meets the finger */ .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--yellow-500); outline-offset: 2px; } /* ── Sizes ── */ .btn--lg { padding: 16px 36px; font-family: var(--font-cjk-display); font-size: var(--fs-h5); line-height: var(--lh-body); font-weight: var(--fw-bold); } .btn--md { padding: 12px 28px; font-family: var(--font-cjk-text); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: var(--fw-medium); } .btn--sm { padding: 8px 16px; font-family: var(--font-cjk-text); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); } /* ── PRIMARY ── Solid brand fill. LG reads as a gently RAISED pill: a crisp top light edge + a warm underside shadow + a soft warm lift off the dark canvas. The shadow is brand-derived (color-mix on --brand-ink / --brand-900) so it stays a warm tone — not a muddy black smudge on the dark bg — and recolours with the brand automatically. Hover lightens the fill; no outer halo. Pressed sinks in. */ .btn--primary { background: var(--brand-500); color: var(--brand-ink); border-color: transparent; } .btn--primary.btn--lg { box-shadow: var(--shadow-btn-primary-raised); } .btn--primary:hover:not(:disabled) { background: var(--brand-400); } .btn--primary:active:not(:disabled) { background: var(--brand-600); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18); } .btn--primary:disabled { opacity: 0.4; } /* ── MONO（單色主要行動）── 白底近黑字的主 CTA。用在「畫面本身已經有很多品牌橘」的陳列情境——商城商品頁 就是這樣：限量徽章、價格、尺寸指南、願望清單都是橘的，主鈕再用橘就沒有主次。 ⚠️ 這不是「另一種 primary」，是**取代** primary：兩個別一起掛。 0802 Dolly 拍板收編。原本這個外觀寫在 63-shop-detail.css 的 `.pdp .pdp-buy__add` 頁面前綴覆寫裡（自稱 LEVER 2），有兩個問題：①掛 .btn--primary 卻不是 primary 的樣子，同一個 class 在 .pdp 內外長不一樣；②只蓋了底色沒關掉 .btn--primary.btn--lg 的 --shadow-btn-primary-raised——那道內光暈是為橘底調的，疊在白底上是殘留。 */ .btn--mono { background: var(--text-primary); color: var(--bg-primary); border-color: transparent; box-shadow: none; /* 橘底專用的 raised 光暈不跟過來 */ transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); } .btn--mono:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); } .btn--mono:active:not(:disabled) { opacity: 0.95; transform: translateY(0); } /* disabled 只改底色／文字；透明度與 cursor 走全站統一的 .btn[disabled]（0.45）。 舊的 .pdp 覆寫在這裡寫死 opacity:0.5，其實被 .btn[disabled] 同權重後蓋掉，是死宣告。 */ .btn--mono:disabled { background: var(--text-disabled); color: var(--bg-primary); transform: none; } @media (prefers-reduced-motion: reduce) { .btn--mono { transition: opacity 150ms ease; } .btn--mono:hover:not(:disabled) { transform: none; } } /* ── GHOST (Artlist-style glass) ── background = bottom-edge bright stripe gradient box-shadow = top + bottom edge highlights + inner soft shadow text-shadow = subtle text glow */ .btn--ghost { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 2.45%, rgba(255, 255, 255, 0) 126.14%); border-color: transparent; color: var(--text-primary); text-shadow: none; box-shadow: rgba(255, 255, 255, 0.9) 1.1px 2.2px 0.5px -1.8px inset, rgba(255, 255, 255, 0.9) -1px -2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.10) 2px 3px 2px 0 inset; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .btn--ghost:hover:not(:disabled) { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.30) 2.45%, rgba(255, 255, 255, 0) 126.14%); text-shadow: rgba(255, 255, 255, 0.45) 0 0 10px; } .btn--ghost:active:not(:disabled) { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 2.45%, rgba(255, 255, 255, 0) 126.14%); box-shadow: rgba(255, 255, 255, 0.6) 1.1px 2.2px 0.5px -1.8px inset, rgba(255, 255, 255, 0.6) -1px -2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.20) 2px 3px 4px 0 inset; } .btn--ghost:disabled { background: rgba(255, 255, 255, 0.04); color: var(--text-disabled); text-shadow: none; box-shadow: rgba(255, 255, 255, 0.25) 1.1px 2.2px 0.5px -1.8px inset, rgba(255, 255, 255, 0.25) -1px -2.2px 0.5px -1.8px inset; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── YELLOW-GHOST ── */ .btn--yellow-ghost { background: linear-gradient(0deg, rgba(var(--brand-rgb), 0) 0%, rgba(var(--brand-rgb), 0.18) 2.45%, rgba(var(--brand-rgb), 0) 126.14%); border-color: transparent; color: var(--yellow-500); text-shadow: none; box-shadow: rgba(var(--brand-rgb), 0.9) 1.1px 2.2px 0.5px -1.8px inset, rgba(var(--brand-rgb), 0.9) -1px -2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.10) 2px 3px 2px 0 inset; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .btn--yellow-ghost:hover:not(:disabled) { background: linear-gradient(0deg, rgba(var(--brand-rgb), 0) 0%, rgba(var(--brand-rgb), 0.30) 2.45%, rgba(var(--brand-rgb), 0) 126.14%); text-shadow: rgba(var(--brand-rgb), 0.4) 0 0 10px; } .btn--yellow-ghost:active:not(:disabled) { background: linear-gradient(0deg, rgba(var(--brand-rgb), 0) 0%, rgba(var(--brand-rgb), 0.42) 2.45%, rgba(var(--brand-rgb), 0) 126.14%); box-shadow: rgba(var(--brand-rgb), 0.6) 1.1px 2.2px 0.5px -1.8px inset, rgba(var(--brand-rgb), 0.6) -1px -2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.20) 2px 3px 4px 0 inset; } .btn--yellow-ghost:disabled { background: rgba(var(--brand-rgb), 0.04); color: rgba(var(--brand-rgb), 0.4); text-shadow: none; box-shadow: rgba(var(--brand-rgb), 0.3) 1.1px 2.2px 0.5px -1.8px inset, rgba(var(--brand-rgb), 0.3) -1px -2.2px 0.5px -1.8px inset; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ── DESTRUCTIVE ── default/hover: red glass（半透紅玻璃） pressed: solid red + ink text (state escalation) 2026-07-14 Dolly 定版：原版只有底部漸層太淡（modal 深底上讀不到紅）→ 疊恆定 12% 紅底＋漸層峰值 20%→30%；中途試過實色紅底白字，否決、 回到這版「略帶透明感」。disabled 較原版顯色（12% 底＋55% 紅字）。 */ .btn--destructive { background: linear-gradient(0deg, rgba(239, 68, 68, 0) 0%, rgba(239, 68, 68, 0.30) 2.45%, rgba(239, 68, 68, 0) 126.14%), rgba(239, 68, 68, 0.12); border-color: transparent; color: var(--error-500); text-shadow: none; box-shadow: rgba(239, 68, 68, 0.9) 1.1px 2.2px 0.5px -1.8px inset, rgba(239, 68, 68, 0.9) -1px -2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.10) 2px 3px 2px 0 inset; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .btn--destructive:hover:not(:disabled) { background: linear-gradient(0deg, rgba(239, 68, 68, 0) 0%, rgba(239, 68, 68, 0.44) 2.45%, rgba(239, 68, 68, 0) 126.14%), rgba(239, 68, 68, 0.18); text-shadow: rgba(239, 68, 68, 0.4) 0 0 10px; } .btn--destructive:active:not(:disabled) { background: var(--error-500); color: var(--error-ink); text-shadow: none; box-shadow: rgba(255, 255, 255, 0.5) 1.1px 2.2px 0.5px -1.8px inset, rgba(0, 0, 0, 0.3) 0 4px 12px; backdrop-filter: none; -webkit-backdrop-filter: none; } .btn--destructive:disabled { /* 2026-07-15 Dolly：原 .12/.55/.35 整體太淡，各層透明度調高一級； 仍以「無漸層、無 glow」跟 enabled 態區隔 */ background: rgba(239, 68, 68, 0.18); color: rgba(239, 68, 68, 0.75); text-shadow: none; box-shadow: rgba(239, 68, 68, 0.5) 1.1px 2.2px 0.5px -1.8px inset, rgba(239, 68, 68, 0.5) -1px -2.2px 0.5px -1.8px inset; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ─── Quiet — glassmorphic low-key button. Use for cancel / dismiss / tertiary actions inside modals, dialogs, banners, or any surface where the action shouldn't compete with the primary CTA. Composition (3 properties together = the "glass" feel): - Translucent black fill (10/16/22/5%) — depth without opacity - Translucent white edge (24/32/32/10%) — defines the shape - 4px backdrop-blur — frosts the layer behind it Text shifts secondary→primary on hover/active so users feel the interaction even though the surface change is subtle. */ .btn--quiet { background: rgba(0, 0, 0, 0.10); border-color: rgba(255, 255, 255, 0.24); color: var(--text-secondary); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .btn--quiet:hover:not(:disabled) { background: rgba(0, 0, 0, 0.16); border-color: rgba(255, 255, 255, 0.32); color: var(--text-primary); } .btn--quiet:active:not(:disabled) { background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.32); color: var(--text-primary); } .btn--quiet:disabled { background: rgba(0, 0, 0, 0.05); border-color: rgba(255, 255, 255, 0.10); color: var(--text-disabled); cursor: not-allowed; } /* ───────────────────────────────────────── ICON BUTTON 40×40 glass pill, swap-in icon child ───────────────────────────────────────── */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; border-radius: var(--radius-pill); background: var(--glass-bg-default); border: 1px solid var(--glass-stroke-default); color: var(--text-primary); cursor: pointer; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out); } .icon-btn:hover:not(:disabled) { background: var(--glass-bg-hover); border-color: var(--glass-stroke-hover); } .icon-btn:active:not(:disabled) { background: var(--glass-bg-pressed); border-color: var(--glass-stroke-pressed); transform: scale(0.95); } .icon-btn:disabled { background: var(--glass-bg-disabled); border-color: var(--glass-stroke-disabled); color: var(--text-disabled); backdrop-filter: none; -webkit-backdrop-filter: none; cursor: not-allowed; } .icon-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; } /* ───────────────────────────────────────── FAB — floating action button Circular ghost-glass action anchored to the viewport corner (e.g. 發表貼文 on 社群). Reuses the .btn--ghost glass treatment but is a perfect circle with a centred icon, lifted off the page with a soft drop-shadow. Markup: