/** * 全站顶栏：与首页一致的「顶行搜索 + 横滑频道 + 快捷图标」布局。 * 在上添加 class `has-nav-feed`，并引入本文件（在 style.css / responsive.css 之后）。 * 强调色为棕金 / 淡黄，非粉色。 */ body.has-nav-feed { --tj-feed-nav-top-h: 50px; --tj-feed-nav-channel-h: 42px; --tj-feed-nav-dock-h: 54px; --tj-feed-nav-stack: calc(var(--tj-feed-nav-top-h) + var(--tj-feed-nav-channel-h) + var(--tj-feed-nav-dock-h)); --tj-nav-accent: #8b6914; --tj-nav-accent-bright: #c9a227; --tj-nav-accent-dim: #6d5420; --tj-nav-highlight-bg: rgba(201, 162, 39, 0.14); --tj-nav-text: #2a2418; --tj-nav-muted: #6b6458; --tj-nav-surface: rgba(255, 252, 244, 0.97); padding-top: var(--tj-feed-nav-stack); } body.has-nav-feed .navbar.navbar--home-feed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--tj-nav-surface); border-bottom: 1px solid rgba(90, 68, 40, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } body.has-nav-feed .navbar .nav-container.nav-container--feed { max-width: min(1760px, calc(100vw - 20px)); margin: 0 auto; padding: 0 12px 6px; flex-direction: column; align-items: stretch; gap: 0; min-height: auto; height: auto !important; width: 100%; } body.has-nav-feed .nav-feed-top { display: flex; align-items: center; gap: 12px; min-height: var(--tj-feed-nav-top-h); flex-wrap: wrap; } body.has-nav-feed .nav-feed-top .logo { flex-shrink: 0; color: var(--tj-nav-text); } body.has-nav-feed .nav-feed-top .logo-text { font-weight: 800; letter-spacing: 0.02em; } body.has-nav-feed .nav-feed-search { flex: 1 1 220px; display: flex; align-items: center; gap: 0; max-width: 520px; margin: 0 auto; border: 1px solid rgba(90, 68, 40, 0.18); border-radius: 8px; overflow: hidden; background: rgba(255, 248, 230, 0.85); box-shadow: 0 1px 2px rgba(45, 36, 22, 0.06); } body.has-nav-feed .nav-feed-search-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 8px 12px; font-size: 0.95rem; color: var(--tj-nav-text); outline: none; } body.has-nav-feed .nav-feed-search-input::placeholder { color: var(--tj-nav-muted); } body.has-nav-feed .nav-feed-search-btn { flex-shrink: 0; border: 0; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer; color: #fffaf0; background: linear-gradient(90deg, var(--tj-nav-accent-bright) 0%, var(--tj-nav-accent) 100%); } body.has-nav-feed .nav-feed-search-btn:hover { filter: brightness(1.06); } body.has-nav-feed .nav-feed-channels { border-top: 1px solid rgba(90, 68, 40, 0.08); padding-top: 4px; min-height: var(--tj-feed-nav-channel-h); } body.has-nav-feed .nav-feed-channels .nav-menu { margin: 0; padding: 4px 0 6px; gap: 4px 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; mask-image: linear-gradient(to right, #000 92%, transparent 100%); } body.has-nav-feed .nav-feed-channels .nav-menu::-webkit-scrollbar { height: 4px; } body.has-nav-feed .nav-feed-channels .nav-menu::-webkit-scrollbar-thumb { background: rgba(90, 68, 40, 0.2); border-radius: 4px; } body.has-nav-feed .nav-feed-channels .nav-menu a { color: #5a4f3d; font-size: 0.88rem; white-space: nowrap; padding: 6px 10px; border-radius: 6px; } body.has-nav-feed .nav-feed-channels .nav-menu a:hover, body.has-nav-feed .nav-feed-channels .nav-menu a.active { color: var(--tj-nav-accent); background: var(--tj-nav-highlight-bg); } body.has-nav-feed .nav-feed-top .nav-trailing { margin-left: auto; } body.has-nav-feed .nav-feed-top .mobile-menu-btn { margin-left: 0; } body.has-nav-feed .nav-feed-dock { border-top: 1px solid rgba(90, 68, 40, 0.08); padding: 6px 0 8px; min-height: var(--tj-feed-nav-dock-h); display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; } body.has-nav-feed .home-channel-dock-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tj-nav-text); font-size: 0.9rem; font-weight: 600; } body.has-nav-feed .home-channel-dock-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fffaf0; font-size: 1.15rem; box-shadow: 0 4px 12px rgba(45, 36, 22, 0.15); } body.has-nav-feed .home-channel-dock-icon--dyn { background: linear-gradient(135deg, #d4b896 0%, var(--tj-nav-accent) 100%); } body.has-nav-feed .home-channel-dock-icon--hot { background: linear-gradient(135deg, #f5e6b8 0%, var(--tj-nav-accent-bright) 100%); } body.has-nav-feed .home-channel-dock-item:hover .home-channel-dock-icon { transform: scale(1.04); transition: transform 0.2s ease; } /* 原 70px 为顶栏预留；body 已 padding-top 后不再叠一层 */ body.has-nav-feed .page-header { margin-top: 0; } @media (max-width: 768px) { body.has-nav-feed .nav-feed-search { order: 3; flex: 1 1 100%; max-width: none; margin: 6px 0 0; } body.has-nav-feed .nav-feed-top .nav-trailing { margin-left: 0; } body.has-nav-feed .nav-feed-channels .nav-menu { mask-image: none; } body.has-nav-feed .nav-menu { top: var(--tj-feed-nav-stack) !important; } }