/* ================================================================= * ui-ux-pro-max.css · 工具箱阅读资源大全全站视觉系统 * 版本: v1.0.0 · 2026-06-22 * * 设计哲学 (参考 Apple Newsroom / Linear App / NYT Magazine): * · 单一权威源 · 整合 ui-ux-max.css + design-tokens-applied.css * · 大量留白 + 衬线 Display 标题 + 暖米色画布 * · 数字 1-9 标注章节,便于二次迭代 * · 通过 !important + cascade 末尾,覆盖所有内联样式 * * 加载顺序(index.html ): * design-tokens.css → design-system.css → ... → ui-ux-pro-max.css(最末) * ================================================================= */ /* ================================================================= * 1. 字体系统 · 三栈 * ================================================================= */ :root { /* Display 衬线(标题/书名/数字) */ --ux-font-display: "Copernicus", "Tiempos Headline", "Cormorant Garamond", "Songti SC", "Noto Serif SC", "Source Han Serif SC", serif; /* Sans 无衬线(正文/UI/按钮) */ --ux-font-sans: "StyreneB", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; /* Mono 等宽(数字徽章 / eyebrow) */ --ux-font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Roboto Mono", "Source Code Pro", Consolas, monospace; } /* ================================================================= * 2. 颜色 token · 与 DESIGN.md 统一(只取别名,不重复定义) * ================================================================= */ :root { --ux-coral: var(--token-coral, #cc785c); --ux-coral-active: var(--token-coral-active, #a9583e); --ux-ink: var(--token-ink, #141413); --ux-body: var(--token-body, #3d3d3a); --ux-muted: var(--token-muted, #6c6a64); --ux-canvas: var(--token-canvas, #faf9f5); --ux-surface-soft: var(--token-surface-soft, #f5f0e8); --ux-surface-card: var(--token-surface-card, #efe9de); --ux-surface-dark: var(--token-surface-dark, #181715); --ux-hairline: var(--token-hairline, #e6dfd8); --ux-on-primary: var(--token-on-primary, #ffffff); } /* ================================================================= * 3. 排版节奏 · Display / Body / Caption * ================================================================= */ /* 正文基线 */ html, body { font-family: var(--ux-font-sans) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: var(--ux-ink) !important; background-color: var(--ux-canvas) !important; line-height: 1.65 !important; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt", "ss01"; } /* 标题全部使用衬线 Display */ h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .featured-card-title, .book-title, .gradient-text { font-family: var(--ux-font-display) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--ux-ink) !important; line-height: 1.2 !important; } /* 段落 */ p { line-height: 1.7 !important; color: var(--ux-body); } /* 行内强调 · 高亮下划线 */ strong, b { font-weight: 600; color: var(--ux-ink); } /* ================================================================= * 4. 布局 · 容器与网格 * ================================================================= */ .content-container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(1.25rem, 3vw, 2.5rem) !important; padding-right: clamp(1.25rem, 3vw, 2.5rem) !important; width: 100% !important; box-sizing: border-box !important; } /* 通用 section 留白 */ section.py-16 { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 6vw, 5rem) !important; } /* ================================================================= * 5. 导航 · 磨砂玻璃 + 精致 logo * ================================================================= */ .nav-glass, nav.sticky.top-0, header nav[aria-label="主导航"] { background: rgba(250, 249, 245, 0.78) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-bottom: 1px solid var(--ux-hairline) !important; height: 64px !important; transition: background-color 0.3s ease, box-shadow 0.3s ease !important; } .nav-glass:hover, nav.sticky.top-0:hover { box-shadow: 0 1px 0 0 var(--ux-hairline); } /* 导航链接 */ .nav-link, header nav a { color: var(--ux-ink) !important; font-family: var(--ux-font-sans) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-decoration: none !important; padding: 8px 14px !important; border-radius: 8px !important; transition: background-color 0.2s ease, color 0.2s ease !important; } .nav-link:hover, header nav a:hover { background-color: var(--ux-surface-soft) !important; color: var(--ux-coral) !important; } .nav-link.active, header nav a.active { color: var(--ux-coral) !important; background-color: var(--ux-surface-card) !important; } /* ================================================================= * 6. 按钮系统 · 12/20 padding / 8 radius / 40h * ================================================================= */ .btn-primary, .nav-link-cta, .featured-card-cta { background-color: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border: 1px solid var(--ux-coral) !important; border-radius: 8px !important; padding: 12px 20px !important; height: 40px !important; font-family: var(--ux-font-sans) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04); } .btn-primary:hover, .nav-link-cta:hover, .featured-card-cta:hover { background-color: var(--ux-coral-active) !important; border-color: var(--ux-coral-active) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(204, 120, 92, 0.30); } .btn-primary:active, .nav-link-cta:active, .featured-card-cta:active { transform: scale(0.98) !important; } .btn-primary:focus-visible, .nav-link-cta:focus-visible, .featured-card-cta:focus-visible { outline: 3px solid var(--ux-coral) !important; outline-offset: 3px !important; } /* 文字按钮 / 链接按钮 */ .btn-text, .text-link, a.text-link { background: transparent !important; color: var(--ux-coral) !important; border: none !important; padding: 0 !important; height: auto !important; font-family: var(--ux-font-sans) !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; cursor: pointer; transition: color 0.2s ease !important; } .btn-text:hover, .text-link:hover { color: var(--ux-coral-active) !important; text-decoration: underline !important; } /* ================================================================= * 7. 卡片基础 * ================================================================= */ .book-card, .featured-card, .mood-card, .stat-card { background-color: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; overflow: hidden !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.2s ease !important; display: block; text-decoration: none !important; color: inherit; } .book-card:hover, .featured-card:hover, .mood-card:hover, .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(20, 20, 19, 0.08); border-color: var(--ux-coral) !important; } /* ================================================================= * 8. Hero Section · 大标题 + 搜索 * ================================================================= */ .hero-section { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem) !important; background-color: var(--ux-canvas) !important; position: relative; z-index: 1; } .hero-title { font-family: var(--ux-font-display) !important; font-size: clamp(2.25rem, 5.5vw, 4rem) !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; color: var(--ux-ink) !important; margin: 0 0 1.25rem !important; } .gradient-text { background: linear-gradient(135deg, var(--ux-coral) 0%, var(--ux-coral-active) 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .hero-subtitle { font-family: var(--ux-font-sans); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--ux-body); max-width: 56ch; margin: 0 0 2rem; } /* 搜索框 */ .search-container { max-width: 640px; margin: 0 auto; } .search-input, .search-bar input, input[type="text"], input[type="search"] { background-color: var(--ux-canvas) !important; color: var(--ux-ink) !important; font-family: var(--ux-font-sans) !important; font-size: 16px !important; line-height: 1.5 !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; padding: 14px 18px !important; height: 56px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; outline: none; width: 100%; box-sizing: border-box; } .search-input:focus, .search-bar input:focus, input[type="text"]:focus, input[type="search"]:focus { border-color: var(--ux-coral) !important; box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.12) !important; } .search-input::placeholder, .search-bar input::placeholder { color: var(--ux-muted); } /* ================================================================= * 9. Section Header · 标题与副标题 * ================================================================= */ .section-header { text-align: left; margin: 0 0 clamp(2rem, 4vw, 3rem) !important; } .section-title { font-family: var(--ux-font-display) !important; font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: var(--ux-ink) !important; margin: 0 0 0.625rem; } .section-subtitle { font-family: var(--ux-font-sans) !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--ux-body) !important; margin: 0; max-width: 60ch; } /* ================================================================= * 10. 统计卡(4 个数据) * ================================================================= */ .stat-card, .counter, .metric { background-color: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; padding: 1.5rem 1rem !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important; text-align: center; } .stat-card:hover, .counter:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 20, 19, 0.06); border-color: var(--ux-coral) !important; } .stat-value, .counter-value { font-family: var(--ux-font-display) !important; font-size: clamp(1.75rem, 4vw, 2.5rem) !important; font-weight: 400 !important; letter-spacing: -0.02em !important; color: var(--ux-coral) !important; line-height: 1.1 !important; margin: 0 0 0.25rem; } .stat-label, .counter-label { font-family: var(--ux-font-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ux-muted) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; } /* ================================================================= * 11. 心情选择器 · 6 张卡片网格 * ================================================================= */ .mood-picker { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 16px !important; } .mood-card { background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 16px !important; padding: 24px 16px !important; text-align: center; cursor: pointer; font-family: var(--ux-font-sans); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.2s ease, background-color 0.3s ease !important; position: relative; overflow: hidden; } .mood-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at 50% 0%, rgba(204, 120, 92, 0.08), transparent 60%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .mood-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 28px rgba(20, 20, 19, 0.08); border-color: var(--ux-coral) !important; background-color: var(--ux-surface-soft) !important; } .mood-card:hover::before { opacity: 1; } .mood-emoji { font-size: 36px; line-height: 1; margin-bottom: 12px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .mood-card:hover .mood-emoji { transform: scale(1.15) rotate(-6deg); } .mood-label { font-family: var(--ux-font-display) !important; font-size: 18px; font-weight: 500; color: var(--ux-ink); margin-bottom: 4px; } .mood-desc { font-family: var(--ux-font-sans); font-size: 12px; color: var(--ux-muted); letter-spacing: 0.05em; } /* ================================================================= * 12. 筛选器 · 分类与难度 * ================================================================= */ .chip-container { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: center; margin-bottom: 1.5rem; } .cat-chip, .diff-chip { background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 9999px !important; padding: 6px 6px 6px 14px !important; /* 右内距小(给数字徽章) */ font-family: var(--ux-font-sans) !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--ux-body) !important; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; /* 名称 与 数字 上下居中 */ justify-content: space-between; /* 名称左,数字右 */ gap: 8px; white-space: nowrap; line-height: 1; min-height: 34px; /* 统一高度便于对齐 */ } /* 名称部分:弹性占满剩余空间 */ .cat-chip .chip-label, .diff-chip .chip-label { display: inline-flex; align-items: center; gap: 4px; line-height: 1; } /* 数字徽章 · 完美居中 */ .chip-count { display: inline-flex; align-items: center; /* 关键:数字内容垂直居中 */ justify-content: center; /* 关键:数字内容水平居中 */ min-width: 28px; height: 24px; padding: 0 8px; background: var(--ux-surface-card); color: var(--ux-body); border-radius: 12px; font-size: 11.5px; font-weight: 600; line-height: 1; /* 数字基线校正 */ font-feature-settings: "tnum" 1; /* 等宽数字,避免抖动 */ font-variant-numeric: tabular-nums; /* 视觉重心微调 */ transform: translateY(0); } .cat-chip:hover, .diff-chip:hover { border-color: var(--ux-coral) !important; color: var(--ux-coral) !important; background-color: var(--ux-surface-soft) !important; } .cat-chip.active, .diff-chip.active { background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-color: var(--ux-coral) !important; } /* active 状态:数字徽章对比度增强 */ .cat-chip.active .chip-count, .diff-chip.active .chip-count { background: rgba(255, 255, 255, 0.95); color: var(--ux-coral); } /* ================================================================= * 13. 书库网格 · 卡片墙 * ================================================================= */ .book-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 16px !important; padding: 16px 0 !important; align-items: start; width: 100%; box-sizing: border-box; } .book-card { background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; overflow: hidden !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.2s ease !important; display: flex !important; flex-direction: column; text-decoration: none !important; color: inherit; position: relative; } .book-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 32px rgba(20, 20, 19, 0.08); border-color: var(--ux-coral) !important; } .book-card .book-cover { aspect-ratio: 3 / 4; width: 100%; background: var(--ux-surface-soft); overflow: hidden; position: relative; } .book-card .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .book-card:hover .book-cover img { transform: scale(1.05); } .book-card .book-title { font-family: var(--ux-font-display) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--ux-ink) !important; margin: 0 !important; padding: 10px 12px 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-card .book-meta { font-family: var(--ux-font-sans) !important; font-size: 11px !important; font-weight: 500 !important; color: var(--ux-muted) !important; padding: 4px 12px 12px !important; display: flex; align-items: center; gap: 6px; letter-spacing: 0.02em; } /* ================================================================= * 14. 阅读提示(Reading Tips) * ================================================================= */ section[aria-label="阅读提示"], section.py-16:has(.reading-tip) { background: var(--ux-surface-soft) !important; border-top: 1px solid var(--ux-hairline); border-bottom: 1px solid var(--ux-hairline); } .reading-tip { background: var(--ux-canvas); border: 1px solid var(--ux-hairline); border-radius: 12px; padding: 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .reading-tip:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20, 20, 19, 0.06); } .reading-tip-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--ux-surface-card); color: var(--ux-coral); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 12px; } /* ================================================================= * 15. CTA / Coral Callout * ================================================================= */ .callout-coral, .cta-coral { background: linear-gradient(135deg, var(--ux-coral) 0%, var(--ux-coral-active) 100%) !important; color: var(--ux-on-primary); border-radius: 16px !important; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 4rem) !important; text-align: center; font-family: var(--ux-font-sans); position: relative; overflow: hidden; } .callout-coral::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 50%); pointer-events: none; } .callout-coral > * { position: relative; z-index: 1; } .callout-coral h2, .callout-coral h3, .cta-coral h2 { color: var(--ux-on-primary) !important; font-family: var(--ux-font-display) !important; font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important; margin: 0 0 1rem; font-weight: 400; } .callout-coral p, .cta-coral p { color: var(--ux-on-primary) !important; margin: 0 0 1.5rem; opacity: 0.95; } .callout-coral .btn, .cta-coral .btn { background: var(--ux-canvas); color: var(--ux-ink) !important; border: 1px solid var(--ux-canvas); } .callout-coral .btn:hover, .cta-coral .btn:hover { background: var(--ux-surface-soft); color: var(--ux-coral) !important; border-color: var(--ux-surface-soft); } /* ================================================================= * 16. 页脚 · 三栏极简 * ================================================================= */ .footer-glass, footer.py-12 { background: var(--ux-surface-dark) !important; color: rgba(250, 249, 245, 0.85); padding: clamp(3rem, 5vw, 4rem) 0 2rem !important; border-top: 1px solid var(--ux-hairline); } .footer-glass h4, footer h4 { color: var(--ux-on-primary) !important; font-family: var(--ux-font-sans) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .footer-glass a, footer a { color: rgba(250, 249, 245, 0.7) !important; font-size: 14px; text-decoration: none; transition: color 0.2s ease; } .footer-glass a:hover, footer a:hover { color: var(--ux-coral) !important; text-decoration: none; } .footer-bottom { border-top: 1px solid rgba(250, 249, 245, 0.1); padding-top: 1.5rem; margin-top: 2rem; color: rgba(250, 249, 245, 0.5); font-size: 12px; text-align: center; } /* ================================================================= * 17. FAB · 返回顶部 * ================================================================= */ .fab, .back-to-top, [aria-label="返回顶部"] { position: fixed !important; right: 24px !important; bottom: 24px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border: none !important; box-shadow: 0 4px 12px rgba(20, 20, 19, 0.15) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .fab:hover, .back-to-top:hover, [aria-label="返回顶部"]:hover { background: var(--ux-coral-active) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20, 20, 19, 0.20) !important; } .fab:focus-visible, .back-to-top:focus-visible, [aria-label="返回顶部"]:focus-visible { outline: 3px solid var(--ux-coral) !important; outline-offset: 3px; } /* ================================================================= * 18. 移动端底部导航 * ================================================================= */ .mobile-bottom-nav, .bottom-tab-bar, nav[aria-label="底部导航"], nav[aria-label="移动端导航"] { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(250, 249, 245, 0.92) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-top: 1px solid var(--ux-hairline) !important; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-around; } .bottom-tab-item, .mobile-bottom-nav a, .bottom-tab-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; color: var(--ux-muted) !important; text-decoration: none; font-family: var(--ux-font-sans); font-size: 11px; border-radius: 8px; transition: color 0.2s ease, background-color 0.2s ease; } .bottom-tab-item.active, .mobile-bottom-nav a.active, .bottom-tab-bar a.active { color: var(--ux-coral) !important; } .bottom-tab-item i, .mobile-bottom-nav a i, .bottom-tab-bar a i { font-size: 18px; } /* 移动端为底部导航腾出空间 */ @media (max-width: 768px) { body { padding-bottom: 64px; } } /* ================================================================= * 19. 微交互 · 滚动进入动效 * ================================================================= */ @media (prefers-reduced-motion: no-preference) { .book-card, .featured-card, .mood-card, .stat-card { opacity: 0; transform: translateY(20px); animation: ux-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .book-card:nth-child(2n) { animation-delay: 0.05s; } .book-card:nth-child(3n) { animation-delay: 0.1s; } .book-card:nth-child(4n) { animation-delay: 0.15s; } .book-card:nth-child(5n) { animation-delay: 0.2s; } } @keyframes ux-fade-in { to { opacity: 1; transform: translateY(0); } } /* ================================================================= * 20. 滚动条 * ================================================================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ux-canvas); } ::-webkit-scrollbar-thumb { background: var(--ux-surface-card); border-radius: 9999px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: var(--ux-muted); } /* ================================================================= * 21. 链接与文字 * ================================================================= */ a { color: var(--ux-coral); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--ux-coral-active); text-decoration: underline; } /* ================================================================= * 22. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { html, body { background-color: #1a1816 !important; color: #faf9f5 !important; } .nav-glass, nav.sticky.top-0 { background: rgba(26, 24, 22, 0.78) !important; border-bottom-color: #2d2c28 !important; } .nav-link, header nav a { color: #faf9f5 !important; } .nav-link:hover, header nav a:hover { background-color: #2d2c28 !important; } .book-card, .featured-card, .mood-card, .stat-card, .reading-tip, .callout-coral, .footer-glass { background-color: #252320 !important; border-color: #2d2c28 !important; } .book-card .book-title, .featured-card-title, .section-title, .hero-title, .mood-label, .stat-value { color: #faf9f5 !important; } .book-card .book-meta, .featured-card-author, .section-subtitle, .mood-desc, .stat-label { color: #a09d96 !important; } .cat-chip, .diff-chip, .search-input, input[type="text"], input[type="search"] { background-color: #252320 !important; border-color: #2d2c28 !important; color: #faf9f5 !important; } .mobile-bottom-nav, .bottom-tab-bar { background: rgba(26, 24, 22, 0.92) !important; border-top-color: #2d2c28 !important; } .mood-picker .mood-card, .featured-section-header { border-color: #2d2c28 !important; } } /* ================================================================= * 23. A11y · 焦点态 / 跳过导航 / 减少动效 * ================================================================= */ *:focus-visible { outline: 3px solid var(--ux-coral) !important; outline-offset: 2px !important; border-radius: 6px; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--ux-coral); color: var(--ux-on-primary); padding: 10px 20px; border-radius: 8px; text-decoration: none; font-family: var(--ux-font-sans); font-size: 14px; font-weight: 500; transition: top 0.2s ease; } .skip-link:focus { top: 16px; color: var(--ux-on-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================= * 24. 响应式 · 三档断点 * ================================================================= */ @media (max-width: 1024px) { .hero-title { font-size: clamp(2rem, 4vw, 2.75rem) !important; } } @media (max-width: 768px) { .section-header { margin-bottom: 1.5rem !important; } .book-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px; } .mood-picker { grid-template-columns: repeat(2, 1fr) !important; } .stat-card, .counter { padding: 1.25rem 0.75rem !important; } } @media (max-width: 480px) { .content-container { padding-left: 1rem !important; padding-right: 1rem !important; } .book-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } .book-card .book-title { font-size: 12px !important; padding: 8px 8px 2px !important; } .book-card .book-meta { font-size: 10px !important; padding: 2px 8px 8px !important; } .hero-title { font-size: clamp(1.875rem, 8vw, 2.25rem) !important; } } @media (min-width: 1440px) { .content-container { max-width: 1408px !important; } .book-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 20px; } } /* ================================================================= * 25. 打印 * ================================================================= */ @media print { .nav-glass, .mobile-bottom-nav, .bottom-tab-bar, .fab, .back-to-top, [aria-label="返回顶部"] { display: none !important; } .book-card, .featured-card, .mood-card { box-shadow: none !important; border: 1px solid var(--ux-hairline) !important; break-inside: avoid; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v1.0.0 * ================================================================= */ /* ================================================================= * ui-ux-pro-max.css v2.0.0 增量升级 · 2026-06-22 * * 补全 6 大未覆盖领域: * 26. 阅读进度条(顶部 1-2px 横线) * 27. 真实 FAB 按钮类名修正(.fab-top) * 28. 书封包装器与遮罩层(.book-cover-wrapper / .book-cover-overlay) * 29. Hero 装饰元素(.blob / .hero-bg-grid) * 30. 错误 / 空状态(empty state) * 31. 触摸设备优化(>=44px 触摸目标) * 32. 进度条与滑块 * 33. Toast 通知与提示框 * 34. 移动端导航滚动隐藏(避免 iOS rubber band) * 35. 加载骨架屏 * * 设计原则: * · 不破坏 v1 已稳定的视觉系统 * · 全部使用 !important 兼容内联样式 * · 与 DESIGN.md token 体系保持一致 * ================================================================= */ /* ================================================================= * 26. 阅读进度条 · 顶部 1-2px 横线 * ================================================================= */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; background: transparent; pointer-events: none; transition: opacity 0.2s ease; } .reading-progress::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: linear-gradient(90deg, var(--ux-coral) 0%, var(--ux-coral-active) 100%); box-shadow: 0 0 8px rgba(204, 120, 92, 0.5); transition: width 0.1s ease-out; } /* ================================================================= * 27. 真实 FAB 按钮 · 修正类名 * ================================================================= */ .fab-top, .fab-top#fabTop, button[aria-label="返回顶部"] { position: fixed !important; right: 24px !important; bottom: 24px !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border: none !important; box-shadow: 0 4px 12px rgba(20, 20, 19, 0.15) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; z-index: 50; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.3s ease; font-size: 18px; opacity: 0; visibility: hidden; transform: translateY(10px); } .fab-top.is-visible, .fab-top#fabTop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .fab-top:hover, button[aria-label="返回顶部"]:hover { background: var(--ux-coral-active) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(20, 20, 19, 0.20) !important; } .fab-top:focus-visible, button[aria-label="返回顶部"]:focus-visible { outline: 3px solid var(--ux-coral) !important; outline-offset: 3px; } /* 移动端 FAB 调整(避免与底部导航重叠) */ @media (max-width: 768px) { .fab-top, .fab-top#fabTop, button[aria-label="返回顶部"] { right: 16px !important; bottom: 80px !important; width: 44px !important; height: 44px !important; } } /* ================================================================= * 28. 书封包装器与遮罩层 * ================================================================= */ .book-cover-wrapper { position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; background: var(--ux-surface-soft); border-radius: 0; isolation: isolate; } .book-cover { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease !important; will-change: transform; } .book-card:hover .book-cover, .book-cover-wrapper:hover .book-cover { transform: scale(1.08) !important; filter: brightness(1.05); } /* 悬停遮罩 · 显示"立即阅读" */ .book-cover-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 19, 0) 0%, rgba(20, 20, 19, 0.65) 100%); display: flex !important; align-items: flex-end; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: 0; } .book-cover-overlay::before { content: "立即阅读 \2192"; color: var(--ux-on-primary) !important; font-family: var(--ux-font-sans) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.05em; background: var(--ux-coral); padding: 8px 16px; border-radius: 9999px; transform: translateY(8px); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .book-card:hover .book-cover-overlay, .book-cover-wrapper:hover .book-cover-overlay { opacity: 1; } .book-card:hover .book-cover-overlay::before, .book-cover-wrapper:hover .book-cover-overlay::before { transform: translateY(0); } /* ================================================================= * 29. Hero 装饰元素 · .blob / .hero-bg-grid * ================================================================= */ .blob, .hero-bg-grid { position: absolute; pointer-events: none; z-index: 0; } .blob { border-radius: 50% !important; filter: blur(80px) !important; opacity: 0.5; animation: ux-blob-float 20s ease-in-out infinite; mix-blend-mode: multiply; } @keyframes ux-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(20px, -30px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } .hero-bg-grid { background-image: linear-gradient(var(--ux-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--ux-hairline) 1px, transparent 1px) !important; background-size: 40px 40px !important; opacity: 0.4; mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); } /* Hero 内容必须在装饰元素之上 */ .hero-section > * { position: relative; z-index: 1; } /* ================================================================= * 30. 错误 / 空状态 * ================================================================= */ .empty-state, .no-results, .error-state { text-align: center; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem) !important; background: var(--ux-surface-soft) !important; border: 1px dashed var(--ux-hairline) !important; border-radius: 16px !important; color: var(--ux-muted) !important; font-family: var(--ux-font-sans) !important; max-width: 480px; margin: 2rem auto; } .empty-state-icon { font-size: 48px; margin-bottom: 16px; display: block; color: var(--ux-muted); opacity: 0.6; } .empty-state-title { font-family: var(--ux-font-display) !important; font-size: 20px !important; font-weight: 500 !important; color: var(--ux-ink) !important; margin: 0 0 8px; } .empty-state-desc { font-size: 14px !important; line-height: 1.6; color: var(--ux-muted); margin: 0 0 1.5rem; } .empty-state-action { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color 0.2s ease, transform 0.2s ease; } .empty-state-action:hover { background: var(--ux-coral-active) !important; color: var(--ux-on-primary) !important; transform: translateY(-1px); text-decoration: none; } /* ================================================================= * 31. 触摸设备优化 · >=44px 触摸目标 * ================================================================= */ @media (hover: none) and (pointer: coarse) { /* 所有可点击元素最小 44x44 触摸目标 */ .cat-chip, .diff-chip, .mood-card, .book-card, .featured-card, .nav-link, header nav a { min-height: 44px; } /* 触摸时显示反馈 */ .cat-chip:active, .diff-chip:active, .mood-card:active { transform: scale(0.96) !important; background: var(--ux-surface-card) !important; } /* 禁用触摸设备上的 hover 效果(避免 iOS 双击延迟) */ .book-card:hover, .featured-card:hover, .mood-card:hover, .stat-card:hover { transform: none; } /* 触摸时启用 :active 反馈 */ .book-card:active, .featured-card:active { transform: scale(0.98) !important; transition-duration: 0.1s; } } /* ================================================================= * 32. 进度条与滑块 * ================================================================= */ progress, .progress-bar, [role="progressbar"] { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border: none; border-radius: 9999px; background: var(--ux-surface-card) !important; overflow: hidden; } progress::-webkit-progress-bar { background: var(--ux-surface-card) !important; border-radius: 9999px; } progress::-webkit-progress-value, .progress-bar-fill { background: linear-gradient(90deg, var(--ux-coral) 0%, var(--ux-coral-active) 100%) !important; border-radius: 9999px; transition: width 0.4s ease; } progress::-moz-progress-bar { background: var(--ux-coral) !important; border-radius: 9999px; } /* 滑块 */ input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; background: var(--ux-surface-card) !important; border-radius: 9999px; outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; background: var(--ux-coral) !important; border: 2px solid var(--ux-on-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(20, 20, 19, 0.15); transition: transform 0.15s ease; } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--ux-coral) !important; border: 2px solid var(--ux-on-primary); border-radius: 50%; cursor: pointer; } /* ================================================================= * 33. Toast 通知 * ================================================================= */ .toast { position: fixed; right: 24px; bottom: 80px; z-index: 9998; background: var(--ux-surface-dark) !important; color: var(--ux-on-primary) !important; padding: 12px 20px; border-radius: 12px; font-family: var(--ux-font-sans); font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(20, 20, 19, 0.20); display: inline-flex; align-items: center; gap: 10px; transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-width: 320px; } .toast.is-visible { transform: translateX(0); } .toast-icon { font-size: 18px; color: var(--ux-coral); flex-shrink: 0; } .toast-close { margin-left: auto; background: none; border: none; color: var(--ux-on-primary); opacity: 0.7; cursor: pointer; padding: 4px; border-radius: 4px; transition: opacity 0.2s ease; } .toast-close:hover { opacity: 1; } /* ================================================================= * 34. 移动端导航滚动隐藏(避免与滚动冲突) * ================================================================= */ @media (max-width: 768px) { .mobile-bottom-nav, .bottom-tab-bar { transform: translateY(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .mobile-bottom-nav.is-hidden, .bottom-tab-bar.is-hidden { transform: translateY(100%); } /* 滚动时增加顶部阴影 */ .nav-glass.is-scrolled { box-shadow: 0 1px 12px rgba(20, 20, 19, 0.06); } } /* ================================================================= * 35. 加载骨架屏 * ================================================================= */ .skeleton { background: linear-gradient(90deg, var(--ux-surface-soft) 0%, var(--ux-surface-card) 50%, var(--ux-surface-soft) 100%) !important; background-size: 200% 100% !important; border-radius: 8px; animation: ux-skeleton-shimmer 1.5s ease-in-out infinite; } @keyframes ux-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-text { height: 14px; margin-bottom: 8px; } .skeleton-text:last-child { width: 60%; } .skeleton-card { aspect-ratio: 3 / 4; border-radius: 12px; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none !important; } } /* ================================================================= * v2.0.0 暗色模式补丁 · 补全新组件 * ================================================================= */ @media (prefers-color-scheme: dark) { .reading-progress::after { box-shadow: 0 0 8px rgba(204, 120, 92, 0.7); } .book-cover-wrapper { background: #1a1816; } .empty-state, .no-results, .error-state { background: #1f1e1b !important; border-color: #2d2c28 !important; } .empty-state-title { color: #faf9f5 !important; } .blob { opacity: 0.3; } .hero-bg-grid { opacity: 0.15; } .mobile-bottom-nav, .bottom-tab-bar { background: rgba(26, 24, 22, 0.92) !important; border-top-color: #2d2c28 !important; } .skeleton { background: linear-gradient(90deg, #252320 0%, #2d2c28 50%, #252320 100%) !important; } } /* ================================================================= * v2.0.0 响应式补丁 * ================================================================= */ @media (max-width: 768px) { .toast { right: 16px; left: 16px; bottom: 80px; max-width: none; } .blob { filter: blur(60px) !important; } } @media (max-width: 480px) { .toast { bottom: 72px; padding: 10px 16px; font-size: 13px; } } /* ================================================================= * v2.0.0 打印补丁 * ================================================================= */ @media print { .reading-progress, .toast, .fab-top, button[aria-label="返回顶部"], .skeleton { display: none !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.0.0 * * 总章节数: 35 (v1 25 + v2 10) * 影响范围: index.html 全部 section + 滚动进度 + 书封悬停 + 触摸优化 * ================================================================= */ /* ================================================================= * v2.1.0 紧急修复 · 图片大小限制补丁 · 2026-06-22 * * 根因: * ·

