/* ============================================================================ * Saifan 全站统一 navbar 样式（飞书风） * 玻璃拟态 + 滚动阴影 + 胶囊渐变按钮 + 下划线 active + 弹性下拉 * * 使用：在 HTML 加 * 根目录页：assets/css/navbar.css * 子目录页：../assets/css/navbar.css * ============================================================================ */ .navbar-custom { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(226, 232, 240, 0.6); padding: 0; position: sticky; top: 0; z-index: 1000; height: 64px; transition: box-shadow .25s ease, background .25s ease; } .navbar-custom.scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06); } .navbar-container { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; gap: 16px; } .navbar-brand { display: flex; align-items: center; text-decoration: none; color: #333; flex-shrink: 0; } .navbar-brand img { height: 36px; margin-right: 8px; transition: transform .25s ease; } .navbar-brand:hover img { transform: scale(1.04); } .brand-text { font-size: 18px; font-weight: 600; color: #1a2f5a; } .navbar-nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 28px; } .nav-item { position: relative; } .nav-link { color: #475569; text-decoration: none; font-size: 14px; font-weight: 500; padding: 24px 0; display: inline-flex; align-items: center; gap: 4px; position: relative; transition: color .2s ease; } .nav-link:hover { color: #1967d2; } .nav-link.active { color: #1967d2; font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: #1967d2; border-radius: 1px; } .navbar-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .phone-number { color: #475569; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .phone-number::before { content: '📞'; font-size: 13px; opacity: 0.85; } .btn-trial { background: linear-gradient(135deg, #1967d2 0%, #1a56b8 100%); color: #fff; border: none; padding: 9px 22px; border-radius: 50px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 14px rgba(25, 103, 210, 0.30); transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease; white-space: nowrap; } .btn-trial:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(25, 103, 210, 0.40); color: #fff; } /* Mobile toggle */ .mobile-toggle { display: none; background: none; border: none; font-size: 18px; cursor: pointer; } @media (max-width: 1100px) { .navbar-right .phone-number { display: none; } } @media (max-width: 768px) { .navbar-nav { display: none; } .mobile-toggle { display: block; } } /* === 下拉菜单（飞书风圆角 + 弹性入场） === */ .dropdown { position: relative; } .dropdown-menu { position: absolute; top: calc(100% - 4px); left: -14px; background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; box-shadow: 0 10px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04); min-width: 180px; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility .25s; z-index: 1000; } .dropdown-menu.industry-menu { min-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: block; padding: 10px 14px; color: #475569; text-decoration: none; font-size: 14px; border-radius: 8px; border-bottom: none; transition: all .2s ease; } .dropdown-item:hover { background: #f0f7ff; color: #1967d2; transform: translateX(3px); } .dropdown-item.active { background: #e7f0fd; color: #1967d2; font-weight: 600; } .industry-menu .dropdown-item { margin: 0; padding: 8px 12px; } .nav-arrow { display: inline-block; margin-left: 2px; font-size: 9px; color: #94a3b8; transition: transform .25s ease, color .2s ease; } .dropdown:hover .nav-arrow { transform: rotate(180deg); color: #1967d2; } .nav-link:hover .nav-arrow { color: #1967d2; }