/** * form-card.css * BT-FORM-UX-CARD-001 — form.html 卡片式減壓 UI * * 設計原則： * 1. 不重組 form.html DOM（避免破壞既有 JS / 動態保人邏輯） * 2. 只用 CSS 強化既有 .l1-card / .l1-title 視覺，加 step 提示與安全提示 * 3. 手機優先（單欄 / 大間距 / 按鈕高度 ≥48px） * 4. 不影響任何 input / form 送出邏輯 * * 用法：form.html 加 */ /* ─── 進度條 banner ─────────────────────────────── */ .bt-form-progress { margin: 12px auto 16px; max-width: 920px; padding: 12px 18px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: #475569; box-shadow: 0 1px 2px rgba(15,23,42,0.04); flex-wrap: wrap; } .bt-form-progress .bt-step { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #F1F5F9; color: #64748B; font-weight: 600; } .bt-form-progress .bt-step .bt-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #CBD5E1; color: #fff; font-size: 12px; font-weight: 800; } .bt-form-progress .bt-step.bt-step-active { background: #ECFDF5; color: #047857; } .bt-form-progress .bt-step.bt-step-active .bt-step-num { background: #10B981; } .bt-form-progress .bt-step-arrow { color: #CBD5E1; font-size: 12px; } /* ─── 卡片強化（既有 .l1-card 已有圓角，補陰影/邊框/間距） ─── */ .l1-card { background: #fff; border: 1px solid #E2E8F0 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05); margin-bottom: 18px !important; transition: box-shadow 0.15s; } .l1-card:hover { box-shadow: 0 2px 8px rgba(15,23,42,0.08); } /* 卡片標題加強（既有 .l1-title）*/ .l1-title { letter-spacing: 0.01em; } /* Step 標籤（DOM 內加，CSS 樣式）*/ .bt-step-label { display: inline-block; padding: 2px 10px; margin-right: 8px; background: #ECFDF5; color: #047857; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; } .bt-card-hint { margin: 4px 0 12px; font-size: 12.5px; color: #64748B; line-height: 1.55; } /* ─── 安全提示 ─────────────────────────────────── */ .bt-form-disclaimer { max-width: 920px; margin: 24px auto 32px; padding: 0 24px; text-align: center; font-size: 12px; color: #94A3B8; line-height: 1.55; } /* ─── 手機優化 ─────────────────────────────────── */ @media (max-width: 600px) { .bt-form-progress { margin: 8px 12px 14px; padding: 10px 12px; font-size: 12.5px; } .bt-form-progress .bt-step { padding: 5px 8px; font-size: 12px; } .bt-form-progress .bt-step .bt-step-num { width: 18px; height: 18px; font-size: 11px; } .l1-card { margin-bottom: 14px !important; } .bt-step-label { font-size: 11px; padding: 2px 8px; } .bt-card-hint { font-size: 12px; } .bt-form-disclaimer { padding: 0 20px; margin: 18px 12px 24px; } /* 表單欄位高度 ≥ 44px / 按鈕 ≥ 48px */ .field input, .field select, .field textarea { min-height: 44px; } .save-btn, .btn-report { min-height: 48px; } } /* BT-REFERRER-LINK-001 — 介紹人協助模式 banner（黃底） */ .bt-mode-banner { margin: 4px 0 12px; padding: 14px 16px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; color: #78350F; line-height: 1.6; } .bt-mode-banner-title { font-weight: 800; font-size: 14px; color: #92400E; margin: 0 0 6px; letter-spacing: 0.02em; } .bt-mode-banner p { margin: 4px 0; font-size: 13.5px; } .bt-mode-banner-tip { margin-top: 6px !important; padding: 8px 10px; background: rgba(251, 191, 36, 0.12); border-radius: 8px; font-size: 13px; color: #92400E; } @media (max-width: 600px) { .bt-mode-banner { padding: 12px 14px; } .bt-mode-banner-title { font-size: 13.5px; } .bt-mode-banner p { font-size: 13px; } } /* BT-REFERRER-LINK-002A — 客戶模式：介紹人預填確認 banner（藍底） */ .bt-prefilled-banner { margin: 4px 0 12px; padding: 14px 16px; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; color: #1E3A8A; line-height: 1.6; } .bt-prefilled-banner-title { font-weight: 800; font-size: 14px; color: #1D4ED8; margin: 0 0 6px; letter-spacing: 0.02em; } .bt-prefilled-banner p { margin: 4px 0; font-size: 13.5px; } @media (max-width: 600px) { .bt-prefilled-banner { padding: 12px 14px; } .bt-prefilled-banner-title { font-size: 13.5px; } .bt-prefilled-banner p { font-size: 13px; } } /* BT-REFERRER-LINK-002C — 產生客戶填寫連結 modal */ .bt-gen-link-btn { background: #10B981 !important; color: #fff !important; border: none !important; font-weight: 700; } .bt-gen-link-btn:hover { background: #059669 !important; } .bt-gen-link-btn:disabled { opacity: 0.6; cursor: not-allowed; } .bt-link-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 16px; } .bt-link-modal-dialog { background: #fff; border-radius: 16px; padding: 24px; max-width: 520px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.25); } .bt-link-modal-title { font-size: 18px; font-weight: 800; color: #047857; margin: 0 0 12px; } .bt-link-modal-desc { margin: 0 0 14px; font-size: 14px; color: #475569; line-height: 1.55; } .bt-link-modal-url { width: 100%; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 8px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; background: #F8FAFC; color: #0F172A; box-sizing: border-box; margin-bottom: 14px; } .bt-link-modal-actions { display: flex; gap: 10px; justify-content: flex-end; } .bt-link-modal-btn { padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; border: 1px solid #CBD5E1; background: #F1F5F9; color: #0F172A; cursor: pointer; min-height: 44px; } .bt-link-modal-btn-primary { background: #10B981; color: #fff; border-color: #10B981; } .bt-link-modal-btn-primary:hover { background: #059669; } .bt-link-modal-btn:hover { background: #E2E8F0; } @media (max-width: 600px) { .bt-link-modal-dialog { padding: 18px; } .bt-link-modal-title { font-size: 16px; } .bt-link-modal-desc { font-size: 13px; } .bt-link-modal-url { font-size: 11.5px; padding: 8px 10px; } .bt-link-modal-actions { flex-direction: column-reverse; } .bt-link-modal-btn { width: 100%; } }