被错误地放在 .book-cover-wrapper 内部 * · 撑大 wrapper 高度,破坏 aspect-ratio: 3/4 限制 * · SVG 文件内联 width="800" height="1200" 突破部分 CSS 限制 * · 缺少 max-width / max-height 兜底 * * 策略: * · 36. wrapper 强制限制图片区域,标题移出图片可视区 * · 37. 全局 max-width / max-height 兜底 * · 38. 防御 SVG 内联尺寸属性 * · 39. 书库卡片 .book-title 修复(从 wrapper 移出后的样式适配) * ================================================================= */ /* ================================================================= * 36. wrapper 强制限制图片区域 * ================================================================= */ .book-cover-wrapper { position: relative !important; aspect-ratio: 3 / 4 !important; width: 100% !important; max-width: 100% !important; max-height: 320px !important; /* 关键:硬上限,防止被 h3 撑大 */ min-height: 0 !important; /* 关键:防止被内容撑大 */ overflow: hidden !important; background: var(--ux-surface-soft); isolation: isolate; display: block !important; box-sizing: border-box !important; } /* wrapper 内的 h3 标题(历史遗留) · 移到图片下方,但不参与高度计算 */ .book-cover-wrapper .book-title { position: absolute !important; left: 0 !important; right: 0 !important; bottom: -32px !important; /* 关键:放到图片可视区之外 */ z-index: 0; background: var(--ux-canvas) !important; margin: 0 !important; padding: 8px 12px 12px !important; font-family: var(--ux-font-display) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--ux-ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; min-height: 56px; /* 给标题一个稳定的占位 */ } /* 父级 book-card 提升为 relative + 增加 padding-bottom 给标题让位 */ .book-card { position: relative !important; padding-bottom: 64px !important; /* 关键:为 wrapper 外溢的标题预留空间 */ } /* wrapper 内的图片与遮罩强制覆盖整个可视区 */ .book-cover-wrapper .book-cover, .book-cover-wrapper .book-cover-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } /* ================================================================= * 37. 全局 max 兜底 · 防御性修复 * ================================================================= */ img, svg, picture, video, canvas, iframe { max-width: 100% !important; height: auto !important; } /* 但 .book-cover 维持其自定义 height */ .book-cover { max-width: 100% !important; } /* ================================================================= * 38. 防御 SVG 内联尺寸属性 * ================================================================= */ /* SVG 在 中时,强制使用容器尺寸 */ img[src$=".svg"] { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; } /* ================================================================= * 39. book-meta 标签修复(在 wrapper 外,但与原 .book-title 区分) * ================================================================= */ .book-card .book-meta { position: absolute !important; left: 12px !important; right: 12px !important; bottom: 8px !important; z-index: 2; padding: 0 !important; font-family: var(--ux-font-sans) !important; font-size: 11px !important; font-weight: 500 !important; color: var(--ux-muted) !important; display: flex; align-items: center; gap: 6px; background: transparent !important; } /* 如果 book-title 是 wrapper 的兄弟节点(正确结构),使用这个样式 */ .book-card > .book-title { font-family: var(--ux-font-display) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--ux-ink) !important; margin: 0 !important; padding: 10px 12px 4px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; position: static !important; background: transparent !important; min-height: 0 !important; } /* ================================================================= * v2.1.0 响应式补丁 * ================================================================= */ @media (max-width: 768px) { .book-cover-wrapper { max-height: 240px !important; } .book-card { padding-bottom: 60px !important; } } @media (max-width: 480px) { .book-cover-wrapper { max-height: 200px !important; } .book-card { padding-bottom: 56px !important; } } @media (min-width: 1440px) { .book-cover-wrapper { max-height: 360px !important; } .book-card { padding-bottom: 68px !important; } } /* ================================================================= * v2.1.0 暗色模式补丁 * ================================================================= */ @media (prefers-color-scheme: dark) { .book-cover-wrapper .book-title { background: #252320 !important; color: #faf9f5 !important; } .book-cover-wrapper { background: #1a1816 !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.1.0 * * 总章节数: 35 + 4 补丁 = 39 章节 * 修复目标: 所有书库卡片图片严格限制 3:4 + max-height: 320px * ================================================================= */ /* ================================================================= * v2.1.1 紧急修复 · 桌面端隐藏移动端元素 · 2026-06-22 * * 根因(截图所见中央彩色方块列): * · v1.0 移动端底部导航 .mobile-bottom-nav 缺少桌面端 display:none * · v2.0 FAB .fab-top 缺少桌面端 display:none + 默认未隐藏 * · 桌面端错误显示了多个移动端元素 * * 修复策略: * · 40. 桌面端(≥769px)强制隐藏移动端底部导航 / 底部 tab bar * · 41. FAB 默认隐藏,仅在 is-visible 时显示 * · 42. body padding-bottom 仅在移动端生效 * · 43. blob 装饰元素绝对定位 + 防止重叠 * · 44. 修正 body padding-bottom 桌面端置零 * ================================================================= */ /* ================================================================= * 40. 桌面端(≥769px)强制隐藏移动端元素 * ================================================================= */ @media (min-width: 769px) { .mobile-bottom-nav, .bottom-tab-bar, nav[aria-label="底部导航"], nav[aria-label="移动端导航"] { display: none !important; } } /* ================================================================= * 41. FAB 默认隐藏 · 仅 is-visible 时显示 * ================================================================= */ .fab-top, .fab-top#fabTop, button[aria-label="返回顶部"] { /* 复用 v2.0 已有规则,这里仅作为加固 */ pointer-events: none; display: none !important; } .fab-top.is-visible, .fab-top#fabTop.is-visible, .fab-top.visible, .fab-top#fabTop.visible { display: inline-flex !important; pointer-events: auto; opacity: 1; visibility: visible; transform: translateY(0); } /* ================================================================= * 42. body padding-bottom 仅在移动端生效 * ================================================================= */ @media (min-width: 769px) { body { padding-bottom: 0 !important; } } /* ================================================================= * 43. blob 装饰元素 · 绝对定位 + 防止重叠 + 默认隐藏 * ================================================================= */ .blob { display: none !important; /* 默认隐藏,避免影响内容流 */ } .hero-section .blob, .blob-1, .blob-2, .blob-3 { position: absolute !important; pointer-events: none; z-index: 0; } @media (min-width: 1200px) { /* 大屏才显示装饰元素,避免挤占内容 */ .blob { display: block !important; width: 400px !important; height: 400px !important; border-radius: 50% !important; filter: blur(80px) !important; opacity: 0.35; mix-blend-mode: multiply; } .blob-1 { top: 10% !important; left: -100px !important; background: var(--ux-coral) !important; } .blob-2 { top: 50% !important; right: -150px !important; background: #d4a574 !important; /* 暖米橙色 */ } .blob-3 { bottom: 10% !important; left: 30% !important; background: #b4a6d4 !important; /* 淡紫色 */ opacity: 0.2; } } /* ================================================================= * 44. hero-bg-grid 装饰 · 默认隐藏 * ================================================================= */ .hero-bg-grid { display: none !important; } @media (min-width: 1200px) { .hero-bg-grid { display: block !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background-image: linear-gradient(var(--ux-hairline) 1px, transparent 1px), linear-gradient(90deg, var(--ux-hairline) 1px, transparent 1px) !important; background-size: 48px 48px !important; opacity: 0.25; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 70%); pointer-events: none; } } /* ================================================================= * 45. 关键布局防御 · 防止 v2.0/v2.1.0 错误继承 * ================================================================= */ /* .book-cover-wrapper 内的 h3 不应被绝对定位影响布局 */ .book-cover-wrapper { position: relative !important; } /* book-grid 防御 · 防止 aspect-ratio 与 max-height 冲突 */ .book-grid .book-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; height: auto !important; min-height: 0 !important; } /* 防止 v2.1.0 的 h3 bottom: -32px 异常溢出 */ @media (min-width: 769px) { .book-cover-wrapper .book-title { position: static !important; background: transparent !important; padding: 10px 12px 4px !important; bottom: auto !important; min-height: 0 !important; margin-top: 8px !important; } .book-card { padding-bottom: 0 !important; } .book-card .book-meta { position: static !important; padding: 4px 12px 12px !important; } } /* ================================================================= * 46. v2.1.0 图片限制补丁兼容修复 * (修正 v2.1.0 在桌面端把 h3 移出的副作用) * ================================================================= */ @media (min-width: 769px) { /* wrapper 内的 h3 改回普通布局(因为桌面端有足够空间) */ .book-cover-wrapper { max-height: 360px !important; padding-bottom: 0 !important; } /* 修正 v2.1.0 的 h3 移出,改为静态布局 */ .book-cover-wrapper .book-cover, .book-cover-wrapper .book-cover-overlay { position: absolute !important; } } /* ================================================================= * 47. 触摸设备优化兼容 * ================================================================= */ @media (max-width: 768px) { .book-card { padding-bottom: 60px !important; } .book-cover-wrapper .book-title { position: absolute !important; bottom: -32px !important; background: var(--ux-canvas) !important; padding: 8px 12px 12px !important; } } @media (max-width: 480px) { .book-card { padding-bottom: 56px !important; } } @media (min-width: 1440px) { .book-cover-wrapper { max-height: 360px !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.1.1 * * 修复结果: * · 桌面端(≥769px)不再显示移动端底部导航 * · FAB 按钮默认隐藏,仅滚动后显示 * · blob / hero-bg-grid 仅在大屏(≥1200px)显示 * · 桌面端书库卡片 h3 回到普通流式布局 * · 移动端保持 h3 绝对定位的图片限制 * ================================================================= */ /* ================================================================= * v2.2.0 编辑精选 · 4列立方体网格 · 2026-06-22 * * 设计目标: * · 4列(桌面) → 3列(平板) → 2列(大手机) → 1列(手机) * · 3D 立方体效果:perspective + rotateX/rotateY + 多层 box-shadow * · hover 时卡片"翻转"上升,光影跟随 * · 数据编号 01-08 错落分布,营造层次感 * * 章节: 48-53 * ================================================================= */ /* ================================================================= * 48. featured-grid · 4列立方体网格容器 * ================================================================= */ .featured-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; /* 桌面 4 列 */ gap: 24px !important; margin-top: 56px !important; margin-bottom: 24px !important; perspective: 1500px !important; /* 3D 透视 */ perspective-origin: 50% 30%; transform-style: preserve-3d; } /* ================================================================= * 49. cube-card · 3D 立方体卡片核心样式 * ================================================================= */ .featured-grid .cube-card, .featured-card.cube-card { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: 280px !important; padding: 24px 22px 22px !important; background: linear-gradient(135deg, #faf9f5 0%, #f5f0e8 100%) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 16px !important; text-decoration: none !important; color: inherit !important; overflow: hidden !important; transform-style: preserve-3d !important; /* 3D 立方体初始视角:轻微倾斜 */ transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateZ(0) !important; /* 多层阴影:模拟立方体立体感 */ box-shadow: 0 1px 1px rgba(204, 120, 92, 0.04), 0 4px 8px rgba(204, 120, 92, 0.06), 0 12px 24px rgba(204, 120, 92, 0.08), 0 24px 48px rgba(204, 120, 92, 0.10) !important; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease !important; cursor: pointer; } /* 立方体左侧高光条(模拟光线从左上射入) */ .featured-grid .cube-card::before, .featured-card.cube-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, rgba(204, 120, 92, 0.8) 0%, rgba(204, 120, 92, 0.4) 50%, rgba(204, 120, 92, 0.1) 100%); box-shadow: 0 0 12px rgba(204, 120, 92, 0.4); } /* 立方体右上角渐变高光(模拟立方体顶面) */ .featured-grid .cube-card::after, .featured-card.cube-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 60%); pointer-events: none; opacity: 0.5; transition: opacity 0.3s ease; } /* ================================================================= * 50. cube-card · hover 状态(立方体"翻转"上升) * ================================================================= */ .featured-grid .cube-card:hover, .featured-card.cube-card:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(40px) translateY(-8px) !important; border-color: var(--ux-coral) !important; box-shadow: 0 2px 4px rgba(204, 120, 92, 0.08), 0 8px 16px rgba(204, 120, 92, 0.12), 0 24px 48px rgba(204, 120, 92, 0.16), 0 48px 96px rgba(204, 120, 92, 0.20) !important; } .featured-grid .cube-card:hover::after, .featured-card.cube-card:hover::after { opacity: 1; } /* ================================================================= * 51. cube-card · 错落分布(奇偶行不同倾斜) * ================================================================= */ /* 第 2、6 张:左倾 */ .featured-grid .cube-card[data-num="02"], .featured-grid .cube-card[data-num="06"] { transform: perspective(1000px) rotateX(2deg) rotateY(3deg) translateZ(0) !important; } /* 第 3、7 张:俯视 */ .featured-grid .cube-card[data-num="03"], .featured-grid .cube-card[data-num="07"] { transform: perspective(1000px) rotateX(-2deg) rotateY(0deg) translateZ(0) !important; } /* 第 4、8 张:右倾 */ .featured-grid .cube-card[data-num="04"], .featured-grid .cube-card[data-num="08"] { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateZ(0) !important; } /* 偶数行 hover 时也居中 */ .featured-grid .cube-card[data-num="02"]:hover, .featured-grid .cube-card[data-num="06"]:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(40px) translateY(-8px) !important; } .featured-grid .cube-card[data-num="03"]:hover, .featured-grid .cube-card[data-num="07"]:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(40px) translateY(-8px) !important; } .featured-grid .cube-card[data-num="04"]:hover, .featured-grid .cube-card[data-num="08"]:hover { transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(40px) translateY(-8px) !important; } /* ================================================================= * 52. cube-card · 内部元素(适配 3D 变换) * ================================================================= */ .cube-card .featured-card-num { position: absolute !important; right: 16px !important; bottom: -10px !important; font-family: var(--ux-font-display) !important; font-size: 64px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--ux-coral) !important; opacity: 0.08 !important; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .cube-card:hover .featured-card-num { opacity: 0.16 !important; transform: translateY(-4px); } .cube-card .featured-card-icon { width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 10px !important; margin-bottom: 12px !important; transition: transform 0.3s ease; } .cube-card:hover .featured-card-icon { transform: rotate(-6deg) scale(1.05); } .cube-card .featured-badge { display: inline-block; font-family: var(--ux-font-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--ux-coral) !important; margin-bottom: 6px !important; } .cube-card .featured-card-title { font-family: var(--ux-font-display) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ux-ink) !important; margin: 0 0 4px 0 !important; } .cube-card .featured-card-author { font-family: var(--ux-font-sans) !important; font-size: 12px !important; color: var(--ux-muted) !important; margin: 0 0 10px 0 !important; } .cube-card .featured-card-desc { font-family: var(--ux-font-sans) !important; font-size: 13px !important; line-height: 1.5 !important; font-style: italic; color: var(--ux-body-strong) !important; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cube-card .featured-card-cta { display: inline-flex !important; align-items: center !important; gap: 6px; margin-top: 14px !important; padding: 8px 14px !important; font-family: var(--ux-font-sans) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--ux-on-primary) !important; background: var(--ux-coral) !important; border-radius: 999px !important; align-self: flex-start !important; transition: transform 0.2s ease; } .cube-card:hover .featured-card-cta { transform: translateX(4px); } .cube-card .featured-card-glow { display: none !important; /* 立方体有阴影,不再需要 glow */ } /* ================================================================= * 53. 响应式 · 4列 → 3列 → 2列 → 1列 * ================================================================= */ /* 平板:3列 */ @media (max-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } } /* 大手机 / 小平板:2列 */ @media (max-width: 768px) { .featured-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; margin-top: 36px !important; } .cube-card { min-height: 240px !important; padding: 18px 16px 16px !important; } .cube-card .featured-card-num { font-size: 48px !important; } .cube-card .featured-card-title { font-size: 16px !important; } } /* 手机:1列 */ @media (max-width: 480px) { .featured-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .cube-card { min-height: 200px !important; transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0) !important; } .cube-card:hover { transform: perspective(1000px) translateY(-4px) translateZ(20px) !important; } .cube-card .featured-card-num { font-size: 40px !important; } } /* 宽屏:5列 */ @media (min-width: 1440px) { .featured-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 28px !important; } } /* ================================================================= * 54. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { .featured-grid .cube-card, .featured-card.cube-card { background: linear-gradient(135deg, #2a2723 0%, #1f1c19 100%) !important; border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.6) !important; } .cube-card .featured-card-title { color: #faf9f5 !important; } .cube-card .featured-card-icon { background: #252320 !important; border-color: rgba(255, 255, 255, 0.1) !important; } } /* ================================================================= * 55. 触摸设备 / reduced-motion 优化 * ================================================================= */ @media (hover: none) and (pointer: coarse) { .cube-card { transform: none !important; } .cube-card:hover { transform: translateY(-2px) !important; } } @media (prefers-reduced-motion: reduce) { .cube-card { transition: none !important; } .cube-card:hover { transform: translateY(-2px) !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.0 * * 新增章节: 48-55 (共 8 个新章节) * 总章节数: 55 章节 * ================================================================= */ /* ================================================================= * v2.2.1 顶部导航 · 三段式布局 · 2026-06-22 * * 设计目标: * · 左侧: 工具箱 logo * · 中间: 4 个导航链接(精选/心情/书库/工具箱)严格居中 * · 右侧: 开始阅读 CTA 按钮靠右 * * 实现策略: * · 父容器: position: relative (作为绝对定位的基准) * · 中间导航: position: absolute; left: 50%; transform: translateX(-50%) * · 右侧 CTA: margin-left: auto (推到最右) * * 章节: 56-59 * ================================================================= */ /* ================================================================= * 56. 顶部导航 · 父容器(三段式布局) * ================================================================= */ .nav-glass > .content-container { position: relative !important; } .nav-glass > .content-container > .flex { position: relative !important; display: flex !important; align-items: center !important; height: 64px !important; width: 100% !important; } /* ================================================================= * 57. 中间 4 个导航链接 · 严格居中 * ================================================================= */ .nav-glass .hidden.md\\:flex, .nav-glass > .content-container > .flex > .hidden.md\\:flex, .nav-glass div[class*="md:flex"] { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 32px !important; z-index: 2; } /* ================================================================= * 58. 右侧 CTA 按钮 · 推到最右 * ================================================================= */ .nav-glass .nav-link-cta, .nav-glass > .content-container > .flex > a.nav-link-cta { margin-left: auto !important; position: relative !important; z-index: 2; } /* ================================================================= * 59. 响应式 · 移动端导航 * ================================================================= */ @media (max-width: 768px) { /* 移动端隐藏中间导航(Tailwind hidden 默认) */ .nav-glass .hidden.md\\:flex, .nav-glass div[class*="md:flex"] { display: none !important; } } @media (min-width: 769px) { .nav-glass .hidden.md\\:flex, .nav-glass div[class*="md:flex"] { display: flex !important; } } /* ================================================================= * 60. 顶部导航 · hover 微交互 * ================================================================= */ .nav-glass .nav-link { position: relative !important; padding: 8px 4px !important; transition: color 0.2s ease, transform 0.2s ease !important; } .nav-glass .nav-link::after { content: '' !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: 0 !important; height: 2px !important; background: var(--ux-coral) !important; transform: translateX(-50%) !important; transition: width 0.3s ease !important; border-radius: 2px; } .nav-glass .nav-link:hover::after, .nav-glass .nav-link.active::after { width: 100% !important; } .nav-glass .nav-link:hover { color: var(--ux-coral) !important; } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.1 * * 新增章节: 56-60 (共 5 个新章节) * 总章节数: 60 章节 * ================================================================= */ /* ================================================================= * v2.2.2 编辑精选 · 长方形 + 翻牌效果 · 2026-06-22 * * 设计目标: * · 卡片改为长方形(高度 ≥360px,比宽略大) * · 默认显示正面:图标 + 书名 + 作者 + CTA * · Hover 翻牌:整个卡片 180° rotateY,显示背面金句 * · 翻牌时背面旋转 0° 面向用户,正面旋转 180° 隐藏 * * 关键 CSS: * · transform-style: preserve-3d * · backface-visibility: hidden * · transition: transform 0.7s cubic-bezier * · 子元素:position: absolute; inset: 0 * * 章节: 61-65 * ================================================================= */ /* ================================================================= * 61. cube-card · 长方形 + 翻牌容器 * ================================================================= */ .featured-grid .cube-card, .featured-card.cube-card { position: relative !important; display: block !important; width: 100% !important; min-height: 360px !important; /* 长方形:高度 > 宽度感 */ height: 360px !important; /* 固定高度保证长方形比例 */ padding: 0 !important; /* 子元素绝对定位,父级无 padding */ background: linear-gradient(135deg, #faf9f5 0%, #f5f0e8 100%) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 14px !important; text-decoration: none !important; color: inherit !important; overflow: hidden !important; transform-style: preserve-3d !important; perspective: 1200px !important; /* 翻牌初始状态:正面朝向用户 */ transform: rotateY(0deg) !important; box-shadow: 0 1px 1px rgba(204, 120, 92, 0.04), 0 4px 8px rgba(204, 120, 92, 0.06), 0 12px 24px rgba(204, 120, 92, 0.08) !important; transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease !important; cursor: pointer; } /* 移除立方体 ::before/::after 装饰(翻牌时不能有装饰元素遮挡) */ .featured-grid .cube-card::before, .featured-card.cube-card::before, .featured-grid .cube-card::after, .featured-card.cube-card::after { display: none !important; } /* ================================================================= * 62. cube-card · hover 翻牌状态 * ================================================================= */ .featured-grid .cube-card:hover, .featured-card.cube-card:hover { transform: rotateY(180deg) !important; border-color: var(--ux-coral) !important; box-shadow: 0 2px 4px rgba(204, 120, 92, 0.08), 0 8px 16px rgba(204, 120, 92, 0.12), 0 24px 48px rgba(204, 120, 92, 0.16) !important; } /* ================================================================= * 63. cube-card · 正面与背面(子元素) * ================================================================= */ /* 正面:图标 + 标题 + 作者 + CTA */ .cube-card .featured-card-num, .cube-card .featured-card-icon, .cube-card .featured-card-text, .cube-card .featured-card-cta { position: absolute !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.4s ease !important; } /* 正面(默认显示) - 编号大字 */ .cube-card .featured-card-num { top: 16px !important; right: 20px !important; bottom: auto !important; font-family: var(--ux-font-display) !important; font-size: 48px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--ux-coral) !important; opacity: 0.12 !important; transform: rotateY(0deg) !important; z-index: 1; pointer-events: none; } /* 正面 - 图标 */ .cube-card .featured-card-icon { top: 32px !important; left: 24px !important; width: 52px !important; height: 52px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 28px !important; background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; transform: rotateY(0deg) !important; z-index: 2; } /* 正面 - 文字(徽章+标题+作者) */ .cube-card .featured-card-text { top: 100px !important; left: 24px !important; right: 24px !important; bottom: auto !important; transform: rotateY(0deg) !important; z-index: 2; } .cube-card .featured-badge { display: inline-block; font-family: var(--ux-font-sans) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: var(--ux-coral) !important; margin-bottom: 8px !important; } .cube-card .featured-card-title { font-family: var(--ux-font-display) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ux-ink) !important; margin: 0 0 6px 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cube-card .featured-card-author { font-family: var(--ux-font-sans) !important; font-size: 12px !important; color: var(--ux-muted) !important; margin: 0 !important; } /* 正面 - CTA 按钮(底部) */ .cube-card .featured-card-cta { bottom: 24px !important; left: 24px !important; display: inline-flex !important; align-items: center !important; gap: 6px; padding: 8px 16px !important; font-family: var(--ux-font-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ux-on-primary) !important; background: var(--ux-coral) !important; border-radius: 999px !important; transform: rotateY(0deg) !important; z-index: 2; } /* 背面(默认隐藏) - 金句 */ .cube-card .featured-card-desc { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 40px 28px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; background: linear-gradient(135deg, #cc785c 0%, #b85a3f 100%) !important; color: var(--ux-on-primary) !important; font-family: var(--ux-font-display) !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.55 !important; font-style: italic !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: rotateY(180deg) !important; z-index: 3; text-align: left; border-radius: 14px; } /* 翻牌时:金句旋转到正面 */ .featured-grid .cube-card:hover .featured-card-desc, .featured-card.cube-card:hover .featured-card-desc { transform: rotateY(360deg) !important; } /* 翻牌时:编号/标题/作者/CTA 旋转到背面(180° + 自身 180° = 360°) */ .featured-grid .cube-card:hover .featured-card-num, .featured-grid .cube-card:hover .featured-card-icon, .featured-grid .cube-card:hover .featured-card-text, .featured-grid .cube-card:hover .featured-card-cta, .featured-card.cube-card:hover .featured-card-num, .featured-card.cube-card:hover .featured-card-icon, .featured-card.cube-card:hover .featured-card-text, .featured-card.cube-card:hover .featured-card-cta { transform: rotateY(180deg) !important; opacity: 0 !important; } /* glow 元素(始终隐藏) */ .cube-card .featured-card-glow { display: none !important; } /* ================================================================= * 64. 翻牌效果增强 · 金句装饰元素 * ================================================================= */ .cube-card .featured-card-desc::before { content: '"' !important; position: absolute !important; top: 16px !important; left: 24px !important; font-family: var(--ux-font-display) !important; font-size: 80px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.2) !important; pointer-events: none; } .cube-card .featured-card-desc::after { content: '点击阅读 →' !important; position: absolute !important; bottom: 24px !important; left: 28px !important; font-family: var(--ux-font-sans) !important; font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.95) !important; font-style: normal !important; } /* ================================================================= * 65. 响应式 * ================================================================= */ /* 平板 */ @media (max-width: 1024px) { .cube-card { min-height: 340px !important; height: 340px !important; } } /* 大手机 */ @media (max-width: 768px) { .cube-card { min-height: 320px !important; height: 320px !important; } .cube-card .featured-card-title { font-size: 18px !important; } .cube-card .featured-card-desc { font-size: 15px !important; padding: 32px 24px !important; } } /* 手机 */ @media (max-width: 480px) { .cube-card { min-height: 300px !important; height: 300px !important; } .cube-card .featured-card-num { font-size: 40px !important; } } /* 宽屏 */ @media (min-width: 1440px) { .cube-card { min-height: 380px !important; height: 380px !important; } } /* ================================================================= * 66. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { .featured-grid .cube-card, .featured-card.cube-card { background: linear-gradient(135deg, #2a2723 0%, #1f1c19 100%) !important; border-color: rgba(255, 255, 255, 0.1) !important; } .cube-card .featured-card-icon { background: #252320 !important; border-color: rgba(255, 255, 255, 0.1) !important; } .cube-card .featured-card-title { color: #faf9f5 !important; } .cube-card .featured-card-desc { background: linear-gradient(135deg, #b85a3f 0%, #94452e 100%) !important; } } /* ================================================================= * 67. 触摸设备 · 翻牌用 click 替代 hover * ================================================================= */ @media (hover: none) and (pointer: coarse) { /* 触摸设备:翻牌时禁用 3D 旋转,改用 opacity 渐变 */ .cube-card, .cube-card .featured-card-num, .cube-card .featured-card-icon, .cube-card .featured-card-text, .cube-card .featured-card-cta, .cube-card .featured-card-desc { transition: opacity 0.3s ease !important; transform: none !important; } .cube-card .featured-card-desc { opacity: 0; pointer-events: none; } .cube-card .featured-card-desc::after { content: '长按查看简介' !important; } } @media (prefers-reduced-motion: reduce) { .cube-card, .cube-card .featured-card-num, .cube-card .featured-card-icon, .cube-card .featured-card-text, .cube-card .featured-card-cta, .cube-card .featured-card-desc { transition: none !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.2 * * 新增章节: 61-67 (共 7 个新章节) * 总章节数: 67 章节 * * 关键设计: * · 长方形卡片:height 360px(桌面)/ 320px(平板)/ 300px(手机) * · 翻牌效果:0.7s cubic-bezier,rotateY(180deg) * · 正面:图标+标题+作者+CTA(默认) * · 背面:金句+装饰引号+"点击阅读"(hover 翻出) * · 触摸设备:用 opacity 渐变替代 3D 翻牌 * ================================================================= */ /* ================================================================= * v2.2.3 编辑精选 · 翻牌显示完整书籍简介 · 2026-06-22 * * 设计目标: * · 长方形卡片(沿用 v2.2.2 设计) * · 翻牌后显示完整书籍简介(每本不同) * · 简介顶部:金句(斜体大字) * · 简介中部:作者 + 出版年份 * · 简介底部:完整介绍(2-3 段) * · 简介底部:"开始阅读 →" 引导按钮 * * 章节: 68-74 * ================================================================= */ /* ================================================================= * 68. cube-card · 翻牌核心增强 * ================================================================= */ .featured-grid .cube-card, .featured-card.cube-card { /* 翻牌时背面内容更多,延长翻牌时间 */ transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease !important; } /* ================================================================= * 69. 正面 · 隐藏 desc(金句/简介) * ================================================================= */ .featured-grid .cube-card .featured-card-desc, .featured-card.cube-card .featured-card-desc { /* 翻牌前的 desc 隐藏在正面之下(因为 desc 也在 .featured-card-text 内部) */ position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; /* 翻牌前:与正面同向(rotateY 0deg) - 隐藏在正面的背后 */ transform: rotateY(0deg) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; /* 翻牌前的视觉:不显示,等待翻牌后显现 */ opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0.3s ease !important; z-index: 5; pointer-events: none; padding: 28px 24px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: flex-start !important; background: linear-gradient(135deg, #cc785c 0%, #b85a3f 100%) !important; color: var(--ux-on-primary) !important; border-radius: 14px !important; overflow: hidden !important; } /* ================================================================= * 70. 翻牌后 · 显示完整简介 * ================================================================= */ .featured-grid .cube-card:hover .featured-card-desc, .featured-card.cube-card:hover .featured-card-desc { /* 翻牌时 desc 旋转到 360°(与卡片同向) */ transform: rotateY(180deg) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* 翻牌时:正面元素(标题/作者/CTA/图标/编号)旋转到背面 */ .featured-grid .cube-card:hover .featured-card-num, .featured-grid .cube-card:hover .featured-card-icon, .featured-grid .cube-card:hover .featured-card-text, .featured-grid .cube-card:hover .featured-card-cta, .featured-card.cube-card:hover .featured-card-num, .featured-card.cube-card:hover .featured-card-icon, .featured-card.cube-card:hover .featured-card-text, .featured-card.cube-card:hover .featured-card-cta { transform: rotateY(180deg) !important; opacity: 0 !important; transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.3s ease !important; } /* ================================================================= * 71. 翻牌后 · 简介内容排版 * ================================================================= */ /* 简介顶部:金句(从原始 desc 文本) */ .featured-card-desc { font-family: var(--ux-font-display) !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.96) !important; font-style: normal !important; margin: 0 !important; padding: 0 !important; text-align: left; width: 100%; word-break: break-word; overflow-wrap: break-word; hyphens: auto; flex: 1; overflow-y: auto; } /* 简介滚动条样式(简介长时显示) */ .featured-card-desc::-webkit-scrollbar { width: 4px; } .featured-card-desc::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .featured-card-desc::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border-radius: 2px; } .featured-card-desc::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.6); } /* 简介装饰:左上角引号 */ .featured-card-desc::before { content: '"' !important; position: absolute !important; top: 8px !important; left: 18px !important; font-family: var(--ux-font-display) !important; font-size: 64px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.18) !important; pointer-events: none; z-index: -1; } /* 简介底部:阅读引导 */ .featured-card-desc::after { content: '点击阅读 →' !important; position: absolute !important; bottom: 18px !important; right: 24px !important; font-family: var(--ux-font-sans) !important; font-size: 12px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.95) !important; font-style: normal !important; padding: 6px 14px !important; background: rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; transition: background 0.3s ease, transform 0.3s ease !important; } .featured-card-desc:hover::after { background: rgba(255, 255, 255, 0.28) !important; transform: translateX(2px) !important; } /* ================================================================= * 72. 简介文本第一句特殊样式(书名加粗高亮) * ================================================================= */ /* 简介的"第一句话"自动视为"金句"——通过 ::first-line 实现 */ .featured-card-desc { text-indent: 0 !important; } .featured-card-desc::first-letter { font-family: var(--ux-font-display) !important; font-size: 28px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 1) !important; float: none !important; line-height: 1 !important; margin-right: 0 !important; } /* ================================================================= * 73. 响应式 * ================================================================= */ @media (max-width: 1024px) { .featured-card-desc { font-size: 13px !important; padding: 24px 22px !important; } .featured-card-desc::before { font-size: 56px !important; } .featured-card-desc::after { font-size: 11px !important; } } @media (max-width: 768px) { .featured-card-desc { font-size: 12.5px !important; line-height: 1.55 !important; padding: 22px 20px !important; } .featured-card-desc::before { font-size: 48px !important; top: 6px !important; left: 14px !important; } .featured-card-desc::after { bottom: 14px !important; right: 18px !important; font-size: 10.5px !important; } } @media (max-width: 480px) { .featured-card-desc { font-size: 12px !important; } } /* ================================================================= * 74. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { .featured-card-desc { background: linear-gradient(135deg, #b85a3f 0%, #94452e 100%) !important; } } /* ================================================================= * 75. 触摸设备 / 无障碍 * ================================================================= */ @media (hover: none) and (pointer: coarse) { .featured-card-desc { /* 触摸设备:翻牌改用 opacity 切换 */ transform: none !important; opacity: 0 !important; visibility: hidden !important; } .cube-card.is-flipped .featured-card-desc { transform: none !important; opacity: 1 !important; visibility: visible !important; } .cube-card.is-flipped .featured-card-num, .cube-card.is-flipped .featured-card-icon, .cube-card.is-flipped .featured-card-text, .cube-card.is-flipped .featured-card-cta { transform: none !important; opacity: 0 !important; } .featured-card-desc::after { content: '点击收起' !important; } } @media (prefers-reduced-motion: reduce) { .cube-card, .featured-card-desc, .featured-card-num, .featured-card-icon, .featured-card-text, .featured-card-cta { transition: none !important; } } /* ================================================================= * 76. 打印 · 隐藏翻牌效果 * ================================================================= */ @media print { .featured-card-desc { display: none !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.3 * * 新增章节: 68-76 (共 9 个新章节) * 总章节数: 76 章节 * * 关键设计: * · 翻牌后显示每本书独特的完整简介(2-3 段) * · 顶部装饰引号 + 玻璃态"点击阅读 →"胶囊 * · 长简介支持滚动(自定义滚动条) * · 触摸设备:用 .is-flipped 切换显隐 * · 打印:隐藏翻牌简介 * ================================================================= */ /* ================================================================= * v2.2.4 编辑精选 · 强制覆盖 design-tokens-applied.css 的 grid 布局 * * 问题: * design-tokens-applied.css 第 920-933 行把 .featured-card-content * 强制设为 display:grid (56px 1fr auto),导致子元素水平排版 * 而不是 v2.2.3 设定的"绝对定位 + 翻牌"布局 * * 解决: * 强制 .featured-card-content 为普通 block 布局,让子元素 * 回到 v2.2.3 的 position:absolute 翻牌模型 * * 章节: 77-79 * ================================================================= */ /* ================================================================= * 77. 强制覆盖 .featured-card-content 的 grid 布局 * ================================================================= */ .featured-card .featured-card-content { display: block !important; position: relative !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; grid-template-columns: none !important; grid-template-areas: none !important; align-items: stretch !important; column-gap: 0 !important; row-gap: 0 !important; background: transparent !important; z-index: 1; } /* ================================================================= * 78. 强制 .featured-card-icon 为 52×52 圆角图标 * (覆盖 design-tokens-applied.css 第 947 行的 48×48) * ================================================================= */ .featured-card .featured-card-icon, .cube-card .featured-card-icon { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 28px !important; line-height: 1 !important; background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 12px !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; transition: transform 0.3s ease, background 0.3s ease !important; } .featured-card:hover .featured-card-icon, .cube-card:hover .featured-card-icon { transform: rotate(-6deg) scale(1.05) !important; background: var(--ux-coral) !important; } /* ================================================================= * 79. 强制 .featured-card-text 为普通流布局 * (覆盖 design-tokens-applied.css 第 970 行的 grid-area) * ================================================================= */ .featured-card .featured-card-text, .cube-card .featured-card-text { display: flex !important; flex-direction: column !important; gap: 4px !important; grid-area: auto !important; min-width: 0 !important; } /* 强制 .featured-card-title 不使用 grid-area */ .featured-card .featured-card-title, .cube-card .featured-card-title { grid-area: auto !important; } /* 强制 .featured-card-author 不使用 grid-area */ .featured-card .featured-card-author, .cube-card .featured-card-author { grid-area: auto !important; } /* ================================================================= * 80. 防御性兜底 · 防止任何子元素溢出变成大封面 * ================================================================= */ .featured-card *, .cube-card * { max-width: 100%; } .featured-card img, .featured-card svg, .featured-card picture, .cube-card img, .cube-card svg, .cube-card picture { max-width: 100% !important; max-height: 100% !important; } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.4 * * 新增章节: 77-80 (共 4 个新章节) * 总章节数: 80 章节 * * 关键修复: * · 强制 .featured-card-content 为 block(覆盖 design-tokens-applied.css 的 grid) * · 强制 .featured-card-icon 为 52×52(防止变成"大封面") * · 强制 .featured-card-text 为流布局(覆盖 grid-area) * · 全局 max-width:100% 防御性兜底 * ================================================================= */ /* ================================================================= * v2.2.5 顶部导航 · 强化三段式布局 · 2026-06-22 * * 问题: * v2.2.1 已设置中间导航 absolute 居中 + CTA margin-left: auto * 但 Tailwind 的 `flex justify-between` 可能与上述规则冲突, * 导致中间导航没居中、CTA 没靠右 * * 解决: * 显式覆盖 `justify-content` 为 `flex-start`,并给 logo/CTA * 加 `flex-shrink: 0`,保证三段式布局 * * 章节: 81-86 * ================================================================= */ /* ================================================================= * 81. 父容器 · 强化 position relative + justify-content 重置 * ================================================================= */ .nav-glass > .content-container, .nav-glass > .max-w-7xl, .nav-glass > .mx-auto { position: relative !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } .nav-glass > .content-container > .flex, .nav-glass > .content-container > div[class*="justify-between"] { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; /* 覆盖 justify-between */ height: 64px !important; width: 100% !important; flex-wrap: nowrap !important; gap: 0 !important; } /* ================================================================= * 82. 左侧 logo · 固定宽度,不缩放 * ================================================================= */ .nav-glass > .content-container > .flex > a:first-child, .nav-glass > .content-container > div > a:first-child { flex-shrink: 0 !important; flex-grow: 0 !important; position: relative !important; z-index: 3; margin-right: auto !important; /* 占据左侧,不参与居中 */ } /* ================================================================= * 83. 中间 4 个导航链接 · 严格绝对居中(强化) * ================================================================= */ .nav-glass .hidden.md\\:flex, .nav-glass > .content-container > .flex > .hidden.md\\:flex, .nav-glass > .content-container > div > div.hidden.md\\:flex, .nav-glass div.hidden[class*="md:flex"] { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 32px !important; z-index: 2; flex-shrink: 0 !important; flex-grow: 0 !important; } /* ================================================================= * 84. 右侧 CTA 按钮 · margin-left auto 推到最右(强化) * ================================================================= */ .nav-glass .nav-link-cta, .nav-glass > .content-container > .flex > a.nav-link-cta, .nav-glass > .content-container > div > a.nav-link-cta { margin-left: auto !important; margin-right: 0 !important; position: relative !important; z-index: 3; flex-shrink: 0 !important; flex-grow: 0 !important; } /* ================================================================= * 85. 响应式 · 移动端导航 * ================================================================= */ @media (max-width: 768px) { .nav-glass .hidden.md\\:flex, .nav-glass > .content-container > .flex > .hidden.md\\:flex, .nav-glass div.hidden[class*="md:flex"] { display: none !important; } .nav-glass > .content-container > .flex, .nav-glass > .content-container > div[class*="justify-between"] { justify-content: space-between !important; } } @media (min-width: 769px) { .nav-glass .hidden.md\\:flex, .nav-glass > .content-container > .flex > .hidden.md\\:flex, .nav-glass div.hidden[class*="md:flex"] { display: flex !important; } } /* ================================================================= * 86. 顶部导航 · hover 微交互(强化) * ================================================================= */ .nav-glass .nav-link { position: relative !important; padding: 8px 4px !important; transition: color 0.2s ease, transform 0.2s ease !important; z-index: 4; } .nav-glass .nav-link::after { content: '' !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: 0 !important; height: 2px !important; background: var(--ux-coral) !important; transform: translateX(-50%) !important; transition: width 0.3s ease !important; border-radius: 2px; } .nav-glass .nav-link:hover::after, .nav-glass .nav-link.active::after { width: 100% !important; } .nav-glass .nav-link:hover { color: var(--ux-coral) !important; } /* ================================================================= * 87. 防御性兜底 · 任何时候都保证三段式 * ================================================================= */ .nav-glass { position: sticky !important; top: 0 !important; z-index: 50 !important; } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.5 * * 新增章节: 81-87 (共 7 个新章节) * 总章节数: 87 章节 * * 关键强化: * · 显式覆盖 justify-content: space-between → flex-start * · logo 固定宽度 + flex-shrink: 0 * · 中间导航 absolute 居中 + z-index: 2 * · CTA margin-left: auto 推到最右 + z-index: 3 * · nav 整体 sticky + z-index: 50 * ================================================================= */ /* ================================================================= * v2.2.6 分类与难度联动 · 2026-06-22 * * 联动逻辑(由 ui-ux-pro-max-filter.js 提供): * · 初始化:扫描所有 .book-card,构建 category × difficulty 二维统计表 * · 点击分类:更新所有难度按钮的 count(显示该分类下的难度分布) * · 点击难度:更新所有分类按钮的 count(显示该难度下的分类分布) * · 双重联动:同时选分类+难度时,所有按钮 count 显示交集 * · 点击"全部":重置所有按钮的 count 为全局统计 * * 章节: 88-91 (仅样式增强,JS 单独注入) * ================================================================= */ /* ================================================================= * 88. 联动状态视觉 · 选中态强化 * ================================================================= */ .cat-chip.active, .diff-chip.active, .cat-chip[data-selected="true"], .diff-chip[data-selected="true"] { background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-color: var(--ux-coral) !important; transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(204, 120, 92, 0.3) !important; } /* ================================================================= * 89. count 数字动画 · 切换时的过渡 * ================================================================= */ .chip-count, .cat-chip .chip-count, .diff-chip .chip-count { display: inline-block !important; min-width: 18px !important; text-align: center !important; font-size: 11px !important; font-weight: 600 !important; font-feature-settings: "tnum" !important; padding: 1px 6px !important; margin-left: 4px !important; background: rgba(0, 0, 0, 0.08) !important; border-radius: 999px !important; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; } .cat-chip.active .chip-count, .diff-chip.active .chip-count, .cat-chip[data-selected="true"] .chip-count, .diff-chip[data-selected="true"] .chip-count { background: rgba(255, 255, 255, 0.28) !important; color: var(--ux-on-primary) !important; } /* count 数字变化时短暂闪烁 */ .chip-count.is-updating { animation: count-pulse 0.4s ease !important; } @keyframes count-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.25); color: var(--ux-coral); } 100% { transform: scale(1); } } /* ================================================================= * 90. 联动状态提示 · 顶部小指示器 * ================================================================= */ .filter-status-bar { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin: 12px auto 16px !important; padding: 6px 14px !important; font-size: 12px !important; color: var(--ux-muted) !important; background: var(--ux-canvas) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 999px !important; max-width: 360px !important; width: fit-content !important; transition: all 0.3s ease !important; } .filter-status-bar:empty, .filter-status-bar[data-empty="true"] { display: none !important; } .filter-status-bar .status-tag { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 2px 8px !important; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 11px !important; } .filter-status-bar .status-clear { margin-left: 4px !important; padding: 2px 8px !important; background: transparent !important; color: var(--ux-muted) !important; border: 1px solid var(--ux-hairline) !important; border-radius: 6px !important; cursor: pointer !important; font-size: 11px !important; transition: all 0.2s ease !important; } .filter-status-bar .status-clear:hover { background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-color: var(--ux-coral) !important; } /* ================================================================= * 91. 响应式 · 移动端筛选器堆叠 * ================================================================= */ @media (max-width: 768px) { .cat-chip, .diff-chip { font-size: 12px !important; padding: 6px 12px !important; } .chip-count, .cat-chip .chip-count, .diff-chip .chip-count { font-size: 10px !important; padding: 1px 5px !important; } .filter-status-bar { font-size: 11px !important; padding: 4px 10px !important; } } /* ================================================================= * 92. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { .cat-chip .chip-count, .diff-chip .chip-count { background: rgba(255, 255, 255, 0.12) !important; color: var(--ux-on-dark-soft) !important; } .filter-status-bar { background: var(--ux-surface-dark) !important; color: var(--ux-on-dark-soft) !important; border-color: rgba(255, 255, 255, 0.1) !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.6 * * 新增章节: 88-92 (共 5 个新章节) * 总章节数: 92 章节 * * 关键设计: * · 联动状态视觉强化(选中态缩放+阴影+珊瑚色) * · count 数字脉冲动画 * · 顶部状态指示器(显示当前筛选条件) * · 响应式:移动端字号缩小 * · 暗色模式:count 背景适配 * * 联动逻辑由 ui-ux-pro-max-filter.js 提供(独立 JS 文件) * ================================================================= */ /* ================================================================= * v2.2.7 分类与难度联动 · 强化选择效果 + 自动查询 · 2026-06-22 * * 增强: * · 选中态:✓ 勾选标记 + 左侧 4px 珊瑚色实心条 + 阴影增强 * · 0 count 按钮:disabled 灰显 + 不可点击 * · 自动滚动:点击筛选后平滑滚动到 #bookGrid * · 加载动画:筛选时显示 .book-grid-loading 骨架 * · 筛选结果:fade-in 动画 * * 章节: 93-100 * ================================================================= */ /* ================================================================= * 93. 选中态强化 · ✓ 勾选标记 + 左侧实心条 * ================================================================= */ .cat-chip.active, .diff-chip.active, .cat-chip[data-selected="true"], .diff-chip[data-selected="true"] { position: relative !important; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border-color: var(--ux-coral) !important; transform: scale(1.06) !important; box-shadow: 0 6px 20px rgba(204, 120, 92, 0.45), 0 2px 6px rgba(204, 120, 92, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding-left: 26px !important; /* 给勾选标记让位 */ transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* 左侧 4px 实心条 */ .cat-chip.active::before, .diff-chip.active::before, .cat-chip[data-selected="true"]::before, .diff-chip[data-selected="true"]::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; transform: translateY(-50%) !important; width: 4px !important; height: 70% !important; background: rgba(255, 255, 255, 0.85) !important; border-radius: 0 2px 2px 0 !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important; } /* ✓ 勾选标记 */ .cat-chip.active::after, .diff-chip.active::after, .cat-chip[data-selected="true"]::after, .diff-chip[data-selected="true"]::after { content: '✓' !important; position: absolute !important; left: 7px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 13px !important; font-weight: 800 !important; color: var(--ux-on-primary) !important; line-height: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } /* ================================================================= * 94. 0 count 按钮 · disabled 灰显 * ================================================================= */ .cat-chip[data-disabled="true"], .diff-chip[data-disabled="true"] { opacity: 0.4 !important; filter: grayscale(0.6) !important; cursor: not-allowed !important; pointer-events: none !important; background: var(--ux-canvas) !important; color: var(--ux-muted) !important; border-color: var(--ux-hairline-soft) !important; transform: none !important; box-shadow: none !important; } .cat-chip[data-disabled="true"]::before, .diff-chip[data-disabled="true"]::before, .cat-chip[data-disabled="true"]::after, .diff-chip[data-disabled="true"]::after { display: none !important; } /* count 为 0 时隐藏 */ .chip-count[data-empty="true"] { display: none !important; } /* ================================================================= * 95. hover 效果 · 普通态 vs disabled 态 * ================================================================= */ .cat-chip:not([data-disabled="true"]):hover, .diff-chip:not([data-disabled="true"]):hover { background: rgba(204, 120, 92, 0.12) !important; color: var(--ux-coral) !important; border-color: var(--ux-coral) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(204, 120, 92, 0.15) !important; } .cat-chip.active:not([data-disabled="true"]):hover, .diff-chip.active:not([data-disabled="true"]):hover { background: var(--ux-coral-active) !important; transform: scale(1.08) !important; box-shadow: 0 8px 24px rgba(204, 120, 92, 0.5) !important; } /* ================================================================= * 96. 选中态脉冲动画 · 初次激活时的视觉提示 * ================================================================= */ @keyframes chip-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(204, 120, 92, 0.3); } 100% { transform: scale(1.06); box-shadow: 0 6px 20px rgba(204, 120, 92, 0.45); } } .cat-chip.is-activating, .diff-chip.is-activating { animation: chip-pulse 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* ================================================================= * 97. 自动滚动到书籍区 · 高亮 + 平滑滚动 * ================================================================= */ #bookGrid.is-filtering { position: relative !important; min-height: 320px !important; transition: opacity 0.3s ease !important; } #bookGrid.is-loading { opacity: 0.5 !important; pointer-events: none !important; } #bookGrid.is-loaded .book-card { animation: book-fade-in 0.4s ease !important; animation-fill-mode: backwards !important; } @keyframes book-fade-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* 加载骨架遮罩 */ #bookGrid.is-loading::before { content: '' !important; position: absolute !important; inset: 0 !important; background: rgba(250, 249, 245, 0.6) !important; z-index: 10 !important; pointer-events: none !important; animation: skeleton-fade 1.2s ease-in-out infinite !important; } @keyframes skeleton-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } } /* 筛选结果提示横幅 */ .filter-result-banner { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; margin: 0 auto 24px !important; padding: 10px 20px !important; background: linear-gradient(135deg, rgba(204, 120, 92, 0.08) 0%, rgba(204, 120, 92, 0.04) 100%) !important; border: 1px solid rgba(204, 120, 92, 0.2) !important; border-radius: 12px !important; color: var(--ux-coral) !important; font-size: 14px !important; font-weight: 500 !important; max-width: 480px !important; width: fit-content !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .filter-result-banner .result-icon { font-size: 18px !important; } .filter-result-banner .result-count { font-family: var(--ux-font-display) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--ux-coral) !important; } .filter-result-banner .result-text { color: var(--ux-muted) !important; } /* ================================================================= * 98. 空结果状态 * ================================================================= */ .filter-empty-state { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 60px 24px !important; text-align: center !important; color: var(--ux-muted) !important; } .filter-empty-state .empty-icon { font-size: 64px !important; margin-bottom: 16px !important; opacity: 0.4 !important; } .filter-empty-state .empty-title { font-family: var(--ux-font-display) !important; font-size: 20px !important; color: var(--ux-body) !important; margin-bottom: 8px !important; } .filter-empty-state .empty-desc { font-size: 14px !important; margin-bottom: 20px !important; } .filter-empty-state .empty-action { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 8px 18px !important; background: var(--ux-coral) !important; color: var(--ux-on-primary) !important; border: none !important; border-radius: 999px !important; cursor: pointer !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .filter-empty-state .empty-action:hover { background: var(--ux-coral-active) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(204, 120, 92, 0.3) !important; } /* ================================================================= * 99. 响应式 * ================================================================= */ @media (max-width: 768px) { .cat-chip.active, .diff-chip.active { transform: scale(1.04) !important; padding-left: 22px !important; } .cat-chip.active::after, .diff-chip.active::after { font-size: 11px !important; left: 5px !important; } .filter-result-banner { font-size: 12px !important; padding: 8px 14px !important; } .filter-empty-state .empty-icon { font-size: 48px !important; } } /* ================================================================= * 100. 暗色模式 * ================================================================= */ @media (prefers-color-scheme: dark) { .cat-chip:not([data-disabled="true"]):hover, .diff-chip:not([data-disabled="true"]):hover { background: rgba(204, 120, 92, 0.2) !important; } .filter-result-banner { background: linear-gradient(135deg, rgba(204, 120, 92, 0.15) 0%, rgba(204, 120, 92, 0.08) 100%) !important; border-color: rgba(204, 120, 92, 0.3) !important; } #bookGrid.is-loading::before { background: rgba(26, 24, 22, 0.6) !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.7 * * 新增章节: 93-100 (共 8 个新章节) * 总章节数: 100 章节 * * 关键增强: * · 选中态 ✓ 勾选标记 + 左侧 4px 实心条 + 阴影增强 * · 0 count 按钮 disabled 灰显 + 不可点击 * · 初次激活时的脉冲动画 * · 自动滚动 + 加载骨架 + 筛选结果横幅 * · 空结果状态(emoji + 标题 + 描述 + 清除按钮) * · 响应式:移动端字号缩小 * · 暗色模式:count 背景适配 * * 联动逻辑由 ui-ux-pro-max-filter.js v2.2.7 提供 * ================================================================= */ /* ================================================================= * v2.2.8 分类与难度联动 · 深度微交互增强 · 2026-06-22 * * 增强: * · Ripple 涟漪效果:点击 chip 时从点击位置扩散圆形波纹 * · CountUp 数字滚动:count 从旧值过渡到新值 * · 未选中 chip 暗化:选中后其他未选中的 50% 透明 * · 取消选中弹性:bounce 反弹 * · 书籍卡片瀑布流:可见卡片依次 fade-in(每张延迟 30ms) * · chip 文本淡入淡出:切换时文本不直接切换 * * 章节: 101-110 * ================================================================= */ /* ================================================================= * 111. 暗色模式适配 * ================================================================= */ @media (prefers-color-scheme: dark) { .cat-chip .ripple, .diff-chip .ripple { background: rgba(255, 255, 255, 0.3) !important; } .cat-chip.active .ripple, .diff-chip.active .ripple { background: rgba(255, 255, 255, 0.4) !important; } body.has-active-filter .cat-chip:not(.active):not([data-selected="true"]), body.has-active-filter .diff-chip:not(.active):not([data-selected="true"]) { opacity: 0.4 !important; } .chip-count { background: rgba(255, 255, 255, 0.12) !important; color: var(--ux-on-dark-soft) !important; } .cat-chip[data-disabled="true"] .chip-count, .diff-chip[data-disabled="true"] .chip-count { background: rgba(255, 255, 255, 0.05) !important; } } /* ================================================================= * 112. 全局微交互 · 滚动行为平滑化 * ================================================================= */ html { scroll-behavior: smooth !important; /* iOS 弹性滚动 */ -webkit-overflow-scrolling: touch; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* 锚点跳转偏移 · 给固定 nav 留出 80px 空间 */ section[id], .section[id] { scroll-margin-top: 88px !important; } /* ================================================================= * 113. 文本选择美化 · 主题色 * ================================================================= */ ::selection { background: var(--token-coral) !important; color: var(--token-on-primary) !important; text-shadow: none !important; } ::-moz-selection { background: var(--token-coral) !important; color: var(--token-on-primary) !important; text-shadow: none !important; } /* ================================================================= * 114. 全局焦点环增强 · 统一可访问性 * ================================================================= */ *:focus-visible { outline: 3px solid var(--token-coral) !important; outline-offset: 3px !important; transition: outline-offset 0.15s ease !important; border-radius: 4px; } button:focus-visible, a:focus-visible { outline-offset: 4px !important; } /* ================================================================= * 115. 按钮按下反馈 · 通用按压形变 * ================================================================= */ .btn-primary:active, .btn-secondary:active, .btn-outline:active, .nav-link-cta:active, .featured-card-cta:active, .cat-chip:active, .diff-chip:active, button:not(:disabled):active { transform: scale(0.96) !important; transition: transform 0.08s ease !important; } /* 触摸设备无 hover 效果 */ @media (hover: none) { .btn-primary:active, .btn-secondary:active, .nav-link-cta:active, .cat-chip:active, .diff-chip:active { transform: scale(0.97) !important; } } /* ================================================================= * 116. 滚动进入动画 · fade-up · 配合 JS 的 .is-reveal * ================================================================= */ .reveal-target { opacity: 0 !important; transform: translateY(28px) scale(0.98) !important; transition: opacity 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1) !important; will-change: opacity, transform; } .reveal-target.is-revealed { opacity: 1 !important; transform: translateY(0) scale(1) !important; } /* 错开延迟 · 基于 data-reveal-delay(0-7) */ .reveal-target[data-reveal-delay="0"] { transition-delay: 0ms !important; } .reveal-target[data-reveal-delay="1"] { transition-delay: 60ms !important; } .reveal-target[data-reveal-delay="2"] { transition-delay: 120ms !important; } .reveal-target[data-reveal-delay="3"] { transition-delay: 180ms !important; } .reveal-target[data-reveal-delay="4"] { transition-delay: 240ms !important; } .reveal-target[data-reveal-delay="5"] { transition-delay: 300ms !important; } .reveal-target[data-reveal-delay="6"] { transition-delay: 360ms !important; } .reveal-target[data-reveal-delay="7"] { transition-delay: 420ms !important; } /* ================================================================= * 117. 顶部导航滚动态 · 增强玻璃效果 * ================================================================= */ .site-nav.is-scrolled, .nav-glass.is-scrolled { background: rgba(250, 249, 245, 0.92) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; box-shadow: 0 2px 20px rgba(20, 20, 19, 0.06) !important; border-bottom: 1px solid rgba(20, 20, 19, 0.05) !important; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important; } @media (prefers-color-scheme: dark) { .site-nav.is-scrolled, .nav-glass.is-scrolled { background: rgba(26, 24, 22, 0.92) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } } /* ================================================================= * 118. 页面加载进度条 · 顶部 3px 珊瑚色 * ================================================================= */ .page-progress { position: fixed !important; top: 0 !important; left: 0 !important; width: 0% !important; height: 3px !important; background: linear-gradient(90deg, var(--token-coral) 0%, #e89b6f 50%, var(--token-coral) 100%) !important; z-index: 9999 !important; transition: width 0.3s ease !important; box-shadow: 0 0 8px rgba(204, 120, 92, 0.6) !important; pointer-events: none !important; } .page-progress.is-done { opacity: 0 !important; transition: opacity 0.4s ease 0.3s !important; } /* ================================================================= * 119. 滚动条美化 · 主题色 * ================================================================= */ ::-webkit-scrollbar { width: 10px !important; height: 10px !important; } ::-webkit-scrollbar-track { background: var(--token-canvas) !important; } ::-webkit-scrollbar-thumb { background: rgba(204, 120, 92, 0.35) !important; border-radius: 5px !important; border: 2px solid var(--token-canvas) !important; transition: background 0.2s ease !important; } ::-webkit-scrollbar-thumb:hover { background: rgba(204, 120, 92, 0.65) !important; } ::-webkit-scrollbar-thumb:active { background: var(--token-coral) !important; } @media (prefers-color-scheme: dark) { ::-webkit-scrollbar-track { background: var(--token-surface-dark) !important; } ::-webkit-scrollbar-thumb { background: rgba(204, 120, 92, 0.4) !important; border-color: var(--token-surface-dark) !important; } } /* ================================================================= * 120. 按钮 hover 时的微光扫过 * ================================================================= */ .btn-primary, .nav-link-cta, .featured-card-cta { position: relative !important; overflow: hidden !important; isolation: isolate !important; } .btn-primary::before, .nav-link-cta::before, .featured-card-cta::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%) !important; transition: left 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) !important; pointer-events: none !important; z-index: -1 !important; } .btn-primary:hover::before, .nav-link-cta:hover::before, .featured-card-cta:hover::before { left: 100% !important; } /* ================================================================= * 121. 图片懒加载占位 · 渐入效果 * ================================================================= */ img { transition: opacity 0.4s ease !important; } img.is-loading { opacity: 0 !important; } img.is-loaded { opacity: 1 !important; } /* ================================================================= * 122. 链接 hover 下划线动画 * ================================================================= */ a { transition: color 0.2s ease !important; } .section-link, .read-more, .text-link { position: relative !important; display: inline-block; } .section-link::after, .read-more::after, .text-link::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -2px !important; width: 100% !important; height: 1px !important; background: currentColor !important; transform: scaleX(0) !important; transform-origin: right center !important; transition: transform 0.35s cubic-bezier(0.65, 0.0, 0.35, 1) !important; } .section-link:hover::after, .read-more:hover::after, .text-link:hover::after { transform: scaleX(1) !important; transform-origin: left center !important; } /* ================================================================= * 123. 减弱动效 · 完整覆盖 * ================================================================= */ @media (prefers-reduced-motion: reduce) { .reveal-target, .btn-primary::before, .nav-link-cta::before, .featured-card-cta::before { transition: none !important; animation: none !important; transform: none !important; } .reveal-target { opacity: 1 !important; } .section-link::after, .read-more::after, .text-link::after { transition: none !important; } } /* ================================================================= * 124. 暗色模式全局适配 * ================================================================= */ @media (prefers-color-scheme: dark) { .page-progress { box-shadow: 0 0 12px rgba(204, 120, 92, 0.8) !important; } } /* ================================================================= * 结束 · ui-ux-pro-max.css v2.2.9 * * 新增章节: 112-124 (共 13 个新章节) * 总章节数: 124 章节 * * 关键增强: * · 全局平滑滚动 + 锚点偏移 * · 文本选择珊瑚色主题 * · 统一焦点环 + 偏移过渡 * · 按钮按下形变反馈 * · 滚动进入动画(.reveal-target · 由 JS 触发) * · 顶部导航滚动态增强 * · 页面加载进度条(由 JS 控制宽度) * · 滚动条主题色美化 * · 按钮 hover 微光扫过 * · 图片懒加载渐入 * · 链接下划线扫光动画 * · 减弱动效 + 暗色模式 * * 联动逻辑由 ui-ux-pro-max-filter.js v2.2.9 提供 * ================================================================= */ /* ================================================================= * 101. 分类/难度 chip 选中态最强视觉 · 渐变 + 光晕 + 顶部光带 * 2026-06-22 * 目标:点击后视觉变化极其明显 * ================================================================= */ .cat-chip[data-selected="true"], .diff-chip[data-selected="true"] { position: relative !important; background: linear-gradient(135deg, var(--ux-coral, #cc785c) 0%, #e89372 50%, var(--ux-coral, #cc785c) 100%) !important; background-size: 200% 200% !important; animation: chip-shimmer 2.4s ease-in-out infinite !important, chip-spring-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important; color: #ffffff !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; transform: translateY(-2px) scale(1.08) !important; box-shadow: 0 0 0 4px rgba(204, 120, 92, 0.18), 0 8px 24px rgba(204, 120, 92, 0.45), 0 2px 8px rgba(204, 120, 92, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; padding-left: 26px !important; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 2 !important; } /* 顶部光带 */ .cat-chip[data-selected="true"]::before, .diff-chip[data-selected="true"]::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 2px !important; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%) !important; border-radius: 9999px 9999px 0 0 !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important; } /* ✓ 勾选标记(更精致) */ .cat-chip[data-selected="true"]::after, .diff-chip[data-selected="true"]::after { content: '✓' !important; position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 13px !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } @keyframes chip-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes chip-spring-in { 0% { transform: scale(0.92) translateY(0); } 60% { transform: scale(1.12) translateY(-3px); } 100% { transform: scale(1.08) translateY(-2px); } } /* 选中态的 chip-count 数字徽章 */ .cat-chip[data-selected="true"] .chip-count, .diff-chip[data-selected="true"] .chip-count { background: rgba(255, 255, 255, 0.95) !important; color: var(--ux-coral, #cc785c) !important; font-weight: 800 !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2) !important; animation: badge-pulse 0.6s ease !important; } @keyframes badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ================================================================= * 102. 未选中 chip 暗化(联动反馈) · 当 body.has-active-filter 时 * ================================================================= */ body.has-active-filter .cat-chip:not([data-selected="true"]):not([data-disabled="true"]), body.has-active-filter .diff-chip:not([data-selected="true"]):not([data-disabled="true"]) { opacity: 0.42 !important; filter: grayscale(0.4) !important; transform: scale(0.96) !important; transition: all 0.3s ease !important; } body.has-active-filter .cat-chip:not([data-selected="true"]):not([data-disabled="true"]):hover, body.has-active-filter .diff-chip:not([data-selected="true"]):not([data-disabled="true"]):hover { opacity: 1 !important; filter: grayscale(0) !important; transform: scale(1.04) !important; box-shadow: 0 4px 12px rgba(204, 120, 92, 0.2) !important; } /* ================================================================= * 103. 涟漪效果 · 点击波纹 * ================================================================= */ .ripple { position: absolute !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.5) !important; transform: scale(0) !important; animation: ripple-expand 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important; pointer-events: none !important; z-index: 1 !important; } @keyframes ripple-expand { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } } /* ================================================================= * 104. 顶部浮动提示条 · 点击 chip 后立即出现,3s 后自动淡出 * ================================================================= */ .filter-toast { position: fixed !important; top: 80px !important; left: 50% !important; transform: translateX(-50%) translateY(-30px) !important; background: linear-gradient(135deg, #1a1816 0%, #2d2a26 100%) !important; color: #ffffff !important; padding: 12px 24px !important; border-radius: 9999px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; z-index: 9999 !important; opacity: 0 !important; pointer-events: none !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .filter-toast.is-visible { transform: translateX(-50%) translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; } .filter-toast .toast-icon { font-size: 18px !important; line-height: 1 !important; } .filter-toast .toast-count { color: var(--ux-coral, #cc785c) !important; font-family: var(--ux-font-display) !important; font-size: 18px !important; font-weight: 700 !important; display: inline-block !important; min-width: 20px !important; text-align: center !important; } .filter-toast .toast-text { color: rgba(255, 255, 255, 0.9) !important; } .filter-toast .toast-clear { margin-left: 8px !important; padding: 4px 10px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 9999px !important; color: #ffffff !important; cursor: pointer !important; font-size: 12px !important; border: none !important; transition: background 0.2s !important; } .filter-toast .toast-clear:hover { background: rgba(255, 255, 255, 0.25) !important; } /* ================================================================= * 105. chip 容器点击波纹容器(包裹元素) * ================================================================= */ .chip-container { position: relative !important; isolation: isolate !important; } .chip-container.is-clicked { animation: container-bounce 0.4s ease !important; } @keyframes container-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.99); } } /* ================================================================= * 106. 卡片入场动画 · 强化版 * ================================================================= */ @keyframes book-fade-in-strong { 0% { opacity: 0; transform: translateY(20px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } #bookGrid .book-card.is-appearing { animation: book-fade-in-strong 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards !important; } /* 隐藏态淡出 */ .book-card.is-hiding { animation: book-fade-out 0.25s ease forwards !important; pointer-events: none !important; } @keyframes book-fade-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } /* ================================================================= * 107. 响应式适配 * ================================================================= */ @media (max-width: 768px) { .filter-toast { top: 70px !important; font-size: 12px !important; padding: 10px 18px !important; max-width: calc(100vw - 32px) !important; } .cat-chip[data-selected="true"], .diff-chip[data-selected="true"] { transform: scale(1.04) translateY(-1px) !important; } } /* ================================================================= * 108. 减少动效(可访问性) * ================================================================= */ @media (prefers-reduced-motion: reduce) { .cat-chip[data-selected="true"], .diff-chip[data-selected="true"], .cat-chip[data-selected="true"] .chip-count, .diff-chip[data-selected="true"] .chip-count { animation: none !important; transition: opacity 0.2s ease !important; } } /* ================================================================= * 109. 异步加载骨架屏 · 点击分类/难度时,旧卡片淡出,显示 shimmer 占位 * ================================================================= */ .book-card.is-skeleton { background: linear-gradient(90deg, #f0ede8 0%, #e8e3dc 50%, #f0ede8 100%) !important; background-size: 200% 100% !important; animation: skeleton-shimmer 1.2s linear infinite !important; pointer-events: none !important; border: none !important; box-shadow: none !important; } .book-card.is-skeleton .book-cover-wrapper, .book-card.is-skeleton .book-meta { opacity: 0 !important; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ================================================================= * 110. 加载进度条 · 顶部 3px 高,从左到右推进 * ================================================================= */ .filter-progress { position: fixed !important; top: 0 !important; left: 0 !important; width: 0% !important; height: 3px !important; background: linear-gradient(90deg, #cc785c 0%, #e89372 30%, #f4a685 60%, #cc785c 100%) !important; background-size: 200% 100% !important; z-index: 99999 !important; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: 0 0 12px rgba(204, 120, 92, 0.6) !important; pointer-events: none !important; } .filter-progress.is-running { width: 100% !important; animation: progress-stripes 1.4s linear infinite !important; } .filter-progress.is-complete { width: 100% !important; opacity: 1 !important; } .filter-progress.is-hiding { opacity: 0 !important; transition: opacity 0.3s ease 0.1s !important; } @keyframes progress-stripes { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* ================================================================= * 118. chip 加载态 · 点击后,该 chip 显示 spinner * ================================================================= */ .cat-chip.is-loading::after, .diff-chip.is-loading::after { content: '' !important; position: absolute !important; left: 8px !important; top: 50% !important; transform: translateY(-50%) !important; width: 12px !important; height: 12px !important; border: 2px solid rgba(204, 120, 92, 0.2) !important; border-top-color: var(--brand-primary, #cc785c) !important; border-radius: 50% !important; animation: chip-spin 0.7s linear infinite !important; } @keyframes chip-spin { to { transform: translateY(-50%) rotate(360deg); } } /* ================================================================= * 112. bookGrid 容器状态 · 中央 spinner + 卡片暗化 * ================================================================= */ #bookGrid.is-loading { position: relative !important; min-height: 200px !important; pointer-events: none !important; } #bookGrid.is-loading::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 40px !important; height: 40px !important; margin: -20px 0 0 -20px !important; border: 3px solid rgba(204, 120, 92, 0.15) !important; border-top-color: var(--brand-primary, #cc785c) !important; border-radius: 50% !important; animation: chip-spin 0.8s linear infinite !important; z-index: 10 !important; } #bookGrid.is-loading .book-card { opacity: 0.3 !important; transform: scale(0.98) !important; pointer-events: none !important; transition: all 0.25s ease !important; } /* ================================================================= * 113. 卡片交错入场 · 异步加载完成后,新匹配卡片依次 fade-in * ================================================================= */ @keyframes book-stagger-in { 0% { opacity: 0; transform: translateY(16px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } #bookGrid .book-card.is-appearing { animation: book-stagger-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards !important; } /* ================================================================= * 121. 筛选中禁用交互 · 防抖期间按钮微变化 * ================================================================= */ body.is-filtering .cat-chip, body.is-filtering .diff-chip { cursor: wait !important; } body.is-filtering .cat-chip:not([data-selected="true"]):not(.is-loading), body.is-filtering .diff-chip:not([data-selected="true"]):not(.is-loading) { pointer-events: none !important; opacity: 0.5 !important; } /* ================================================================= * 122. 空结果插画 · 异步加载后无匹配时显示 * ================================================================= */ .filter-empty { grid-column: 1 / -1 !important; text-align: center !important; padding: 4rem 2rem !important; color: var(--muted, #6c6a64) !important; animation: book-fade-in-strong 0.5s ease !important; } .filter-empty-icon { font-size: 4rem !important; margin-bottom: 1rem !important; opacity: 0.5 !important; } .filter-empty-title { font-size: 1.25rem !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; color: var(--ink, #141413) !important; } .filter-empty-text { font-size: 0.875rem !important; margin-bottom: 1.5rem !important; } .filter-empty-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 10px 20px !important; background: var(--brand-primary, #cc785c) !important; color: #ffffff !important; border: none !important; border-radius: 9999px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s !important; } .filter-empty-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(204, 120, 92, 0.3) !important; } @keyframes book-fade-in-strong { 0% { opacity: 0; transform: translateY(20px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ================================================================= * Google Design 3.0 · 单书页面专用导航与 Hero * 版本: v1.0.0 · 2026-06-23 * * 设计目标: * 1. 顶部固定导航 (sticky → 视觉上"吸顶") * 2. 左: 图标 + 书名 ｜ 中: 5 章节 pills ｜ 右: 返回目录 * 3. Hero 整页大色块背景 (CSS 变量 --hero-color 驱动主题色) * 4. Material Design 3 风格: 圆角 pill, elevation, ripple-free * * 类名: .book-top-nav / .book-top-nav-* / .book-hero / .book-hero-* * * 通过 :root 的 --brand-primary 与 --hero-color 自动适配子页面主题 * (如 amber/orange/blue/teal/...) 无需额外修改 * ================================================================= */ /* ============================================ 1. 顶部导航 (.book-top-nav) · 吸顶固定 ============================================ */ .book-top-nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 245, 0.85); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--ux-hairline, #e6dfd8); box-shadow: 0 1px 3px rgba(20, 20, 19, 0.04); transition: box-shadow 0.2s ease, background-color 0.2s ease; } .book-top-nav.is-scrolled { box-shadow: 0 4px 16px rgba(20, 20, 19, 0.08); background: rgba(250, 249, 245, 0.95); } .book-top-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); height: 60px; display: flex; align-items: center; gap: 1rem; width: 100%; box-sizing: border-box; } /* 左: 图标 + 书名 */ .nav-brand-mini { display: inline-flex; align-items: center; gap: 0.625rem; flex-shrink: 0; min-width: 0; text-decoration: none !important; color: var(--ux-ink, #141413) !important; transition: opacity 0.2s ease; } .nav-brand-mini:hover { opacity: 0.78; } .nav-brand-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: linear-gradient(135deg, var(--brand-primary, #cc785c) 0%, var(--brand-primary-active, #a9583e) 100%); color: #fff; flex-shrink: 0; box-shadow: 0 2px 6px rgba(204, 120, 92, 0.25); } .nav-brand-text { font-family: var(--ux-font-display, 'Cormorant Garamond', 'Songti SC', serif) !important; font-size: 16px; font-weight: 500 !important; letter-spacing: -0.005em; color: var(--ux-ink, #141413) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; } @media (max-width: 640px) { .nav-brand-text { max-width: 140px; } .nav-brand-icon { width: 32px; height: 32px; font-size: 16px; } } /* 中: 5 章节 pills */ .nav-chapters { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-chapters::-webkit-scrollbar { display: none; } .nav-chapter-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.875rem; border-radius: 9999px; background: transparent; border: 1px solid transparent; color: var(--ux-body, #3d3d3a) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: all 0.18s ease !important; flex-shrink: 0; } .nav-chapter-pill:hover { background: var(--brand-primary-soft, rgba(204, 120, 92, 0.08)); color: var(--brand-primary, #cc785c) !important; border-color: var(--brand-primary-soft, rgba(204, 120, 92, 0.15)); } .nav-chapter-pill.is-active { background: var(--brand-primary, #cc785c); color: #fff !important; border-color: var(--brand-primary, #cc785c); } @media (max-width: 900px) { .nav-chapter-pill { padding: 0.4375rem 0.75rem; font-size: 13px; } } @media (max-width: 640px) { .nav-chapters { gap: 0.25rem; } .nav-chapter-pill { padding: 0.375rem 0.625rem; font-size: 12px; } } /* 右: 返回目录按钮 */ .nav-home { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ux-body, #3d3d3a) !important; background: transparent; border: 1px solid var(--ux-hairline, #e6dfd8); text-decoration: none !important; flex-shrink: 0; transition: all 0.2s ease !important; font-size: 16px; } .nav-home:hover { background: var(--brand-primary, #cc785c); color: #fff !important; border-color: var(--brand-primary, #cc785c); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(204, 120, 92, 0.3); } .nav-home i { line-height: 1; } /* ============================================ 2. Hero 区 (.book-hero) · 整页大色块 ============================================ */ :root { /* --hero-color 默认值(可被子页面 :root 覆盖) */ --hero-color: #cc785c; --hero-color-active: #a9583e; --hero-color-soft: rgba(204, 120, 92, 0.12); --hero-text-on-color: #ffffff; --hero-text-muted-on-color: rgba(255, 255, 255, 0.78); } .book-hero { position: relative; overflow: hidden; isolation: isolate; padding: 5rem 0 4rem; color: var(--hero-text-on-color); /* 整页大色块背景: linear-gradient 让深浅自然过渡 */ background: radial-gradient(120% 80% at 0% 0%, var(--hero-color) 0%, var(--hero-color-active) 100%), var(--hero-color); } /* 色块上的纹理叠加 (细网格 · 增加层次感,极淡) */ .book-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%); } /* 色块顶部弧形装饰 · 让色块柔和过渡到下方白底 */ .book-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 32px; background: var(--ux-canvas, #faf9f5); -webkit-mask-image: linear-gradient(to top right, #000 49%, transparent 50%); mask-image: linear-gradient(to top right, #000 49%, transparent 50%); z-index: 0; } .book-hero-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); text-align: center; } /* 顶部徽章 */ .hero-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 1rem; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 9999px; color: #fff !important; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; margin-bottom: 1.25rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* 主标题 */ .hero-title { font-family: var(--ux-font-display, 'Cormorant Garamond', 'Songti SC', serif) !important; font-size: clamp(2.25rem, 6vw, 4rem) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: #fff !important; margin: 0 0 1rem; } .hero-title .gradient-text { background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.78) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* 副标题 */ .hero-subtitle { font-family: var(--ux-font-sans, 'Inter', 'PingFang SC', 'Noto Sans SC', sans-serif) !important; font-size: clamp(1rem, 1.4vw, 1.125rem) !important; line-height: 1.6 !important; color: var(--hero-text-muted-on-color) !important; font-weight: 400; margin: 0 0 1.25rem; } /* 简介 */ .hero-desc { font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0 auto 1.75rem; } /* 高亮关键词 */ .hero-desc .highlight-gold { background: rgba(255, 255, 255, 0.18); color: #fff; padding: 0 0.375rem; border-radius: 4px; font-weight: 500; } /* 元数据条 */ .hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; font-size: 13.5px; color: rgba(255, 255, 255, 0.85); } .hero-meta > span { display: inline-flex; align-items: center; gap: 0.25rem; } /* 响应式 */ @media (max-width: 768px) { .book-hero { padding: 3.5rem 0 2.75rem; } .book-hero-inner { padding: 0 1rem; } } /* ============================================ 3. 暗色模式兼容 (prefers-color-scheme) ============================================ */ @media (prefers-color-scheme: dark) { .book-top-nav { background: rgba(15, 23, 42, 0.88); border-bottom-color: rgba(255, 255, 255, 0.08); } .book-top-nav.is-scrolled { background: rgba(15, 23, 42, 0.95); } .nav-home { border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85) !important; } } /* ============================================ 4. 减少动效偏好 ============================================ */ @media (prefers-reduced-motion: reduce) { .book-top-nav, .nav-brand-mini, .nav-chapter-pill, .nav-home { transition: none !important; } }/* ================================================================= * Seedance 2.0 主题 · 完整移植自 apps/ai-tools/seedance2.0.html * 版本: v1.0.0 · 2026-06-23 * * 风格来源: Seedance 2.0 (Tailwind CSS + Inter 字体 + Font Awesome) * * 设计原则: * · 视觉与 seedance2.0.html 完全一致 * · 极简白底 (#f9fafb gray-50) + Inter 字体 * · 紫色渐变 Hero (#667eea → #764ba2) + rounded-3xl 卡片式 * · 顶部导航: bg-white/90 backdrop-blur sticky (同 seedance) * · 内嵌动画: pulse、shine、float 与 seedance 完全相同 * * 加载位置: ui-ux-pro-max.css 末尾 (级联末尾, 覆盖之前所有) * ================================================================= */ /* ============================================ 1. 全局 token 覆盖 (Seedance 主题) ============================================ */ :root { --ux-canvas: #f9fafb !important; /* gray-50 */ --ux-ink: #1f2937 !important; /* gray-800 */ --ux-body: #4b5563 !important; /* gray-600 */ --ux-muted: #6b7280 !important; /* gray-500 */ --ux-surface-soft: #f3f4f6 !important; /* gray-100 */ --ux-surface-card: #ffffff !important; --ux-hairline: #e5e7eb !important; /* gray-200 */ --ux-coral: #667eea !important; /* Seedance purple-blue */ --ux-coral-active: #764ba2 !important; /* Seedance purple */ --ux-on-primary: #ffffff !important; /* 字体全部用 Inter (与 seedance 一致) */ --ux-font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; --ux-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; --ux-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important; } /* ============================================ 2. 全局基线 (Inter 字体 + gray-50 背景) ============================================ */ html, body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; background-color: #f9fafb !important; color: #1f2937 !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased; } /* 标题: 全部用 Inter, 去掉衬线 */ h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .featured-card-title, .book-title, .gradient-text { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #1f2937 !important; line-height: 1.25 !important; } p { line-height: 1.7 !important; color: #4b5563 !important; } /* ============================================ 3. Seedance 内嵌动画 (完全照搬) ============================================ */ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .pulse-animation { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .shine-effect { position: relative; overflow: hidden; } .shine-effect:after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: rotate(45deg); animation: shine 3s infinite; } @keyframes shine { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } .money-icon { position: relative; display: inline-block; } .money-icon:after { content: '💰'; position: absolute; top: -10px; right: -10px; font-size: 20px; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(10deg); } } /* ============================================ 4. 顶部导航 (Seedance 风格: 白底 + 模糊 + 极简) ============================================ */ .book-top-nav { position: sticky !important; top: 0 !important; z-index: 50 !important; background: rgba(255, 255, 255, 0.9) !important; -webkit-backdrop-filter: saturate(180%) blur(8px) !important; backdrop-filter: saturate(180%) blur(8px) !important; border-bottom: 1px solid #e5e7eb !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; transition: box-shadow 0.2s ease !important; } .book-top-nav.is-scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; } .book-top-nav-inner { max-width: 1280px !important; margin: 0 auto !important; padding: 0 1rem !important; height: 64px !important; display: flex !important; align-items: center !important; gap: 1rem !important; width: 100% !important; box-sizing: border-box !important; } /* 左: 图标 + 书名 (seedance 风格) */ .nav-brand-mini { display: inline-flex !important; align-items: center !important; gap: 0.75rem !important; flex-shrink: 0 !important; min-width: 0 !important; text-decoration: none !important; color: #1f2937 !important; transition: opacity 0.2s ease !important; } .nav-brand-mini:hover { opacity: 0.78; } .nav-brand-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; flex-shrink: 0 !important; box-shadow: none !important; } .nav-brand-text { font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; color: #1f2937 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } @media (max-width: 640px) { .nav-brand-text { max-width: 140px; font-size: 15px !important; } .nav-brand-icon { width: 28px !important; height: 28px !important; font-size: 14px !important; } } /* 中: 章节 pills (Seedance 风格: 文字 + hover 紫色) */ .nav-chapters { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; min-width: 0 !important; overflow-x: auto !important; scrollbar-width: none; -ms-overflow-style: none; } .nav-chapters::-webkit-scrollbar { display: none; } .nav-chapter-pill { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; padding: 0.5rem 1rem !important; border-radius: 9999px !important; background: transparent !important; border: 1px solid transparent !important; color: #4b5563 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap; transition: all 0.2s ease !important; flex-shrink: 0; } .nav-chapter-pill:hover { background: rgba(102, 126, 234, 0.08) !important; color: #667eea !important; border-color: rgba(102, 126, 234, 0.15) !important; } .nav-chapter-pill.is-active { background: #667eea !important; color: #fff !important; border-color: #667eea !important; } @media (max-width: 900px) { .nav-chapter-pill { padding: 0.4375rem 0.75rem !important; font-size: 13px !important; } } @media (max-width: 640px) { .nav-chapter-pill { padding: 0.375rem 0.625rem !important; font-size: 12px !important; } } /* 右: 返回目录 (Seedance 风格: 圆形边框) */ .nav-home { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; color: #4b5563 !important; background: transparent !important; border: 1px solid #e5e7eb !important; text-decoration: none !important; flex-shrink: 0; transition: all 0.2s ease !important; font-size: 16px !important; } .nav-home:hover { background: #667eea !important; color: #fff !important; border-color: #667eea !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important; } .nav-home i { line-height: 1; } /* ============================================ 5. Hero 区 (Seedance 风格: 紫色渐变卡片 + 白色文字) ============================================ */ .book-hero { position: relative !important; overflow: hidden !important; isolation: isolate; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #ffffff !important; border-radius: 1.5rem !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; margin: 2rem auto !important; max-width: 1280px !important; padding: 3rem 2rem !important; width: calc(100% - 2rem) !important; } /* 移除之前的网格和弧形装饰 */ .book-hero::before { display: none !important; } .book-hero::after { display: none !important; } .book-hero-inner { position: relative !important; z-index: 1 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center; } /* 顶部徽章 (白底半透明) */ .hero-badge { display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; padding: 0.5rem 1rem !important; background: rgba(255, 255, 255, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 9999px !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; margin-bottom: 1.5rem !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* 主标题 */ .hero-title { font-family: 'Inter', sans-serif !important; font-size: clamp(2rem, 5vw, 3.5rem) !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: #fff !important; margin: 0 0 1rem !important; } .hero-title .gradient-text { background: none !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; } /* 副标题 */ .hero-subtitle { font-family: 'Inter', sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.9) !important; margin: 0 0 1.5rem !important; max-width: 100% !important; } /* 简介 */ .hero-desc { font-size: 15.5px !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.9) !important; max-width: 640px !important; margin: 0 auto 2rem !important; } /* 高亮 (深紫底色, 白色文字) */ .hero-desc .highlight-gold, .hero-desc .highlight-blue, .hero-desc .highlight-sky { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; padding: 0 0.375rem !important; border-radius: 4px !important; font-weight: 500 !important; } /* 元数据条 */ .hero-meta { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem 1.5rem !important; font-size: 14px !important; color: rgba(255, 255, 255, 0.9) !important; } .hero-meta > span { display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; } /* 响应式 */ @media (max-width: 768px) { .book-hero { padding: 2rem 1.25rem !important; margin: 1rem !important; width: calc(100% - 2rem) !important; } } /* ============================================ 6. 全局卡片 / 章节 / 高亮 (Seedance 风格统一) ============================================ */ /* 所有页面用到的通用卡片: 白底 + 圆角 + 淡阴影 + hover 提升 */ .magic-card, .insight-card, .principle-card, .excuse-card, .book-card, .featured-card, .stat-card, .mood-card { background: #ffffff !important; border: 1px solid #f3f4f6 !important; border-radius: 1rem !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; transition: all 0.3s ease !important; } .magic-card:hover, .insight-card:hover, .principle-card:hover, .excuse-card:hover, .book-card:hover, .featured-card:hover, .stat-card:hover, .mood-card:hover { transform: translateY(-4px) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; border-color: rgba(102, 126, 234, 0.2) !important; } /* 章节编号 */ .chapter-num { font-family: 'Inter', sans-serif !important; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; font-weight: 700 !important; } /* 数字徽章 */ .number-badge { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; font-weight: 700 !important; } /* quote-highlight 引用块 */ .quote-highlight { background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%) !important; border-left: 4px solid #667eea !important; border-radius: 0 1rem 1rem 0 !important; padding: 1.5rem !important; color: #1f2937 !important; } .quote-highlight p:first-child { color: #1f2937 !important; font-weight: 500 !important; } /* 通用链接 */ a { color: #667eea !important; } a:hover { color: #764ba2 !important; } /* 按钮 */ .btn-primary, button[type="submit"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: #fff !important; border: none !important; border-radius: 9999px !important; font-weight: 600 !important; padding: 0.625rem 1.5rem !important; transition: all 0.2s ease !important; } .btn-primary:hover, button[type="submit"]:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important; } /* ============================================ 7. 高亮荧光笔色 (Seedance 风格的标记色) ============================================ */ .highlight-gold { background: #FEF3C7 !important; /* 淡黄 */ color: #92400E !important; padding: 0 0.25em !important; border-radius: 2px !important; } .highlight-sky, .highlight-blue { background: #DBEAFE !important; /* 淡蓝 */ color: #1E40AF !important; padding: 0 0.25em !important; border-radius: 2px !important; } .highlight-pink { background: #FCE7F3 !important; /* 淡粉 */ color: #9D174D !important; padding: 0 0.25em !important; border-radius: 2px !important; } .highlight-green { background: #D1FAE5 !important; color: #065F46 !important; padding: 0 0.25em !important; border-radius: 2px !important; } /* ============================================ 8. 暗色模式兼容 ============================================ */ @media (prefers-color-scheme: dark) { :root { --ux-canvas: #111827 !important; /* gray-900 */ --ux-ink: #f9fafb !important; --ux-body: #d1d5db !important; --ux-muted: #9ca3af !important; --ux-hairline: #374151 !important; --ux-surface-soft: #1f2937 !important; --ux-surface-card: #1f2937 !important; } html, body { background-color: #111827 !important; color: #f9fafb !important; } .book-top-nav { background: rgba(17, 24, 39, 0.9) !important; border-bottom-color: #374151 !important; } .nav-brand-text, .nav-chapter-pill { color: #d1d5db !important; } .nav-chapter-pill:hover { background: rgba(102, 126, 234, 0.15) !important; color: #a5b4fc !important; } .nav-home { color: #d1d5db !important; border-color: #374151 !important; } .magic-card, .insight-card, .principle-card, .book-card, .featured-card { background: #1f2937 !important; border-color: #374151 !important; color: #f9fafb !important; } p { color: #d1d5db !important; } h1, h2, h3, h4, h5, h6 { color: #f9fafb !important; } } /* ============================================ 9. 减少动效偏好 ============================================ */ @media (prefers-reduced-motion: reduce) { .pulse-animation, .shine-effect:after, .money-icon:after, .card-hover, .magic-card, .insight-card, .book-card, .nav-brand-mini, .nav-chapter-pill, .nav-home { animation: none !important; transition: none !important; } }