/* ============================================================ 切頁過場 A/B 開關 ============================================================ 用途:讓團隊在不改設計的前提下,快速比較兩種 cross-document view transition 策略對「停頓 + 閃爍」的體感差異。 切換方式 — 改 的 data-transition 屬性: ← A 組(預設) ← B 組 A 組(預設):瀏覽器內建淡入淡出(預設 ~250ms cross-fade), 零自訂、最低風險、最容易回滾。 B 組(進階):自訂 fade keyframes + 可控時長 + reduced-motion。 進場稍長、出場較短,模擬「先收後出」的層次感。 不支援 cross-document view transitions 的瀏覽器(舊 Firefox、 Safari 17 以下等)會自動忽略整段,fallback 為原本的硬切換, 不會壞頁。 ============================================================ */ /* —— A 組:只開瀏覽器預設過場(永遠生效,B 會疊加在上面) —— */ @view-transition { navigation: auto; } /* —— B 組:opt-in,在 時才掛 keyframes —— */ html[data-transition="b"]::view-transition-old(root) { animation: ap-fade-out 180ms ease-in both; } html[data-transition="b"]::view-transition-new(root) { animation: ap-fade-in 240ms ease-out both; } @keyframes ap-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes ap-fade-in { from { opacity: 0; } to { opacity: 1; } } /* B 組同時尊重 reduced-motion,把過場壓到幾乎瞬間 */ @media (prefers-reduced-motion: reduce) { html[data-transition="b"]::view-transition-old(root), html[data-transition="b"]::view-transition-new(root) { animation-duration: 1ms !important; } } /* ------------- 變數系統 ------------- */ :root { --bg: #F2F2F2; --surface: #FFFFFF; --ink: #111111; --sub-ink: #666666; --neon: #00CC44; --alert: #FF2A2A; --warn: #FFAA00; --border: 2px solid #111; --mono: 'JetBrains Mono', monospace; --sans: 'Inter', 'Noto Sans TC', sans-serif; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* html 也要 overflow-x: hidden,否則 iOS Safari 仍可橫向拖動整個頁面 */ html { overflow-x: hidden; } body { font-family: var(--sans); background-color: var(--bg); color: var(--ink); margin: 0; padding: 0 0 60px 0; overflow-x: hidden; overscroll-behavior-x: none; font-size: 16px; } /* ------------- 跑馬燈 Marquee ------------- */ .marquee-container { background: var(--ink); color: var(--surface); overflow: hidden; white-space: nowrap; padding: 10px 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; border-bottom: var(--border); } .marquee-content { display: inline-block; animation: scroll 40s linear infinite; /* 提示瀏覽器把跑馬燈丟到合成層,切頁時不跟主內容搶 paint */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ------------- Header 設計 ------------- */ .header { padding: 25px 20px 35px 20px; border-bottom: var(--border); background: var(--bg); } .meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-family: var(--mono); font-size: 0.8rem; color: var(--sub-ink); letter-spacing: 0.5px; } .version-tag { background: #ddd; padding: 3px 8px; border-radius: 4px; color: #000; font-weight: 700; } .glitch-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; margin: 0; line-height: 1.1; letter-spacing: -1px; position: relative; display: inline-block; max-width: 100%; font-family: var(--sans); /* CJK 允許自然斷行,避免在窄螢幕把整頁撐寬 */ word-break: normal; overflow-wrap: anywhere; } .cursor-box { display: inline-block; width: 18px; height: 18px; background: var(--neon); margin-left: 8px; border-radius: 50%; /* 1s → 1.2s,降低 step 切換頻率減少 paint,但仍保留終端機光標感 */ animation: blink 1.2s step-end infinite; vertical-align: middle; will-change: opacity; } @keyframes blink { 50% { opacity: 0; } } .sub-info-bar { display: flex; align-items: center; margin-top: 18px; gap: 12px; } .deco-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink), var(--ink) 4px, transparent 4px, transparent 8px); } .sub-info-bar .code { font-family: var(--mono); font-size: 1rem; color: var(--ink); font-weight: 700; } /* ------------- 容器 ------------- */ .main-container { padding: 20px; width: 100%; max-width: 100%; margin: 0 auto; } @media (min-width: 1200px) { .main-container { max-width: 1000px; } } /* ------------- Tabs ------------- */ .nav-pills { display: flex; gap: 12px; margin-bottom: 35px; } .nav-item { flex: 1; text-align: center; padding: 16px 0; border: 2px solid #ccc; font-weight: 700; font-size: 1.1rem; cursor: pointer; color: #999; background: #fff; transition: 0.2s; white-space: nowrap; text-decoration: none; } .nav-item.active { border-color: var(--ink); background: var(--ink); color: var(--surface); box-shadow: 4px 4px 0 rgba(0,0,0,0.15); } /* ------------- 卡片 ------------- */ .card { background: var(--surface); border: var(--border); padding: 25px; margin-bottom: 35px; box-shadow: 6px 6px 0px rgba(0,0,0,0.1); width: 100%; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 2px dashed #ddd; padding-bottom: 15px; } .section-title { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--sub-ink); text-transform: uppercase; } .ph-icon { font-size: 1.8rem; color: var(--ink); } /* ------------- 輸入元件 ------------- */ label { display: block; font-weight: 900; font-size: 1.25rem; margin-bottom: 12px; color: var(--ink); } .sub-label { font-size: 1rem; color: #666; margin-bottom: 12px; display: block; font-weight: 400; line-height: 1.5; } input[type="number"], input[type="date"], input[type="text"], select { width: 100%; background: #FAFAFA; border: none; border-bottom: 3px solid #ccc; border-radius: 0; padding: 18px 12px; font-family: var(--mono); font-size: 1.3rem; color: var(--ink); margin-bottom: 30px; appearance: none; font-weight: 500; transition: 0.2s; } input:focus, select:focus { outline: none; border-bottom-color: var(--ink); background: #fff; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } /* ------------- Radio Button Group (日期模式) ------------- */ .radio-group { display: flex; gap: 15px; margin-bottom: 25px; } .radio-btn { flex: 1; text-align: center; padding: 15px; border: 2px solid #ccc; font-weight: 700; cursor: pointer; transition: 0.2s; font-size: 1rem; color: #999; } .radio-btn.active { border-color: var(--ink); background: #000; color: #fff; box-shadow: 3px 3px 0 rgba(0,0,0,0.2); } /* ------------- 單日多選列表 ------------- */ .single-date-row { display: flex; align-items: flex-start; gap: 15px; padding: 15px; border: 1px solid #eee; margin-bottom: 15px; background: #fafafa; position: relative; } .single-date-row .grid { margin-bottom: 0; gap: 15px; flex: 1; } .single-date-row input { margin-bottom: 0; font-size: 1.1rem; padding: 12px; } .single-date-row label { font-size: 0.9rem; margin-bottom: 5px; } .btn-remove { background: #fff; border: 2px solid #ccc; color: #999; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: 0.2s; margin-top: 28px; /* Align with inputs */ } .btn-remove:hover { border-color: var(--alert); color: var(--alert); } .btn-add { width: 100%; padding: 15px; border: 2px dashed #aaa; background: transparent; color: #666; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-add:hover { border-color: var(--ink); color: var(--ink); background: #fff; } /* ------------- Checkbox ------------- */ .toggle-block { display: flex; align-items: center; padding: 20px; border: 2px solid #eee; margin-bottom: 18px; cursor: pointer; transition: 0.1s; background: #fff; } .toggle-block:active { transform: scale(0.99); } .toggle-block.checked { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); background: #fff; } .toggle-square { width: 28px; height: 28px; border: 2px solid #999; margin-right: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toggle-block.checked .toggle-square { background: var(--ink); border-color: var(--ink); } .toggle-square i { color: #fff; font-size: 18px; display: none; font-weight: bold; } .toggle-block.checked .toggle-square i { display: block; } .toggle-text { font-size: 1.15rem; font-weight: 700; line-height: 1.5; flex: 1; } .tag { font-family: var(--mono); font-size: 0.85rem; background: #000; color: #fff; padding: 3px 8px; margin-left: 8px; vertical-align: middle; display: inline-block; } /* ------------- Validator Box ------------- */ .validator-box { margin-top: 15px; padding: 25px; background: #111; color: #fff; font-family: var(--mono); font-size: 1rem; border-left: 8px solid #555; } .validator-box.pass { border-left-color: var(--neon); } .validator-box.fail { border-left-color: var(--alert); } .validator-box.warn { border-left-color: var(--warn); } .v-status { font-weight: 900; font-size: 1.1rem; margin-bottom: 10px; display: block; text-transform: uppercase; letter-spacing: 1px; } .pass .v-status { color: var(--neon); } .fail .v-status { color: var(--alert); } .warn .v-status { color: var(--warn); } .v-msg span { display: block; margin-bottom: 6px; color: #ccc; line-height: 1.5; } .v-msg span::before { content: "> "; opacity: 0.5; } /* ------------- Link Block ------------- */ .info-link { text-decoration: none; color: inherit; display: block; } .link-block { display: flex; align-items: center; padding: 22px; border: 2px solid #eee; margin-bottom: 18px; background: #fff; transition: 0.2s; } .link-block:active { background: #f0f0f0; border-color: #999; } .link-icon { font-size: 2rem; margin-right: 18px; flex-shrink: 0; color: var(--ink); } .link-content { flex: 1; } .link-title { font-size: 1.2rem; font-weight: 900; display: block; margin-bottom: 6px; } .link-desc { font-size: 1rem; color: #666; font-family: var(--mono); display: block; line-height: 1.4;} .link-arrow { font-family: var(--mono); font-weight: 900; margin-left: 10px; font-size: 1.4rem; } /* ------------- iOS Tutorial ------------- */ .ios-tutorial { background: #EAEAEA; padding: 25px; margin-top: 35px; border-radius: 10px; font-size: 1rem; } .ios-title { font-weight: 900; font-size: 1.1rem; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .step-row { display: flex; align-items: flex-start; margin-bottom: 15px; } .step-num { background: var(--ink); color: #fff; width: 24px; height: 24px; border-radius: 50%; text-align: center; line-height: 24px; font-size: 0.85rem; font-weight: bold; margin-right: 12px; flex-shrink: 0; font-family: var(--mono); } .step-text { color: #333; line-height: 1.5; } .footer-text { font-size: 0.9rem; color: #888; line-height: 1.6; margin-top: 40px; border-top: 2px solid #ddd; padding-top: 25px; font-weight: 500; } .footer-copy { font-family: var(--mono); font-size: 0.8rem; color: #aaa; margin-top: 12px; display: block; } .hidden { display: none !important; } /* ------------- Eval Row (Card 3) ------------- */ .eval-row { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #eee; font-weight: 700; font-size: 1.05rem; } .eval-row:last-child { border-bottom: none; } .status-icon { font-size: 1.5rem; margin-right: 15px; } .status-icon.pass { color: var(--neon); } .status-icon.fail { color: var(--alert); } /* ========================================= */ /* PIXEL HELPER (CSS BOT) */ /* ========================================= */ #pixel-helper { position: fixed; z-index: 9999; right: 30px; bottom: 30px; display: flex; flex-direction: column-reverse; /* 氣泡在機器人上方 */ align-items: flex-end; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } #pixel-helper.minimized { transform: translateY(70px); } /* 機器人本體設定 */ .bot-container { position: relative; width: 60px; height: 60px; cursor: pointer; } .bot-body { width: 100%; height: 100%; background: #111; position: relative; border-radius: 8px; animation: float 3s infinite ease-in-out; box-shadow: 4px 4px 0 rgba(0,0,0,0.15); } .bot-face { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 24px; } .bot-eye { width: 8px; height: 8px; background: var(--neon); position: absolute; top: 0; transition: 0.2s; } .bot-eye.left { left: 0; } .bot-eye.right { right: 0; } .bot-mouth { width: 100%; height: 4px; background: var(--neon); position: absolute; bottom: 0; left: 0; transition: 0.2s; } .bot-shadow { width: 40px; height: 8px; background: rgba(0,0,0,0.1); border-radius: 50%; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); animation: shadow-scale 3s infinite ease-in-out; } /* 對話氣泡 */ #helper-bubble { background: #000; color: #fff; padding: 12px 18px; border-radius: 8px; font-family: var(--sans); font-size: 0.95rem; font-weight: 700; margin-bottom: 25px; /* 推開主體 */ position: relative; opacity: 0; transition: 0.3s; line-height: 1.5; box-shadow: 4px 4px 0 rgba(0,0,0,0.1); max-width: 250px; transform: translateY(10px); pointer-events: none; } #helper-bubble::after { content: ''; position: absolute; bottom: -8px; right: 20px; border-width: 8px 8px 0 8px; border-style: solid; border-color: #000 transparent transparent transparent; } #pixel-helper.active #helper-bubble { opacity: 1; transform: translateY(0); } /* --- ANIMATIONS & STATES --- */ /* 1. Normal Float */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes shadow-scale { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; } 50% { transform: translateX(-50%) scale(0.8); opacity: 0.3; } } /* 2. Typing (Jump) */ .helper-typing .bot-body { animation: jump 0.3s infinite alternate !important; background: #333; } @keyframes jump { from { transform: translateY(0); } to { transform: translateY(-15px); } } /* 3. Success (Spin) */ .helper-success .bot-body { background: var(--neon); animation: spin 0.6s ease-in-out; } .helper-success .bot-eye, .helper-success .bot-mouth { background: #fff; } @keyframes spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } /* 4. Error (Shake) */ .helper-error .bot-body { background: var(--alert); animation: shake 0.4s infinite; } .helper-error .bot-eye, .helper-error .bot-mouth { background: #fff; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* 5. Idle (Sleep) */ .helper-idle .bot-body { opacity: 0.6; animation: sleep 3s infinite ease-in-out; } .helper-idle .bot-eye { height: 2px; top: 10px; } /* 閉眼 */ @keyframes sleep { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.95) translateY(5px); } } /* ------------- 系統入口彈窗 (Portal System) ------------- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; transition: 0.3s; } .portal-box { background: var(--surface); border: 4px solid var(--ink); width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 15px 15px 0 var(--ink); padding: 30px; animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modalPop { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .portal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #eee; } .portal-title-group { flex: 1; padding-right: 20px; } .portal-subtitle { font-family: var(--mono); font-size: 0.8rem; color: var(--sub-ink); display: block; margin-bottom: 8px; } .portal-title { font-size: 1.45rem; font-weight: 950; line-height: 1.4; margin: 0; color: var(--ink); letter-spacing: -0.5px;} .portal-close { background: var(--ink); color: #fff; border: none; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: 0.2s; flex-shrink: 0; } .portal-close:hover { background: var(--alert); } .portal-row { border: 3px solid var(--ink); padding: 22px; margin-bottom: 25px; display: flex; gap: 20px; background: #fff; box-shadow: 8px 8px 0 var(--ink); transition: 0.2s; } .portal-row-warn { border-color: var(--warn); box-shadow: 8px 8px 0 var(--warn); } .portal-row-neon { border-color: var(--neon); box-shadow: 8px 8px 0 var(--neon); } .portal-icon { font-size: 2.8rem; flex-shrink: 0; } .portal-detail { flex: 1; min-width: 0; } .portal-name { font-size: 1.25rem; font-weight: 950; margin-bottom: 6px; color: var(--ink); } .portal-tagline { font-size: 0.9rem; color: var(--sub-ink); font-style: italic; margin-bottom: 15px; font-weight: 700; } .portal-desc { font-size: 0.95rem; line-height: 1.7; color: #444; margin-bottom: 20px; } .portal-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; text-decoration: none; padding: 10px 20px; font-weight: 900; font-size: 0.95rem; transition: 0.2s; } .portal-btn:hover { opacity: 0.9; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(0,0,0,0.2); } .portal-btn-warn { background: var(--warn); } .portal-footer { background: #f9f9f9; border-top: 2px solid #eee; padding: 20px 30px; margin: 0 -30px -30px -30px; } .footer-msg { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 0.95rem; } .footer-hint { font-size: 0.85rem; color: var(--sub-ink); line-height: 1.5; } .bot-close { position: absolute; top: -10px; right: -10px; background: var(--ink); color: #fff; border: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; z-index: 11; transition: 0.2s; border: 2px solid #fff; } .bot-close:hover { background: var(--alert); transform: scale(1.1); } .contact-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; } .contact-btn { display: flex; align-items: center; gap: 12px; background: #f8f8f8; padding: 14px 18px; border: 3px solid var(--ink); cursor: pointer; font-weight: 900; font-size: 1rem; color: var(--ink); transition: 0.2s; text-decoration: none; } .contact-btn:hover { background: #fff; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); } .contact-btn i { font-size: 1.4rem; flex-shrink: 0; } .contact-btn span { min-width: 0; flex: 1; word-break: break-all; line-height: 1.4; } .line-btn { border-color: #00C300; color: #00C300; } .line-btn:hover { background: #F1FBF2; box-shadow: 6px 6px 0 #00C300; } /* —— Portal mobile responsive —— */ /* 之前沒有 mobile media query,LINE in-app(較窄 viewport)會 email 文字溢出 + 8px 偏移陰影看起來像雙框 + icon flex 把內容擠掉 */ @media (max-width: 600px) { .modal-overlay { padding: 12px; } .portal-box { padding: 20px; box-shadow: 8px 8px 0 var(--ink); } .portal-header { margin-bottom: 18px; padding-bottom: 14px; } .portal-title { font-size: 1.1rem; } .portal-title-group { padding-right: 12px; } .portal-row { flex-direction: column; gap: 12px; padding: 16px; margin-bottom: 18px; box-shadow: 4px 4px 0 var(--ink); } .portal-row-warn { box-shadow: 4px 4px 0 var(--warn); } .portal-row-neon { box-shadow: 4px 4px 0 var(--neon); } .portal-icon { font-size: 2rem; } .portal-name { font-size: 1.1rem; } .portal-tagline { font-size: 0.85rem; margin-bottom: 10px; } .portal-desc { font-size: 0.9rem; margin-bottom: 14px; } .portal-btn { padding: 9px 14px; font-size: 0.9rem; } .portal-footer { padding: 16px 20px; margin: 0 -20px -20px -20px; } .contact-btn { padding: 12px 14px; gap: 10px; font-size: 0.92rem; } .contact-btn:hover { transform: none; box-shadow: none; } } /* ============================================ NAVIGATION (新版 Home Bar) ============================================ */ .home-bar { margin: 20px 0 28px; padding: 14px; background: var(--surface); border: var(--border); box-shadow: 4px 4px 0 var(--ink); } .home-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; background: var(--ink); color: var(--surface); font-family: var(--mono); font-weight: 700; font-size: 0.85rem; cursor: pointer; border-radius: 4px; transition: 0.15s; text-decoration: none; } .home-back:hover { background: var(--neon); color: var(--ink); } .home-bar .nav-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .home-bar .nav-item { padding: 8px 12px; font-size: 0.85rem; font-weight: 700; color: var(--sub-ink); background: #f5f5f5; border: 2px solid transparent; cursor: pointer; border-radius: 4px; transition: 0.15s; flex: 1 1 auto; text-align: center; min-width: 80px; } .home-bar .nav-item:hover { background: #eee; color: var(--ink); } .home-bar .nav-item.active { background: var(--ink); color: var(--neon); border-color: var(--ink); } /* ============================================ COMMON ACTION BUTTON (用於 quiz / quest / coach 等流程) ============================================ */ .quiz-next { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; margin-top: 18px; font-size: 1rem; font-weight: 900; background: var(--neon); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; box-shadow: 4px 4px 0 var(--ink); transition: 0.15s; font-family: var(--sans); text-decoration: none; } .quiz-next:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .quiz-next:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } .quiz-next.primary { background: var(--ink); color: var(--neon); } .quiz-next.ghost { background: transparent; color: var(--sub-ink); box-shadow: none; border-color: #ccc; } .quiz-next.ghost:hover { background: #f5f5f5; box-shadow: none; transform: none; border-color: var(--ink); color: var(--ink); } .quiz-next.done { background: #ccc; color: #555; } /* ============================================================ Reduced Motion 全站處理 ============================================================ 尊重作業系統「減少動態效果」設定, 把跑馬燈跟 cursor 閃爍降為靜態,避免分頁切換時動畫造成抖動。 不影響 hover transition 等關鍵互動回饋。 ============================================================ */ @media (prefers-reduced-motion: reduce) { .marquee-content { animation: none; /* 停下後內容靠左對齊就好,不會看到一半被截斷 */ transform: none; } .cursor-box { animation: none; opacity: 1; } }