/* 鯨魚島官網｜元件庫（改編自 Uiverse.io 社群元件，2026-11-01） 使用規則見 design/元件庫_Uiverse.md。這裡只放「已改成品牌樣子」的版本， 不要把 Uiverse 原檔整包貼進來（原檔多是漸層、紫色、粗字重，違反去 AI 味四原則）。 改編原則：只用 site.css 的色票變數；間距 8 的倍數；線條 1.6px；不用漸層； 動態都有「減少動態」退路；所有互動都能用鍵盤操作。 來源（MIT 授權，作者與 Uiverse.io 署名如下）： - .wi-btn-sweep ← Cornerstone-04 / chatty-eel-89（底色由左往右刷過） - .wi-btn-ink ← SujitAdroja / strong-bullfrog-56（底色由中心暈開） - .wi-btn-trace ← Cornerstone-04 / bitter-impala-54（線沿邊框描一圈） - .wi-btn-arrow ← escannord / lovely-gecko-23（箭頭伸長） - .wi-card-trace ← Cornerstone-04 / bitter-impala-54（同上手法用在卡片） - .wi-check-ink ← LeonKohli / wise-puma-87（不規則圓框＋勾勾一筆畫出） - .wi-switch ← AbanoubMagdy1 / Toggle-switches（基本開關結構） - .wi-load-dots ← Cornerstone-04 / little-mouse-69（三點呼吸） - .wi-load-tide ← mrhyddenn / angry-goat-2（圓內水位波浪） - 輸入框金線底線 ← elijahgummer / short-baboon-22（聚焦時底線） - 填錯輕晃 ← Galahhad / average-snail-50（錯誤時左右晃） - 通知 ← PriyanshuGupta28 / sour-rat-57（toast＋勾勾圖示） - 單選卡片 ← Yaya12085 / empty-badger-73（整張卡片當單選） - 滑動底塊 ← Pradeepsaranbishnoi / heavy-dragonfly-92（ui-kit.js） - 雲端連結框 ← Yaya12085 / tender-moose-95（虛線上傳框，只借外框，不收檔案） MIT License Copyright (c) 2023 Uiverse.io Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED. */ :root { --wi-ease: cubic-bezier(.2, .7, .2, 1); --wi-line: 1.6px; } /* ---------- 按鈕：共用底 ---------- */ .wi-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 500 15px/1 var(--s-sans); letter-spacing: .02em; transition: color .3s var(--wi-ease); } .wi-btn:focus-visible { outline: 2px solid var(--s-gold); outline-offset: 3px; } /* A2 刷金：金底按鈕，滑過時珍珠白由左刷到右 */ .wi-btn-sweep { background: var(--s-gold); color: var(--s-ink); } .wi-btn-sweep::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--s-pearl); transform: scaleX(0); transform-origin: left; transition: transform .32s var(--wi-ease); } .wi-btn-sweep:is(:hover, :focus-visible)::after { transform: scaleX(1); } /* A3 墨暈：金底按鈕，滑過時珍珠白從中心暈開（像墨滴進水） */ .wi-btn-ink { background: var(--s-gold); color: var(--s-ink); } .wi-btn-ink::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; background: var(--s-pearl); transform: translate(-50%, -50%); transition: width .4s var(--wi-ease), height .4s var(--wi-ease); } .wi-btn-ink:is(:hover, :focus-visible)::after { width: 120%; height: 300%; } /* B2 金線描邊：透明按鈕，滑過時金線沿邊框畫一圈（呼應首頁金鯨畫線） 用直角小圓角，描線的轉角才清楚 */ .wi-btn-trace { background: transparent; color: var(--s-pearl); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--s-hair-2); } .wi-btn-trace::before, .wi-btn-trace::after { content: ""; position: absolute; width: 0; height: 0; border: var(--wi-line) solid transparent; border-radius: 8px; box-sizing: border-box; } .wi-btn-trace::before { top: 0; left: 0; } .wi-btn-trace::after { bottom: 0; right: 0; } .wi-btn-trace:is(:hover, :focus-visible) { color: var(--s-gold); } .wi-btn-trace:is(:hover, :focus-visible)::before { width: 100%; height: 100%; border-top-color: var(--s-gold); border-right-color: var(--s-gold); transition: width .2s linear, height .2s linear .2s; } .wi-btn-trace:is(:hover, :focus-visible)::after { width: 100%; height: 100%; border-bottom-color: var(--s-gold); border-left-color: var(--s-gold); transition: border-color 0s .4s, width .2s linear .4s, height .2s linear .6s; } /* B3 箭頭伸長：透明按鈕，滑過時細線箭頭往右伸 */ .wi-btn-arrow { background: transparent; color: var(--s-pearl); box-shadow: inset 0 0 0 1px var(--s-hair-2); transition: color .3s, box-shadow .3s; } .wi-btn-arrow .wi-ar { position: relative; width: 16px; height: 16px; transition: width .3s var(--wi-ease); } .wi-btn-arrow .wi-ar::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; border-top: var(--wi-line) solid currentColor; translate: 0 -50%; } .wi-btn-arrow .wi-ar::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: var(--wi-line) var(--wi-line) 0 0; translate: 0 -50%; rotate: 45deg; } .wi-btn-arrow:is(:hover, :focus-visible) { color: var(--s-gold); box-shadow: inset 0 0 0 1px var(--s-gold); } .wi-btn-arrow:is(:hover, :focus-visible) .wi-ar { width: 32px; } /* ---------- 卡片 ---------- */ /* F2 金線繞框：玻璃卡片，滑過時金線沿邊框畫一圈（同 B2 手法） */ .wi-card-trace { position: relative; padding: 24px; border-radius: 16px; background: var(--s-l1); border: 1px solid var(--s-hair); box-shadow: var(--s-glass-edge); } .wi-card-trace::before, .wi-card-trace::after { content: ""; position: absolute; inset: -1px auto auto -1px; width: 0; height: 0; border: 1px solid transparent; border-radius: 16px; box-sizing: border-box; pointer-events: none; } .wi-card-trace::after { inset: auto -1px -1px auto; } .wi-card-trace:is(:hover, :focus-within)::before { width: calc(100% + 2px); height: calc(100% + 2px); border-top-color: var(--s-gold); border-right-color: var(--s-gold); transition: width .3s linear, height .3s linear .3s; } .wi-card-trace:is(:hover, :focus-within)::after { width: calc(100% + 2px); height: calc(100% + 2px); border-bottom-color: var(--s-gold); border-left-color: var(--s-gold); transition: border-color 0s .6s, width .3s linear .6s, height .3s linear .9s; } /* F3 內發光：玻璃卡片，滑過時上緣亮起一條金色內光（不用漸層，用 inset 陰影） */ .wi-card-glow { padding: 24px; border-radius: 16px; background: var(--s-l1); border: 1px solid var(--s-hair); box-shadow: var(--s-glass-edge); transition: border-color .3s, box-shadow .3s, background-color .3s; } .wi-card-glow:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--s-gold) 40%, transparent); background: var(--s-l2); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--s-gold) 60%, transparent), inset 0 24px 32px -24px var(--s-glow-gold); } /* ---------- 勾選框 ---------- */ /* C2 墨跡勾：不規則圓框（像毛筆點出來），勾選時框變形、勾勾一筆畫出 */ .wi-check-ink { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--s-pearl); font-size: 15px; } .wi-check-ink input { position: absolute; opacity: 0; width: 1px; height: 1px; } .wi-check-ink .wi-box { position: relative; flex: none; width: 24px; height: 24px; border: var(--wi-line) solid var(--s-mist); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: border-color .3s, border-radius .3s, background-color .3s; } .wi-check-ink svg { position: absolute; inset: 2px; width: 18px; height: 18px; fill: none; stroke: var(--s-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--wi-ease) .08s; } .wi-check-ink input:checked + .wi-box { border-color: var(--s-gold); background: var(--s-gold); border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } .wi-check-ink input:checked + .wi-box svg { stroke-dashoffset: 0; } .wi-check-ink input:focus-visible + .wi-box { outline: 2px solid var(--s-gold); outline-offset: 3px; } /* ---------- 開關（例：聲音開關） ---------- */ .wi-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--s-mist); font-size: 14px; } .wi-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .wi-switch .wi-track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; border: 1px solid var(--s-hair-2); background: var(--s-l1); transition: background-color .25s, border-color .25s; } .wi-switch .wi-track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--s-mist); transition: translate .25s var(--wi-ease), background-color .25s; } .wi-switch input:checked + .wi-track { border-color: var(--s-gold); background: color-mix(in srgb, var(--s-gold) 18%, transparent); } .wi-switch input:checked + .wi-track::before { translate: 16px 0; background: var(--s-gold); } .wi-switch input:checked ~ .wi-label { color: var(--s-pearl); } .wi-switch input:focus-visible + .wi-track { outline: 2px solid var(--s-gold); outline-offset: 3px; } /* ---------- 載入動效 ---------- */ /* E2 三點呼吸：送出中，三顆金點輪流放大 */ .wi-load-dots { display: inline-flex; gap: 8px; align-items: center; height: 16px; } .wi-load-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: wi-breathe .9s var(--wi-ease) infinite alternate; } .wi-load-dots i:nth-child(2) { animation-delay: .15s; } .wi-load-dots i:nth-child(3) { animation-delay: .3s; } @keyframes wi-breathe { from { transform: scale(1.6); opacity: 1; } to { transform: scale(.8); opacity: .4; } } /* E3 潮汐：圓內海水慢慢轉，像水位起伏（適合整頁載入、上傳中） */ .wi-load-tide { position: relative; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px var(--s-gold); background: var(--s-sea); } .wi-load-tide::before, .wi-load-tide::after { content: ""; position: absolute; width: 200%; height: 200%; left: 50%; top: 0; translate: -50% -72%; background: var(--s-night); } .wi-load-tide::before { border-radius: 45%; animation: wi-tide 5s linear infinite; } .wi-load-tide::after { border-radius: 40%; background: color-mix(in srgb, var(--s-night) 55%, transparent); animation: wi-tide 9s linear infinite; } @keyframes wi-tide { to { rotate: 360deg; } } /* 減少動態：保留結果、拿掉過程 */ @media (prefers-reduced-motion: reduce) { .wi-btn::after, .wi-btn-trace::before, .wi-btn-trace::after, .wi-card-trace::before, .wi-card-trace::after, .wi-check-ink svg, .wi-check-ink .wi-box, .wi-switch .wi-track::before, .wi-btn-arrow .wi-ar { transition: none !important; } .wi-load-dots i { animation: none; opacity: .7; } .wi-load-tide::before, .wi-load-tide::after { animation-duration: 30s; } } /* ========================================================================= 套用到現有頁面（2026-11-02 使用者比稿選定）： A3 墨暈＝金色／紅色主按鈕；B3 箭頭伸長＝透明框「連結」按鈕（，像「取消」「上一步」這類