/* * ArkiTeki 會員方案頁皮膚（Plan Widget v2） * * markup 與行為由 archiac 供應（subscription/component/plan_widget_v2＋{sso}/js/plan-widget.v2.js）， * 版面內容由 archiac 的 config/plan_pages/archidb.php 決定；本檔只負責長相。 * * 來源：Sara 115.09.11 交付的 member-plans.css（_data/115.09.11_會員方案頁面）。 * 搬進站內時做了兩件事，其餘規則與註解原樣保留： * 1. 所有選擇器限定在 #plan-page 底下——原檔用的是 .card／.panel／.wrap／.hero 這類通用名稱， * 不限定會與全站樣式互相污染；原本 .wrap 的規則直接落在 #plan-page 本身。 * 2. 拿掉站台外框（header／側欄／抽屜／底部導覽／頁尾）與本頁沒用到的加購頁元件， * 那一層用的是站上既有的 layout.app。 */ /* ---------- 站內整合（非 Sara 原檔） ---------- */ /* 方案頁滿版：拿掉全站內容區的左右留白與上下內距（比照 #page-about），留白改由 #plan-page 自己的內距負責。 本檔只在 v2 殼載入，v1 殼退回時不受影響 */ #page-plans #main-inner, #page-addons #main-inner { margin: 0; max-width: none; width: 100%; } #page-plans .main-content-wrapper .main-content, #page-addons .main-content-wrapper .main-content { padding: 0; } #page-plans #main-wrapper, #page-addons #main-wrapper { background: #F7FAF9; } /* 底色鋪滿整頁：頁尾（#footer-wrapper）與它上方的間距是透明的、body 也沒有底色， 不補的話內容區以下會露出瀏覽器的白底（設計稿的頁尾與內容區是同一塊底色）。 */ body#page-plans, body#page-addons { background: #F7FAF9; } /* 內容區底色與背景光暈：原檔掛在 .content（連同側欄讓位與左上圓角），站內外框不同，只取底色與光暈 */ .plan-page-stage { position: relative; overflow: hidden; z-index: 0; background: #F7FAF9; } /* 光暈不用 filter: blur：原本 4 顆各套 blur(80～95px) 再做移動＋縮放動畫，iPhone 上每一格都要重算大範圍模糊（帳號中心同樣寫法換頁要 6～8 秒）。 改為漸層本身就淡到透明（ellipse closest-side，在元素範圍內淡完、不會被圓角裁出硬邊），元素往外擴約 1.5 倍原模糊半徑補回原本的擴散範圍。 動畫只在有滑鼠的裝置（電腦）播放，手機／平板與「減少動態效果」維持靜止 */ .plan-page-stage .ark-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .plan-page-stage .blob-a { top: -400px; right: -340px; width: 1280px; height: 1060px; background: radial-gradient(ellipse closest-side at 50% 40%, rgba(176,197,198,0.313), rgba(176,197,198,0.245) 30%, rgba(176,197,198,0.143) 55%, rgba(176,197,198,0.051) 78%, rgba(176,197,198,0) 100%); } .plan-page-stage .blob-b { top: calc(24% - 135px); left: -415px; width: 1170px; height: 990px; background: radial-gradient(ellipse closest-side at 45% 45%, rgba(208,222,222,0.506), rgba(208,222,222,0.396) 30%, rgba(208,222,222,0.231) 55%, rgba(208,222,222,0.083) 78%, rgba(208,222,222,0) 100%); } .plan-page-stage .blob-c { bottom: -443px; left: calc(30% - 143px); width: 1226px; height: 1006px; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(150,178,179,0.221), rgba(150,178,179,0.173) 30%, rgba(150,178,179,0.101) 55%, rgba(150,178,179,0.036) 78%, rgba(150,178,179,0) 100%); } .plan-page-stage .blob-d { top: calc(40% - 120px); right: calc(8% - 120px); width: 800px; height: 760px; background: radial-gradient(ellipse closest-side at 50% 50%, rgba(222,232,231,0.46), rgba(222,232,231,0.36) 30%, rgba(222,232,231,0.21) 55%, rgba(222,232,231,0.075) 78%, rgba(222,232,231,0) 100%); } @media (hover: hover) and (pointer: fine) { .plan-page-stage .blob-a { animation: ark-drift-b 34s ease-in-out infinite alternate; } .plan-page-stage .blob-b { animation: ark-drift-a 28s ease-in-out infinite alternate; } .plan-page-stage .blob-c { animation: ark-drift-c 26s ease-in-out infinite alternate; } .plan-page-stage .blob-d { animation: ark-drift-a 31s ease-in-out infinite alternate; } } @keyframes ark-drift-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(140px, 80px) scale(1.18); } 100% { transform: translate(-80px, -50px) scale(0.94); } } @keyframes ark-drift-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-160px, -60px) scale(1.1); } 100% { transform: translate(90px, 70px) scale(0.9); } } @keyframes ark-drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -110px) scale(1.22); } 100% { transform: translate(-70px, 60px) scale(1); } } @media (prefers-reduced-motion: reduce) { .plan-page-stage .ark-blob { animation: none !important; } } /* 光暈在內容區底邊淡出到底色：光暈被 overflow:hidden 切在 .plan-page-stage 的底邊， 螢幕比內容高時下面接的是 #main-wrapper 的純色底，不淡出會看到一條色差邊界。 ::after 與光暈同為 z-index 0、順序在後所以蓋在光暈上；內容（#plan-page／#addon-page）是 z-index 1，不受影響。 */ .plan-page-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(247,250,249,0), #F7FAF9); } /* 月繳／年繳切換靠 hidden 屬性（plan-widget.v2.js 依 data-when 設定）； 有自己 display 值的元素（.plan-price-num 是 inline-flex、表單是 block）會蓋掉瀏覽器預設的 [hidden]，這裡統一壓回去 */ #plan-page [hidden] { display: none !important; } /* 購買按鈕包在表單裡（與 v1 同一條結帳通道），表單本身不佔版面 */ #plan-page .subscribe-form { margin: 0; padding: 0; } /* 訂閱的是已下架的舊方案時的提示：用 Sara 原檔的 .pill（琥珀色提示膠囊），放在卡片區上方。 原檔的 .pill 是單行設計，這裡的提示是完整句子，允許換行並限制最大寬度。 選擇器帶 [role=note] 是為了權重高過下方原檔的同名規則（本段排在原檔之前，同權重會被蓋掉） */ #plan-page .pill[role=note] { max-width: 880px; margin-bottom: 0; border-radius: 16px; text-align: left; } #plan-page .pill[role=note] .pill-text { line-height: 1.6; letter-spacing: 1px; } /* AI 題數列：所有寬度一律切成兩行（Sara 原檔只在 1321–1560px 與 340px 以下切，見下方原檔同名規則的說明）。 團體版的數值定案為「團隊共用每月約 150 題」（2026-09-21），比設計稿的「每月約 150 題」長， 單行需要卡片寬約 385px：四欄時版面最大寬度（.wrap 1712px）下卡片只有 378px、平板兩欄約 330px、 手機單欄 320px——任何寬度單行都放不下。 只讓團體版那張卡換行會讓它下面的功能列整排比其他卡低一行，違反原檔「四張卡必定同時換」的原則， 所以把原檔的兩行寫法延伸到所有寬度。數值文字若之後改短，這一段可以整個拿掉。 */ #plan-page .feat-ai { flex-wrap: wrap; } #plan-page .feat-ai .plan-qty { flex-basis: 100%; margin-left: 0; padding-left: 23px; text-align: right; } /* 年繳實收金額與含稅附註：卡片上顯示的是折合每月的價格，這一行交代實際一次收多少 */ #plan-page .plan-footnote { margin-top: -8px; text-align: center; } /* ---------- 加購頁（/addons）：同一套視覺語言套在 Addon Widget v1 的 markup 上 ---------- 加購頁的 markup 與行為仍是 archiac 的 addon_widget（契約 v1，archibm 共用），這裡只換皮膚： 色票、卡片、價格、膠囊按鈕、切換器都沿用方案頁；數量欄位的樣子取自 Sara 原檔的 .stepper。 Sara 尚未交付加購頁的設計稿（115.09.11 交付說明：加購頁另行改版中），交付後以她的版本為準。 */ #addon-page { --green-500: #003F40; --green-400: #2F6A6B; --green-300: #809FA0; --green-200: #A4B9BA; --mist-350: #CBD9D9; --icon-bg: #E2EBEA; --hover-bg: #EFF3F2; --line-card: #E5EBEC; --line-soft: #DCE6E4; --ink-title: #35383A; --ink-body: #595D61; --ink-sec: #787878; --font-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-latin: "Lato", system-ui, sans-serif; --ease: cubic-bezier(0.2, 0, 0, 1); position: relative; z-index: 1; max-width: 1712px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 40px 56px 60px; font-family: var(--font-cjk); font-weight: 430; color: var(--ink-body); } #addon-page, #addon-page * { box-sizing: border-box; } #addon-page .hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } #addon-page .hero-title { margin: 0; font-size: 32px; font-weight: 500; line-height: normal; color: #222222; } #addon-page .hero-sub { font-size: 16px; line-height: normal; color: #666666; } #addon-page .panel { position: relative; isolation: isolate; background: transparent; border: 1px solid rgba(203,217,217,0.65); border-radius: 24px; padding: 14px; box-shadow: 0 1px 2px rgba(0,63,64,0.04), 10px 16px 40px rgba(161,181,182,0.18); } #addon-page .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* 個人／工作群組切換：與方案頁的月繳／年繳切換同款膠囊，置中放在卡片群上方 */ #addon-page #addon-list-wrapper { display: flex; flex-direction: column; gap: 16px; } #addon-page .addon-scope-toggle { position: static; align-self: center; display: inline-flex; gap: 4px; padding: 4px; margin: 0; background: rgba(255,255,255,0.55); border: 1px solid var(--mist-350); border-radius: 23px; box-shadow: 4px 4px 4px rgba(161,181,182,0.25); } #addon-page .addon-scope-toggle button { padding: 8px 26px; border: none; border-radius: 18px; background: transparent; font-family: var(--font-cjk); font-size: 14px; font-weight: 500; letter-spacing: 1px; color: #4E6B6C; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); } #addon-page .addon-scope-toggle button.active { background: var(--green-500); color: #FFFFFF; } #addon-page .plan-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: stretch; width: 100%; max-width: none; margin: 0; padding: 0; } #addon-page .plan-table > .col-item { width: auto; max-width: none; margin: 0; padding: 0; float: none; } #addon-page .plan-table > p { grid-column: 1 / -1; margin: 24px 0; text-align: center; color: var(--ink-sec); } #addon-page .plan-box { height: 100%; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px 26px 30px; background: #FFFFFF; border: 1px solid var(--mist-350); border-radius: 15px; box-shadow: 0 1px 2px rgba(0,63,64,0.05), 6px 10px 24px rgba(161,181,182,0.28); transition: box-shadow 200ms var(--ease); } #addon-page .plan-box:hover { box-shadow: 0 2px 4px rgba(0,63,64,0.06), 10px 16px 32px rgba(161,181,182,0.36); } #addon-page .plan-box .header { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; border: none; } #addon-page .plan-box .title { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 0 14px; border: none; border-bottom: 1px solid var(--line-card); font-size: 20px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; color: var(--ink-title); } #addon-page .plan-box .title .postfix, #addon-page .plan-box .title .pro-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; background: var(--green-400); color: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: 1px; } #addon-page .plan-box .buy, #addon-page .addon-form { margin: 0; padding: 0; } #addon-page .addon-form { display: flex; flex-direction: column; gap: 12px; } #addon-page .plan-box .price { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; color: var(--green-500); } #addon-page .plan-box .price-value { display: inline-flex; align-items: baseline; gap: 8px; } #addon-page .plan-box .amount { font-family: var(--font-latin); font-size: 34px; font-weight: 700; line-height: 1; color: var(--green-500); } #addon-page .plan-box .period { font-size: 14px; letter-spacing: 0.7px; color: var(--green-400); white-space: nowrap; } #addon-page .plan-box .price-note { margin-left: auto; font-size: 12px; letter-spacing: 0.6px; color: #4E6B6C; } #addon-page .plan-box .addon-monthly-rate { flex-basis: 100%; font-size: 12.5px; letter-spacing: 0.5px; line-height: 1.5; color: var(--ink-sec); } #addon-page .addon-active-badge { align-self: flex-start; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 5px; background: var(--icon-bg); color: var(--green-500); font-size: 12.5px; font-weight: 600; letter-spacing: 1px; } /* 數量列：label 靠左、數值靠右；輸入框取 Sara 原檔 .stepper 的膠囊外觀（仍是原生 number input，行為由 plan-widget.v1.js 負責） */ #addon-page .plan-box .buttons.addon-quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0; } #addon-page .addon-quantity-row label { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 1.68px; color: var(--ink-body); white-space: nowrap; } #addon-page .addon-quantity-row input[type=number] { width: 92px; height: 38px; margin: 0; padding: 0 10px; text-align: center; border: 1px solid var(--green-200); border-radius: 19px; background: rgba(255,255,255,0.6); outline: none; font-family: var(--font-latin); font-size: 16px; font-weight: 700; color: var(--green-500); transition: border-color 120ms var(--ease); } #addon-page .addon-quantity-row input[type=number]:focus { border-color: var(--green-500); } #addon-page .addon-subtotal { margin: -2px 0 0; text-align: right; font-size: 13px; letter-spacing: 0.5px; color: var(--green-400); } #addon-page .plan-box .buttons { display: block; margin: 0; padding: 0; } #addon-page .plan-box .buttons .button-md { display: block; width: 100%; height: auto; margin: 0; padding: 13px 36px; text-align: center; cursor: pointer; border-radius: 25px; background: #FFFFFF; border: 1px solid #8FABAC; color: #3E5F60; font-family: var(--font-cjk); font-size: 15px; font-weight: 500; letter-spacing: 1.2px; line-height: normal; box-shadow: none; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); } #addon-page .plan-box .buttons .button-md:hover { background: var(--green-400); border-color: var(--green-400); color: #FFFFFF; } #addon-page .plan-box .buttons .button-md:active { background: var(--green-500); border-color: var(--green-500); color: #FFFFFF; } #addon-page .plan-box .body { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-card); } #addon-page .plan-box .body:empty { display: none; } #addon-page .plan-box .spec { margin: 0; padding: 0; font-size: 14px; line-height: 1.7; letter-spacing: 0.6px; color: #444444; text-wrap: pretty; } #addon-page .plan-box .spec p { margin: 0 0 6px; } #addon-page .plan-box .spec p:last-child { margin-bottom: 0; } #addon-page .addon-back { align-self: center; font-size: 14px; letter-spacing: 1px; color: var(--green-500); text-decoration: underline; } #addon-page .addon-back:hover { color: var(--green-400); } @media (max-width: 820px) { #addon-page { padding: 32px 28px 48px; } #addon-page .panel { padding: 12px; border-radius: 20px; } } @media (max-width: 480px) { #addon-page { padding: 24px 16px 40px; } #addon-page .hero-title { font-size: 26px; } #addon-page .plan-table { grid-template-columns: minmax(0, 1fr); } } /* ---------- 以下為 Sara 原檔（選擇器已限定在 #plan-page） ---------- */ #plan-page { --green-500: #003F40; --green-400: #2F6A6B; --green-300: #809FA0; --green-200: #A4B9BA; --mist-350: #CBD9D9; --icon-bg: #E2EBEA; --hover-bg: #EFF3F2; --active-bg: #E2EBEA; /* 母品牌霧色階（DESIGN.md）：分組標題列用這兩階，不自己調中間值 */ --mist-200: #EAF0F0; --mist-300: #DBE1E1; --mist-400: #CAD8D9; --mist-550: #859494; --line-card: #E5EBEC; --line-soft: #DCE6E4; --grid-line: #D5E1DF; --ink-title: #35383A; --ink-body: #595D61; --ink-sec: #787878; --ink-disabled: #CACACA; --red: #B54A4A; --red-bg: #FBEDEB; --amber: #B99B4E; --amber-bg: #FAF6EA; --amber-line: #E8D191; --amber-badge: #F0DEAE; --font-cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-latin: "Lato", system-ui, sans-serif; --ease: cubic-bezier(0.2, 0, 0, 1); --header-h: 60px; --side-w: 82px; } #plan-page, #plan-page * { box-sizing: border-box; } /* 內文字重 430（2026-08-12，沿用 BIMTeki 教學頁 8/12 與金澧當面比出來的值）： 400 在低解析度螢幕上筆畫邊緣會被反鋸齒吃掉、看起來糊。430 比 400 只粗 6.4% （500 是 +23%，會變黑），補回筆畫但不改變閱讀調性。 前提是中文字體用範圍式載入 wght@300..700——列舉式下 430 會被默默四捨五入且不報錯。 Lato 維持列舉式 400;700（範圍式會回 HTTP 400 讓整條連結失效）， 所以拉丁數字沒有中間值可用，那些元素維持 400。 */ #plan-page { font-family: var(--font-cjk); font-weight: 430; color: var(--ink-body); } #plan-page a { color: var(--green-500); text-decoration: underline; } #plan-page a:hover { color: var(--green-400); } /* 表單元素不繼承 body 的字型設定，字重要明確接回來—— 否則側欄與 header 的按鈕文字會停在瀏覽器預設的 400，比頁面其他文字細一階 */ #plan-page button { font-family: var(--font-cjk); font-weight: inherit; } #plan-page :focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; } /* 按鈕類元件：禁止拖曳/反白＋固定為獨立合成圖層，避免 hover／點按時出現殘影框 */ #plan-page .confirm-btn, #plan-page .cycle button { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } #plan-page .confirm-btn { transform: translateZ(0); backface-visibility: hidden; } /* 底部留白定案 30px（2026-08-12 Sara 指定）：頁尾內容的最下緣到頁面最底部就是這 30px， 由 .wrap 的下內距單獨負責（.foot 的下內距一律歸零），三個斷點都是同一個數字。 原本是 .wrap 60px ＋ .foot 24px ＝ 84px，頁尾下方空一大塊。 */ #plan-page { position: relative; z-index: 1; max-width: 1712px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; padding: 40px 56px 30px; } /* 提示 pill */ #plan-page .pill { align-self: center; display: inline-flex; align-items: center; gap: 12px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 20px; padding: 10px 24px; margin-bottom: -8px; } #plan-page .pill[hidden] { display: none; } #plan-page .pill-text { font-size: 14px; letter-spacing: 1.68px; color: var(--ink-body); } /* 標題區（置中，依 Figma 5:6 草稿：28:93） */ #plan-page .hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } #plan-page .hero-title { margin: 0; font-size: 32px; font-weight: 500; line-height: normal; color: #222222; } #plan-page .hero-sub { font-size: 16px; line-height: normal; color: #666666; } /* 每月／每年切換（Figma 36:155） */ /* 每月／每年切換：毛玻璃質感（比照加購頁面方案切換 .seg） */ /* 同 .panel：模糊移到背景層，避免「月繳／年繳」文字被降級成灰階抗鋸齒 */ #plan-page .cycle { position: relative; isolation: isolate; margin-top: 5px; display: inline-flex; gap: 4px; padding: 4px; background: transparent; border: 1px solid var(--mist-350); border-radius: 23px; box-shadow: 4px 4px 4px rgba(161,181,182,0.25); } #plan-page .cycle::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #plan-page .cycle button { padding: 8px 26px; border: none; border-radius: 18px; background: transparent; font-size: 14px; font-weight: 500; letter-spacing: 1px; color: #4E6B6C; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); } #plan-page .cycle button.active { background: var(--green-500); color: #FFFFFF; } #plan-page .card { background: #FFFFFF; border: 1px solid var(--mist-350); border-radius: 15px; padding: 28px 30px; height: 100%; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(0,63,64,0.05), 6px 10px 24px rgba(161,181,182,0.28); transition: box-shadow 200ms var(--ease); } #plan-page .card:hover { box-shadow: 0 2px 4px rgba(0,63,64,0.06), 10px 16px 32px rgba(161,181,182,0.36); } #plan-page .card-sep { border-top: 1px solid var(--line-card); } /* tooltip */ #plan-page .ark-tip { position: relative; display: inline-flex; align-items: center; align-self: center; top: 1px; } #plan-page .ark-tip > svg { display: block; width: 15px; height: 15px; } /* font-weight 要明確寫 400：浮層掛在表頭 th 裡時會繼承 th 的 700 變成粗體， 跟卡片區同一種浮層長得不一樣 */ #plan-page .ark-tip .ark-tip-box { visibility: hidden; opacity: 0; transition: opacity 120ms var(--ease), transform 120ms var(--ease); position: absolute; left: 50%; bottom: calc(100% + 8px); white-space: nowrap; background: #FFFFFF; border: 1px solid var(--mist-350); border-radius: 5px; padding: 8px 12px; font-size: 13px; font-weight: 430; letter-spacing: 0.6px; color: #444444; box-shadow: 2px 2px 4px rgba(161,181,182,0.3); transform: translateX(-50%) translateY(2px); z-index: 20; pointer-events: none; } #plan-page .ark-tip:hover .ark-tip-box, #plan-page .ark-tip:focus-within .ark-tip-box { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); } /* 側向展開的變體：給表頭的「客製報價」用。這個位置上下都不能開—— 往上會撞到表格容器上緣被裁掉一截，往下正好蓋住「查看介紹」按鈕； 往左展開落在表頭的空白區，且不會超出表格右緣（企業版是最右欄）。 */ /* 表頭「客製報價」的說明浮層：對齊圖示置中、往下展開。 不能往上——圖示上方只剩「企業版」那一行，再上去就是表格容器邊界，浮層會被切掉一截； 往下是表格內容區，空間充足，浮層蓋在資料列上是正常的浮層行為。 class 名不能叫 .side——會被左側功能欄的 .side 規則吃到深綠底，整顆變成深綠方塊。 */ /* 一律貼著圖示右緣往左展開，不置中。 這顆浮層在最右欄，置中展開時右半會超出表格——即使它是隱藏狀態， 仍佔佈局空間並計入捲動寬度，於是 overflow-x:auto 的容器就長出一條沒必要的橫向捲軸。 */ #plan-page .ark-tip.tipdown .ark-tip-box { top: calc(100% + 8px); bottom: auto; left: auto; right: -6px; width: min(300px, calc(100vw - 72px)); transform: translateY(-2px); } #plan-page .ark-tip.tipdown:hover .ark-tip-box, #plan-page .ark-tip.tipdown:focus-within .ark-tip-box { transform: translateY(0); } /* 窄螢幕再收窄一點，避免在分頁模式的兩欄版面裡頂出畫面左緣 */ @media (max-width: 1200px) { #plan-page .ark-tip.tipdown .ark-tip-box { width: min(236px, calc(100vw - 72px)); } } #plan-page .confirm-btn { cursor: pointer; border-radius: 25px; padding: 13px 36px; font-size: 15px; font-weight: 500; letter-spacing: 1.2px; background: #FFFFFF; border: 1px solid var(--green-500); color: var(--green-500); transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); } #plan-page .confirm-btn:hover { background: var(--green-500); color: #FFFFFF; box-shadow: 4px 4px 10px rgba(161,181,182,0.35); } #plan-page .confirm-btn:active { background: #003233; border-color: #003233; color: #FFFFFF; } #plan-page .confirm-btn.idle { border-color: #8FABAC; color: #3E5F60; } /* hover 填實心（2026-08-12 Sara 指示）：原本只換成淺灰綠底，回饋太弱、看起來像半透明。 用 Green 400 而非主按鈕的 Green 500，實心但仍比主要動作弱一階，維持主次。 */ #plan-page .confirm-btn.idle:hover { background: var(--green-400); border-color: var(--green-400); color: #FFFFFF; box-shadow: none; } #plan-page .confirm-btn.idle:active { background: var(--green-500); border-color: var(--green-500); color: #FFFFFF; } @media (max-width: 820px) { #plan-page { padding: 32px 28px 30px; } #plan-page .panel { padding: 12px; border-radius: 20px; } } @media (max-width: 768px) { #plan-page { --header-h: 60px; } } /* 360px 級距的小手機（2026-08-11 量測）：header 一列放不下漢堡＋搜尋＋標誌＋三顆圖示＋頭像， 頭像會被推出畫面右緣 16px、整頁跟著出現橫向捲動。收斂間距與頭像尺寸即可容下 */ @media (max-width: 400px) { /* tooltip 固定 236px 在窄機會頂出卡片外，改成跟著視窗收 */ #plan-page .ark-tip-box.wide { width: min(236px, calc(100vw - 72px)); } } /* 320px 級距（iPhone SE 一代）：AI 題數列單行放不下，比照四欄擠壓時的處理改成兩行 */ @media (max-width: 340px) { #plan-page .feat-ai { flex-wrap: wrap; } #plan-page .feat-ai .plan-qty { flex-basis: 100%; margin-left: 0; padding-left: 23px; text-align: right; } } @media (max-width: 480px) { #plan-page { padding: 24px 16px 30px; gap: 24px; } #plan-page .confirm-btn { width: 100%; } #plan-page .pill { text-align: left; } #plan-page .pill-text { letter-spacing: 1px; } } /* ========== 會員方案頁面（本頁新增） ========== */ /* 淡綠細線外框容器（Figma 63:41／63:42；霧面玻璃質感） */ /* 霧面玻璃改由背景層負責（2026-08-11）： backdrop-filter 會把整個子樹推進合成層，合成層上的文字會從次像素抗鋸齒 降級成灰階抗鋸齒——中文筆畫密，整片內容看起來就是糊的。 把模糊效果移到 ::before 背景層，文字留在一般繪製層，質感不變但字會回到清晰。 */ #plan-page .panel { position: relative; isolation: isolate; background: transparent; border: 1px solid rgba(203,217,217,0.65); border-radius: 24px; padding: 14px; box-shadow: 0 1px 2px rgba(0,63,64,0.04), 10px 16px 40px rgba(161,181,182,0.18); } #plan-page .panel::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* 方案卡片格線：桌機四欄、中等 2×2、手機單欄 */ /* width 與左邊距都由 JS 的 snapPlanGrid() 取整後回填—— 這裡不能用 margin-inline:auto，取整後剩下奇數像素時 auto 會平分成 0.5px， 整個格線又偏移半像素，文字一樣糊 */ #plan-page .plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; } /* 四欄→二欄的門檻從 1120 拉到 1320（2026-08-11）： 1280 筆電寬下四欄的每欄內容只剩約 200px，「AI 法規探索問答＋每月約 150 題」放不下會撐出卡片外緣 */ @media (max-width: 1320px) { #plan-page .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #plan-page .plan-grid { grid-template-columns: minmax(0, 1fr); } } #plan-page .plan-card { position: relative; gap: 13px; padding: 30px 24px 44px; } #plan-page .plan-top { display: flex; flex-direction: column; gap: 12px; } /* 方案屬性標籤改純文字眉標（2026-07-24 四稿）：拿掉底色與細框，消除卡框內再一層框的感覺 */ #plan-page .plan-tag { align-self: flex-start; display: inline-flex; align-items: center; color: var(--green-400); font-size: 12.5px; font-weight: 500; letter-spacing: 1px; white-space: nowrap; } #plan-page .plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--ink-title); line-height: 1.2; } #plan-page .plan-for { min-height: 48px; font-size: 14px; line-height: 1.6; letter-spacing: 1px; color: #444444; text-wrap: pretty; } /* 企業版說明在句號後斷行，讓「產品是什麼」與「適合誰」分開兩段。 欄寬變窄時取消——那時前半句本身就要三行，再強制斷行會多撐出一整行， 而四張卡的說明區是等高的，等於每張卡都白留一行的空白。 */ @media (max-width: 1560px) { #plan-page .for-break { display: none; } } /* min-height 從 40px 收到 34px（＝價格數字的行框高，2026-08-12）： 原本容器比數字高 6px，數字下方先空一段容器餘量、再加下一行的 margin， 價格與購買單位那行看起來就斷開了。企業版的「客製報價」只有 30.8px， 餘量小、間距自然比較緊——四張卡並排時這個差異一眼看得出來。 */ #plan-page .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-height: 34px; color: var(--green-500); } #plan-page .plan-price-num { font-family: var(--font-latin); font-size: 34px; font-weight: 700; line-height: 1; display: inline-flex; align-items: baseline; } #plan-page .plan-price-cur { font-family: var(--font-cjk); font-size: 26px; font-weight: 700; letter-spacing: 0; margin-right: 2px; position: relative; top: -3px; } /* 「/ 月」原為 green-300 對比 2.84，價格是全頁最該讀得清楚的資訊，計價單位跟著加深 */ #plan-page .plan-price-suffix { font-size: 14px; color: var(--green-400); letter-spacing: 0.7px; white-space: nowrap; } #plan-page .plan-price-orig { font-family: var(--font-latin); font-size: 16px; font-weight: 400; color: var(--ink-sec); text-decoration: line-through; } #plan-page .plan-price-orig[hidden] { display: none; } /* 企業版沒有數字價格，「客製報價」就是它的價格，量體要對得上其他三卡的 34px 數字。 中文字面比拉丁數字滿，同樣視覺重量用 28px 即可，字距一併收緊讓四個字成為一團 */ #plan-page .plan-price-text { font-size: 28px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; color: var(--green-500); } /* 企業版價格區只有「客製報價」一個元素。其他卡是 $ 與數字用基線對齊， 這裡沿用基線會把文字頂在 40px 容器的上緣、下方空出一截，看起來偏上又跟下一行太開。 改成垂直置中，文字回到容器中間、與下一行的距離也跟著收斂。 */ #plan-page .plan-card.hot .plan-price { align-items: center; } /* 方案名下的一行說明（2026-08-11）：一律獨立成第二行。 原本跟在方案名右邊，字數長的卡（團體版）會把標題擠成兩行、字數短的不會， 四張卡的功能列因此整排錯開 24px；固定成兩行結構後各卡同高、AI 題數列才對得齊 */ /* 價格下方的購買單位說明（2026-08-11 從方案名旁搬過來）： 這一行只回答「這個價格買到什麼」。免費版與個人版答不上就留空—— 原本的「免費使用」「供個人使用」是把方案名再講一次，讀者會學會跳過這個位置， 連團體版的席次、企業版的導入方式也一起被略過。 空的仍保留元素並給 min-height，否則那兩張卡會少一段高度、CTA 按鈕跟其他卡對不齊。 */ #plan-page .plan-seats { display: block; margin-top: 2px; min-height: 20px; font-size: 13px; font-weight: 430; letter-spacing: 0.5px; line-height: 1.5; color: #444444; } /* 單欄時四張卡上下排列、彼此不需要對齊，上面兩個為了桌機對齊而留的最小高度 在手機上就只是空白：說明只有一兩行卻撐 48px、免費版與個人版沒有購買單位卻空 20px。 這段必須放在兩者的定義之後——同特異性時後定義的勝，寫在前面會被原定義蓋掉。 */ @media (max-width: 640px) { #plan-page .plan-for { min-height: 0; } #plan-page .plan-seats:empty { display: none; } } #plan-page .plan-cta { display: block; width: 100%; text-align: center; text-decoration: none; } #plan-page .plan-cta.current, #plan-page .plan-cta.current:hover, #plan-page .plan-cta.current:active { background: var(--icon-bg); border-color: var(--green-200); color: var(--green-500); font-weight: 600; cursor: default; box-shadow: none; } /* 企業版雙按鈕列（2026-07-24 二版）：「查看介紹」為主（實心、較寬——先看介紹壓力小）、「預約諮詢」為次（白底細框）在右備用 */ #plan-page .plan-cta-row { display: flex; gap: 12px; } #plan-page .plan-cta-row .plan-cta { flex: 1.6; padding-left: 16px; padding-right: 16px; white-space: nowrap; } #plan-page .plan-cta-row .plan-cta.sub { flex: 1; } #plan-page .plan-cta-row .plan-cta svg { width: 15px; height: 15px; margin-left: 5px; vertical-align: -2.5px; } #plan-page .plan-card.hot .plan-cta.sub { background: #FFFFFF; border-color: var(--green-200); color: var(--green-500); } #plan-page .plan-card.hot .plan-cta.sub:hover { background: var(--hover-bg); border-color: var(--green-400); color: var(--green-500); box-shadow: none; } #plan-page .plan-card.hot .plan-cta.sub:active { background: var(--active-bg); border-color: var(--green-400); color: var(--green-500); } /* 企業版功能列前導句（2026-08-11 依宜臻版）：說明這 10 項是「團體版之外再加的」，不是全部功能 */ #plan-page .feats-lead { margin-top: 4px; font-size: 13px; letter-spacing: 0.6px; color: #666666; } #plan-page .feats-lead + .plan-feats { margin-top: 0; } #plan-page .plan-feats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } /* 功能列（2026-08-11）：label 靠左、數值靠右——四張卡的數值形成一條垂直掃視線 */ #plan-page .plan-feat { display: flex; align-items: flex-start; gap: 9px; min-height: 21px; font-size: 14px; line-height: 1.5; letter-spacing: 0.6px; color: #444444; } #plan-page .feat-name { flex: 0 1 auto; } /* 右緣留 4px：數值靠右到與卡片內容邊界切齊時，視覺上會像要溢出去 （數字與 ∞ 這類字形右側沒有自然留白，不像中文有字面框的餘裕）。 退一點點就不會頂邊，數值之間的垂直掃視線也還在。 */ #plan-page .plan-qty { margin-left: auto; padding-left: 8px; margin-right: 4px; color: var(--green-500); font-weight: 700; white-space: nowrap; } /* 「無限」以 ∞ 呈現（2026-08-11 依宜臻版）：14px 下數學符號的視覺重量遠低於數字， 故放大到 19px 並壓低行高回貼基線，讓它在數值欄裡與「20」「50」等量齊觀 */ #plan-page .plan-qty.inf { font-family: var(--font-latin); font-size: 19px; line-height: 1.1; position: relative; top: -1px; } /* 勾號改用品牌深綠（2026-08-12）：原本的 green-400 是 2.6 粗的細線、14px， 線條細的圖示在白底上比同色的文字更容易顯得淡，加深一階才讀得出來 */ #plan-page .feat-ic { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--green-500); display: inline-flex; align-items: center; justify-content: center; } /* 勾號線寬統一 1.5px（2026-08-12）。三處勾號的 stroke-width 屬性都寫 2.6， 但那是 viewBox（24×24）內的值，實際線寬＝2.6 × 顯示尺寸 ÷ 24， 顯示尺寸 13／14／15px 就渲染出 1.41／1.52／1.63px 三種粗細。 這裡用 CSS 覆寫各自的 stroke-width，讓三處都落在 1.5px。 */ #plan-page .feat-ic svg { width: 14px; height: 14px; display: block; stroke-width: 2.57; } #plan-page .plan-feat .ark-tip { top: 1px; margin-left: -4px; } /* AI 題數列：label 與數值都不斷字，四張卡此列必定同高、彼此對齊 */ #plan-page .feat-ai .feat-name { white-space: nowrap; } #plan-page .feat-ai .plan-qty { font-weight: 500; font-size: 13.5px; } /* 四欄佈局在 1560px 以下，欄寬不足以讓「AI 法規探索問答」與題數並排一行。 交給自動換行會出事——各卡題數字數不同（3／30／150 題），換行的臨界寬度就不同， 結果是有的卡換了有的沒換，整排功能列錯開。改用斷點統一切成兩行，四張卡必定同時換。 */ @media (min-width: 1321px) and (max-width: 1560px) { #plan-page .feat-ai { flex-wrap: wrap; } #plan-page .feat-ai .plan-qty { flex-basis: 100%; margin-left: 0; padding-left: 23px; text-align: right; } } /* 驚嘆號 tooltip 觸發鈕（圓形＋!） */ /* 說明圖示（2026-08-11 統一為 ⓘ）：與 arkiteki.com 現行站台一致。 原本是「圓框＋文字 !」，改用線條 SVG——圓圈與 i 由同一組 stroke 畫出， 線粗與功能列的勾號同一套，不會因為字體 fallback 而變形 */ #plan-page .ark-q { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--green-300); cursor: default; transition: color 120ms var(--ease); } #plan-page .ark-q svg { width: 15px; height: 15px; display: block; } #plan-page .ark-tip:hover .ark-q, #plan-page .ark-tip:focus-within .ark-q { color: var(--green-400); } /* 目前方案按鈕的細線勾 */ #plan-page .btn-check { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; stroke-width: 2.77; } /* 寬度貼合內容、只設上限（2026-08-12）：原本固定 236px，短句會剛好卡在換行邊界， 像「針對個別法條劃記重點並留下筆記。」只多出一個字就掉到第二行。 改 max-content 之後短句自然一行，長句才會折行。 */ #plan-page .ark-tip-box.wide { white-space: normal; width: max-content; max-width: min(300px, calc(100vw - 72px)); text-align: left; line-height: 1.65; } /* 企業版凸顯提案 E（2026-07-24 四稿）：綠框保留、帽子改方案名旁小徽章——凸顯量體最小，四卡結構相同 */ #plan-page .plan-card.hot { border: 2px solid var(--green-500); background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,63,64,0.08), 12px 18px 36px rgba(161,181,182,0.32); } #plan-page .hot-badge { display: inline-flex; align-items: center; background: var(--green-500); color: #FFFFFF; padding: 4px 12px; border-radius: 11px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; white-space: nowrap; position: relative; top: -1px; } #plan-page .plan-card.hot:hover { box-shadow: 0 3px 8px rgba(0,63,64,0.10), 14px 20px 40px rgba(161,181,182,0.38); } #plan-page .plan-card.hot .plan-cta { background: var(--green-500); border-color: var(--green-500); color: #FFFFFF; } #plan-page .plan-card.hot .plan-cta:hover { background: #003233; border-color: #003233; color: #FFFFFF; box-shadow: 4px 4px 12px rgba(0,63,64,0.22); } #plan-page .plan-card.hot .plan-cta:active { background: #002829; border-color: #002829; } /* 完整功能比較表 */ /* 表格上方獨立區塊標題（2026-08-12）：原本只有表格左上角的角落格兼做標題， 那一格其實是「功能」欄的欄標，兩個角色混在一起。 標題拉出來當區塊標題，角落格回去只當欄標寫「功能」。 */ #plan-page .cmp { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; } #plan-page .cmp-title { margin: 0 0 2px; text-align: center; font-size: 24px; font-weight: 500; letter-spacing: 1.2px; line-height: normal; color: #222222; } #plan-page .cmp-scroll { overflow-x: auto; border: 1px solid var(--mist-350); border-radius: 15px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,63,64,0.05), 6px 10px 24px rgba(161,181,182,0.28); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--green-200) transparent; } /* 表格橫向捲軸改用頁面自己的樣式（2026-08-12）：系統預設是一條粗灰條， 壓在表格圓角下緣、比表格本身的線條都重。改成細軌道＋霧綠拉桿， 滑鼠移上去才加深，平常只是一條淡淡的提示。 */ #plan-page .cmp-scroll::-webkit-scrollbar { height: 8px; } #plan-page .cmp-scroll::-webkit-scrollbar-track { background: transparent; margin: 0 15px; } #plan-page .cmp-scroll::-webkit-scrollbar-thumb { background: var(--green-200); border-radius: 4px; } #plan-page .cmp-scroll::-webkit-scrollbar-thumb:hover { background: var(--green-300); } /* border-collapse 用 separate 而非 collapse（2026-08-12）： Safari 不支援 collapse 模式下的 sticky 儲存格，左欄在 iPad 上會釘不住。 本表的邊框本來就是「每格只畫下緣＋左緣」的單邊寫法，改 separate 不會出現雙線； border-spacing 要歸零，否則儲存格之間會多出間隙。 */ #plan-page .cmp-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14px; } #plan-page .cmp-table th, #plan-page .cmp-table td { padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--line-card); vertical-align: middle; } /* 直向格線：方案欄之間的分隔（2026-07-21 Sara 提議，仿 Railway/Notion） */ #plan-page .cmp-table th:not(:first-child), #plan-page .cmp-table td:not(:first-child) { border-left: 1px solid var(--line-card); } #plan-page .cmp-table tbody tr:last-child td { border-bottom: none; } #plan-page .cmp-table thead th { background: transparent; color: var(--ink-title); font-weight: 700; font-size: 15px; letter-spacing: 1px; } /* 角落標題與方案名同一條起跑線（2026-08-12）：原本垂直置中， 比右邊四個方案名低了 20px，同一列裡兩種基準看起來像沒對齊 */ #plan-page .cmp-corner { text-align: left !important; font-size: 17px !important; letter-spacing: 1.6px !important; color: var(--green-500) !important; vertical-align: top !important; border-bottom: 1px solid var(--line-card) !important; padding-top: 26px !important; padding-bottom: 26px !important; padding-left: 34px !important; } /* 表頭（單列）。改為靠上對齊（2026-08-11）：企業版那欄多一顆按鈕、整組比其他欄高， 垂直置中會把它的方案名往上推、四個方案名不在同一條線上。 四欄的 padding-top 相同、一律靠上，方案名與價格就各自成一橫排， 企業版多出來的按鈕高度往下長，不影響上面兩排。 方案名字級比照卡片放大到 18px——表頭與卡片是同一組方案名，兩處量體差太多會像兩件事。 */ #plan-page .cmp-table thead th { padding-top: 26px; padding-bottom: 26px; vertical-align: top; font-size: 18px; } /* 表頭定案（2026-07-24）：方案名與價格合併同一群組，月/年切換價格變寬時整組自動重新置中。 群組內改為置中（2026-08-12 Sara 指定）：原本方案名靠左對齊「$」起點， 但四欄的價格寬度不同（$0／$380／$1,780／客製報價），方案名就各自偏離欄中線不同距離， 橫向掃過去四個方案名不在同一條基準上。改置中後方案名一律落在欄中線， 也與表格其他儲存格（全部 text-align: center）同一套基準。 */ #plan-page .cmp-head-group { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; } /* 企業版欄的 gap 必須與其他欄相同：這一欄曾設 9px、其他欄 6px， 方案名到價格的距離差 3px，四欄的價格就不在同一條基線上了。 */ /* 報價、說明圖示、按鈕排成同一行（2026-08-11 Sara 指定）—— 按鈕原本獨立一行，與上方「企業版」的綠底標籤上下疊成兩塊膠囊，像貼了兩張貼布。 方案名改回純文字（與其他三欄同款，只用深綠色區分），量體只留按鈕一處。 */ /* 基線對齊：「客製報價」、說明圖示、按鈕三者的文字要落在同一條線上。 頂端對齊會讓三者因高度不同而各在各的位置，置中對齊則會被最高的按鈕拉低整行。 */ /* 只剩報價與說明圖示，置中對齊即可——按鈕移到獨立一行之後， 這裡不再需要為了遷就按鈕高度而做的那些位移補償。 */ /* 小 i 不參與置中的計算（2026-08-12 Sara）：這一行是「客製報價＋說明圖示」， 整行置中時右側多出的圖示會把文字往左推，看起來就跟上面的「企業版」、 下面的「查看介紹」不在同一條中軸上。 左側補一塊與（圖示 15px ＋ 間距 6px）等寬的空白，讓這一行左右對稱、 文字自己回到欄中線；圖示仍貼在文字右邊，只是不再左右它的位置。 */ #plan-page .cmp-quote-row { display: inline-flex; align-items: center; gap: 6px; padding-left: calc(15px + 6px); } /* 「查看介紹」獨立成第三行的文字連結（2026-08-12）： 原本與價格擠在同一行，其他三欄的第二行是純資訊、只有這欄變成「資訊＋動作」， 橫向掃過去第四欄的節奏就不一樣；而且那顆按鈕會比價格先被看到， 但決策順序應該是先知道計價方式、再決定要不要點。 改成第三行的輕量連結：前兩行與其他欄完全一致，這一行明確是「多出來的東西」， 量體也不會跟卡片區那顆實心 CTA 搶主次。 */ /* 形狀與卡片區的「查看介紹」一致（膠囊白底綠框），量體用尺寸區分主次而非改形狀—— 2026-07-24 定案：同動作同形狀。圓角填高度的一半（30÷2＝15），不用魔術數字。 */ /* 這顆按鈕分兩件事處理（2026-08-12 Sara 逐輪指定，結論寫在這裡，別再各自重猜）： 一、框放哪裡：`margin-left` 讓出與上一行相同的 21px（ⓘ 15px ＋ 間距 6px）。 上一行「客製報價 ⓘ」為了讓文字置中往右讓了 21px，按鈕跟著讓一樣多， 兩行的左起點才在同一條線上，整顆也收在那一行的左右邊界之內。 二、框裡面怎麼排：文字與箭頭當一組、在對稱的左右內距（各 14px）中間置中， 文字自然落在框中線左邊 8px——Sara 要的就是這個位置，不要再把文字硬推回框正中央。 走過的死路：左內距補 16px（把按鈕撐歪）、箭頭改絕對定位讓文字置中（文字太靠右）、 margin-right 往左拉（左緣凸出上一行邊界）。三種都被退過。 */ #plan-page .cmp-head-link { display: inline-flex; align-items: center; gap: 4px; margin-left: calc(15px + 6px); padding: 5px 14px; border: 1px solid var(--green-500); border-radius: 15px; background: #FFFFFF; font-size: 12.5px; font-weight: 500; letter-spacing: 0.8px; color: var(--green-500); text-decoration: none; white-space: nowrap; transition: background 160ms var(--ease), color 160ms var(--ease); } #plan-page .cmp-head-link:hover { background: var(--green-500); color: #FFFFFF; } #plan-page .cmp-head-link svg { width: 12px; height: 12px; } #plan-page .cmp-price { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-latin); font-size: 20px; font-weight: 700; color: var(--green-500); } #plan-page .cmp-price-cur { font-family: var(--font-cjk); font-size: 15px; font-weight: 700; position: relative; top: -2px; } #plan-page .cmp-price-suf { font-family: var(--font-cjk); font-size: 12px; font-weight: 430; color: var(--green-400); letter-spacing: 0.5px; margin-left: 2px; } /* 「客製報價」是企業版的價格，量體要跟其他欄的數字對得上（數字 20px 拉丁，中文 18px 視覺相當） */ #plan-page .cmp-price-quote { font-family: var(--font-cjk); font-size: 18px; font-weight: 700; position: relative; top: -1px; } #plan-page .cmp-feat-col { text-align: left !important; color: #444444; white-space: nowrap; } /* 功能欄在橫向捲動時固定在左側（2026-08-12）：表格比容器寬時（約 1000px 以下）， 往右看企業版那欄會把功能名稱一起捲走，看到一排勾號卻不知道在講哪個功能。 釘住第一欄後，捲到哪一欄都還讀得出列名。背景必須不透明，否則其他欄會透過來。 */ #plan-page .cmp-table .cmp-corner, #plan-page .cmp-table td.cmp-feat-col { position: sticky; left: 0; z-index: 2; background: #FFFFFF; } /* 分組標題列是跨欄的單一儲存格，底色要蓋過釘住的第一欄； 裡面的文字也要釘住，否則捲到右邊時整條只剩底色、看不出這一組是什麼 */ #plan-page .cmp-table .cmp-group td { position: relative; z-index: 3; } #plan-page .cmp-group-name { position: sticky; left: 34px; } /* 第一欄縮窄，空間分配給四個方案欄（2026-07-21 Sara） */ #plan-page .cmp-corner, #plan-page .cmp-table .cmp-feat-col { width: 26%; } /* 大項目群組列：極淡底條版（2026-07-21 試第二種樣式） */ /* 分組標題列底色加深一階（2026-08-12）：原本 #F5F8F7 幾乎與白底同階， 22 列功能之間看不出分組邊界，整張表讀起來是一長串。 加深後仍在背景色範圍內，不會蓋過文字（深綠字對此底色對比 11:1）。 */ #plan-page .cmp-table .cmp-group td { text-align: left; background: var(--mist-200); color: var(--green-500); font-weight: 700; font-size: 14.5px; letter-spacing: 1.2px; padding: 13px 18px 13px 34px; } #plan-page .cmp-group-name { display: inline-flex; align-items: center; } /* 專案管理組（2026-08-11）：這 10 列在免費／個人／團體三欄全是「—」。 分組標題列單獨深一階，訊息從「這方案缺功能」翻成「這是另一條產品線」； 只給標題列上色，10 列本身不上底色（整組上色太重）。入口就近放在疑問發生的同一行。 */ /* 專案管理組改用與其他分組相同的底色（2026-08-12）：原本深一階， 並排看時色差太跳。區隔改由上方一條較粗的分隔線負責—— 分組本身的標題已經寫著產品線名稱，底色不必再說一次。 */ #plan-page .cmp-table .cmp-group.pm td { border-top: 2px solid var(--mist-400); } /* 表格內的「無限」：與卡片同樣放大回補視覺重量，但維持中性色—— ∞ 在表裡出現 12 次以上，全部上綠會整片花掉，這裡靠留白節奏不靠顏色 */ #plan-page .cmp-inf { font-family: var(--font-latin); font-size: 19px; line-height: 1; display: inline-block; vertical-align: -3px; } /* 數值調性對齊方案卡：深綠粗體；功能名稱與「—」維持原色 */ #plan-page .cmp-table tbody td { color: var(--green-500); font-weight: 600; } #plan-page .cmp-table td.cmp-feat-col { color: #444444; font-weight: 430; padding-left: calc(34px + 1em); } /* 企業版欄：整欄圓角框凸顯（覆蓋層，JS 量測定位；2026-07-21 Sara 拍板） */ #plan-page .cmp-inner { position: relative; } /* z-index 要高於分組標題列（3）與釘住的功能欄（2），否則外框會被那兩層蓋掉、 在每個分組列的位置斷成一截一截。這層只有邊線且不吃滑鼠事件，蓋在最上面不影響閱讀。 */ #plan-page .cmp-hl-frame { display: none; position: absolute; z-index: 4; border: 2px solid var(--green-500); border-radius: 15px; pointer-events: none; } #plan-page .cmp-table thead th.cmp-hl { background: transparent; color: var(--green-500); } /* 提案 E：表格企業版方案名維持綠底藥丸，與名旁徽章呼應 */ #plan-page .cmp-table td.cmp-hl { font-weight: 600; color: var(--green-500); } #plan-page .cmp-ok { color: var(--green-400); display: inline-flex; vertical-align: middle; } #plan-page .cmp-ok svg { width: 15px; height: 15px; stroke-width: 2.4; } /* 「—」原本用 #CACACA，對白底對比只有 1.64、整張表出現 37 次， 是這頁讀起來最糊的單一來源。改用帶綠調的中灰拉到約 3.0， 仍明顯弱於有值的儲存格（不會搶掉「有這個功能」的視覺重點），但看得清楚。 */ #plan-page .cmp-no { color: var(--mist-550); } #plan-page .cmp-note { margin: 0; font-size: 12.5px; letter-spacing: 0.8px; line-height: 1.6; color: var(--ink-sec); } /* 功能比較分頁切換（2026-07-24 Sara 附圖）：表格縮成「功能欄＋單一方案欄」，上方頁籤切換；樣式比照月/年切換膠囊。 門檻 2026-08-12 從 768px 提高到 1000px。表格最小寬度 760px，容器寬＝視窗 −222 （側欄 82 ＋ 內距 140），要放得下四欄需要視窗至少 982px；門檻設在 1000 就沒有 「四欄還在、但要左右拖著看」的空窗期。代價是 1000px 以下看不到四欄並排， 但那個寬度本來也擠。 */ #plan-page .cmp-tabs { display: none; gap: 4px; padding: 4px; margin-bottom: 12px; background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--mist-350); border-radius: 23px; } #plan-page .cmp-tabs button { flex: 1; padding: 9px 0; border: none; border-radius: 19px; background: transparent; font-family: var(--font-cjk); font-size: 14px; font-weight: 500; letter-spacing: 1px; color: #4E6B6C; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease); } #plan-page .cmp-tabs button.active { background: var(--green-500); color: #FFFFFF; } @media (max-width: 1000px) { #plan-page .cmp-tabs { display: flex; } #plan-page .cmp-table { min-width: 0; } #plan-page .cmp-hl-frame { display: none !important; } #plan-page .cmp-corner, #plan-page .cmp-table .cmp-feat-col { width: auto; } #plan-page .cmp-feat-col { white-space: normal; } #plan-page .cmp-corner { padding-left: 18px !important; font-size: 15px !important; } #plan-page .cmp-table .cmp-group td { padding-left: 18px; } #plan-page .cmp-table td.cmp-feat-col { padding-left: calc(18px + 1em); } /* 先隱藏全部方案欄，再依 data-plan 顯示選中欄（1=免費 2=個人 3=團體 4=企業） */ #plan-page .cmp-table thead th:not(.cmp-corner), #plan-page .cmp-table tbody tr:not(.cmp-group) td:not(.cmp-feat-col) { display: none; } #plan-page .cmp[data-plan="1"] thead th:nth-child(2), #plan-page .cmp[data-plan="1"] tbody tr:not(.cmp-group) td:nth-child(2), #plan-page .cmp[data-plan="2"] thead th:nth-child(3), #plan-page .cmp[data-plan="2"] tbody tr:not(.cmp-group) td:nth-child(3), #plan-page .cmp[data-plan="3"] thead th:nth-child(4), #plan-page .cmp[data-plan="3"] tbody tr:not(.cmp-group) td:nth-child(4), #plan-page .cmp[data-plan="4"] thead th:nth-child(5), #plan-page .cmp[data-plan="4"] tbody tr:not(.cmp-group) td:nth-child(5) { display: table-cell; background: #F5F8F7; } } @media (max-width: 480px) { #plan-page .plan-name { font-size: 20px; } #plan-page .hero-title { font-size: 26px; } #plan-page .cmp-title { font-size: 21px; } }