/* ========================================================== contact.css — 联系方式与表单卡片模块 (Contact Layer) ------------------------------------------------------------ 物理拆分层, 不使用 CSS @import, 在 file:// 协议下零跨域错误。 在 index.html 中按顺序引入 (后加载覆盖前加载, 15 CSS): 1. base.css (基础层: 重置 + 变量 + 纸纹 + scrollbar) 2. scene.css (场景层: 海草 + 潜水员 + 标题 + 进场) 3. portfolio-layout.css (作品集骨架) 4. portfolio-grid.css (作品集卡片栅格) 5. resume.css (简历, 含 experience-tag 八边形化) 6. portfolio-preview.css (预览: Lightbox + PDF 模态框) 7. portfolio-x1-sidebar.css (X1 侧栏: Markdown + modal) 8. contact.css ← 本文件 (联系层: 表单 + 社交媒体矩阵) 9. life-layout.css (兴趣卡骨架: 4 张核心卡 + 散落 Polaroid) 10. life-modal.css (通用 modal: 4 主题 + 流体特效 + 响应式) 11. life-marathon.css (Marathon 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分 12. life-travel.css (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md). (历史 portfolio.css 已删除) 包含: 1. 联系表单容器 (.contact-form) — 100% 不透明深色卡纸 2. 输入框 (.contact-input) — 透明底 + 1px 下边框 (聚焦时变亮) 3. 文本域 (.contact-textarea) — 同输入框 + resize: vertical + min-height 4. 提交按钮 (.contact-button) — 物理纸雕按键, 悬停反色, 点击下沉 5. 社交媒体矩阵 (.contact-social-wrapper / .contact-lead) 6. 圆形社交按钮 (.social-links-matrix / .social-link-item / .social-icon) 7. 平台特定悬停态 (LinkedIn 蓝 / Instagram 粉 / Email 红 / 小红书 橙) 8. 响应式断点 (@media max-width: 1024 / 768 / 480 / 360) 【纸雕铁律】 - 不透明: 表单容器 100% 不透明卡纸 (杜绝 backdrop-filter 高光); 社交按钮 background rgba(35, 43, 54, 0.5) 仅微透明以融入深海背景 - 硬边: 提交按钮 border-radius: 0 直角, 仅社交媒体按钮允许圆形 (50%) - 物理投影: · .contact-input focus: 1px 实线变亮 (下边框强化) · .contact-button hover: 反色 + 4px 抬升 + 双层硬投影 (3px 6px 0 + 0 12px 24px) · .contact-button active: 0 抬升 + 单层硬投影 (模拟"按下"纸雕下陷) · .social-link-item hover: 4px 抬升 + 0 6px 12px + 0 16px 32px 双层硬投影 - 纸带厚度 4-6px: · .contact-input 1px 下边框 (纸雕细线) · .contact-button padding: 12px 30px (按钮纸带上下各 12px) · .social-link-item 1px 边框 (社交按钮纸带) ========================================================== */ /* ========================================================== 1. 联系表单容器 (Contact Form Container) ------------------------------------------------------------ 注: .contact-form / .contact-input / .contact-textarea / .contact-button 当前 HTML 中并未使用, 是为后续扩展预留. 保留全部样式以备不时之需. ========================================================== */ .contact-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 100%; margin: 0; } /* ========================================================== 2. 输入框 / 文本域 (Input / Textarea) ------------------------------------------------------------ 透明底 + 1px 下边框: 让用户感觉在纸面上书写, 而不是在输入框中. placeholder 强制大写 + letter-spacing, 让提示文字有"印章"质感. focus 时下边框变亮 (focus glow). ========================================================== */ .contact-input, .contact-textarea { background: transparent; border: none; border-bottom: 1px solid rgba(245, 247, 250, 0.2); /* 1px 纸雕细线下边框 */ color: rgba(245, 247, 250, 0.95); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 14px; padding: 12px 4px; width: 100%; margin-bottom: 30px; transition: all 0.3s ease; letter-spacing: 0.05em; } .contact-input::placeholder, .contact-textarea::placeholder { color: rgba(245, 247, 250, 0.4); text-transform: uppercase; letter-spacing: 0.1em; } .contact-input:focus, .contact-textarea:focus { border-bottom: 1px solid rgba(245, 247, 250, 0.8); /* 聚焦时边框变亮 (纸雕焦点) */ outline: none; } .contact-textarea { resize: vertical; min-height: 120px; } /* ========================================================== 3. 提交按钮 (Submit Button) — 物理纸雕按键 ------------------------------------------------------------ 物理按下错觉实现: · 默认: 1px 边框 + 透明底 (纸雕轮廓) · hover: 反色 (深底浅字) + 4px 抬升 + 双层硬投影 (3px 6px 0 + 0 12px 24px) · active: 0 抬升 + 单层硬投影 (2px 4px 0) + translateY(2px) (纸雕"按下"下沉) ========================================================== */ .contact-button { background: transparent; border: 1px solid rgba(245, 247, 250, 0.4); /* 1px 直角纸雕边框 */ color: rgba(245, 247, 250, 0.95); font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; padding: 12px 30px; /* 按钮纸带上下各 12px */ cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); margin-top: 0.5rem; width: fit-content; border-radius: 0; /* 硬边直角 */ } .contact-button:hover { background: rgba(245, 247, 250, 0.95); /* 反色: 浅底深字 */ color: #071a1f; border-color: rgba(245, 247, 250, 0.95); transform: translateY(-4px); /* 抬升 4px (纸雕漂浮) */ box-shadow: 3px 6px 0px rgba(245, 247, 250, 0.6), /* 主投影: 右下偏移 (纸雕立体) */ 0 12px 24px rgba(0, 0, 0, 0.4); /* 远投影: 深度感 */ } .contact-button:active { /* 物理按下: 0 抬升 + 减少投影 + 微下沉 (模拟手指按到纸面上) */ transform: translateY(2px); box-shadow: 2px 4px 0px rgba(245, 247, 250, 0.5); /* 主投影: 缩小 + 右下偏移 */ transition: all 0.1s ease; /* 按下时立即响应 (瞬间) */ } /* ========================================================== 4. 社交媒体矩阵 (Social Links Matrix) 容器 ========================================================== */ .contact-social-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .contact-lead { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 1.1rem; letter-spacing: 0.1em; color: rgba(245, 247, 250, 0.85); margin: 0; } .social-links-matrix { display: flex; gap: 20px; } /* ========================================================== 5. 圆形社交按钮 (Social Link Item) — 物理按键圆角版 ------------------------------------------------------------ 允许 50% 圆形 (与卡片直角区分, 但同属纸雕系列). hover 时 4px 抬升 + 双层硬投影 + 平台主题色边框 (LinkedIn 蓝等). ========================================================== */ .social-link-item { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; /* 社交媒体允许圆形 */ background: rgba(35, 43, 54, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; } /* 装饰: 青色斜射光 (hover 时显示) */ .social-link-item::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 242, 254, 0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .social-icon { width: 28px; height: 28px; color: rgba(245, 247, 250, 0.8); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; } .social-link-item:hover { border-color: rgba(0, 242, 254, 0.4); /* 默认青色边框 (冷调) */ transform: translateY(-4px); /* 抬升 4px */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), /* 主投影 */ 0 16px 32px rgba(0, 3, 5, 0.85); /* 远投影: 深度感 */ } .social-link-item:hover::before { opacity: 1; } .social-link-item:hover .social-icon { color: #00f2fe; /* 默认青色 icon */ transform: scale(1.1); /* 1.1× 微放大 */ } /* ========================================================== 6. 平台特定悬停态 (Platform-Specific Hover Accents) ------------------------------------------------------------ 顺序约定 (index.html 中 social-link-item 顺序): · :nth-child(1) → LinkedIn (蓝 #0077b5) · :nth-child(2) → Instagram (粉 #e44693) · :nth-child(3) → Email (邮件红 #ff8800 - 原 RSS 橙色复用) · :nth-child(4) → 小红书 (橙 #ff6633 - 同色系延伸) 注: 任何超出 4 个的社交媒体都退回青色默认态. ========================================================== */ /* LinkedIn (蓝) */ .social-link-item:nth-child(1):hover { border-color: rgba(0, 119, 181, 0.7); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 3, 5, 0.85); } .social-link-item:nth-child(1):hover .social-icon { color: #0077b5; } /* Instagram (粉) */ .social-link-item:nth-child(2):hover { border-color: rgba(234, 70, 147, 0.7); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 3, 5, 0.85); } .social-link-item:nth-child(2):hover .social-icon { color: #e44693; } /* Email (橙 — 原 RSS 橙复用) */ .social-link-item:nth-child(3):hover { border-color: rgba(255, 136, 0, 0.7); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 3, 5, 0.85); } .social-link-item:nth-child(3):hover .social-icon { color: #ff8800; } /* 小红书 (橙 — 同 Email 系, 保持视觉一致) */ .social-link-item:nth-child(4):hover { border-color: rgba(255, 102, 51, 0.7); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7), 0 16px 32px rgba(0, 3, 5, 0.85); } .social-link-item:nth-child(4):hover .social-icon { color: #ff6633; } /* ========================================================== 7. 响应式断点 (Contact @ 1024 / 768 / 480 / 360) ------------------------------------------------------------ - 1024px: 社交按钮微缩, contact-lead 字号缩小 - 768px: 输入框/文本域字号缩到 13px, 社交按钮 48px - 480px: 表单 padding 收紧, 社交按钮 44px, gap 缩小 - 360px: 全字段进一步压缩, 按钮纸带缩到 padding 10px 24px ========================================================== */ /* 7.1 1024px 及以下: 社交按钮 50px, contact-lead 略缩 */ @media (max-width: 1024px) { .social-link-item { width: 50px; height: 50px; } .social-icon { width: 26px; height: 26px; } .contact-lead { font-size: 1rem; } } /* 7.2 768px 及以下: 输入字号缩小, 社交按钮缩小 */ @media (max-width: 768px) { .contact-input, .contact-textarea { font-size: 13px; margin-bottom: 24px; } .contact-button { font-size: 11px; padding: 11px 26px; letter-spacing: 0.18em; } .social-link-item { width: 48px; height: 48px; } .social-icon { width: 24px; height: 24px; } .social-links-matrix { gap: 16px; } .contact-social-wrapper { gap: 20px; } /* Backlog #44 (2026-06-24): Contact section 移动端布局优化 - 标题与四个图标垂直距离过大: 减小 .section-title margin-bottom (0.5rem → 0.25rem) - 离页面底部过近: 增大 Contact section padding-bottom (40px → 80px), 让图标与页脚之间有视觉缓冲 - 桌面端不受影响 (此规则只在 768px 以下生效) */ #section-contact .section-title { margin-bottom: 0.25rem; } #section-contact { padding-bottom: 80px; } } /* 7.3 480px 及以下: 社交按钮更小, 表单 paper band 收紧 */ @media (max-width: 480px) { .contact-input, .contact-textarea { font-size: 12.5px; margin-bottom: 20px; padding: 10px 2px; } .contact-textarea { min-height: 100px; } .contact-button { font-size: 10.5px; padding: 10px 22px; letter-spacing: 0.16em; } .contact-lead { font-size: 0.95rem; } .social-link-item { width: 44px; height: 44px; } .social-icon { width: 22px; height: 22px; } .social-links-matrix { gap: 14px; } } /* 7.4 360px 及以下: 极窄屏全字段压缩 */ @media (max-width: 360px) { .contact-input, .contact-textarea { font-size: 12px; padding: 9px 2px; margin-bottom: 18px; } .contact-textarea { min-height: 90px; } .contact-button { font-size: 10px; padding: 10px 20px; letter-spacing: 0.14em; } .social-link-item { width: 40px; height: 40px; } .social-icon { width: 20px; height: 20px; } .social-links-matrix { gap: 10px; } .contact-social-wrapper { gap: 16px; } } /* ========================================================== 8. 防爬虫邮箱弹窗 (Decryption & Paper-cut Modal) ------------------------------------------------------------ 硬边铁律: · 八角形 clip-path (硬切角, 无圆角) · 100% 不透明卡纸色 (无 backdrop-filter, 无 gradient) · 双层 box-shadow 硬投影 (无模糊或极低模糊) · 入场: scale(0.9) -> scale(1) "立体书卡纸弹起"动效 · 出场: 硬脆节奏消失, 动画结束后完全静止 (无持续 CPU 开销) 触发: contact-decrypt.js 监听 [data-email-trigger] 节点 ========================================================== */ :root { --paper-modal-bg: #f1ead8; /* 米白卡纸色, 与 base.css --paper-bg 接近 */ --paper-modal-ink: #0a1f24; /* 深海墨色文字 */ --paper-modal-accent: #ff8800; /* 邮箱橙 (复用现有 hover 主题色) */ } .decrypt-modal-overlay { position: fixed; inset: 0; z-index: 2000000; /* 高于 diverOverlayCanvas @ 1600000 */ background: rgba(10, 31, 36, 0.35); /* 半透明蒙版 (仅蒙版半透明, 卡片本身不透明) */ display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .decrypt-modal-overlay.is-open { opacity: 1; pointer-events: auto; } .decrypt-modal-card { position: relative; min-width: 280px; max-width: 420px; padding: 32px 36px; background: var(--paper-modal-bg); /* 100% 不透明卡纸 (硬边铁律) */ color: var(--paper-modal-ink); border: 1px solid rgba(10, 31, 36, 0.15); /* 八角形硬切角: 8 顶点 polygon, 0 圆角 */ clip-path: polygon( 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px ); /* 双层硬投影: 主投影锐利 + 远投影深度 (物理叠纸, 无模糊) */ box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.55), 8px 8px 0px rgba(0, 0, 0, 0.30); /* 入场: scale(0.9) -> scale(1), 一次性, 动画后完全静止 */ transform: scale(0.9); transform-origin: center center; transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1); text-align: center; font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; } .decrypt-modal-overlay.is-open .decrypt-modal-card { transform: scale(1); } /* 出场: 硬脆消失 (短 duration) */ .decrypt-modal-card.is-leaving { transform: scale(0.92); transition: transform 0.14s ease-in, opacity 0.14s ease-in; opacity: 0; } /* 标题行: 八角形小徽章 + 文字 */ .decrypt-modal-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; } .decrypt-modal-icon { width: 22px; height: 22px; color: var(--paper-modal-accent); flex-shrink: 0; } .decrypt-modal-title { font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--paper-modal-ink); margin: 0; } .decrypt-modal-line { font-size: 14px; line-height: 1.55; letter-spacing: 0.04em; color: var(--paper-modal-ink); margin: 0 0 8px 0; } .decrypt-modal-line strong { font-weight: 600; color: var(--paper-modal-accent); } .decrypt-modal-hint { margin-top: 14px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10, 31, 36, 0.55); } /* 极窄屏缩放 (沿用 contact.css 480 断点) */ @media (max-width: 480px) { .decrypt-modal-card { min-width: 240px; max-width: 86vw; padding: 24px 26px; } .decrypt-modal-title { font-size: 10.5px; } .decrypt-modal-line { font-size: 13px; } } /* ========================================================== 9. 邮箱文本 RTL 视觉反转 (Backlog #48 · 防爬虫方案 B) ------------------------------------------------------------ 设计原理: · DOM 文本 'moc.liamtoh@zgnoroah' 是真逆序, 爬虫正则抓不到明文 · CSS 把文本**字符级**反向排列 (right-to-left + bidi-override) · 人类视觉上看到正向 'haorongz@hotmail.com' · 双击节点 user-select: all 一键全选 (但用户复制会拿到 DOM 真实文本即乱码) 因此 JS 在 click handler 里主动写明文邮箱到剪贴板 纸雕铁律合规: · 不透明: 纯色背景继承父 .decrypt-modal-line · 硬边: 无 border-radius, 唯一 background-color (无渐变) · 物理投影: 沿用 .decrypt-modal-card 的双层 box-shadow · 字体: font-family: inherit → 继承 .decrypt-modal-card 的 Cinzel ========================================================== */ .diver-email-card { direction: rtl; unicode-bidi: bidi-override; font-family: inherit; user-select: all; -webkit-user-select: all; color: var(--paper-modal-accent); font-weight: 600; letter-spacing: 0.05em; padding: 6px 12px; background-color: rgba(255, 136, 0, 0.08); border: 1px solid rgba(255, 136, 0, 0.25); cursor: pointer; display: inline-block; transition: background-color 0.2s ease, border-color 0.2s ease; } .diver-email-card:hover { background-color: rgba(255, 136, 0, 0.18); border-color: rgba(255, 136, 0, 0.55); } /* 已复制闪烁反馈 (Backlog #48 · flashEmailCopyHint) */ .diver-email-card.is-flashing { background-color: rgba(255, 136, 0, 0.35); border-color: rgba(255, 136, 0, 0.85); transition: background-color 0.05s ease, border-color 0.05s ease; }