/* ============================================================ 奇迹司小队站点 · 前置同意门 consent-gate 浅色主题；主色蓝 --res-accent:#2f6f9f；墨色 #17334f；橙 #ff6b35 ============================================================ */ /* 早期遮罩：在 解析阶段即创建，防止内容闪现（仅在未同意时出现） */ .consent-blocker { position: fixed; inset: 0; background: #eef2f6; z-index: 2147483600; } /* 主遮罩 */ .consent-gate { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(23, 51, 79, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-sizing: border-box; } /* 对话框 */ .consent-gate__dialog { width: 100%; max-width: 860px; max-height: min(90vh, 760px); display: flex; flex-direction: column; background: #ffffff; border-radius: 16px; box-shadow: 0 24px 70px rgba(23, 51, 79, 0.35); overflow: hidden; box-sizing: border-box; } /* 头部 */ .consent-gate__header { padding: 20px 24px 14px; border-bottom: 1px solid #e4ebf2; flex: 0 0 auto; } .consent-gate__title { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 700; color: #17334f; } .consent-gate__subtitle { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #5a6b7b; } /* 标签页 */ .consent-gate__tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #e4ebf2; flex: 0 0 auto; overflow-x: auto; scrollbar-width: thin; } .consent-gate__tab { appearance: none; border: none; background: transparent; padding: 14px 16px; font-size: 15px; font-weight: 600; color: #5a6b7b; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s ease, border-color .15s ease; } .consent-gate__tab:hover { color: #2f6f9f; } .consent-gate__tab[aria-selected="true"] { color: #2f6f9f; border-bottom-color: #2f6f9f; } .consent-gate__tab:focus-visible { outline: 3px solid rgba(47, 111, 159, 0.45); outline-offset: -3px; border-radius: 6px; } .consent-gate__tab-read { display: inline-block; margin-left: 6px; font-size: 11px; color: #1f9d6b; font-weight: 700; } .consent-gate__tab-read::before { content: "✓ 已读"; } /* 面板区 */ .consent-gate__panels { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .consent-gate__panel { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; } .consent-gate__panel.is-active { display: flex; } /* 工具栏：打印 / 下载 PDF */ .consent-gate__toolbar { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 20px 0; flex: 0 0 auto; } .consent-gate__tool-btn { appearance: none; border: 1px solid #cdd9e5; background: #f5f8fb; color: #2f6f9f; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .consent-gate__tool-btn:hover { background: #e9f1f8; border-color: #9bb8d4; } .consent-gate__tool-btn:focus-visible { outline: 3px solid rgba(47, 111, 159, 0.45); outline-offset: 2px; } /* 可滚动正文容器 */ .consent-gate__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 16px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .consent-gate__scroll::-webkit-scrollbar { width: 10px; } .consent-gate__scroll::-webkit-scrollbar-thumb { background: #c4d3e0; border-radius: 6px; } .consent-gate__scroll::-webkit-scrollbar-track { background: transparent; } /* 协议富文本排版 */ .consent-doc { color: #25394d; font-size: 14.5px; line-height: 1.8; } .consent-doc h1 { font-size: 19px; color: #17334f; margin: 4px 0 14px; text-align: center; } .consent-doc h2 { font-size: 16px; color: #1f527b; margin: 22px 0 8px; padding-left: 10px; border-left: 4px solid #2f6f9f; } .consent-doc h3 { font-size: 14.5px; color: #17334f; margin: 16px 0 6px; font-weight: 700; } .consent-doc p { margin: 0 0 10px; } .consent-doc ul, .consent-doc ol { margin: 6px 0 12px; padding-left: 26px; } .consent-doc li { margin: 4px 0; } .consent-doc li > ul, .consent-doc li > ol { margin: 4px 0; } .consent-doc code { background: #eef2f6; border-radius: 4px; padding: 1px 5px; font-family: Consolas, "Courier New", monospace; font-size: 13px; color: #b3502a; } .consent-doc a { color: #2f6f9f; text-decoration: underline; } .consent-doc strong { color: #17334f; } .consent-doc hr { border: none; border-top: 1px solid #e4ebf2; margin: 16px 0; } /* 未读遮罩提示（渐隐底部，提示需滚动） */ .consent-gate__scroll-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .consent-gate__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff); pointer-events: none; opacity: 1; transition: opacity .2s ease; } .consent-gate__scroll-wrap.is-read .consent-gate__fade { opacity: 0; } /* 同意行 */ .consent-gate__agree-row { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 24px; border-top: 1px solid #e4ebf2; background: #f7fafc; } .consent-gate__checkbox { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #2f6f9f; cursor: pointer; } .consent-gate__checkbox:disabled { cursor: not-allowed; opacity: .5; } .consent-gate__checkbox:focus-visible { outline: 3px solid rgba(47, 111, 159, 0.5); outline-offset: 2px; } .consent-gate__agree-label { font-size: 14px; line-height: 1.5; color: #25394d; cursor: pointer; } .consent-gate__agree-label.is-disabled { color: #93a2b1; cursor: not-allowed; } /* 提示（未读完） */ .consent-gate__hint { display: block; margin-top: 6px; font-size: 12.5px; color: #c0392b; min-height: 16px; } .consent-gate__hint.is-ok { color: #1f9d6b; } .consent-gate__hint:empty { min-height: 0; } /* 底部操作栏 */ .consent-gate__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid #e4ebf2; background: #ffffff; } .consent-gate__progress { font-size: 12.5px; color: #5a6b7b; } .consent-gate__progress strong { color: #2f6f9f; } .consent-gate__continue { appearance: none; border: none; background: linear-gradient(135deg, #2f6f9f, #1f527b); color: #fff; font-size: 15px; font-weight: 700; padding: 12px 26px; border-radius: 10px; cursor: pointer; transition: opacity .15s ease, transform .05s ease; } .consent-gate__continue:hover:not(:disabled) { background: linear-gradient(135deg, #357cae, #244f7d); } .consent-gate__continue:active:not(:disabled) { transform: translateY(1px); } .consent-gate__continue:disabled { background: #b7c4d1; cursor: not-allowed; opacity: .8; } .consent-gate__continue:focus-visible { outline: 3px solid rgba(47, 111, 159, 0.6); outline-offset: 3px; } /* 视觉隐藏（无障碍） */ .consent-gate__sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* 移动端自适应 */ @media (max-width: 640px) { .consent-gate { padding: 0; } .consent-gate__dialog { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; } .consent-gate__header { padding: 16px 16px 12px; } .consent-gate__title { font-size: 18px; } .consent-gate__tab { padding: 12px 12px; font-size: 14px; } .consent-gate__toolbar { padding: 8px 14px 0; } .consent-gate__scroll { padding: 8px 16px 16px; } .consent-gate__agree-row { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .consent-gate__footer { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); flex-direction: column-reverse; align-items: stretch; } .consent-gate__progress { text-align: center; margin-bottom: 4px; } .consent-gate__continue { width: 100%; } } /* 减少动画 */ @media (prefers-reduced-motion: reduce) { .consent-gate__scroll { scroll-behavior: auto; } * { transition: none !important; } } /* 打印 / 下载 PDF 专用：仅显示协议正文 */ @media print { html.consent-print body > *:not(#consent-print-root) { display: none !important; } html.consent-print #consent-print-root { display: block !important; } @page { margin: 18mm 16mm; } } #consent-print-root { display: none; } .consent-print-doc { color: #000; font-size: 12.5pt; line-height: 1.7; } .consent-print-doc h1 { font-size: 18pt; text-align: center; margin: 0 0 6pt; } .consent-print-doc h2 { font-size: 14pt; margin: 14pt 0 4pt; } .consent-print-doc h3 { font-size: 12.5pt; margin: 10pt 0 3pt; } .consent-print-doc p { margin: 0 0 6pt; } .consent-print-doc ul, .consent-print-doc ol { margin: 4pt 0 8pt; padding-left: 22pt; } .consent-print-doc li { margin: 2pt 0; } .consent-print-doc code { background: #eee; padding: 0 3pt; font-size: 11pt; } .consent-print-meta { text-align: center; color: #555; font-size: 10pt; margin: 0 0 10pt; }