/* ══════════════════════════════════════════════════════════════ home.css —— 首页专用样式通过 mkdocs.yml 的 extra_css 全局注册 —— 保证在 Material Instant Navigation (SPA) 切页时始终在，样式不丢失隔离策略： 1) 影响全局布局的规则（.md-main__inner / body 背景 / sidebar 等）全部用 body.home 前缀，只在首页时生效 2) Hero 区专用选择器（.hero-* / .stack-* / .btn-*）天然仅出现在首页，无需额外作用域 ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════ [仅首页] 全局布局重置 —— 核心目标：让 .home-page 撑满整个视口宽度，清除 Material 默认的 grid / max-width / padding 约束 —— 作用域：body:has(.home-page) 只有 DOM 里存在 .home-page 元素（即当前渲染的是首页）时生效； Material Instant Navigation 切到文章页后 .home-page 被卸载，规则自动失效，无需任何 JS 同步 body class。 ═══════════════════════════════════════════════ */ /* 1) body 背景同步为首页背景色，消除溢出时的颜色差异双重选择器： - body:has(.home-page) —— 现代浏览器（Chrome 105+/Firefox 121+/Safari 15.4+） - body.is-home —— JS 兜底，由 custom.js 检测到 .home-page 后注入，为老浏览器（旧 Firefox / Safari）提供相同效果 */ [data-md-color-scheme="slate"] body:has(.home-page), [data-md-color-scheme="slate"] body.is-home { background-color: #0d1117; } [data-md-color-scheme="default"] body:has(.home-page), [data-md-color-scheme="default"] body.is-home { background-color: #ffffff; } /* 2) .md-main 及其内容链路全部"透明 + 全宽" */ body:has(.home-page) .md-main, body.is-home .md-main { background-color: transparent; } body:has(.home-page) .md-main__inner, body.is-home .md-main__inner { margin: 0 !important; max-width: none !important; padding: 0 !important; display: block !important; /* 取消 Material 默认的 grid/flex 布局 */ } body:has(.home-page) .md-content, body.is-home .md-content { max-width: none !important; margin: 0 !important; padding: 0 !important; background-color: transparent; } body:has(.home-page) .md-content__inner, body.is-home .md-content__inner { margin: 0 !important; padding: 0 !important; max-width: none !important; } body:has(.home-page) .md-content__inner::before, body.is-home .md-content__inner::before { display: none; } /* 顶部占位空白 */ body:has(.home-page) .md-content__button, body.is-home .md-content__button { display: none !important; } /* 编辑/查看源码按钮 */ body:has(.home-page) .md-source-file, body.is-home .md-source-file { display: none !important; } /* 文件元信息 */ body:has(.home-page) .md-feedback, body.is-home .md-feedback { display: none !important; } /* 反馈组件 */ /* 3) 首页隐藏侧边栏 */ body:has(.home-page) .md-sidebar--primary, body:has(.home-page) .md-sidebar--secondary, body.is-home .md-sidebar--primary, body.is-home .md-sidebar--secondary { display: none !important; } /* 4) header：去掉阴影，避免首页切到文章页时 "咔哒" 感 */ body:has(.home-page) .md-header, body.is-home .md-header { box-shadow: none !important; } /* 5) 首页专属横向滚动护栏 —— 作用域：仅首页 body，不污染全局。文章页依赖 Material 默认布局，不加 overflow-x，避免影响移动端抽屉导航 .md-nav--primary（其通过 transform 从视口外滑入，若父级 body 有 overflow-x:clip/hidden，抽屉内容会被裁掉，只剩灰色蒙版）。 —— 目的：拦截 .stack-item 入场动画 translateX(28px) 及任何子元素意外溢出，避免首页手机端出现横向滚动条。 —— 降级：旧浏览器不支持 clip 时回退 hidden，效果等价。 */ body:has(.home-page), body.is-home { overflow-x: hidden; } @supports (overflow-x: clip) { body:has(.home-page), body.is-home { overflow-x: clip; } } /* ══════════════════════════════════════════════ CSS 变量 —— 深色主题（slate）挂在 .home-page 上，避免污染全局 ═══════════════════════════════════════════════ */ [data-md-color-scheme="slate"] .home-page { --home-hero-bg: #0d1117; --home-dot-color: rgba(255, 255, 255, 0.045); --home-title-from: #ffffff; --home-title-to: #a5b4fc; --home-badge-bg: rgba(99, 102, 241, 0.12); --home-badge-border: rgba(99, 102, 241, 0.35); --home-badge-color: #818cf8; --home-sub-color: #94a3b8; --home-stat-color: #e2e8f0; --home-stat-sep: #334155; --home-btn-primary: #6366f1; --home-btn-primary-h: #4f46e5; --home-btn-ghost-bg: rgba(255, 255, 255, 0.06); --home-btn-ghost-bd: rgba(255, 255, 255, 0.15); --home-btn-ghost-c: #e2e8f0; --home-card-bg: rgba(255, 255, 255, 0.03); --home-card-border: rgba(255, 255, 255, 0.07); --home-card-hover-bd: rgba(99, 102, 241, 0.55); --home-card-hover-bg: rgba(99, 102, 241, 0.06); --home-card-title: #e2e8f0; --home-tag-bg: rgba(99, 102, 241, 0.14); --home-tag-color: #a5b4fc; --home-count-color: #94a3b8; --home-spotlight: rgba(99, 102, 241, 0.12); } /* ══════════════════════════════════════════════ CSS 变量 —— 浅色主题（default） ═══════════════════════════════════════════════ */ [data-md-color-scheme="default"] .home-page { --home-hero-bg: #ffffff; --home-dot-color: rgba(0, 0, 0, 0.055); --home-title-from: #1e1b4b; --home-title-to: #4f46e5; --home-badge-bg: rgba(79, 70, 229, 0.08); --home-badge-border: rgba(79, 70, 229, 0.25); --home-badge-color: #4f46e5; --home-sub-color: #475569; --home-stat-color: #1e293b; --home-stat-sep: #cbd5e1; --home-btn-primary: #4f46e5; --home-btn-primary-h: #4338ca; --home-btn-ghost-bg: rgba(0, 0, 0, 0.04); --home-btn-ghost-bd: #d1d5db; --home-btn-ghost-c: #374151; --home-card-bg: #ffffff; --home-card-border: #e2e8f0; --home-card-hover-bd: #6366f1; --home-card-hover-bg: rgba(99, 102, 241, 0.03); --home-card-title: #1e293b; --home-tag-bg: rgba(79, 70, 229, 0.07); --home-tag-color: #4f46e5; --home-count-color: #64748b; --home-spotlight: rgba(99, 102, 241, 0.055); } /* 主题切换平滑过渡（只对必要元素生效） */ .home-page, .hero-section, .hero-section::before, .stack-item, .btn-primary, .btn-ghost, .hero-eyebrow, .hero-title, .hero-subtitle, .hero-stat-num, .hero-stat-label, .stack-name, .stack-tag, .stack-meta-count, .stack-meta-updated { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } /* ══════════════════════════════════════════════ 页面容器 ═══════════════════════════════════════════════ */ .home-page { background: var(--home-hero-bg); overflow-x: hidden; } /* ══════════════════════════════════════════════ Hero 区域 min-height = 视口 - header - tabs，使用 Material CSS 变量顶部锚定：内容自顶部向下偏移，而非绝对居中，避免超宽屏下因内容短而产生的"漂浮"空白感 ═══════════════════════════════════════════════ */ .hero-section { position: relative; /* 先用 100vh 作为兜底（iOS Safari <=15.4 不支持 dvh） */ min-height: calc(100vh - var(--md-header-height, 2.4rem) - 2.4rem); background-color: transparent; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding: clamp(3rem, 8vh, 6rem) 2rem 3rem; } /* 现代浏览器使用 100dvh：解决 iOS Safari 地址栏收起时 Hero 突然拉高的抖动 */ @supports (min-height: 100dvh) { .hero-section { min-height: calc(100dvh - var(--md-header-height, 2.4rem) - 2.4rem); } } /* 窄屏 Material 隐藏 tabs，只减去 header 高度 */ @media screen and (max-width: 59.9375em) { .hero-section { min-height: calc(100vh - var(--md-header-height, 2.4rem)); } @supports (min-height: 100dvh) { .hero-section { min-height: calc(100dvh - var(--md-header-height, 2.4rem)); } } } /* 点阵纹理背景 */ .hero-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, var(--home-dot-color) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 0; } /* 探照灯光晕（相对 Hero 容器定位） */ .hero-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 0; --x: 30%; --y: 50%; background: radial-gradient( circle 700px at var(--x) var(--y), var(--home-spotlight), transparent 70% ); transition: background 0.15s ease; } /* Hero 内容布局 —— 5:7 非均分：叙事列(左) 给文字留足呼吸，卡片列(右) 更舒展容纳 9 项技术栈 —— gap 随视口缩放：窄屏紧凑、超宽屏自然拉开，避免左右贴中线 —— align-items: start：双列顶部基线对齐，与 section 顶部锚定一致 */ .hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; } /* ── 左侧文字区 ── */ .hero-left { display: flex; flex-direction: column; align-items: flex-start; width: 100%; /* 关键：grid 子项默认 min-width: auto，会被内部最宽的不可收缩元素（如长英文标题 / uppercase 标签 / 按钮组）撑破父容器。显式 0 后 grid 才会真正以 1fr 约束宽度，避免 .hero-left 在 375px 窄屏下被撑到 370px（超出视口） */ min-width: 0; } /* 小标签 */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--home-badge-border); border-radius: 100px; background: var(--home-badge-bg); color: var(--home-badge-color); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; width: fit-content; margin-bottom: 1.5rem; opacity: 0; transform: translateY(16px); animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards; } .hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--home-badge-color); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* 主标题 */ .hero-title { font-size: clamp(2.8rem, 6vw, 4.8rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 1.25rem; background: linear-gradient(135deg, var(--home-title-from) 0%, var(--home-title-to) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; transform: translateY(16px); animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards; /* 窄屏兵底：若未来 site_name 换成长英文单词或专有名词，允许在任位置换行，避免撑破 .hero-left */ overflow-wrap: anywhere; word-break: normal; } /* 高对比度模式兜底 */ @media (forced-colors: active) { .hero-title { -webkit-text-fill-color: currentColor; background: none; color: CanvasText; } } /* 副标题 */ .hero-subtitle { font-size: clamp(0.95rem, 1.8vw, 1.1rem); color: var(--home-sub-color); line-height: 1.7; margin: 0 0 2rem; max-width: 480px; opacity: 0; transform: translateY(16px); animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; /* 同标题，防止长 URL 或不可断字英文术语在窄屏下撑破容器 */ overflow-wrap: anywhere; } /* 按钮组 */ .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; opacity: 0; transform: translateY(16px); animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards; } .btn-primary { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--home-btn-primary); color: #ffffff !important; padding: 0.75rem 1.75rem; font-size: 0.95rem; border-radius: 8px; font-weight: 600; text-decoration: none !important; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); } .btn-primary:hover { background: var(--home-btn-primary-h); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--home-btn-ghost-bg); color: var(--home-btn-ghost-c) !important; padding: 0.75rem 1.75rem; font-size: 0.95rem; border-radius: 8px; font-weight: 600; text-decoration: none !important; border: 1px solid var(--home-btn-ghost-bd); transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .btn-ghost:hover { background: rgba(99, 102, 241, 0.1); border-color: var(--home-btn-primary); color: var(--home-btn-primary) !important; transform: translateY(-2px); } /* 统计数字 */ .hero-stats { display: flex; align-items: center; gap: 1.25rem; opacity: 0; transform: translateY(16px); animation: fadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.36s forwards; } .hero-stat { display: flex; flex-direction: column; gap: 0.1rem; } .hero-stat-num { font-size: 1.4rem; font-weight: 800; color: var(--home-stat-color); line-height: 1; letter-spacing: -0.02em; } .hero-stat-label { font-size: 0.72rem; color: var(--home-sub-color); font-weight: 500; letter-spacing: 0.02em; } .hero-stat-sep { width: 1px; height: 2rem; background: var(--home-stat-sep); flex-shrink: 0; } /* ── 右侧技术栈列表 ── */ .hero-right { display: flex; flex-direction: column; gap: 0.55rem; /* 同 .hero-left，防止内部 .stack-item 的 min-content（icon+padding+arrow 固定和）把 grid 列撑出 1fr 约束，进而在单列布局下推宽 .hero-left */ min-width: 0; /* 容器不再整体动画，交由子项 stagger 入场 */ /* 关键：子项入场动画使用 translateX(28px)，hover 使用 translateX(5px)，在窄屏 100% 宽度容器下会溢出父级右边界，触发手机端横向滚动条。用 overflow-x: clip 在本地裁切，不影响父容器滚动/定位。（clip 不支持的旧浏览器回退到 hidden，等价效果） */ overflow-x: hidden; overflow-x: clip; } /* 卡片 stagger 入场：--i 由模板注入（loop.index0） */ @keyframes stackItemIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } } .stack-item { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid var(--home-card-border); background: var(--home-card-bg); text-decoration: none !important; color: inherit !important; overflow: hidden; opacity: 0; animation: stackItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.18s + var(--i, 0) * 55ms); transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease, filter 0.22s ease; } /* 品牌色渐显背景：hover 时从左向右淡入，作为视觉锚点 fallback：不支持 color-mix 的浏览器（Firefox <113 / Safari <16.2）使用主题高亮色作为降级背景 */ .stack-item::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--home-spotlight) 0%, transparent 60%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 0; } @supports (background: color-mix(in srgb, red, blue)) { .stack-item::before { background: linear-gradient(90deg, color-mix(in srgb, var(--si-color) 14%, transparent) 0%, transparent 60%); } } .stack-item > * { position: relative; z-index: 1; } .stack-item:hover { transform: translateX(5px); /* fallback：直接使用品牌色（浏览器不支持 color-mix 时） */ border-color: var(--si-color, var(--home-card-hover-bd)); background: var(--home-card-hover-bg); } @supports (border-color: color-mix(in srgb, red, blue)) { .stack-item:hover { border-color: color-mix(in srgb, var(--si-color) 55%, var(--home-card-border)); } } .stack-item:hover::before { opacity: 1; } /* Spotlight 效应：hover 任一卡片时，其兄弟卡片柔和淡出 */ .hero-right:hover .stack-item:not(:hover) { opacity: 0.5; filter: saturate(0.7); } [data-md-color-scheme="default"] .stack-item:hover { box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1); } [data-md-color-scheme="slate"] .stack-item:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } /* 左侧彩色强调条：常态窄而克制，hover 时延展到卡片整高并点亮 */ .stack-accent { width: 3px; height: 1.8rem; border-radius: 3px; flex-shrink: 0; background: var(--si-color, #6366f1); opacity: 0.75; transition: opacity 0.22s ease, height 0.22s ease, width 0.22s ease, box-shadow 0.22s ease; } .stack-item:hover .stack-accent { opacity: 1; width: 4px; height: 2.6rem; /* fallback：不支持 color-mix 的浏览器使用纯品牌色 */ box-shadow: 0 0 12px var(--si-color, #6366f1); } @supports (box-shadow: 0 0 12px color-mix(in srgb, red, blue)) { .stack-item:hover .stack-accent { box-shadow: 0 0 12px color-mix(in srgb, var(--si-color) 60%, transparent); } } /* 品牌图标容器：常态使用 --si-color，浅色主题下维持品牌色，深色主题轻微提亮 */ .stack-icon { flex-shrink: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--si-color, #6366f1); /* fallback：不支持 color-mix 时使用主题卡片背景 */ background: var(--home-card-bg); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.22s ease, box-shadow 0.22s ease; } @supports (background: color-mix(in srgb, red, blue)) { .stack-icon { background: color-mix(in srgb, var(--si-color) 10%, transparent); } } .stack-icon svg { display: block; width: 18px; height: 18px; } .stack-item:hover .stack-icon { transform: scale(1.08) rotate(-3deg); /* fallback：不支持 color-mix 时使用品牌色 + 低透明度模拟 */ background: var(--home-card-hover-bg); box-shadow: 0 4px 14px var(--si-color, #6366f1); } @supports (background: color-mix(in srgb, red, blue)) { .stack-item:hover .stack-icon { background: color-mix(in srgb, var(--si-color) 20%, transparent); box-shadow: 0 4px 14px color-mix(in srgb, var(--si-color) 35%, transparent); } } .stack-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } /* 第一行：名称 + 右对齐元信息（篇数 · 更新时间） */ .stack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; } .stack-name { font-size: 0.92rem; font-weight: 700; color: var(--home-card-title); line-height: 1.2; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stack-meta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 500; color: var(--home-count-color); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; } .stack-meta-count { font-weight: 600; /* fallback：不支持 color-mix 时使用 count 色 */ color: var(--home-count-color); } @supports (color: color-mix(in srgb, red, blue)) { .stack-meta-count { color: color-mix(in srgb, var(--home-card-title) 70%, var(--home-count-color)); } } .stack-meta-sep { opacity: 0.5; } /* hover 时元信息变为品牌色，提升联动感 */ .stack-item:hover .stack-meta-count, .stack-item:hover .stack-meta-updated { color: var(--si-color, var(--home-badge-color)); } .stack-tags { display: flex; flex-wrap: wrap; gap: 0.28rem; } .stack-tag { font-size: 0.62rem; font-weight: 500; padding: 0.08rem 0.5rem; border-radius: 100px; background: var(--home-tag-bg); color: var(--home-tag-color); letter-spacing: 0.02em; } .stack-arrow { font-size: 0.85rem; color: var(--si-color, var(--home-badge-color)); opacity: 0; transform: translateX(-6px); transition: opacity 0.22s ease, transform 0.22s ease; flex-shrink: 0; font-weight: 700; } .stack-item:hover .stack-arrow { opacity: 1; transform: translateX(2px); } /* ══════════════════════════════════════════════ 通用动画 ═══════════════════════════════════════════════ */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════ 响应式 ═══════════════════════════════════════════════ */ /* 中等宽度（13"/14" 笔记本 1025-1280px）：原 5fr/7fr 在此区间会让左列中文标题被压到 3-4 行，调整为 4fr/8fr 并缩小 gap，让左右两列呼吸更均衡 */ @media (min-width: 1025px) and (max-width: 1280px) { .hero-inner { grid-template-columns: 4fr 8fr; gap: clamp(2rem, 4vw, 3.5rem); } } @media (max-width: 1024px) { .hero-section { padding: clamp(2rem, 6vh, 4rem) 2rem 2.5rem; } .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; } .hero-left { align-items: center; } .hero-subtitle { max-width: 100%; } .hero-buttons { justify-content: center; } .hero-stats { justify-content: center; flex-wrap: wrap; } /* 窄屏下保留 stagger，但整体缩短延迟，避免等待感 */ .stack-item { animation-delay: calc(0.05s + var(--i, 0) * 35ms); } } @media (max-width: 768px) { .hero-section { padding: clamp(1.5rem, 4vh, 2.5rem) 1.5rem 2rem; } } @media (max-width: 480px) { .hero-buttons { flex-direction: column; align-items: center; } .btn-primary, .btn-ghost { width: 100%; max-width: 280px; justify-content: center; } /* 极小屏（<=360px）允许 stats 行换行，避免挤出视口 */ .hero-stats { gap: 0.75rem; } .hero-stat-sep { display: none; } } /* ══════════════════════════════════════════════ 触控设备（无真实 hover）专项修正 —— 根因：移动端 :active / :focus 仍会触发 hover 态规则， .stack-item:hover { transform: translateX(5px) } 会把卡片推出视口右边界，在 iOS / 部分 Android 浏览器上产生横向滚动条。 —— 策略：仅对 (hover: none) 指针设备关闭水平位移，保留颜色 / 阴影反馈，体验不受损。 ═══════════════════════════════════════════════ */ @media (hover: none) { .stack-item:hover, .stack-item:active, .stack-item:focus { transform: none; } .stack-item:hover .stack-arrow, .stack-item:active .stack-arrow, .stack-item:focus .stack-arrow { transform: none; } /* 触控设备上去掉 .btn-primary / .btn-ghost 的 translateY(-2px) hover 抖动 */ .btn-primary:hover, .btn-ghost:hover { transform: none; } } /* ══════════════════════════════════════════════ 减少动效偏好 ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .hero-eyebrow, .hero-title, .hero-subtitle, .hero-buttons, .hero-stats, .hero-right, .stack-item { animation: none !important; opacity: 1 !important; transform: none !important; } .hero-eyebrow-dot { animation: none !important; } .hero-right:hover .stack-item:not(:hover) { opacity: 1 !important; filter: none !important; } }