/* Layout: 無側欄外框，52px 頂欄＋1180px 置中欄。首頁＝大標＋歌曲清單＋動作說明＋參加須知； 歌曲頁＝大字歌名，左 MV＋現在動作（固定），右逐行歌詞。介面是帶藍近黑上的平面； 顏色只用來分應援動作，同一種動作在歌詞、圖示、提醒都是同一個顏色。 */ :root { color-scheme: dark; /* ── Bahama Blue Palette (Primary Brand & Accent) ── */ --color-bahama-blue-50: #eff9ff; --color-bahama-blue-100: #def3ff; --color-bahama-blue-200: #b6e9ff; --color-bahama-blue-300: #76d9ff; --color-bahama-blue-400: #2dc7ff; --color-bahama-blue-500: #02b4f5; --color-bahama-blue-600: #0094d2; --color-bahama-blue-700: #0075aa; --color-bahama-blue-800: #006896; --color-bahama-blue-900: #075073; --color-bahama-blue-950: #04334d; /* ── Secondary Neutral Palette (WCAG 2.1 AA/AAA Compliant Cool Slate) ── */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; --color-slate-950: #020617; /* ── Semantic System Tokens ── */ /* 主色系 (Primary / Accent) */ --primary: var(--color-bahama-blue-500); --primary-hover: var(--color-bahama-blue-400); --primary-active: var(--color-bahama-blue-600); --primary-light: var(--color-bahama-blue-100); --primary-deep: var(--color-bahama-blue-900); --accent: var(--color-bahama-blue-500); --accent-hover: var(--color-bahama-blue-400); --accent-deep: var(--color-bahama-blue-900); /* 次要色與中性輔助色 (Secondary & Neutrals: 對比度 >= 4.5:1 AA, >= 7:1 AAA) */ --secondary: var(--color-slate-400); /* 次要資訊／圖示：對比度 6.8:1 (WCAG AA) */ --secondary-hover: var(--color-slate-200); /* 懸停高亮：對比度 14.2:1 (WCAG AAA) */ --secondary-muted: var(--color-slate-400); --secondary-border: var(--color-slate-700); /* 邊框線條：對比度 3.2:1 (WCAG 3:1 非文字規範) */ /* 介面層次基底 (Dark Stage Atmosphere) */ --ground: #070a12; /* 帶藍的近黑：熄燈後的場館 */ --surface: rgba(14, 19, 34, .9); --raised: #1c2439; --hover: #121a2c; --line: var(--color-slate-700); --text: var(--color-slate-50); /* 主要文字：對比度 18.2:1 (WCAG AAA) */ --muted: var(--color-slate-300); /* 內文輔助：對比度 11.5:1 (WCAG AAA) */ --faint: var(--color-slate-400); /* 標籤弱化：對比度 6.8:1 (WCAG AA) */ --ph: var(--color-slate-500); /* 佔位字 */ --paper: var(--color-slate-100); --on-paper: var(--color-slate-950); /* 應援動作色：在 --surface 上對比都在 4.5:1 以上；安靜聽用中性灰，不搶眼 */ --sing: var(--primary); --clap: var(--primary); --wave: #ffd84a; --jump: #5fd68a; --call: #ff7aa8; --gesture: #bc9cff; --listen: #9aa1b4; --radius-card: 16px; --gap: 16px; --pad: 24px; --font: "LINESeedTW", "LINE Seed TW", "LINESeedTW_OTF", "LINE Seed Sans TW", "LINE Seed JP", "Inter", "Noto Sans TC", "Noto Sans JP", "PingFang TC", "Hiragino Sans", "Microsoft JhengHei", system-ui, sans-serif; /* 首頁改版用：卡片、填色按鈕、選單、頁尾底色；淺色版在檔案最後的 [data-theme="light"] 覆蓋 */ --card: #111827; --menu: #1c2439; --fill: rgba(148, 163, 184, .16); --fill-hover: rgba(148, 163, 184, .24); --fill-press: rgba(148, 163, 184, .32); --row-hover: rgba(148, 163, 184, .08); --row-press: rgba(148, 163, 184, .15); --tint: var(--color-bahama-blue-500); --bar-bg: rgba(7, 10, 18, .72); --menu-shadow: 0 12px 32px rgba(0, 0, 0, .55); --dot-ring: none; --chip-on-bg: var(--color-slate-100); --chip-on-fg: var(--color-slate-950); --chip-on-hover: #ffffff; --foot-bg: #0b101c; --home-pad: clamp(20px, 4vw, 32px); /* 實心卡片上的按鈕：滑過、按下時往文字色偏一點 */ --card-hover: color-mix(in srgb, var(--card), var(--text) 7%); --card-press: color-mix(in srgb, var(--card), var(--text) 13%); --font-ja: "LINE Seed JP","LINESeedTW", "LINE Seed TW", "LINESeedTW_OTF", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Inter", sans-serif; /* ── 動效規範：介面俐落不花俏，只有舞台特效（歌詞飛入、合唱衝擊）比較有彈性 ── 緩動：狀態變化用 --ease；出現用 --ease-out（快出、輕落）；消失用 --ease-in（慢起、快走）； 循環呼吸用 --ease-sine；放開按鈕、勾選、開關用 --ease-spring（約 5% 回彈）。 時長：滑過 90ms、按下 110ms、圖示與選單 180ms、放開與卡片 240ms、對話框 360ms、換頁 480ms。 出現比消失長；線性只留給跟拍子、跟捲動同步的東西。 */ --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.05, .7, .1, 1); --ease-in: cubic-bezier(.3, 0, 1, 1); --ease-sine: cubic-bezier(.37, 0, .63, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --dur-hover: 90ms; --dur-press: 110ms; --dur-quick: 180ms; --dur-base: 240ms; --dur-slow: 360ms; --dur-page: 480ms; /* 常用組合：填色按鈕的顏色變化、按下縮小後放開回彈 */ --tr-color: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease); --tr-press: transform var(--dur-base) var(--ease-spring); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { background: var(--ground); max-width: 100%; overflow-x: hidden; } body { margin: 0; color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; } .shell { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } main.col { width: 100%; max-width: 1180px; box-sizing: border-box; } .view { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } a { color: inherit; } button, textarea, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } #fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } .shell { position: relative; z-index: 1; } /* 彩帶砲：副歌高潮時從左右下角噴，蓋在內容上但點得到下面 */ #confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 18; pointer-events: none; display: block; } .a-sing { --act: var(--sing); } .a-clap { --act: var(--clap); } .a-wave { --act: var(--wave); } .a-jump { --act: var(--jump); } .a-call { --act: var(--call); } .a-gesture { --act: var(--gesture); } .a-listen { --act: var(--listen); } /* 頂欄 */ body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ground); } .col { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } main.col { padding-block: 8px 72px; display: grid; gap: var(--gap); } .view { display: grid; gap: var(--gap); } .btn { height: 40px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; white-space: nowrap; } .btn:active { transform: scale(.98); } .btn.primary { background: var(--paper); color: var(--on-paper); } .btn.primary:hover { background: var(--text); } .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); /* taste-skill-ignore: outlined button */ } .btn.ghost:hover { background: var(--raised); } .btn svg { width: 14px; height: 14px; fill: currentColor; } .seg { display: inline-flex; background: var(--ground); border-radius: 999px; padding: 3px; flex-wrap: wrap; } .seg button { border: 0; background: transparent; color: var(--faint); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .seg button[class^="a-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--act); } .seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); } /* 首頁：動作說明 */ /* 歌曲頁 */ .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .left { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); display: grid; gap: var(--gap); } .mv { background: var(--surface); border-radius: var(--radius-card); position: relative; z-index: 5; } .screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #04060c; } .screen #ytp, .screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vstatus { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px; background: #04060c; } .vstatus[hidden] { display: none; } .vstatus p { margin: 0; max-width: 36ch; color: var(--muted); font-size: 13px; } .screen { border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; } #tools .view-opts { min-width: 200px; } .view-opts .sep { height: 1px; margin: 4px 6px; background: var(--line); } .view-opts button.do::after { display: none; } .view-opts button:disabled { opacity: .45; cursor: default; } .view-opts .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 10px; color: var(--muted); font-size: 14px; } .view-opts .row .seg button { padding: 4px 10px; } .view-opts .row .seg button::after { display: none; } /* 提示訊息：複製連結之類的結果，從下方浮出幾秒 */ .toast { position: fixed; z-index: 30; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px) scale(.96); opacity: 0; pointer-events: none; transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in); background: var(--paper); color: var(--on-paper); font-size: 14px; font-weight: 500; padding: 10px 18px; border-radius: 999px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } .toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } /* 加入主畫面提示 Toast（PWA Toast） */ .pwa-toast { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; white-space: nowrap; max-width: min(480px, calc(100vw - 28px)); box-sizing: border-box; } .pwa-toast.show { pointer-events: auto; } .pwa-toast-text { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pwa-toast-btn { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--on-paper); color: var(--paper); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; transition: var(--tr-color), var(--tr-press); } .pwa-toast-btn:hover { opacity: .9; } .pwa-toast-btn:active { transform: scale(.96); } .pwa-toast-x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--on-paper); opacity: .5; display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 13px; flex: none; transition: var(--tr-color); } .pwa-toast-x:hover { opacity: 1; background: rgba(0, 0, 0, .08); } /* 回報錯誤：表單還沒接上時，先讓人複製內容 */ .report { border: 0; padding: 0; border-radius: var(--radius-card); background: var(--raised); color: var(--text); width: min(440px, calc(100% - 32px)); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .report::backdrop { background: rgba(4, 6, 12, .7); } .report form { display: grid; gap: 12px; padding: 22px var(--pad); } .report h2 { margin: 0; font-size: 18px; font-weight: 600; } .report p { margin: 0; color: var(--muted); font-size: 14px; } .report dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; } .report dt { color: var(--faint); } .report dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .report select, .report textarea { width: 100%; background: var(--ground); border: 0; border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 14px; } .report textarea { min-height: 84px; resize: vertical; } .report .acts { display: flex; justify-content: flex-end; gap: 8px; } .cc { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); font-size: 13px; white-space: nowrap; } .cc select { background: var(--ground); color: var(--text); border: 0; border-radius: 999px; padding: 6px 10px; font-size: 13px; } .mvbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 18px; font-size: 13px; position: relative; z-index: 6; border-radius: 0 0 var(--radius-card) var(--radius-card); } .mvhint { color: var(--faint); margin-right: auto; } /* 這首的螢光棒顏色 */ .pen { display: inline-flex; align-items: center; gap: 6px; color: var(--faint); white-space: nowrap; } .pen i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); } .pen i.rb { background: conic-gradient(#ff4a5a, #ff9a3c, #ffd84a, #4ee08a, #5fd4ff, #5d9dfe, #a374ff, #ff4a5a); box-shadow: none; } .pen b { color: var(--muted); font-weight: 500; } /* 歌曲頁不顯示網站頂欄，頂部是返回、上一首、歌名、下一首 */ .on-song .bar { display: none; } .on-song .left, .on-song .lyrics { top: calc(env(safe-area-inset-top, 0px) + 16px); } .on-song .lyrics { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 32px); } .songbar { display: flex; align-items: center; gap: 8px; padding-top: 8px; position: relative; z-index: 25; } /* 練習工具：右上角的圓鈕，寬螢幕多顯示文字；選單往下蓋在影片和歌詞上 */ .songbar .vopt summary { height: 40px; padding: 0 16px 0 12px; gap: 8px; background: var(--surface); color: var(--text); font-size: 14px; } .songbar .vopt summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .songbar .vopt summary::after { display: none; } .songbar .vopt[open] summary { background: var(--raised); } /* 獨立手燈連動按鈕：頂部導覽列獨立顯示 */ .lamp-btn, .songbar .lamp-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; max-height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 14px; font-family: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: var(--tr-color), border-color var(--dur-hover) var(--ease), box-shadow var(--dur-base) var(--ease), var(--tr-press); user-select: none; box-sizing: border-box; flex: none; } .lamp-btn:hover, .songbar .lamp-btn:hover { background: var(--raised); color: var(--text); border-color: var(--faint); } .lamp-btn svg, .songbar .lamp-btn svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: stroke var(--dur-quick) var(--ease); } .lamp-btn[aria-pressed="true"], .songbar .lamp-btn[aria-pressed="true"] { background: var(--raised); color: var(--text); border-color: var(--accent); } .lamp-btn[aria-pressed="true"] svg, .songbar .lamp-btn[aria-pressed="true"] svg { stroke: var(--accent); } /* 沉浸模式按鈕切換 */ .immersive-btn .ico-compress { display: none; } .immersive-btn[aria-pressed="true"] .ico-expand { display: none; } .immersive-btn[aria-pressed="true"] .ico-compress { display: block; } .immersive-btn[aria-pressed="true"] { background: var(--raised); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(93, 157, 254, 0.35); } .immersive-btn[aria-pressed="true"] svg { stroke: var(--accent); } .lamp-btn .tool-sub, .songbar .lamp-btn .tool-sub { font-size: 11.5px; color: var(--faint); font-weight: normal; margin-left: 2px; } .lamp-btn[aria-pressed="true"] .tool-sub, .songbar .lamp-btn[aria-pressed="true"] .tool-sub { color: var(--muted); } /* 手燈成功連動（linked）狀態：亮眼綠色呼吸光暈 */ .lamp-btn.lamp-linked, .songbar .lamp-btn.lamp-linked { background: rgba(16, 185, 129, 0.12) !important; border-color: rgba(16, 185, 129, 0.5) !important; color: #10b981 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.25) !important; } .lamp-btn.lamp-linked svg, .songbar .lamp-btn.lamp-linked svg { stroke: #10b981 !important; filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.8)); } .lamp-btn.lamp-linked .tool-sub, .songbar .lamp-btn.lamp-linked .tool-sub { color: #10b981 !important; font-weight: 600; } /* ── 歌詞子母畫面小窗按鈕 (Lyrics PiP Button) ── */ #toolPipBtn svg rect { transition: fill var(--dur-quick) var(--ease); } #toolPipBtn[aria-pressed="true"] svg rect:last-child { fill: var(--accent); } .ib { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); text-decoration: none; } .ib:hover { background: var(--raised); } .ib:not([href]) { visibility: hidden; } .ib svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 999px; padding: 0 4px; } .pick .ib { background: transparent; } .pick h1 { flex: 1; min-width: 0; margin: 0; text-align: center; font-family: var(--font-ja); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pick h1 span { color: var(--faint); font-family: var(--font); font-weight: 500; font-size: 14px; margin-left: 8px; } .cue { background: var(--surface); border-radius: var(--radius-card); padding: 20px var(--pad); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; } .cue .top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .cue h2 { margin: 0; font-size: 13px; font-weight: 500; color: var(--faint); } .cue .now { display: flex; align-items: center; gap: 12px; min-width: 0; } .cue .now svg { width: 32px; height: 32px; flex: none; } .cue .now strong { font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--act, var(--text)); transition: color var(--dur-base) var(--ease); } .cue .how { grid-column: 1 / -1; color: var(--muted); } .cue .next { text-align: right; color: var(--faint); font-size: 13px; } .cue .next b { color: var(--act, var(--text)); } .cue .next b { display: block; font-weight: 500; font-size: 15px; } /* 這句沒有動作：不提示，只留下一個動作 */ .cue.idle .now, .cue.idle .how { display: none; } .cue.idle .next { grid-column: 1 / -1; text-align: left; } .summary { grid-column: 1 / -1; margin: 6px 0 0; padding: 0 0 0 18px; color: var(--muted); } .summary li { margin: 2px 0; } .cue.playing .summary, .cue.playing.alerting .how { display: none; } .cue.playing.alerting .now, .cue.playing.alerting .next { opacity: 0; visibility: hidden; } .switch { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0; } .switch i { width: 30px; height: 18px; border-radius: 999px; background: var(--raised); position: relative; transition: background-color var(--dur-quick) var(--ease); } .switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); transition: transform var(--dur-base) var(--ease-spring), width var(--dur-press) var(--ease), background-color var(--dur-quick) var(--ease); } .switch[aria-pressed="true"] i { background: var(--accent-deep); } .switch[aria-pressed="true"] i::after { transform: translateX(12px); background: var(--text); } .lyrics { background: var(--surface); border-radius: var(--radius-card); padding: 12px 8px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 68px); display: flex; flex-direction: column; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 76px); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } /* 歌詞自己捲，MV 和頁面不動 */ .lyrics-scroll { flex: 1; min-height: 0; width: 100%; max-width: 100%; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; position: relative; scrollbar-width: thin; scrollbar-color: var(--line) transparent; box-sizing: border-box; } .lyrics-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .lyrics-top h2 { margin: 0 auto 0 0; font-size: 17px; font-weight: 600; white-space: nowrap; } /* ── Folia 風格：莫奈 / Apple Music 景深視差與焦點光暈 (Depth Focus) ── */ .depth-focus { perspective: 1000px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .depth-focus .ln { transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); transform-origin: left center; will-change: transform, filter, opacity; } .depth-focus.has-now .ln:not(.now) { filter: blur(1.8px); opacity: .38; transform: scale(.985); } .depth-focus.has-now .ln.now { filter: blur(0px) !important; opacity: 1 !important; transform: scale(1.015); box-shadow: inset 3.5px 0 0 var(--act, var(--text)), 0 4px 20px rgba(0, 0, 0, .3); z-index: 2; } .depth-focus.has-now .ln.now .ja { filter: drop-shadow(0 0 10px rgba(2, 180, 245, .25)); } .lyrics-scroll:hover .depth-focus.has-now .ln:not(.now), .lyrics-scroll.user-scrolling .depth-focus.has-now .ln:not(.now) { filter: blur(0px); opacity: .72; transform: scale(1); } .lyrics-scroll:hover .depth-focus.has-now .ln.now, .lyrics-scroll.user-scrolling .depth-focus.has-now .ln.now { opacity: 1; } @media (prefers-reduced-motion: reduce) { .depth-focus .ln { transform: none !important; transition: opacity var(--dur-base) var(--ease); } .depth-focus.has-now .ln:not(.now) { filter: none !important; transform: none !important; opacity: .45; } .depth-focus.has-now .ln.now { transform: none !important; } } /* ── Folia 風格：字體動態飛入 (Folia Typography Fly-in) ── */ .fly-in .ln.now .ja .k { display: inline-block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; will-change: transform, opacity, filter; animation: folia-glyph-spring .5s cubic-bezier(.16, 1.08, .38, 1.15) both; animation-delay: min(calc(var(--i, 0) * 24ms), 320ms); } .fly-in .ln.now .ja .k.sung { animation: folia-glyph-spring .5s cubic-bezier(.16, 1.08, .38, 1.15) both, chorus-glow-pulse 2.2s var(--ease-sine) infinite alternate .45s; } .fly-in .ln.now .zh { will-change: transform, opacity; animation: folia-zh-fade var(--dur-slow) var(--ease-out) both; animation-delay: 80ms; } @keyframes folia-glyph-spring { 0% { opacity: 0; transform: translateY(20px) scale(.68) rotate(var(--rot, -6deg)); filter: blur(8px); } 65% { transform: translateY(-2px) scale(1.08) rotate(calc(var(--rot, -6deg) * -0.2)); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); filter: blur(0); } } @keyframes folia-zh-fade { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } .immersive-mode .fly-in .ln.now .ja .k { animation-duration: .55s; animation-timing-function: cubic-bezier(.15, 1.15, .32, 1.18); animation-delay: min(calc(var(--i, 0) * 26ms), 340ms); } @media (prefers-reduced-motion: reduce) { .fly-in .ln.now .ja .k, .fly-in .ln.now .zh { animation: none !important; transform: none !important; filter: none !important; } } /* 有動作的行，日文用該動作的顏色（淡），唱到時變全彩並在左邊加色條 */ .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; transition: background-color var(--dur-quick) var(--ease), box-shadow var(--dur-base) var(--ease); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; position: relative; } .ln:hover { background: var(--hover); } .ln .ja { position: relative; font-family: var(--font-ja); font-size: calc(var(--ly-ja, 17px) * var(--ly-k, 1)); line-height: 1.7; color: var(--muted); transition: color var(--dur-base) var(--ease); min-width: 0; width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; } .ln[class*=" a-"]:not(.a-listen):not(.a-sing) .ja { color: color-mix(in srgb, var(--act) 62%, var(--muted)); } /* 「唱」不染整行，只染觀眾要唱的字 */ .ln .sung { position: relative; display: inline-block; color: color-mix(in srgb, var(--sing) 75%, var(--muted)); transition: color var(--dur-base) var(--ease), text-shadow var(--dur-base) var(--ease); } .ln.now .sung { color: #fff; font-weight: 700; text-shadow: 0 0 8px rgba(2, 180, 245, .95), 0 0 20px rgba(45, 199, 255, .65), 0 0 35px rgba(2, 180, 245, .4); animation: chorus-glow-pulse 2.2s var(--ease-sine) infinite alternate; } .karaoke .ln.now .k.sung.lit, .karaoke .ln.now .k.sung.lit rt { color: #fff !important; text-shadow: 0 0 10px rgba(2, 180, 245, 1), 0 0 24px rgba(45, 199, 255, .75), 0 0 40px rgba(2, 180, 245, .5); } @keyframes chorus-glow-pulse { 0% { text-shadow: 0 0 6px rgba(2, 180, 245, .8), 0 0 16px rgba(45, 199, 255, .5); transform: scale(1); } 100% { text-shadow: 0 0 12px rgba(2, 180, 245, 1), 0 0 28px rgba(45, 199, 255, .8), 0 0 45px rgba(2, 180, 245, .5); transform: scale(1.05); } } /* 合唱字型輪廓音波衝擊 (Glyph Shockwave) - 無幾何形狀，由字型筆劃輪廓自身向外擴散震撼 */ .chorus-glyph-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; font: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; white-space: inherit; color: transparent !important; -webkit-text-stroke: 1.2px #fff; filter: drop-shadow(0 0 6px var(--sing)) drop-shadow(0 0 16px rgba(45, 199, 255, .9)); transform-origin: center center; animation: glyph-shockwave .75s var(--ease-out) forwards; will-change: transform, opacity, filter; z-index: 2; overflow: hidden; } .chorus-glyph-wave ruby, .chorus-glyph-wave rt, .chorus-glyph-wave span { color: transparent !important; -webkit-text-stroke: inherit; font: inherit; } .chorus-glyph-wave rt { -webkit-text-stroke: .8px var(--sing); font-size: 11px; } @keyframes glyph-shockwave { 0% { transform: scale(1); opacity: 1; -webkit-text-stroke: 1.5px #fff; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px var(--sing)); } 35% { opacity: .85; -webkit-text-stroke: 1.2px var(--sing); filter: drop-shadow(0 0 8px var(--sing)) drop-shadow(0 0 18px rgba(45, 199, 255, .8)); } 100% { transform: scale(1.4) translateY(-3px); opacity: 0; -webkit-text-stroke: .7px var(--sing); filter: blur(1.5px) drop-shadow(0 0 24px rgba(2, 180, 245, 0)); } } /* 副歌高潮行氛圍激發 (Climax Surge) */ .ln.now.climax-surge { background: color-mix(in srgb, var(--act, var(--sing)) 14%, var(--raised)); box-shadow: inset 4px 0 0 var(--sing), 0 0 24px color-mix(in srgb, var(--act, var(--sing)) 22%, transparent); transition: background-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); } .ln.now.climax-surge .ja { text-shadow: 0 0 12px color-mix(in srgb, var(--act, var(--sing)) 60%, transparent); } @media (prefers-reduced-motion: reduce) { .ln.now .sung { animation: none; transform: none; } .chorus-glyph-wave { display: none !important; } } .ln .zh { grid-column: 1; font-size: calc(var(--ly-zh, 14px) * var(--ly-k, 1)); color: var(--faint); min-width: 0; width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; } .ln .ph { color: var(--ph); } .ln .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; align-items: center; } .ln .acts svg { width: 18px; height: 18px; } .ln .call { grid-column: 1; justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--act, var(--text)); background: color-mix(in srgb, var(--act, var(--text)) 14%, transparent); border-radius: 999px; padding: 2px 10px; } .ln.now { background: var(--raised); box-shadow: inset 3px 0 0 var(--act, var(--text)); } .ln.now .ja, .ln.now.a-listen .ja { color: var(--text); } .ln.now:not(.a-listen):not(.a-sing) .ja { color: var(--act, var(--text)); } .ln.now .zh { color: var(--muted); } .ln.past .ja { opacity: .55; } .hide-ja .ja, .hide-zh .zh { display: none; } .ln ruby { ruby-position: over; } .ln rt { font-size: 11px; color: var(--faint); font-family: var(--font-ja); } .ln.now rt { color: var(--muted); } .hide-kana rt { display: none; } .karaoke .ln.now .ja { color: var(--color-slate-400) !important; } .karaoke .ln.now .ja rt { color: var(--color-slate-400); } .karaoke .ln .k, .karaoke .ln rt { transition: color .08s linear; } .karaoke .ln.now .k.lit, .karaoke .ln.now .k.lit rt { color: #fff; } .karaoke .ln.now.a-listen .k.lit, .karaoke .ln.now.a-listen .k.lit rt, .karaoke .ln.now.a-sing .k.lit, .karaoke .ln.now.a-sing .k.lit rt { color: var(--text); } .karaoke .ln.now .k.sung { color: var(--color-slate-400); } .karaoke .ln.now .k.sung.lit, .karaoke .ln.now .k.sung.lit rt { color: var(--sing); } .only-sing .ln:not(.sing) { display: none; } .size-s { --ly-k: .88; } .size-l { --ly-k: 1.15; } /* 點圖例：只亮出有那個動作的句子 */ .ln.dim { opacity: .28; } .ln.dim:hover { opacity: .6; } .legend button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: inherit; font-size: 13px; padding: 2px 8px; margin: -2px -8px; border-radius: 999px; cursor: pointer; } .legend button:hover { background: var(--hover); } .legend button[aria-pressed="true"] { background: color-mix(in srgb, var(--act) 18%, transparent); color: var(--text); } /* 跳到大合唱：一顆膠囊，左右兩個箭頭 */ .jump { display: inline-flex; align-items: center; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--sing) 14%, transparent); color: var(--sing); font-size: 13px; font-weight: 600; } .jump .mid { width: auto; border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 600; } .jump .mid[aria-pressed="true"] { background: var(--sing); color: var(--on-paper); } .jump button { width: 32px; height: 32px; border: 0; background: none; color: inherit; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; } .jump button:hover:not(:disabled) { background: color-mix(in srgb, var(--sing) 22%, transparent); } .jump button:disabled { color: var(--faint); opacity: .5; cursor: default; } /* 顯示選項收進一個按鈕 */ .vopt { position: relative; } .vopt summary { list-style: none; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; background: var(--ground); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; } .vopt summary::-webkit-details-marker { display: none; } .vopt summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-quick) var(--ease); } .vopt[open] summary { color: var(--text); background: var(--raised); } .vopt[open] summary::after { transform: translateY(1px) rotate(-135deg); } .view-opts { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; display: grid; gap: 2px; width: 196px; max-width: calc(100vw - 24px); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 14px; background: color-mix(in srgb, var(--raised) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line, rgba(255, 255, 255, .1)); box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .2); transform-origin: top right; animation: vopt-pop-in var(--dur-quick) var(--ease-out); } .view-opts.to-right { right: auto; left: 0; transform-origin: top left; } .view-opts.to-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; } @keyframes vopt-pop-in { from { opacity: 0; transform: scale(.95) translateY(-3px); } to { opacity: 1; transform: scale(1) translateY(0); } } .view-opts button { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; color: var(--muted); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; text-align: left; cursor: pointer; transition: var(--tr-color); } .view-opts button:hover, .view-opts a:hover { background: var(--hover); color: var(--text); } .view-opts a { display: block; border-radius: 8px; padding: 7px 10px; color: var(--muted); font-size: 13.5px; text-decoration: none; } .view-opts .m-only { display: none; } .view-opts button::after { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); transition: background-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), transform var(--dur-base) var(--ease-spring); } .view-opts button[aria-pressed="true"] { color: var(--text); font-weight: 500; } .view-opts button[aria-pressed="true"]::after { background: var(--accent); box-shadow: 0 0 8px var(--accent); } #tool-lamp.lamp-linked::after { background: #10b981 !important; box-shadow: 0 0 8px #10b981, 0 0 14px rgba(16, 185, 129, 0.6) !important; animation: lamp-pulse 2s var(--ease-sine) infinite; } @keyframes lamp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.9); } } /* 手燈連動開關：只在電腦版支援，手機／平板隱藏 */ @media (pointer: coarse) { #tool-lamp, #lampLiveBadge { display: none !important; } } .view-opts .tool-sub { display: block; font-size: 11px; color: var(--faint); font-weight: normal; margin-top: 1px; } .view-opts button[aria-pressed="true"] .tool-sub { color: var(--muted); } .lamp-live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #10b981; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 999px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .lamp-live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; } .tips-opt { display: none; } .tips-opt .view-opts { min-width: 220px; max-width: min(320px, calc(100vw - 32px)); padding: 10px 14px; z-index: 30; } .tips-opt .summary { margin: 0; padding-left: 1.2em; font-size: 13px; line-height: 1.6; color: var(--text); white-space: normal; } .tips-opt .summary li { margin: 6px 0; } .live-opt { display: inline-block; } .live-opt .view-opts { min-width: 220px; max-width: min(320px, calc(100vw - 32px)); padding: 8px 10px; z-index: 30; } .live-menu-title { font-size: 11.5px; font-weight: 600; color: var(--faint); letter-spacing: .04em; padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .live-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .live-menu-list a { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 8px; color: var(--text); font-size: 13px; text-decoration: none; transition: var(--tr-color); } .live-menu-list a:hover { background: var(--surface); color: var(--accent); } .live-menu-list a svg.ext { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; flex-shrink: 0; margin-left: 8px; } /* 圖例：這首用到的動作 */ #homeLegend { padding: 4px 0 16px; gap: 6px 16px; } #homeLegend svg { width: 16px; height: 16px; } .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 14px 10px; font-size: 13px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--act); } .empty { padding: 12px 12px 8px; color: var(--muted); display: grid; gap: 10px; justify-items: start; } .empty .summary { margin: 0; color: var(--text); } .log { border: 0; padding: 0; border-radius: var(--radius-card); background: var(--raised); color: var(--text); width: min(560px, calc(100% - 32px)); max-height: min(80dvh, 720px); box-shadow: 0 24px 64px rgba(0, 0, 0, .6); } .log::backdrop { background: rgba(4, 6, 12, .7); } .log form { display: flex; flex-direction: column; max-height: inherit; } .log header { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad) 10px; } .log h2 { margin: 0; font-size: 18px; font-weight: 600; } .log .x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); cursor: pointer; } .log .x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } .log .body { overflow-y: auto; padding: 0 var(--pad) 22px; overscroll-behavior: contain; } .log h3 { margin: 18px 0 6px; font-size: 15px; font-weight: 600; color: var(--accent); } .log h3 small { margin-left: 8px; color: var(--faint); font-size: 13px; font-weight: 400; } .log ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 14px; line-height: 1.7; } .log code { font-size: .92em; color: var(--text); } .ico { fill: none; stroke: var(--act, var(--faint)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* 動作字卡：不蓋住 MV 和歌詞。畫面四周亮起這首的螢光棒顏色，中下方一張字卡寫出要做的事（手機貼在影片下方） */ .cueframe { position: fixed; inset: 0; z-index: 19; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease); box-shadow: inset 0 0 0 2px var(--c1, var(--accent)), inset 0 0 120px 4px color-mix(in srgb, var(--c1, var(--accent)) 45%, transparent), inset 0 -80px 160px -40px color-mix(in srgb, var(--c2, var(--accent)) 65%, transparent); } .alert { position: fixed; z-index: 20; left: var(--al-left, 50%); top: var(--al-top, auto); bottom: auto; width: max-content; max-width: min(640px, var(--al-max, calc(100% - 24px))); opacity: 0; transform: translate(-50%, 14px) scale(.97); pointer-events: none; transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in); } .alert.show { opacity: 1; transform: translate(-50%, 0); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .alert .card { display: grid; justify-items: center; gap: 8px; padding: 12px 20px 14px; border-radius: 20px; text-align: center; background: color-mix(in srgb, var(--raised) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 12px 36px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--act, var(--accent)) 40%, transparent); transform: scale(calc(1 + var(--pulse, 0) * .02)); } .alert .ahead { display: inline-flex; align-items: center; gap: 8px; color: var(--act, var(--text)); font-size: 15px; font-weight: 600; } .alert .ahead svg { width: 22px; height: 22px; } .alert .ahead em { font-style: normal; font-weight: 500; color: var(--muted); } .alert .how { color: var(--muted); font-size: 14px; } .alert .how:empty { display: none; } /* 大合唱：把要唱的字放大，唱到的字亮起來 */ .alert .words { font-family: var(--font-ja); font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.3; color: var(--color-slate-400); text-wrap: balance; } .alert .words .k { transition: color .08s linear; } .alert .words .k.lit { color: var(--color-bahama-blue-400); } .alert .words rt { font-size: .32em; color: var(--muted); } /* 喊聲、手勢：大字，每拍跳一下 */ .alert .big { font-family: var(--font-ja); font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; line-height: 1.2; color: var(--act); transform: translateY(calc(var(--pulse, 0) * -6px)); } /* 拍手：每拍亮一顆，小節第一拍那顆比較大 */ .alert .dots { display: flex; align-items: center; gap: 18px; height: 40px; } .alert .dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--line); transition: background-color .06s var(--ease), transform .06s var(--ease), box-shadow .06s var(--ease); } .alert .dots i.first { width: 30px; height: 30px; } .alert .dots i.on { background: var(--act); transform: scale(1.25); box-shadow: 0 0 18px var(--act); } /* 揮手：一支螢光棒跟著拍子左右擺 */ .alert .swing { width: 132px; height: 72px; overflow: visible; } .alert .swing .arc { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; } .alert .swing .stick { transform-origin: 66px 70px; transform: rotate(var(--ang, 0deg)); } .alert .swing line { stroke: var(--act); stroke-width: 6; stroke-linecap: round; } /* 跳躍：圖示在拍子上彈起 */ .alert .hop { width: 56px; height: 56px; transform: translateY(calc(var(--pulse, 0) * -14px)); } .alert .hop .ico { stroke: var(--act); stroke-width: 1.5; } @media (max-width: 900px) { /* 手機：影片下面不放提示框（現在的動作看歌詞顏色和大字提醒），歌詞標題也拿掉，歌詞區大一點；大字提醒開關移到練習工具 */ .cue, .lyrics-top h2 { display: none; } .tips-opt:not([hidden]) { display: inline-block; } .view-opts .m-only { display: flex; } .lyrics-top .vopt { margin-left: auto; } .songbar .vopt summary { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } .songbar .vopt summary .lbl { display: none; } .songbar .lamp-btn { width: 40px; padding: 0; justify-content: center; border-radius: 50%; } .songbar .lamp-btn .lamp-lbl, .songbar .lamp-btn .tool-sub { display: none; } .grid { grid-template-columns: 1fr; } .left { position: static; } .lyrics { position: static; height: 70dvh; max-height: none; } .mvhint { display: none; } /* 提示縮成一列：現在的動作、下一個、大字提醒開關 */ .cue { grid-template-columns: minmax(0, 1fr) auto auto; padding: 10px 14px; gap: 4px 12px; } .cue .top { display: contents; } .cue h2, .cue .how, .cue .summary { display: none; } .cue .now { order: 1; gap: 8px; } .cue .next { order: 2; } .cue .switch { order: 3; } .cue .now svg { width: 22px; height: 22px; } .cue .now strong { font-size: 18px; } .cue .next b { font-size: 14px; } .cue.idle .next { grid-column: 1 / 3; } .lyrics { --ly-ja: 15px; --ly-zh: 13px; } .ln { padding: 8px 12px; } .alert .card { gap: 6px; padding: 12px 16px 14px; border-radius: 18px; } .alert .words, .alert .big { font-size: clamp(24px, 7.5vw, 34px); } } @media (max-width: 900px) and (min-height: 560px) { .on-song main.col { padding-block: 0; } .on-song footer { display: none; } .on-song #song { height: 100dvh; padding: env(safe-area-inset-top, 0px) 0 max(8px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; } .on-song .grid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .on-song .left { gap: 8px; } .on-song .lyrics { flex: 1; min-height: 0; height: auto; } } @media (max-width: 600px) { :root { --pad: 18px; } main.col { padding-top: 4px; } .seg button { flex: none; } .mvbar { gap: 6px 12px; padding-inline: 14px; } } @media (orientation: landscape) and (max-height: 500px) { .on-song main.col { padding-block: 0; } .on-song footer { display: none; } .on-song #song { height: 100dvh; padding: 4px 0 max(4px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; } .songbar { padding-top: 2px; } .songbar .ib { width: 34px; height: 34px; } .cue, .lyrics-top h2 { display: none; } .view-opts .m-only { display: flex; } .lyrics-top .vopt { margin-left: auto; } .songbar .vopt summary { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; } .songbar .vopt summary .lbl { display: none; } .songbar .lamp-btn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; } .songbar .lamp-btn .lamp-lbl, .songbar .lamp-btn .tool-sub { display: none; } .on-song .grid { flex: 1; min-height: 0; display: grid; grid-template-columns: min(52vw, calc((100dvh - 200px) * 16 / 9)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; } .on-song .left { position: static; gap: 6px; min-height: 0; overflow-y: auto; align-self: stretch; } .on-song .lyrics { position: static; height: auto; max-height: none; min-height: 0; align-self: stretch; } .mvhint, .cue h2, .cue .how, .cue .summary { display: none; } .mvbar { padding: 6px 12px; } .cue { grid-template-columns: minmax(0, 1fr) auto auto; padding: 8px 12px; gap: 4px 12px; } .cue .top { display: contents; } .cue .now { order: 1; gap: 8px; } .cue .next { order: 2; } .cue .switch { order: 3; } .cue .now svg { width: 22px; height: 22px; } .cue .now strong { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cue .now { min-width: 0; } .lyrics { --ly-ja: 15px; --ly-zh: 13px; } .alert .card { gap: 4px; padding: 8px 14px 10px; } .alert .words, .alert .big { font-size: clamp(20px, 6.5vh, 28px); } } /* ── Folia 風格：全螢幕沉浸播放模式 (Immersive Stage Mode) ── */ /* 1. 動態流光極光背景 (Ambient Light Mesh) 與 BPM 節奏閃爍 */ .ambient-mesh { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .8s var(--ease-sine); } .immersive-mode .ambient-mesh { opacity: 1; } .ambient-mesh::before, .ambient-mesh::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .38; will-change: transform, opacity; animation: ambient-drift 20s var(--ease-sine) infinite alternate; } .ambient-mesh::before { width: 75vw; height: 75vw; top: -25%; left: -15%; background: radial-gradient(circle, var(--mesh-c1, var(--color-bahama-blue-500)) 0%, transparent 70%); } .ambient-mesh::after { width: 65vw; height: 65vw; bottom: -20%; right: -10%; background: radial-gradient(circle, var(--mesh-c2, #ff4a5a) 0%, transparent 70%); animation-duration: 26s; animation-direction: alternate-reverse; } .immersive-mode .ambient-mesh::before, .immersive-mode .ambient-mesh::after { opacity: calc(0.32 + var(--beat-hit, 0) * 0.35); } /* BPM 節拍中心光暈爆發層 */ .ambient-beat-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mesh-c1, var(--color-bahama-blue-500)) 45%, transparent) 0%, color-mix(in srgb, var(--mesh-c2, #ff4a5a) 25%, transparent) 45%, transparent 75%); mix-blend-mode: screen; opacity: 0; will-change: opacity, transform; transition: transform .06s var(--ease); } .immersive-mode .ambient-beat-flash { opacity: calc(var(--beat-hit, 0) * 0.85); transform: scale(calc(1 + var(--beat-hit, 0) * 0.08)); } @keyframes ambient-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 6%) scale(1.08); } 100% { transform: translate(-6%, 5%) scale(0.96); } } /* 2. 沉浸模式下的整體全螢幕覆蓋 */ body.immersive-mode { background: #04060c; overflow: hidden !important; } body.immersive-mode .bar, body.immersive-mode footer, body.immersive-mode #home { display: none !important; } body.immersive-mode #fx { z-index: 2; opacity: 0.85; pointer-events: none; } body.immersive-mode #confetti { z-index: 130; pointer-events: none; } body.immersive-mode #song { position: fixed; inset: 0; z-index: 10; width: 100vw; height: 100dvh; background: transparent; padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden; } /* 頂部懸浮控制列：半透明磨砂玻璃膠囊，閒置 3 秒自動隱藏 */ body.immersive-mode .songbar { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); left: max(24px, env(safe-area-inset-left, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); z-index: 120; background: rgba(14, 19, 34, .72); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 6px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } body.immersive-mode .songbar.autohide { opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-base) var(--ease-in); } /* 舞台主區域：左右劇院式分欄 */ body.immersive-mode .grid { width: 100%; height: 100%; padding: calc(max(16px, env(safe-area-inset-top, 0px)) + 64px) max(32px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; box-sizing: border-box; } body.immersive-mode .left { position: static; display: flex; flex-direction: column; gap: 16px; max-width: 580px; justify-self: center; width: 100%; } /* MV 卡片帶有環境光暈與磨砂深邃倒影，隨 BPM 節奏呼吸 */ body.immersive-mode .mv { background: rgba(14, 19, 34, .8); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 64px rgba(0, 0, 0, .7), 0 0 calc(35px + var(--beat-hit, 0) * 45px) color-mix(in srgb, var(--mesh-c1, rgba(2, 180, 245, .3)) calc(25% + var(--beat-hit, 0) * 45%), transparent); border-radius: 22px; overflow: hidden; transition: box-shadow .08s linear; } /* 提示卡片 */ body.immersive-mode .cue { background: rgba(14, 19, 34, .72); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 12px 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } body.immersive-mode .cue .now strong { font-size: clamp(20px, 2.2vw, 28px); } /* 沉浸式歌詞列車 */ body.immersive-mode .lyrics { background: transparent !important; border: none !important; box-shadow: none !important; height: 100%; max-height: calc(100dvh - 120px); padding: 0; display: flex; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } body.immersive-mode .lyrics-top { display: none; } body.immersive-mode .lyrics-scroll { flex: 1; mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%); overflow-x: hidden; overflow-y: auto; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } body.immersive-mode .ln { padding: 16px 20px; border-radius: 18px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: minmax(0, 1fr) auto; } body.immersive-mode .ln .ja { font-size: clamp(22px, 2.7vw, 38px); line-height: 1.48; letter-spacing: -.01em; min-width: 0; width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; } body.immersive-mode .ln .zh { font-size: clamp(14px, 1.5vw, 19px); margin-top: 6px; min-width: 0; width: 100%; overflow-wrap: anywhere; word-break: normal; white-space: normal; } body.immersive-mode .ln.now { transform: scale(1.02); background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 4px 0 0 var(--act, var(--accent)), 0 8px 28px rgba(0, 0, 0, .45); } /* 手機垂直螢幕下的沉浸排版 */ @media (max-width: 900px) { body.immersive-mode .songbar { left: 12px; right: 12px; padding: 4px 10px; } body.immersive-mode .grid { display: flex; flex-direction: column; padding: calc(max(12px, env(safe-area-inset-top, 0px)) + 54px) 14px max(14px, env(safe-area-inset-bottom, 0px)); gap: 14px; align-items: stretch; } body.immersive-mode .left { position: static; width: 100%; max-width: none; max-height: 28vh; } body.immersive-mode .mv { border-radius: 16px; } body.immersive-mode .cue { display: none; } body.immersive-mode .lyrics { flex: 1; width: 100%; max-height: none; height: auto; } body.immersive-mode .ln { padding: 12px 14px; } body.immersive-mode .ln .ja { font-size: clamp(19px, 5.2vw, 26px); } body.immersive-mode .ln .zh { font-size: clamp(13px, 3.6vw, 15px); } } /* ── 歌曲頁面應援速覽卡片 (Song Guide Card) ── */ .song-guide-card { margin: 32px 0 16px; padding: 18px 20px; background: var(--raised); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; } .song-guide-card .card-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); } .song-guide-card .card-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 13.5px; line-height: 1.6; } .song-guide-card dt { color: var(--faint); font-weight: 500; white-space: nowrap; } .song-guide-card dd { margin: 0; color: var(--muted); min-width: 0; overflow-wrap: anywhere; word-break: normal; } .song-guide-card dd a { color: var(--accent); text-decoration: none; } .song-guide-card dd a:hover { text-decoration: underline; } .song-guide-card dd a.live-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; margin: 2px 6px 3px 0; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--accent); text-decoration: none; line-height: 1.5; } .song-guide-card dd a.live-chip:hover { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color: var(--accent); text-decoration: none; } /* ── 舞台燈光效果開關 (Light Effects Toggle) ── */ body.no-lights #fx, body.no-lights #confetti, body.no-lights .ambient-mesh, body.no-lights .ambient-beat-flash, body.no-lights .cueframe { display: none !important; opacity: 0 !important; visibility: hidden !important; } body.no-lights .chorus-glyph-wave { display: none !important; } body.no-lights .climax-surge { box-shadow: inset 4px 0 0 var(--sing) !important; background: var(--raised) !important; } /* ── 反拍專屬視覺節奏儀與提示 (Offbeat Rhythm UX) ── */ .offbeat-meter { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 2px; margin-top: 2px; } .beat-step { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line); position: relative; transition: transform .08s var(--ease), background-color .08s var(--ease), border-color .08s var(--ease), box-shadow .08s var(--ease); user-select: none; } .beat-step .step-num { font-size: 11px; font-weight: 600; color: var(--faint); line-height: 1; } .beat-step .step-txt { font-size: 14px; font-weight: 700; color: var(--muted); line-height: 1.2; } .beat-step .step-sub { font-size: 11px; color: var(--faint); line-height: 1; margin-top: 1px; } .beat-step .step-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; margin-top: 1px; } .beat-step .step-ico .ico, .beat-step .step-ico path { stroke: currentColor !important; stroke-width: 2; } /* 第 2、4 拍（拍手目標拍） */ .beat-step.target-clap { border-color: color-mix(in srgb, var(--clap, var(--primary)) 55%, transparent); background: color-mix(in srgb, var(--clap, var(--primary)) 12%, var(--surface)); } .beat-step.target-clap .step-txt { color: var(--clap, var(--primary)); } .beat-step.target-clap .step-ico { stroke: var(--clap, var(--primary)); } /* 正在播到的這拍 (Current Beat) */ .beat-step.current { border-color: var(--color-slate-400); background: var(--raised); } .beat-step.current .step-num { color: var(--text); } /* 反拍拍下的那一瞬間 (Hit Flash) */ .beat-step.target-clap.hit { background: var(--clap, var(--primary)) !important; border-color: var(--text) !important; transform: scale(1.1) translateY(-2px); box-shadow: 0 0 16px var(--clap, var(--primary)), 0 4px 10px rgba(0, 0, 0, .4); } .beat-step.target-clap.hit .step-num, .beat-step.target-clap.hit .step-txt, .beat-step.target-clap.hit .step-sub { color: var(--on-paper) !important; font-weight: 800; } .beat-step.target-clap.hit .step-ico, .beat-step.target-clap.hit .step-ico .ico, .beat-step.target-clap.hit .step-ico path { stroke: var(--on-paper) !important; } /* Cue 提示列反拍標籤 */ .cue-offbeat-pattern { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 12px; margin-left: 8px; vertical-align: middle; } .cue-offbeat-pattern b { font-weight: 500; color: var(--faint); padding: 0 3px; } .cue-offbeat-pattern b.clap { color: var(--on-paper); font-weight: 700; background: var(--clap, var(--primary)); border-radius: 4px; } /* 歌詞行內反拍標籤 */ .ln .call.call-offbeat { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--clap, var(--primary)) 16%, transparent); color: var(--clap, var(--primary)); border: 1px solid color-mix(in srgb, var(--clap, var(--primary)) 38%, transparent); padding: 3px 10px 3px 8px; box-shadow: 0 2px 8px rgba(2, 180, 245, .15); } .call-offbeat .ico-clap { width: 14px; height: 14px; stroke: currentColor; flex: none; } .call-offbeat .call-rhythm { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding-left: 6px; border-left: 1px solid color-mix(in srgb, var(--clap, var(--primary)) 35%, transparent); font-size: 11.5px; letter-spacing: 0.5px; } .call-offbeat .call-rhythm b { font-weight: 500; color: var(--muted); opacity: .75; } .call-offbeat .call-rhythm i { font-weight: 700; font-style: normal; color: var(--on-paper); background: var(--clap, var(--primary)); border-radius: 4px; padding: 1px 4px; } @media (max-width: 600px) { .offbeat-meter { gap: 6px; padding: 4px 0; } .beat-step { width: 48px; height: 56px; border-radius: 12px; } .beat-step .step-num { font-size: 11px; } .beat-step .step-txt { font-size: 13.5px; } } /* ══ 首頁改版：Apple Music 風的曲目表。顏色全走 token，淺色／深色共用同一套規則 ══ 狀態約定：hover 只在有滑鼠的裝置（避免手機點完一直亮著）；:active 是按下； aria-pressed／aria-checked／aria-expanded 是選中或開啟；:disabled 半透明且不能點； 鍵盤聚焦一律用品牌藍外框。 */ /* 淺色：首頁和歌曲頁都跟著切換；沉浸模式是熄燈的舞台，一律深色（見檔案最後） */ :root[data-theme="light"] { color-scheme: light; --ground: #ffffff; --surface: #f2f4f7; --raised: #ffffff; --hover: #eef1f5; --line: #d6dbe3; --text: var(--color-slate-950); --muted: var(--color-slate-700); --faint: #5b6779; --ph: #7a8597; --paper: var(--color-slate-950); --on-paper: #ffffff; --accent: var(--color-bahama-blue-700); --card: #f2f4f7; --menu: #ffffff; --fill: rgba(100, 116, 139, .12); --fill-hover: rgba(100, 116, 139, .18); --fill-press: rgba(100, 116, 139, .27); --row-hover: rgba(100, 116, 139, .07); --row-press: rgba(100, 116, 139, .14); --tint: var(--color-bahama-blue-700); --bar-bg: rgba(255, 255, 255, .78); --menu-shadow: 0 12px 32px rgba(2, 6, 23, .16); --dot-ring: inset 0 0 0 1px rgba(2, 6, 23, .25); --chip-on-bg: var(--color-slate-950); --chip-on-fg: #ffffff; --chip-on-hover: var(--color-slate-800); --foot-bg: #f2f4f7; /* 動作色在白底要夠深，對比才過 4.5:1 */ --sing: var(--color-bahama-blue-700); --clap: var(--color-bahama-blue-700); --wave: #8a5d00; --jump: #15803d; --call: #be185d; --gesture: #6d28d9; --listen: #5b6779; } /* overflow-x: hidden 會讓外框變成捲動容器，頂欄的 sticky 就黏不住；首頁改用 clip（只裁切、不捲動） */ html:not(.on-song) body, html:not(.on-song) .shell { overflow-x: clip; } /* 首頁不放舞台燈光，底色乾淨 */ html:not(.on-song) #fx { display: none; } /* ── 頂欄 ── */ .bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; transition: background-color var(--dur-base) var(--ease); } .bar.is-stuck { background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .bar .col { max-width: 1080px; min-height: 52px; padding: 4px var(--home-pad); display: flex; align-items: center; gap: 8px; } .mark { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 4px; border-radius: 10px; color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: opacity var(--dur-hover) var(--ease); } .mark svg { flex: none; width: 26px; height: 26px; } .mark svg circle { fill: var(--color-bahama-blue-500); } @media (hover: hover) { .mark:hover { opacity: .8; } } .mark:active { opacity: .55; } .bar-search { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in), visibility 0s var(--dur-quick); } .bar.has-search .bar-search { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .menu { flex: none; position: relative; } .bar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tint); font-size: 15px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: var(--tr-color), var(--tr-press); } .bar-btn.icon { width: 44px; padding: 0; } .bar-btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .bar-btn:hover:not(:disabled) { background: var(--fill); } } .bar-btn[aria-expanded="true"] { background: var(--fill); } .bar-btn:active:not(:disabled) { background: var(--fill-press); transform: scale(.94); } .bar-btn:disabled { opacity: .4; cursor: not-allowed; } /* 下拉選單 */ .pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 260px; padding: 6px; border-radius: 14px; background: var(--menu); box-shadow: var(--menu-shadow); display: flex; flex-direction: column; transform-origin: top right; animation: pop-in var(--dur-quick) var(--ease-out); } .pop.narrow { width: 200px; } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } } .pop-note { margin: 0; padding: 8px 12px; color: var(--faint); font-size: 13px; line-height: 1.45; } .pop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; transition: var(--tr-color); } .pop-item.tint { color: var(--tint); } .pop-meta { color: var(--faint); font-size: 13px; } button.pop-item { justify-content: flex-start; } button.pop-item > span { flex: 1 1 auto; } .pop-check, .pop-ico { flex: none; width: 18px; height: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; } .pop-check { stroke: var(--tint); stroke-width: 2.4; opacity: 0; transform: scale(.5); transition: opacity var(--dur-hover) var(--ease), transform var(--dur-base) var(--ease-spring); } .pop-ico { stroke: var(--faint); stroke-width: 2.1; } @media (hover: hover) { .pop-item:hover { background: var(--fill); } } .pop-item[aria-checked="true"] { font-weight: 700; } .pop-item[aria-checked="true"] .pop-check { opacity: 1; transform: none; } .pop-item:active { background: var(--fill-press); } .pop-item:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; } .pop-item[aria-disabled="true"], .pop-item:disabled { opacity: .4; pointer-events: none; } /* 搜尋框：首頁大顆、頂欄小顆 */ .field { position: relative; display: flex; align-items: center; width: 100%; } .field-ico { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; } .field input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; transition: background-color var(--dur-hover) var(--ease), box-shadow var(--dur-quick) var(--ease); } .field input::placeholder { color: var(--faint); opacity: 1; } @media (hover: hover) { .field input:hover:not(:focus):not(:disabled) { background: var(--fill-hover); } } .field input:focus { box-shadow: 0 0 0 2px var(--tint); } .field input:disabled { opacity: .45; cursor: not-allowed; } .field.sm { max-width: 360px; } .field.lg { max-width: 560px; margin-top: 12px; } .field.lg .field-ico { left: 20px; width: 20px; height: 20px; } .field.lg input { height: 56px; padding: 0 20px 0 52px; font-size: 17px; } /* ── 首頁版面：寬度和頂欄、頁尾對齊（main.col 已經有 16px 邊距） ── */ .home { width: 100%; max-width: 1048px; margin-inline: auto; padding-inline: calc(var(--home-pad) - 16px); gap: clamp(40px, 5vw, 56px); font-size: 17px; line-height: 1.5; } /* 主視覺 */ /* 左邊標題和搜尋，右邊唱片架；滑到哪張，背後的光就換成那首的螢光棒色（--glow 由 app.js 設定） */ .hero { --glow: var(--tint); --glow-mix: 24%; --crate-shadow: rgba(0, 0, 0, .8); --crate-dim: brightness(.55) saturate(.7); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(16px, 3vw, 40px); padding: clamp(24px, 6vw - 20px, 64px) 0 clamp(8px, 2vw, 24px); } /* 淺色時調暗不能用 opacity：封套一透明，裡面的 CD 和後面那張就會透出來 */ :root[data-theme="light"] .hero { --glow-mix: 16%; --crate-shadow: rgba(15, 23, 42, .35); --crate-dim: saturate(.35) contrast(.82) brightness(1.12); } .hero::before { content: ""; position: absolute; inset: -10% -30% -10% 35%; z-index: -1; pointer-events: none; background: radial-gradient(50% 55% at 55% 45%, color-mix(in srgb, var(--glow) var(--glow-mix), transparent), transparent 70%); transition: background 900ms var(--ease); } .hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; } .hero h1 { margin: 0; font-size: clamp(48px, 6.4vw, 88px); font-weight: 800; line-height: .98; letter-spacing: -.045em; white-space: nowrap; } .hero-sub { margin: -4px 0 0; color: var(--muted); font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; letter-spacing: -.01em; } .lead { margin: 0; max-width: 24em; color: var(--faint); font-size: 17px; line-height: 1.55; text-wrap: pretty; } .hero .field.lg { max-width: 440px; margin-top: 4px; } .hero-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: -4px; } .tint-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border-radius: 8px; color: var(--tint); font-size: 17px; font-weight: 500; text-decoration: none; text-underline-offset: 4px; transition: opacity var(--dur-hover) var(--ease); } .tint-link [lang="ja"] { font-family: var(--font-ja); } .tint-link svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-quick) var(--ease); } @media (hover: hover) { .tint-link:hover { text-decoration: underline; } .tint-link:hover svg { transform: translateX(2px); } } .tint-link:active { opacity: .55; } /* ── 唱片架：MV 插圖做成的 CD 塑膠套，CSS 3D 排出消失點；滑過時前面的往前倒、選中的抽起來、CD 從上緣浮出 ── */ .crate-stage { position: relative; height: clamp(440px, 46vw, 600px); perspective: 1150px; perspective-origin: 92% 26%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } /* 後排唱片在架子平面後方，架子本身不能接滑鼠，不然會擋住後排 */ .crate { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; transform-style: preserve-3d; transform: rotateX(calc(var(--py, 0) * -4deg)) rotateY(calc(var(--px, 0) * 6deg)); transition: transform 1200ms var(--ease); } .crate .rec { --s: clamp(220px, 24vw, 340px); --ly: 0px; --tx: 0deg; position: absolute; left: 0; bottom: 80px; width: var(--s); height: var(--s); transform-style: preserve-3d; transform-origin: 50% 100%; transform: translate3d(var(--x), calc(var(--y) + var(--ly)), var(--z)) rotateY(-26deg) rotateX(calc(4deg + var(--tx))) rotateZ(var(--r)); transition: transform 900ms var(--ease), opacity 600ms var(--ease); } .crate .rec.is-out { opacity: 0; transform: translate3d(var(--x), calc(var(--y) + 120px), var(--z)) rotateY(-26deg) rotateX(4deg) rotateZ(var(--r)); } .crate .rec.is-lean { --tx: -15deg; transition-duration: 700ms; } .crate .rec.is-on { --ly: calc(var(--s) * -.06); } .crate .rec.is-on.is-deep { --ly: calc(var(--s) * -.24); } /* 點下去：那張轉正抽出，其他退後變淡，接著 CD 和封面飛去歌曲頁 */ .crate.pulling { transform: none; transition-duration: 300ms; } .crate.pulling .rec { --tx: 0deg; } .crate.pulling .rec:not(.is-pull) { opacity: .25; transform: translate3d(var(--x), calc(var(--y) + 30px), calc(var(--z) - 120px)) rotateY(-26deg) rotateX(4deg) rotateZ(var(--r)); } .crate .rec.is-pull { transform: translate3d(calc(var(--x) * .4), calc(var(--y) * .4 - 10px), 90px) rotateY(0deg) rotateX(0deg) rotateZ(0deg); transition-duration: 300ms; } .crate .rec > a { position: absolute; inset: 0; display: block; transform-style: preserve-3d; outline: none; pointer-events: auto; } .crate .float { position: absolute; inset: 0; transform-style: preserve-3d; animation: crate-breathe 7s var(--ease-sine) infinite; animation-delay: calc(var(--i) * -1.4s); } .crate .rec.is-pull .float { animation: none; } @keyframes crate-breathe { 50% { transform: translate3d(0, -6px, 0); } } /* 接地陰影留在原地：封套呼吸、被抽起來時影子就跟它分開 */ .crate .floor { position: absolute; left: -4%; right: -4%; bottom: -7%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--crate-shadow), transparent); opacity: .7; transform: translateZ(-4px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); pointer-events: none; } .crate .rec.is-on.is-deep .floor { opacity: .3; transform: translateZ(-4px) translateY(calc(var(--s) * .24)) scale(.85); } .crate .rec.is-lean .floor { opacity: .9; } /* 塑膠套是一個有厚度的實物：正面（插圖＋側帶）、背板、右側斷面、上緣開口，CD 夾在兩層塑膠中間 */ .crate .jacket { --t: calc(var(--s) * .022); position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 700ms var(--ease); } .crate .rec.is-on .jacket { transform: translateZ(30px); } .crate .tray { position: absolute; inset: 0; border-radius: 3px; background: #15181f; transform: translateZ(calc(var(--t) * -1)); box-shadow: 0 2px 3px rgba(0, 0, 0, .22), 0 18px 36px -14px var(--crate-shadow), 0 40px 80px -30px var(--crate-shadow); } .crate .rec > a:focus-visible .tray { box-shadow: 0 0 0 calc(var(--t) + 3px) var(--tint), 0 18px 36px -14px var(--crate-shadow); } /* 邊緣一圈亮邊：塑膠斷面把光收進來，上緣最亮 */ .crate .sleeve { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .8), inset 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .35), inset -1px 0 0 rgba(0, 0, 0, .2); } .crate .sleeve > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; display: block; filter: saturate(1.08) contrast(1.05); } /* 塑膠下的明暗：光從左上來；CD 把塑膠微微撐起，留下一圈很淡的弧光 */ .crate .sleeve::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: overlay; background: radial-gradient(circle at 52% 52%, transparent 0 43.2%, rgba(255, 255, 255, .16) 44.2%, transparent 45.4%), linear-gradient(155deg, rgba(255, 255, 255, .2), transparent 36%, transparent 60%, rgba(0, 0, 0, .42)); } /* 亮面反光：一道銳利的高光＋一道柔光＋上緣和左上角的環境反射；高光角度跟著游標，被選到時掃過一次 */ .crate .sleeve::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(calc(118deg + var(--px, 0) * 50deg), transparent 0 40%, rgba(255, 255, 255, .62) 41.2%, rgba(255, 255, 255, .2) 42.8%, transparent 46%, transparent 54%, rgba(255, 255, 255, .16) 58%, transparent 64%), linear-gradient(to bottom, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 16%), radial-gradient(90% 70% at 0% 0%, rgba(255, 255, 255, .2), transparent 55%); background-size: 260% 260%, 100% 100%, 100% 100%; background-position: 100% 100%, 0 0, 0 0; background-repeat: no-repeat; transition: background-position 1100ms var(--ease); } .crate .rec.is-on .sleeve::after { background-position: 45% 45%, 0 0, 0 0; } /* 側帶（帯）：日本 CD 的直排紙條，印歌名和螢光棒色 */ .crate .obi { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 14.5%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * .022); padding: calc(var(--s) * .05) 0 calc(var(--s) * .045); background: #f4f2ec; color: #0b0d12; border-top: calc(var(--s) * .012) solid var(--p1); box-shadow: 1px 0 0 rgba(0, 0, 0, .1), calc(var(--s) * .012) 0 calc(var(--s) * .03) calc(var(--s) * -.01) rgba(0, 0, 0, .4); font-family: var(--font-ja); } .crate .obi i { font-style: normal; font-weight: 800; font-size: calc(var(--s) * .032); letter-spacing: -.01em; } .crate .obi u { width: 46%; height: 1px; background: rgba(0, 0, 0, .25); } .crate .obi b { flex: 1; min-height: 0; overflow: hidden; writing-mode: vertical-rl; font-weight: 800; font-size: calc(var(--s) * .052); line-height: 1; letter-spacing: .08em; } .crate .obi s { display: flex; flex-direction: column; gap: calc(var(--s) * .012); text-decoration: none; } .crate .obi s span { width: calc(var(--s) * .024); height: calc(var(--s) * .024); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } /* 右側斷面：透明塑膠，透出插圖的邊緣，兩條反光線 */ .crate .spine { position: absolute; top: 0; left: 100%; width: var(--t); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: linear-gradient(to right, rgba(255, 255, 255, .85) 0 9%, rgba(255, 255, 255, .1) 22%, transparent 60%, rgba(255, 255, 255, .5) 76%, rgba(255, 255, 255, .05) 86%), linear-gradient(rgba(10, 14, 24, .35), rgba(10, 14, 24, .35)), var(--art, none) right center / var(--s) 100% no-repeat, #9aa1ad; } /* 上緣：前片塑膠、開口、背片塑膠，CD 從這條縫抽出來 */ .crate .lip { position: absolute; left: 0; top: 0; width: 100%; height: var(--t); transform-origin: center top; transform: rotateX(-90deg); background: linear-gradient(to bottom, rgba(255, 255, 255, .95) 0 9%, rgba(196, 206, 220, .85) 9% 24%, #08090c 24% 72%, rgba(150, 160, 175, .9) 72% 88%, rgba(255, 255, 255, .85) 88%); } /* 只調暗平面的部分；整個 .jacket 加 filter 會把 3D 壓平 */ .crate :is(.sleeve, .spine, .lip) { transition: filter 600ms var(--ease); } .crate.has-on .rec:not(.is-on) :is(.sleeve, .spine, .lip) { filter: var(--crate-dim); } /* CD 夾在兩層塑膠中間，選到時從上緣浮出 */ .crate .cd { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; transform: translate3d(0, 0, calc(var(--t) * -.5)); transition: transform 800ms var(--ease); } .crate .rec.is-on .cd { transform: translate3d(0, -60%, calc(var(--t) * -.5)); } .crate .rec.is-on.is-deep .cd { transform: translate3d(0, -46%, calc(var(--t) * -.5)); } .crate .rec.is-on .cd-spin { animation-play-state: running; } /* CD 資料面，比例照實物（半徑 60mm）：中心孔 7.5、透明夾持區到 16.5、堆疊凸環 20.5、鏡面環到 25、資料區到 58、最外圈透明邊到 60。 鏡面和彩虹跟著光源（游標）走，不跟著光碟轉；只有模壓字會轉。首頁唱片架、飛行替身、歌曲頁的小唱片共用 */ .cd { --a: calc(24deg + var(--px, 0) * 140deg + var(--py, 0) * 70deg); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); } .cd-face, .cd-rain { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; } .cd-face { background: radial-gradient(circle closest-side, transparent 0 12.5%, rgba(236, 242, 250, .35) 12.5% 26.6%, rgba(255, 255, 255, .85) 26.6% 27.5%, rgba(214, 220, 228, .25) 27.5% 33.4%, rgba(255, 255, 255, .95) 33.4% 34.1%, rgba(90, 96, 106, .55) 34.1% 34.9%, transparent 34.9% 37%, rgba(255, 255, 255, .28) 37% 41.2%, rgba(40, 44, 52, .35) 41.2% 41.7%, transparent 41.7% 96.6%, rgba(255, 255, 255, .75) 96.6% 97.3%, rgba(228, 234, 242, .5) 97.3% 99.4%, rgba(255, 255, 255, .8) 99.4%), conic-gradient(from var(--a), #f5f7fa, #a3aab4 7%, #eef1f4 13%, #4c535d 22%, color-mix(in srgb, var(--p1) 22%, #c3c9d1) 31%, #fafbfc 39%, #737a85 49%, #f5f7fa 57%, #a3aab4 64%, #e6e9ed 71%, #464d57 81%, color-mix(in srgb, var(--p2) 20%, #c9ced5) 90%, #f5f7fa); /* 中心夾持區和最外圈是透明塑膠：看得到後面 */ -webkit-mask: radial-gradient(circle closest-side, transparent 0 12.5%, rgba(0, 0, 0, .42) 12.5% 27.5%, #000 27.5% 97.3%, rgba(0, 0, 0, .6) 97.3% 100%, transparent 100%); mask: radial-gradient(circle closest-side, transparent 0 12.5%, rgba(0, 0, 0, .42) 12.5% 27.5%, #000 27.5% 97.3%, rgba(0, 0, 0, .6) 97.3% 100%, transparent 100%); } /* 資料區的細密同心紋 */ .cd-face::before { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay; background: repeating-radial-gradient(circle closest-side, rgba(255, 255, 255, .09) 0 .35%, rgba(0, 0, 0, .07) .35% .7%); -webkit-mask: radial-gradient(circle closest-side, transparent 41.7%, #000 41.7% 96.6%, transparent 96.6%); mask: radial-gradient(circle closest-side, transparent 41.7%, #000 41.7% 96.6%, transparent 96.6%); } /* 鏡面反光：穿過圓心的兩道亮帶 */ .cd-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; background: conic-gradient(from calc(var(--a) + 62deg), transparent 0 4deg, rgba(255, 255, 255, .75) 9deg, transparent 15deg 180deg, rgba(255, 255, 255, .55) 189deg, transparent 197deg); } /* 彩虹繞射：只在兩道相對的細窄扇形，限在資料區 */ .cd-rain { mix-blend-mode: hard-light; opacity: .85; background: conic-gradient(from calc(var(--a) + 96deg), transparent 0deg, #ff3b6b 4deg, #ffb13b 9deg, #f2ff4d 13deg, #3bff9c 18deg, #3bd8ff 23deg, #6b5bff 28deg, #d04bff 32deg, transparent 37deg 180deg, #ff3b6b 184deg, #ffb13b 189deg, #f2ff4d 193deg, #3bff9c 198deg, #3bd8ff 203deg, #6b5bff 208deg, #d04bff 212deg, transparent 217deg); -webkit-mask: radial-gradient(circle closest-side, transparent 43%, rgba(0, 0, 0, .35) 52%, #000 70%, rgba(0, 0, 0, .7) 92%, transparent 96.6%); mask: radial-gradient(circle closest-side, transparent 43%, rgba(0, 0, 0, .35) 52%, #000 70%, rgba(0, 0, 0, .7) 92%, transparent 96.6%); } .cd-spin { position: absolute; inset: 0; animation: cd-spin 2.6s linear infinite paused; } @keyframes cd-spin { to { transform: rotate(1turn); } } /* 模壓字：刻在中心透明區的一圈小字，跟著轉 */ .cd-mold { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cd-mold text { font: 700 3.1px/1 var(--font-ja); letter-spacing: .5px; fill: rgba(255, 255, 255, .7); paint-order: stroke; stroke: rgba(40, 46, 56, .35); stroke-width: .35px; } /* 唱片架的檯面邊：左邊是目前的螢光棒色，右邊換一疊 */ .crate-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .crate-now { margin: 0; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crate-now b { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-family: var(--font-ja); font-weight: 700; } .crate-now .dots { display: inline-flex; gap: 3px; flex: none; } /* 手機的操作提示：跟在歌名後面，淡一點 */ .crate-hint { flex: none; color: var(--faint); font-size: 12px; animation: hint-in var(--dur-base) var(--ease-out); } .crate-hint::before { content: "·"; margin: 0 6px; } @keyframes hint-in { from { opacity: 0; transform: translateX(-4px); } } .shuffle { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: 14px; transition: var(--tr-color); } .shuffle-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); } .shuffle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 600ms var(--ease); } @media (hover: hover) { .shuffle:hover { color: var(--text); } .shuffle:hover .shuffle-ico { background: var(--fill); border-color: var(--text); } .shuffle:hover svg { transform: rotate(180deg); } } .shuffle.turning svg { transform: rotate(180deg); } .shuffle:active .shuffle-ico { transform: scale(.9); } .shuffle:focus-visible { outline: none; } .shuffle:focus-visible .shuffle-ico { outline: 2px solid var(--tint); outline-offset: 2px; } /* 歌曲頁歌名前的小唱片：首頁唱片架的 CD 飛過來停在這裡，播放時轉 */ .sdisc { position: relative; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; } .sdisc .cd { position: absolute; inset: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); } .sdisc .cd-mold { display: none; } .spinning .sdisc .cd-spin { animation-play-state: running; } /* 飛去歌曲頁的替身：一層 .crate，裡面的封套、側帶、CD 沿用唱片架的樣式；只用 transform 縮放，起點對齊左上角 */ .crate.crate-fly { position: fixed; inset: 0; z-index: 100; transform: none; transform-style: flat; transition: none; } .crate-fly .fly-g { position: absolute; transform-origin: 0 0; will-change: transform; } .crate-fly .fly-y { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; } .crate-fly .cd { left: 0; top: 0; width: 100%; height: 100%; transform: none; transition: none; } .crate-fly .cd-spin { animation-play-state: running; animation-duration: .9s; } .crate-fly .fly-art { overflow: hidden; background: #000; } .crate-fly .fly-art > img { display: block; width: 100%; height: 100%; object-fit: cover; } .crate-fly .fly-cover { position: absolute; top: 0; height: 100%; } /* 手機：一行標題 → 唱片架 → 說明與搜尋。先知道這是什麼網站，再看到唱片；沒有滑過，CD 每 3 秒輪流浮出 */ @media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 20px 0 8px; } .hero-copy { display: contents; } .hero h1 { order: 0; font-size: clamp(40px, 12.4vw, 64px); line-height: 1; } .hero h1 br { display: none; } .hero-sub { order: 1; margin-top: 10px; font-size: 16px; } .crate-stage { order: 2; height: 400px; margin-bottom: 20px; perspective-origin: 80% 10%; } .lead { order: 3; margin-bottom: 14px; } .hero .field.lg { order: 4; max-width: none; margin-top: 0; } .hero-links { order: 5; margin-top: 10px; } .crate .rec { --s: min(200px, 51vw); bottom: 66px; } .crate .rec.is-on .cd { transform: translate3d(0, -44%, calc(var(--t) * -.5)); } .crate .rec.is-on.is-deep { --ly: calc(var(--s) * -.14); } .crate .rec.is-on.is-deep .cd { transform: translate3d(0, -32%, calc(var(--t) * -.5)); } .crate-foot { padding-top: 10px; } } /* 平板直放：寬度夠，唱片放大、舞台加高，CD 浮出的高度接近桌機，整疊鋪滿舞台寬度；消失點放低一點，後排不會爬太高、CD 不會頂到標題 */ @media (min-width: 601px) and (max-width: 900px) { .crate-stage { height: clamp(460px, 70vw, 580px); margin-top: 12px; perspective-origin: 86% 30%; } .crate .rec { --s: min(290px, 37vw); bottom: 76px; } .crate .rec.is-on .cd { transform: translate3d(0, -56%, calc(var(--t) * -.5)); } .crate .rec.is-on.is-deep { --ly: calc(var(--s) * -.2); } .crate .rec.is-on.is-deep .cd { transform: translate3d(0, -48%, calc(var(--t) * -.5)); } } /* 區塊標題 */ .starter, .all-songs, .faq { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #songs, #faq { scroll-margin-top: 64px; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .sec-head h2, .faq h2 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .sec-head .count { margin-left: 8px; color: var(--faint); font-size: 15px; font-weight: 400; letter-spacing: 0; } .sec-sub { margin: 0; color: var(--faint); font-size: 15px; } /* 書架：橫向滑動，留 4px 讓放大和聚焦外框不被裁掉 */ .shelf { list-style: none; margin: 0 -4px; padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: max(min(62%, 240px), calc((100% - 48px) / 4.35)); gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; } .shelf::-webkit-scrollbar { display: none; } .shelf li { min-width: 0; scroll-snap-align: start; } .shelf .card { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; color: var(--text); text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; } .shelf .thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; object-fit: cover; background: var(--card); transition: transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease); } .shelf .card-text { display: flex; flex-direction: column; min-width: 0; } .shelf .card-ja { overflow: hidden; font-family: var(--font-ja); font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; } .shelf .card-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--faint); font-size: 13px; } .shelf .card-sub > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shelf .acts { flex: none; display: inline-flex; gap: 3px; } .shelf .acts svg { width: 16px; height: 16px; } @media (hover: hover) { .shelf .card:hover .thumb { transform: scale(1.02); filter: brightness(1.06); } } .shelf .card:active .thumb { transform: scale(.97); filter: brightness(.9); } .shelf .card:focus-visible .thumb { outline: 2px solid var(--tint); outline-offset: 2px; } /* 滑動提示：進度條跟著捲動走，右邊兩顆箭頭可以點，到底就停用 */ .shelf-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .shelf-hint { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; } .shelf-track { position: relative; width: 72px; height: 4px; overflow: hidden; border-radius: 999px; background: var(--fill); } .shelf-thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 999px; background: var(--faint); transition: left var(--dur-hover) var(--ease); } .shelf-btns { display: flex; } .round-btn { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .round-btn > span { width: 32px; height: 32px; border-radius: 50%; background: var(--fill); display: inline-flex; align-items: center; justify-content: center; transition: var(--tr-color), var(--tr-press); } .round-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .round-btn:hover:not(:disabled) > span { background: var(--fill-hover); } } .round-btn:active:not(:disabled) > span { background: var(--fill-press); transform: scale(.88); } .round-btn:focus-visible > span { outline: 2px solid var(--tint); outline-offset: 2px; } .round-btn:disabled { opacity: .35; cursor: default; } /* 排序：文字按鈕 */ .text-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-right: -4px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--tint); font-size: 15px; cursor: pointer; transition: opacity var(--dur-hover) var(--ease); } .text-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .text-btn:hover:not(:disabled) { opacity: .75; } } .text-btn:active:not(:disabled) { opacity: .5; } .text-btn:disabled { opacity: .35; cursor: not-allowed; } /* 篩選膠囊：外層 44px 好點，裡面 34px 的膠囊 */ .chips { display: flex; gap: 8px; margin-inline: -4px; padding-inline: 4px; overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; min-height: 44px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .chip > span { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: var(--fill); color: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap; transition: var(--tr-color), var(--tr-press); } @media (hover: hover) { .chip:hover:not(:disabled) > span { background: var(--fill-hover); } .chip[aria-pressed="true"]:hover > span { background: var(--chip-on-hover); } } .chip[aria-pressed="true"] > span { background: var(--chip-on-bg); color: var(--chip-on-fg); } .chip:active:not(:disabled) > span { transform: scale(.95); } .chip:active:not(:disabled):not([aria-pressed="true"]) > span { background: var(--fill-press); } .chip:focus-visible > span { outline: 2px solid var(--tint); outline-offset: 2px; } .chip:disabled { cursor: not-allowed; } .chip:disabled > span { opacity: .4; } /* 圖例＋看全部 */ .list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 4px; } .home-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--faint); font-size: 13px; } .home-legend span { display: inline-flex; align-items: center; gap: 4px; } .home-legend svg { width: 14px; height: 14px; } .pill-btn { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--fill); color: var(--tint); font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--tr-color), var(--tr-press); } @media (hover: hover) { .pill-btn:hover:not(:disabled) { background: var(--fill-hover); } } .pill-btn:active:not(:disabled) { background: var(--fill-press); transform: scale(.97); } .pill-btn:disabled { opacity: .4; cursor: not-allowed; } /* 歌曲列：縮圖＋歌名＋動作圖示；沒有分隔線，靠留白分開 */ .songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .songs.collapsed li:nth-child(n+13) { display: none; } .song { display: flex; align-items: center; gap: 14px; margin-inline: -8px; padding-inline: 8px; border-radius: 12px; color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-hover) var(--ease); } .song .thumb { flex: none; width: 80px; height: 45px; border-radius: 6px; object-fit: cover; background: var(--card); transition: var(--tr-press); } .song-main { flex: 1 1 auto; min-width: 0; min-height: 80px; padding: 14px 0; display: flex; align-items: center; gap: 12px; } .song .name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .song .ja { overflow: hidden; font-family: var(--font-ja); font-size: 17px; font-weight: 500; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; } .song .sub { display: flex; align-items: center; gap: 8px; overflow: hidden; color: var(--faint); font-size: 13px; white-space: nowrap; } .song .sub .zh { overflow: hidden; text-overflow: ellipsis; } .song .acts { flex: none; display: flex; align-items: center; gap: 4px; } .song .acts svg { width: 18px; height: 18px; } .song .free, .song .cnt { color: var(--faint); font-size: 13px; } .song .cnt { margin-left: 4px; } @media (hover: hover) { .song:hover { background: var(--row-hover); } } .song:active { background: var(--row-press); } .song:focus-visible { outline: 2px solid var(--tint); outline-offset: 0; } .home .dots { flex: none; display: inline-flex; gap: 3px; } .home .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: var(--dot-ring); } .home .dots i.rb { background: conic-gradient(#ff4a5a, #ff9a3c, #ffd84a, #4ee08a, #5fd4ff, #5d9dfe, #a374ff, #ff4a5a); } .empty-note { margin: 0; padding: 32px 0; color: var(--faint); text-align: center; } /* 清單底部：目前列到第幾首＋再看下一批 */ .list-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; } .list-more[hidden] { display: none; } .list-progress { margin: 0; color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; } /* 常見問題：卡片，點開往下展開 */ .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { padding: 0 20px; border-radius: 14px; background: var(--card); transition: background-color var(--dur-hover) var(--ease); } .faq-item summary { min-height: 64px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 8px; font-size: 17px; list-style: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-base) var(--ease); } .faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); } @media (hover: hover) { .faq-item:has(> summary:hover) { background: color-mix(in srgb, var(--card), var(--text) 5%); } } .faq-item:has(> summary:active) { background: color-mix(in srgb, var(--card), var(--text) 9%); } .faq-item:has(> summary:focus-visible) { outline: 2px solid var(--tint); outline-offset: 2px; } .faq-item p { margin: 0; padding: 0 0 20px; color: var(--faint); font-size: 15px; line-height: 1.6; } /* ── 頁尾：獨立底色 ── */ .site-foot { position: relative; z-index: 1; background: var(--foot-bg); color: var(--text); font-size: 13px; line-height: 1.5; } .site-foot .col { max-width: 1080px; padding: 40px var(--home-pad) max(28px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 24px; } .foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; } .foot-brand { flex: 1 1 240px; display: flex; flex-direction: column; gap: 8px; } .foot-name { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .foot-name svg { width: 22px; height: 22px; } .foot-brand p { margin: 0; max-width: 26em; color: var(--faint); } .foot-nav { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; } .foot-h { padding-bottom: 4px; font-weight: 700; } .foot-nav a, .foot-nav button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--faint); font: inherit; text-align: left; text-decoration: none; text-underline-offset: 3px; cursor: pointer; transition: var(--tr-color); } @media (hover: hover) { .foot-nav a:hover, .foot-nav button:hover:not(:disabled) { color: var(--text); text-decoration: underline; } } .foot-nav a:active, .foot-nav button:active:not(:disabled) { opacity: .55; } .foot-nav a:focus-visible, .foot-nav button:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; } .foot-nav button:disabled { opacity: .4; cursor: not-allowed; } .foot-note { margin: 0; max-width: 72ch; color: var(--faint); font-size: 12px; } .foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; color: var(--faint); font-size: 12px; } .foot-legal .build { font-variant-numeric: tabular-nums; } /* 窄畫面：小搜尋出現時收起網站名；再窄一點，手燈 App 只留圖示 */ @media (max-width: 720px) { .bar.has-search .mark-name { display: none; } } @media (max-width: 560px) { .bar-btn-label { display: none; } .bar-btn { width: 44px; padding: 0; } .foot-nav { flex: 1 1 40%; } } /* ══ 歌曲頁改版：和首頁同一套配色與元件狀態，跟著淺色／深色切換 ══ 動作色（大合唱、拍手…）沿用原本的，只換介面：實心卡片、填色按鈕、選單、開關。 */ .mv, .cue, .lyrics { background: var(--card); } .depth-focus.has-now .ln.now { box-shadow: inset 3.5px 0 0 var(--act, var(--text)), var(--menu-shadow); } /* 頂部：返回、上下首、手燈、沉浸、小窗、工具 */ .ib, .pick, .songbar .lamp-btn, .songbar .vopt summary { background: var(--card); color: var(--text); border: 0; box-shadow: none; } .pick .ib { background: transparent; } .ib, .songbar .lamp-btn, .songbar .vopt summary { transition: var(--tr-color), var(--tr-press); -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .ib:hover, .songbar .lamp-btn:hover:not(:disabled), .songbar .vopt summary:hover { background: var(--card-hover); color: var(--text); border-color: transparent; } .pick .ib:hover { background: var(--fill); } } .songbar .vopt[open] summary { background: var(--card-press); color: var(--text); } .songbar .lamp-btn[aria-pressed="true"], .immersive-btn[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); box-shadow: none; } .songbar .lamp-btn[aria-pressed="true"] svg, .immersive-btn[aria-pressed="true"] svg { stroke: currentColor; } #toolPipBtn[aria-pressed="true"] svg rect:last-child { fill: currentColor; } .lamp-btn .tool-sub, .lamp-btn[aria-pressed="true"] .tool-sub { color: inherit; opacity: .7; } .ib:active, .songbar .lamp-btn:active:not(:disabled), .songbar .vopt summary:active { background: var(--card-press); transform: scale(.95); } .pick .ib:active { background: var(--fill-press); } .songbar .lamp-btn[aria-pressed="true"]:active { background: var(--chip-on-hover); } .ib:focus-visible, .lamp-btn:focus-visible, .vopt summary:focus-visible, .cc select:focus-visible, .jump button:focus-visible, .legend button:focus-visible, .switch:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; } .lamp-btn:disabled { opacity: .4; cursor: not-allowed; } /* 小顆的下拉鈕（顯示、這首重點、現場音源）和速度選單 */ .vopt summary { background: var(--fill); color: var(--text); -webkit-tap-highlight-color: transparent; transition: var(--tr-color), var(--tr-press); } @media (hover: hover) { .vopt summary:hover { background: var(--fill-hover); } } .vopt[open] summary { background: var(--fill-press); color: var(--text); } .vopt summary:active { transform: scale(.96); } .cc select { background: var(--fill); color: var(--text); cursor: pointer; transition: background-color var(--dur-hover) var(--ease); } @media (hover: hover) { .cc select:hover:not(:disabled) { background: var(--fill-hover); } } .cc select:disabled { opacity: .4; cursor: not-allowed; } /* 下拉選單：實心、沒有框線，項目高度加大好點 */ .view-opts { width: 220px; padding: 6px; background: var(--menu); border: 0; box-shadow: var(--menu-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; } .view-opts button, .view-opts a { min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); font-size: 15px; } .view-opts a { display: flex; align-items: center; } @media (hover: hover) { .view-opts button:hover:not(:disabled), .view-opts a:hover { background: var(--fill); color: var(--text); } } .view-opts button:active:not(:disabled), .view-opts a:active { background: var(--fill-press); } .view-opts button:focus-visible, .view-opts a:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; } .view-opts button[aria-pressed="true"] { font-weight: 700; } .view-opts button[aria-pressed="true"]::after { background: var(--tint); box-shadow: none; } .view-opts .sep { margin: 4px 12px; background: var(--fill); } .view-opts .row { padding: 4px 4px 4px 12px; color: var(--text); font-size: 15px; } .live-menu-title { padding: 6px 12px; border-bottom: 0; margin-bottom: 0; } .live-menu-list a { min-height: 40px; padding: 0 12px; font-size: 14px; } @media (hover: hover) { .live-menu-list a:hover { background: var(--fill); color: var(--tint); } } .live-menu-list a:active { background: var(--fill-press); } /* 分段按鈕（歌詞字體大小）：選中的反白，和首頁篩選膠囊一樣 */ .seg { background: var(--fill); } .seg button { color: var(--text); transition: var(--tr-color); } @media (hover: hover) { .seg button:hover:not([aria-pressed="true"]) { background: var(--fill-hover); } } .seg button[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); } .seg button:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; } /* 歌詞列、圖例、跳到大合唱 */ @media (hover: hover) { .ln:hover { background: var(--row-hover); } } .ln:active { background: var(--row-press); } .legend button { transition: var(--tr-color); } @media (hover: hover) { .legend button:hover { background: var(--fill); } } .legend button:active { background: var(--fill-press); } .jump button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .jump button { display: inline-flex; align-items: center; justify-content: center; transition: var(--tr-color), var(--tr-press); } .jump button:active:not(:disabled) { background: color-mix(in srgb, var(--sing) 32%, transparent); transform: scale(.94); } .jump .mid { width: auto; } /* 大字提醒開關 */ .switch i { background: var(--fill-hover); } .switch i::after { background: #ffffff; box-shadow: 0 1px 3px rgba(2, 6, 23, .3); } .switch[aria-pressed="true"] i { background: var(--tint); } .switch[aria-pressed="true"] i::after { background: #ffffff; } .switch:active i::after { width: 14px; } .switch:disabled { opacity: .4; cursor: not-allowed; } /* 動作字卡、應援速覽、反拍提示：拿掉框線，靠底色分層 */ .alert .card { border: 0; box-shadow: var(--menu-shadow), 0 0 0 1.5px color-mix(in srgb, var(--act, var(--accent)) 45%, transparent); } .song-guide-card { border: 0; background: var(--raised); } .song-guide-card dd a { color: var(--tint); } .song-guide-card dd a.live-chip { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fill); color: var(--tint); transition: var(--tr-color), var(--tr-press); } @media (hover: hover) { .song-guide-card dd a.live-chip:hover { background: var(--fill-hover); border-color: transparent; } } .song-guide-card dd a.live-chip:active { background: var(--fill-press); transform: scale(.97); } .song-guide-card dd a:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; } .beat-step { background: var(--raised); } .cue-offbeat-pattern { border: 0; background: var(--fill); } /* 對話框裡的按鈕和輸入框 */ .btn { transition: var(--tr-color), var(--tr-press); } .btn.ghost { box-shadow: none; background: var(--fill); } @media (hover: hover) { .btn.ghost:hover { background: var(--fill-hover); } .btn.primary:hover { background: var(--chip-on-hover); } } .btn.ghost:active { background: var(--fill-press); } .btn:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .report select, .report textarea { background: var(--fill); } .report select:focus-visible, .report textarea:focus { outline: 2px solid var(--tint); outline-offset: 0; } .log .x { background: var(--fill); transition: var(--tr-color), var(--tr-press); } @media (hover: hover) { .log .x:hover { background: var(--fill-hover); } } .log .x:active { background: var(--fill-press); transform: scale(.94); } .log .x:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; } /* 淺色歌曲頁：藍色光暈、白字是照黑底做的，換成實色字和淡光暈；白色螢光棒圓點加細圈才看得到 */ :root[data-theme="light"] body:not(.immersive-mode) .ln.now .sung { color: var(--sing); animation-name: chorus-glow-pulse-light; text-shadow: 0 0 10px color-mix(in srgb, var(--sing) 30%, transparent); } :root[data-theme="light"] body:not(.immersive-mode) .fly-in .ln.now .ja .k.sung { animation-name: folia-glyph-spring, chorus-glow-pulse-light; } :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .k.lit, :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .k.lit rt { color: var(--text); } :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .k.sung.lit, :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .k.sung.lit rt { color: var(--sing) !important; text-shadow: none; } :root[data-theme="light"] body:not(.immersive-mode) .chorus-glyph-wave { animation-name: glyph-shockwave-light; filter: none; } :root[data-theme="light"] body:not(.immersive-mode) .depth-focus.has-now .ln.now .ja { filter: none; } :root[data-theme="light"] body:not(.immersive-mode) .pen i { box-shadow: var(--dot-ring); } :root[data-theme="light"] body:not(.immersive-mode) .alert .words .k.lit { color: var(--sing); } :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .ja, :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .ja rt, :root[data-theme="light"] body:not(.immersive-mode) .karaoke .ln.now .k.sung { color: var(--ph) !important; } @keyframes chorus-glow-pulse-light { 0% { text-shadow: 0 0 6px color-mix(in srgb, var(--sing) 22%, transparent); transform: scale(1); } 100% { text-shadow: 0 0 14px color-mix(in srgb, var(--sing) 38%, transparent); transform: scale(1.05); } } @keyframes glyph-shockwave-light { 0% { transform: scale(1); opacity: .9; -webkit-text-stroke: 1.5px var(--sing); } 100% { transform: scale(1.4) translateY(-3px); opacity: 0; -webkit-text-stroke: .7px var(--sing); } } /* 沉浸模式：全螢幕的熄燈舞台，淺色模式下也維持深色 */ html:has(body.immersive-mode) { background: #070a12; } body.immersive-mode { color-scheme: dark; --ground: #070a12; --surface: rgba(14, 19, 34, .9); --raised: #1c2439; --hover: #121a2c; --line: var(--color-slate-700); --text: var(--color-slate-50); --muted: var(--color-slate-300); --faint: var(--color-slate-400); --ph: var(--color-slate-500); --paper: var(--color-slate-100); --on-paper: var(--color-slate-950); --accent: var(--color-bahama-blue-500); --card: #111827; --menu: #1c2439; --fill: rgba(148, 163, 184, .16); --fill-hover: rgba(148, 163, 184, .24); --fill-press: rgba(148, 163, 184, .32); --row-hover: rgba(148, 163, 184, .08); --row-press: rgba(148, 163, 184, .15); --tint: var(--color-bahama-blue-500); --menu-shadow: 0 12px 32px rgba(0, 0, 0, .55); --dot-ring: none; --chip-on-bg: var(--color-slate-100); --chip-on-fg: var(--color-slate-950); --chip-on-hover: #ffffff; --card-hover: color-mix(in srgb, #111827, #f8fafc 7%); --card-press: color-mix(in srgb, #111827, #f8fafc 13%); --sing: var(--color-bahama-blue-500); --clap: var(--color-bahama-blue-500); --wave: #ffd84a; --jump: #5fd68a; --call: #ff7aa8; --gesture: #bc9cff; --listen: #9aa1b4; background: #070a12; } /* ══ 動效：補上的互動（規範見 :root 的動效段） ══ */ /* 按下要立刻有反應（110ms），放開才用 240ms 回彈 */ .btn:active, .pwa-toast-btn:active, .bar-btn:active, .round-btn:active > span, .chip:active > span, .pill-btn:active, .ib:active, .songbar .lamp-btn:active, .vopt summary:active, .jump button:active, .song-guide-card dd a.live-chip:active, .log .x:active, .shelf .card:active .thumb, .song:active .thumb, .switch:active i::after { transition-duration: var(--dur-press); transition-timing-function: var(--ease); } .song:active .thumb { transform: scale(.94); } /* 開關按住時圓鈕拉長；打開的狀態往左長，才不會超出軌道 */ .switch[aria-pressed="true"]:active i::after { transform: translateX(10px); } /* 對話框（回報錯誤、更新日誌）：從下方浮起並放大落定，背景淡入；關掉時快速沉下 */ .report, .log { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity var(--dur-quick) var(--ease-in), transform var(--dur-quick) var(--ease-in), overlay var(--dur-quick) allow-discrete, display var(--dur-quick) allow-discrete; } .report[open], .log[open] { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete; } @starting-style { .report[open], .log[open] { opacity: 0; transform: translateY(12px) scale(.96); } } .report::backdrop, .log::backdrop { opacity: 0; transition: opacity var(--dur-quick) var(--ease-in), overlay var(--dur-quick) allow-discrete, display var(--dur-quick) allow-discrete; } .report[open]::backdrop, .log[open]::backdrop { opacity: 1; transition: opacity var(--dur-slow) var(--ease); } @starting-style { .report[open]::backdrop, .log[open]::backdrop { opacity: 0; } } /* 常見問題：點開時答案往下滑出 */ .faq-item[open] p { animation: reveal-down var(--dur-base) var(--ease-out); } @keyframes reveal-down { from { opacity: 0; transform: translateY(-6px); } } /* 歌曲清單：換篩選或排序時整份淡入上移；按「再看 12 首」時新露出的那批依序進場（每列 20ms，12 列總長 220ms） */ .songs.swap { animation: list-swap var(--dur-base) var(--ease-out); } @keyframes list-swap { from { opacity: 0; transform: translateY(8px); } } .songs li.fresh { animation: list-swap var(--dur-base) var(--ease-out) both; animation-delay: calc(var(--k, 0) * 20ms); } /* 首頁主視覺：第一次打開時文字由上而下依序浮出（每層 70ms），唱片由 app.js 從後往前放進架子；從歌曲頁回來不再播 */ html:not(.seen) .hero-copy > * { animation: hero-rise var(--dur-page) var(--ease-out) both; } html:not(.seen) .hero-copy > :nth-child(2) { animation-delay: 70ms; } html:not(.seen) .hero-copy > :nth-child(3) { animation-delay: 140ms; } html:not(.seen) .hero-copy > :nth-child(4) { animation-delay: 190ms; } html:not(.seen) .hero-copy > :nth-child(5) { animation-delay: 230ms; } html:not(.seen) .crate-foot { animation: hero-rise var(--dur-page) var(--ease-out) 260ms both; } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } } /* 歌曲頁提示框：換到下一個動作時，圖示和動作名稱從下方換上來 */ .cue .now.swap { animation: cue-swap var(--dur-base) var(--ease-out); } @keyframes cue-swap { from { opacity: 0; transform: translateY(8px); } } /* 換頁（首頁↔歌曲頁、上一首／下一首）：舊畫面快速淡出，新畫面淡入並輕輕上移 */ ::view-transition-old(root) { animation: vt-out var(--dur-quick) var(--ease-in) both; } ::view-transition-new(root) { animation: vt-in var(--dur-page) var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } } /* 切換淺色／深色：只做交叉淡化，不位移 */ html.vt-theme::view-transition-old(root) { animation: vt-out var(--dur-base) var(--ease) both; } html.vt-theme::view-transition-new(root) { animation: vt-fade var(--dur-base) var(--ease) both; } @keyframes vt-fade { from { opacity: 0; } } /* 減少動態：位移、縮放、循環、換頁都拿掉，狀態直接切換 */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; } .alert *, .ambient-mesh::before, .ambient-mesh::after, #tool-lamp.lamp-linked::after { animation: none !important; } .shelf .card:hover .thumb, .shelf .card:active .thumb, .song:active .thumb { transform: none; } .crate .float, .cd-spin { animation: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }