:root { /* 定义一个衬线字体栈 */ --font-serif-zh: "SimSun","Noto Serif SC", "Georgia", "STSong", "Songti SC", serif; } body { /* 全站应用 */ font-family: var(--font-serif-zh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #262626; /* 衬线体配合深灰色阅读感更好 */ } /* ========== 强制隐藏模板容器 ========== */ #mobile-drawer-template { display: none !important; visibility: hidden !important; position: absolute !important; pointer-events: none !important; } /* ========== 桌面端导航样式 ========== */ @media (min-width: 768px) { /* 强制隐藏移动端元素 */ #mobile-menu-trigger, #mobile-sidebar-overlay, #mobile-sidebar-overlay-active { display: none !important; } /* 桌面端导航居中 */ nav .hidden.md\\:flex.items-center.justify-center nav, nav .hidden.md\\:flex.items-center.justify-center .nav { display: flex !important; justify-content: center !important; align-items: center !important; gap: 2rem !important; } nav .hidden.md\\:flex.items-center.justify-center ul { display: flex !important; flex-direction: row !important; gap: 2rem !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } nav .hidden.md\\:flex.items-center.justify-center li { margin: 0 !important; } nav .hidden.md\\:flex.items-center.justify-center a { text-decoration: none !important; color: #374151 !important; font-weight: 500 !important; font-size: 0.875rem !important; transition: color 0.2s !important; } nav .hidden.md\\:flex.items-center.justify-center a:hover { color: #2563eb !important; } } /* ========== 移动端抽屉基础样式 ========== */ #mobile-sidebar-overlay-active { display: none; /* 默认隐藏,通过 JS 控制显示 */ } /* ========== 抽屉导航网格布局 ========== */ .mobile-nav-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } .mobile-nav-grid nav, .mobile-nav-grid .nav { display: contents !important; } .mobile-nav-grid ul { display: contents !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .mobile-nav-grid li { display: block !important; margin: 0 !important; } .mobile-nav-grid a { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0.75rem !important; border-radius: 0.5rem !important; background-color: #f9fafb !important; color: #4b5563 !important; font-weight: 500 !important; text-decoration: none !important; border: 1px solid #e5e7eb !important; transition: all 0.2s !important; font-size: 0.875rem !important; text-align: center !important; } .mobile-nav-grid a:hover, .mobile-nav-grid a:active { background-color: #eff6ff !important; color: #2563eb !important; border-color: #3b82f6 !important; transform: scale(0.95); } /* ========== 动画和过渡 ========== */ .drawer-backdrop { transition: opacity 300ms ease-out; } .drawer-panel { transition: transform 300ms ease-out; } /* ========== 通用优化 ========== */ #mobile-menu-trigger { cursor: pointer; background: none; border: none; } /* 平滑滚动 */ .drawer-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 防止内容抖动 */ body.drawer-open { overflow: hidden !important; position: fixed !important; width: 100% !important; } /* 确保抽屉在最顶层 */ #mobile-sidebar-overlay-active { z-index: 9999 !important; } #welcome-ip-location-info b { color: #2563eb; /* 对应 Tailwind 的 blue-600 */ font-weight: 700; } /* 默认模糊状态 */ #welcome-ip-location-info .ip-mask { filter: blur(5px); cursor: pointer; transition: all 0.3s ease; display: inline-block; background-color: rgba(0, 0, 0, 0.05); padding: 0 4px; border-radius: 4px; user-select: none; /* 防止未解锁前被选中复制 */ } /* 鼠标悬停时轻微减少模糊(给予视觉反馈) */ #welcome-ip-location-info .ip-mask:hover { filter: blur(3px); background-color: rgba(0, 0, 0, 0.08); } /* 点击或被激活时完全显示 */ #welcome-ip-location-info .ip-mask.unmask, #welcome-ip-location-info .ip-mask:active { filter: blur(0); background-color: transparent; user-select: auto; } .site-footer { padding: 60px 20px; background: #f9f9f9; /* 浅灰背景,简洁干净 */ color: #555; font-size: 0.9rem; border-top: 1px solid #eee; margin-top: 80px; } .footer-content { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; /* 三栏布局 */ gap: 40px; } .footer-column h3, .footer-column h4 { color: #111; margin-bottom: 15px; font-size: 1.1rem; } .footer-column p { line-height: 1.6; } /* 微信公众号悬浮交互 */ .wechat-trigger { color: #1a73e8; cursor: pointer; position: relative; border-bottom: 1px dashed #1a73e8; } /* 弹出层容器 */ .wechat-qr { display: none; position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); /* 配合 left: 50% 实现相对于文字水平居中 */ background: white; padding: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border-radius: 8px; z-index: 100; width: 140px; text-align: center !important; box-sizing: border-box; /* 确保 padding 不撑破宽度 */ } /* 二维码图片 */ .wechat-qr img { width: 100% !important; height: auto !important; display: block; margin: 0 auto 10px; /* 这里的 auto 确保图片在容器内水平居中 */ } /* 下方的文字 */ .wechat-qr p { font-size: 12px; color: #666; margin: 0 !important; padding: 0 !important; display: block; width: 100%; text-align: center; /* 确保文字在 p 标签内居中 */ line-height: 1.2; white-space: nowrap; /* 避免文字太长换行导致视觉偏移 */ } .wechat-trigger:hover .wechat-qr { display: block; } /* 次级导航样式 */ .footer-nav ul { list-style: none; padding: 0; } .footer-nav ul li { margin-bottom: 8px; } .footer-nav a { color: #555; text-decoration: none; } .footer-nav a:hover { color: #1a73e8; } /* 移动端适配 */ @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; text-align: center; } .wechat-qr { left: 50%; } } /* 确保整个头部在滚动时固定 */ .site-header-container { position: sticky !important; top: 0 !important; z-index: 1000 !important; width: 100%; } /* 公告栏样式优化 */ .gh-announcement { background-color: var(--ghost-accent-color, #3eb0ef); color: #fff; padding: 10px 24px; text-align: center; font-size: 0.9rem; font-weight: 500; line-height: 1.4; } .gh-announcement a { color: #fff; text-decoration: underline; font-weight: 700; } /* 修复移动端抽屉层级,确保在 header 之上 */ #mobile-sidebar-overlay { z-index: 10001 !important; }