/* ========================================================================= 共用設計 tokens（文字／按鈕色調依 Claude Design mockup 方向 A「紙與石板」） 純白底、暖灰文字、石板藍主色；固定淺色，不隨系統深色切換。 所有頁面共用：色彩 tokens、頂部膠囊、三段結果鈕、輸入焦點漸層環。 ========================================================================= */ :root { color-scheme: light only; /* ---- 頁面背景：方案 B「斜向漸層」，左上白 → 右下淡暖灰，無色相 ------------ 手動微調就改這三個值：起點色、終點色、角度／白色停留比例。 */ --glass-page-bg: #fff; /* 漸層起點（頂部保持純白，也是 html 底色） */ --glass-page-bg-end: #f0efeb; /* 漸層終點（右下角的淡暖灰） */ --glass-page-gradient: linear-gradient(165deg, var(--glass-page-bg) 0%, var(--glass-page-bg) 26%, var(--glass-page-bg-end) 100%); /* ---- 文字（暖灰，mockup 1b 原值）---------------------------------------- */ --glass-ink: oklch(27% 0.02 60); --glass-soft: oklch(45% 0.02 60); --glass-muted: oklch(52% 0.02 60); --glass-label: oklch(52% 0.02 60); --glass-faint: oklch(58% 0.02 60); --glass-icon: oklch(38% 0.02 60); --glass-placeholder: oklch(70% 0.015 60); --glass-dash: oklch(80% 0.02 60); /* ---- 主色（石板藍）與語意色 -------------------------------------------- */ --glass-accent: oklch(40% 0.05 250); --glass-accent-strong: oklch(34% 0.06 250); --glass-accent-on: #fff; --glass-accent-soft: oklch(40% 0.05 250 / 0.1); --glass-accent-shadow: 0 4px 12px oklch(40% 0.05 250 / 0.3); --glass-success: oklch(55% 0.08 155); --glass-success-bg: oklch(55% 0.08 155 / 0.16); --glass-success-ink: oklch(36% 0.08 155); --glass-danger: oklch(58% 0.13 30); --glass-danger-bg: oklch(58% 0.13 30 / 0.14); --glass-danger-ink: oklch(48% 0.13 30); --glass-danger-wash: oklch(58% 0.13 30 / 0.07); --glass-neutral-bg: rgba(60, 50, 30, 0.06); --glass-neutral-ink: oklch(50% 0.02 60); /* ---- 面材：白卡＋暖色淡陰影（rgba(60,50,30) 是 1b 的陰影色）------------------ */ --glass-line: rgba(60, 50, 30, 0.08); --glass-sunken: rgba(60, 50, 30, 0.05); --glass-card-bg: #fff; --glass-hairline: inset 0 0 0 1px rgba(60, 50, 30, 0.06); --glass-card-shadow: var(--glass-hairline), 0 1px 2px rgba(60, 50, 30, 0.05), 0 8px 24px rgba(60, 50, 30, 0.06); --glass-pill-shadow: var(--glass-hairline), 0 1px 3px rgba(60, 50, 30, 0.06), 0 6px 18px rgba(60, 50, 30, 0.06); --glass-bar-shadow: var(--glass-hairline), 0 2px 6px rgba(60, 50, 30, 0.08), 0 12px 32px rgba(60, 50, 30, 0.14); --glass-lift-shadow: 0 1px 4px rgba(60, 50, 30, 0.1); --glass-radius-lg: 22px; --glass-radius-md: 18px; --glass-radius-sm: 14px; --glass-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --glass-font-num: "M PLUS 1p", "Noto Sans TC", "PingFang TC", sans-serif; /* ---- 輸入焦點：旋轉漸層環的底環色（光弧本體見下方 --glass-focus-ring）------------ */ --glass-focus-base: oklch(40% 0.05 250 / 0.28); } /* 沒有這段宣告，--glow-ang 只是字串、不會補間，環就不會轉。 */ @property --glow-ang { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes glass-glow-spin { to { --glow-ang: 360deg; } } /* 光弧要宣告在欄位本身：var() 是在「宣告處」代入的，若放在 :root，--glow-ang 會被鎖成 :root 的 0deg，欄位上的旋轉動畫就帶不動它（環只會靜止不轉）。 */ input, select, textarea { --glass-focus-ring: conic-gradient(from var(--glow-ang, 0deg), var(--glass-focus-base) 0 48%, #2dd4bf 62%, #8b5cf6 80%, #ec4899 94%, var(--glass-focus-base) 100%); } /* ---- 頁面背景漸層：固定在視窗上、不隨內容捲動（fixed 偽元素比 background-attachment 可靠，iOS Safari 也吃）；只在螢幕顯示，列印不受影響。 */ @media screen { body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--glass-page-gradient); pointer-events: none; } } /* ---- 頂部膠囊：左「‹ 工具」、右單元／構件標籤 -------------------------------- */ .glass-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--glass-card-bg); box-shadow: var(--glass-pill-shadow); color: var(--glass-ink); font: inherit; font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .glass-tag { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--glass-accent); color: var(--glass-accent-on); font-family: var(--glass-font-num); font-size: 0.75rem; font-weight: 500; white-space: nowrap; } /* ---- 三段結果鈕（✓／✗／N/A）------------------------------------------------- 隱藏 radio + 相鄰 span（沿用專案既有 .unit-type 手法）；未勾選＝「待確認」。 */ .glass-segmented { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-neutral-bg); } .glass-segmented label { position: relative; margin: 0; } .glass-segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; } .glass-segmented span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: var(--glass-neutral-ink); font-family: var(--glass-font-num); font-size: 0.6875rem; font-weight: 700; cursor: pointer; } .glass-segmented span svg { display: block; } .glass-segmented input:focus-visible + span { outline: 3px solid var(--glass-accent); outline-offset: 2px; } .glass-segmented input:checked + span.is-pass { background: var(--glass-success); color: #fff; } .glass-segmented input:checked + span.is-fail { background: var(--glass-danger); color: #fff; } .glass-segmented input:checked + span.is-na { background: var(--glass-soft); color: #fff; } /* 不合格列：整列淡紅底，三段鈕改白底維持對比 */ .is-failed .glass-segmented { background: #fff; } /* ---- 橫向捲動分頁：可捲動的提示 -------------------------------------------- 兩側用透明遮罩把膠囊淡出（不是畫白色，任何背景都吃），右側再加一顆白色圓徽章「›」。 淡出與徽章只在該方向還有內容時出現（scroll-driven animation；未捲動時只有右側， 捲到底就消失；不支援的瀏覽器則不顯示）。scroll-snap 讓拖動時逐顆停靠。 */ @property --glass-tab-fade-l { syntax: ""; inherits: false; initial-value: 0px; } @property --glass-tab-fade-r { syntax: ""; inherits: false; initial-value: 0px; } .tab-navigation { scroll-snap-type: x proximity; } /* 停靠留白用 scroll-margin 而不是容器的 scroll-padding：scroll-padding 會一併縮小 sticky 的 吸附範圍，徽章就會和遮罩圓洞錯開 16px。 */ .tab-row button { scroll-snap-align: start; scroll-margin-inline-start: 16px; } .tab-navigation::after { content: ""; position: sticky; right: 0; /* sticky 的偏移量是從容器 content box 量起（不含 padding），所以會停在內容右緣 */ z-index: 1; flex: none; align-self: flex-start; width: 24px; height: 24px; margin: 7px 0 0 calc(-24px - 6px); /* 24px 寬度 + 6px 的 flex gap，淨佔位 0；7px 讓它在 38px 膠囊中線 */ border-radius: 999px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a332c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat, var(--glass-card-bg); box-shadow: var(--glass-hairline), 0 1px 3px rgba(60, 50, 30, 0.1); opacity: 0; pointer-events: none; } @supports (animation-timeline: scroll()) { .tab-navigation { /* 第一層：兩側淡出（最外 30% 完全透明，避免邊緣殘影）； 第二層：在徽章位置開圓洞讓徽章不被淡出——以 content-box 定位，才會和 sticky 徽章落在同一點 */ -webkit-mask: linear-gradient(90deg, transparent calc(var(--glass-tab-fade-l) * 0.3), #000 var(--glass-tab-fade-l), #000 calc(100% - var(--glass-tab-fade-r)), transparent calc(100% - var(--glass-tab-fade-r) * 0.3)), radial-gradient(circle closest-side, #000 98%, transparent) right 0 top 7px / 24px 24px no-repeat content-box border-box; mask: linear-gradient(90deg, transparent calc(var(--glass-tab-fade-l) * 0.3), #000 var(--glass-tab-fade-l), #000 calc(100% - var(--glass-tab-fade-r)), transparent calc(100% - var(--glass-tab-fade-r) * 0.3)), radial-gradient(circle closest-side, #000 98%, transparent) right 0 top 7px / 24px 24px no-repeat content-box border-box; animation: glass-tabs-fade-left linear both, glass-tabs-fade-right linear both; animation-timeline: scroll(self inline); } .tab-navigation::after { animation: glass-tabs-badge linear both; animation-timeline: scroll(nearest inline); } } @keyframes glass-tabs-fade-left { 0%, 4% { --glass-tab-fade-l: 0px; } 12%, 100% { --glass-tab-fade-l: 48px; } } @keyframes glass-tabs-fade-right { 0%, 88% { --glass-tab-fade-r: 48px; } 96%, 100% { --glass-tab-fade-r: 0px; } } @keyframes glass-tabs-badge { 0%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }