/* ============================================================ * 启凡科创 QF-TEK 主页样式 * 设计语言：深空蓝底 × 青蓝主色 × 琥珀点缀 * 主题：跟随 （theme.css 覆盖变量） * ============================================================ */ :root { /* 主色：青蓝 */ --primary: #1f8abe; --primary-dark: #1870a0; --primary-light: #40a8d8; --primary-soft: rgba(31, 138, 190, 0.08); --primary-soft-2: rgba(31, 138, 190, 0.14); /* 点缀色：琥珀 */ --secondary: #f6b428; --secondary-light: #f8c850; --accent-warm: linear-gradient(135deg, #f7c948, #f0a92e); --accent-warm-text: #5c4500; /* 表面 */ --bg: #f5f7fc; --bg-elev: rgba(255, 255, 255, 0.72); --card-bg: #ffffff; --text: #1d1d1f; --text-secondary: #64696f; --border: rgba(60, 90, 120, 0.14); --border-strong: rgba(60, 90, 120, 0.24); /* 圆角与阴影 */ --radius: 16px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15, 40, 70, 0.05), 0 2px 10px rgba(15, 40, 70, 0.05); --shadow: 0 2px 6px rgba(15, 40, 70, 0.05), 0 12px 32px -12px rgba(15, 40, 70, 0.14); --shadow-lg: 0 6px 18px rgba(15, 40, 70, 0.08), 0 28px 64px -20px rgba(15, 40, 70, 0.25); /* 动效 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 44px; background: var(--bg); } body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--primary-soft-2); } /* ── 背景层 ── */ .bg-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); } .bg-layer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 42% at 18% 22%, rgba(31,138,190,0.10) 0%, transparent 100%), radial-gradient(ellipse 45% 38% at 84% 58%, rgba(246,180,40,0.07) 0%, transparent 100%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(31,138,190,0.06) 0%, transparent 100%); } .bg-layer::after { content: ''; position: absolute; inset: 0; opacity: 0.35; color: rgba(31, 138, 190, 0.35); background-image: linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 32%, black 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 60% at 50% 32%, black 30%, transparent 100%); } /* ── 漂浮光斑 ── */ .bg-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(80px); } .bg-orb-1 { width: 520px; height: 520px; background: rgba(31,138,190,0.13); top: -140px; right: -120px; animation: float-drift 26s ease-in-out infinite alternate; } .bg-orb-2 { width: 420px; height: 420px; background: rgba(246,180,40,0.09); bottom: -100px; left: -110px; animation: float-drift 32s ease-in-out infinite alternate-reverse; } .bg-orb-3 { width: 360px; height: 360px; background: rgba(31,138,190,0.07); top: 55%; left: 52%; animation: float-drift 36s ease-in-out infinite alternate; } @keyframes float-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 24px) scale(1.06); } 100% { transform: translate(28px, -18px) scale(0.97); } } @media (prefers-reduced-motion: reduce) { .bg-orb { animation: none; } } .snap-section { scroll-snap-align: start; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 72px 24px 60px; } .snap-section-hero { justify-content: center; padding: 72px 24px 80px; } /* ── 导航栏 ── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--bg-elev); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid transparent; transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .navbar.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .nav-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nav-logo { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -0.02em; min-width: 0; } .nav-logo img { height: 24px; width: auto; border-radius: 5px; object-fit: contain; } .nav-links { display: flex; gap: 2px; } .nav-links a { padding: 4px 11px; border-radius: 999px; text-decoration: none; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; } .nav-links a:hover, .nav-links a.active { color: var(--primary-dark); background: var(--primary-soft); } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { color: var(--primary-light); } /* 导航下拉 */ .nav-dropdown { position: relative; } .nav-dropdown::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-dropdown-trigger { display: flex; align-items: center; gap: 4px; cursor: pointer; } .nav-dropdown-trigger i { font-size: 0.62rem; opacity: 0.7; transition: transform 0.25s var(--ease-out); } .nav-dropdown:hover .nav-dropdown-trigger i { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px) scale(0.98); transform-origin: top center; min-width: 152px; background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s var(--ease-out); z-index: 200; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); } .nav-dropdown-menu a { display: block; padding: 7px 14px; border-radius: 8px; font-size: 0.83rem; color: var(--text-secondary); text-decoration: none; white-space: nowrap; text-align: center; transition: all 0.15s ease; } .nav-dropdown-menu a:hover { color: var(--text); background: var(--primary-soft); } .nav-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .nav-toggle { display: none; background: none; border: none; font-size: 1.3rem; color: var(--text); cursor: pointer; padding: 4px; } /* 导航按钮（管理员 / 主题切换） */ .nav-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--text-secondary); font-size: 0.83rem; font-family: inherit; cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; } .nav-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); } .nav-btn.admin-logged-in { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .nav-btn.admin-logged-in:hover { border-color: var(--danger, #e74c3c); color: var(--danger, #e74c3c); background: rgba(231, 76, 60, 0.06); } [data-theme="dark"] .nav-btn:hover { color: var(--primary-light); } /* ── Hero 区 ── */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 72px 24px 80px; } .hero-visual { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-glow { position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(31,138,190,0.09) 0%, transparent 68%); } .hero-shape { position: absolute; border-radius: 50%; pointer-events: none; } .shape-1 { width: 560px; height: 560px; top: -120px; right: -120px; background: radial-gradient(circle, rgba(31,138,190,0.12) 0%, transparent 70%); animation: float-drift 24s ease-in-out infinite alternate; } .shape-2 { width: 440px; height: 440px; bottom: -80px; left: -100px; background: radial-gradient(circle, rgba(246,180,40,0.09) 0%, transparent 70%); animation: float-drift 30s ease-in-out infinite alternate-reverse; } .hero-content { position: relative; text-align: center; max-width: 640px; } .hero-badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px; padding: 6px 16px; border-radius: 999px; background: var(--primary-soft); border: 1px solid var(--primary-soft-2); color: var(--primary-dark); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; animation: rise-in 0.7s var(--ease-out) both; } .hero-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #34c759); box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); animation: badge-pulse 2.4s ease-in-out infinite; } @keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); } } [data-theme="dark"] .hero-badge { color: var(--primary-light); } .hero-logo { width: min(300px, 62vw); margin: 0 auto 24px; animation: rise-in 0.7s var(--ease-out) 0.06s both; } .hero-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 38px rgba(31, 138, 190, 0.28)); transition: transform 0.5s var(--ease-out); } .hero-logo:hover img { transform: scale(1.04) rotate(-1deg); } .hero-title { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 10px; background: linear-gradient(115deg, var(--text) 30%, var(--primary) 78%, var(--secondary) 105%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rise-in 0.7s var(--ease-out) 0.12s both; } .hero-subtitle { font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--text-secondary); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 14px; animation: rise-in 0.7s var(--ease-out) 0.18s both; } .hero-desc { font-size: 0.98rem; color: var(--text-secondary); line-height: 1.7; max-width: 460px; margin: 0 auto 32px; animation: rise-in 0.7s var(--ease-out) 0.24s both; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: rise-in 0.7s var(--ease-out) 0.3s both; } .hero-scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 0.75rem; letter-spacing: 0.14em; opacity: 0.65; cursor: pointer; animation: hint-rise 0.7s var(--ease-out) 0.5s both; transition: opacity 0.3s var(--ease-out); } .hero-scroll-hint:hover, .hero-scroll-hint:focus-visible { opacity: 1; outline: none; } .hero-scroll-hint:hover i, .hero-scroll-hint:focus-visible i { color: var(--primary); } .hero-scroll-hint i { animation: scroll-bounce 1.8s ease-in-out infinite; } /* 单独 keyframes：把 translateX(-50%) 合入动画 transform，避免 rise-in 覆盖定位导致偏右 */ @keyframes hint-rise { from { opacity: 0; transform: translateX(-50%) translateY(22px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(6px); opacity: 0.4; } } @keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-badge .badge-dot, .hero-scroll-hint i { animation: none; } .hero-badge, .hero-logo, .hero-title, .hero-subtitle, .hero-desc, .hero-actions, .hero-scroll-hint { animation: none !important; opacity: 1 !important; } } /* ── 按钮 ── */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: all 0.3s var(--ease-out); cursor: pointer; border: none; will-change: transform; } .btn-primary { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff; box-shadow: 0 4px 16px rgba(31,138,190,0.32), inset 0 1px 0 rgba(255,255,255,0.22); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(31,138,190,0.42), inset 0 1px 0 rgba(255,255,255,0.22); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--card-bg); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); } .btn-secondary:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary-dark); box-shadow: var(--shadow); } .btn-accent { background: var(--accent-warm); color: var(--accent-warm-text); border: none; box-shadow: 0 4px 16px rgba(240,169,46,0.35), inset 0 1px 0 rgba(255,255,255,0.35); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(240,169,46,0.45), inset 0 1px 0 rgba(255,255,255,0.35); color: var(--accent-warm-text); } /* ── 区块通用 ── */ .section { padding: 88px 24px; } .services-section, .projects-section { min-height: auto; } .section-header { text-align: center; margin-bottom: 44px; width: 100%; max-width: 780px; } .section-header .section-kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; color: var(--primary); margin-bottom: 10px; } .section-header h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 10px; } .section-header h2::after { content: ''; display: block; width: 44px; height: 3px; margin: 14px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--secondary)); } .section-header p { color: var(--text-secondary); font-size: 1.02rem; } /* ── 服务卡片 ── */ .services-showcase { width: min(80vw, 1400px); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; align-items: stretch; } .services-sub-label { grid-column: 1 / -1; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; padding: 8px 0 4px; } .services-divider { grid-column: 1 / -1; height: 0; margin: 4px 0 8px; display: flex; justify-content: center; } .services-divider::after { content: ''; width: min(696px, 100%); border-bottom: 1px dashed var(--border-strong); } .service-card { background: var(--card-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease; width: 100%; max-width: 360px; min-width: 0; margin: 0 auto; position: relative; display: flex; flex-direction: column; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--secondary)); opacity: 0; transition: opacity 0.35s ease; z-index: 1; } .service-card.featured { border-color: var(--primary-soft-2); } .service-card.featured::after { content: '★ 推荐'; position: absolute; top: 12px; right: -34px; z-index: 2; transform: rotate(45deg); padding: 3px 40px; background: var(--accent-warm); color: var(--accent-warm-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; box-shadow: 0 2px 8px rgba(240,169,46,0.4); } .service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; } .service-card:hover::before { opacity: 1; } .service-visual { height: 118px; background: linear-gradient(135deg, #0a1628 0%, #16324a 55%, #0d2137 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .service-visual::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.07); animation: pulse-ring 3.4s ease-out infinite; } .service-visual::after { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.05); animation: pulse-ring 3.4s ease-out infinite 0.8s; } @keyframes pulse-ring { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .service-visual::before, .service-visual::after, .showcase-visual::before, .showcase-visual::after { animation: none; } } .service-visual i { font-size: 2.4rem; color: rgba(160, 214, 238, 0.9); text-shadow: 0 0 34px rgba(64, 168, 216, 0.65); position: relative; z-index: 1; transition: transform 0.35s var(--ease-out); } .service-card:hover .service-visual i { transform: scale(1.14) translateY(-2px); } .service-info { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .service-info h3 { font-size: 1.06rem; font-weight: 700; color: var(--text); } .service-info p { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.55; } .service-features { display: flex; flex-wrap: wrap; gap: 6px; } .service-features span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 0.74rem; font-weight: 500; } [data-theme="dark"] .service-features span { color: var(--primary-light); } .service-features span i { font-size: 0.68rem; } .btn-card { margin-top: auto; align-self: flex-start; flex-shrink: 0; white-space: nowrap; } .btn-card-group { margin-top: auto; align-self: stretch; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; } .btn-hint { display: inline-flex; align-items: center; flex: 1; min-width: 0; white-space: normal; gap: 5px; font-size: 0.76rem; color: var(--text-secondary); opacity: 0.85; } /* ── 项目展示卡 ── */ .projects-showcase { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .project-showcase-card { background: var(--card-bg); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease; display: flex; flex-direction: column; width: 340px; max-width: 100%; position: relative; } .project-showcase-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--primary-light), var(--secondary)); opacity: 0; transition: opacity 0.35s ease; z-index: 1; } .project-showcase-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .project-showcase-card:hover::before { opacity: 1; } .showcase-visual { height: 130px; background: linear-gradient(135deg, #0a1628 0%, #16324a 55%, #0d2137 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .showcase-visual::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.08); animation: pulse-ring 3.4s ease-out infinite; } .showcase-visual::after { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.05); animation: pulse-ring 3.4s ease-out infinite 0.8s; } .showcase-visual i { font-size: 2.6rem; color: rgba(160, 214, 238, 0.92); text-shadow: 0 0 36px rgba(64, 168, 216, 0.7); position: relative; z-index: 1; transition: transform 0.35s var(--ease-out); } .project-showcase-card:hover .showcase-visual i { transform: scale(1.14) translateY(-2px); } .showcase-info { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; } .showcase-info h3 { font-size: 1.06rem; font-weight: 700; color: var(--text); } .showcase-info p { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.55; } .showcase-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 22px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.3s var(--ease-out); cursor: pointer; margin-top: auto; align-self: flex-start; background: var(--primary); color: #fff; border: none; box-shadow: 0 4px 14px rgba(31,138,190,0.28); } .showcase-link::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.72rem; transition: transform 0.3s var(--ease-out); } .project-showcase-card:hover .showcase-link { background: var(--primary-dark); box-shadow: 0 8px 22px rgba(31,138,190,0.36); } .project-showcase-card:hover .showcase-link::after { transform: translateX(4px); } /* ── 页脚 ── */ .footer { position: relative; background: var(--bg-elev); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-top: 1px solid var(--border); margin-top: 40px; } .footer-inner { max-width: 1160px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; } .footer-copy { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.7; } .visitor-count i { margin-right: 3px; } /* ── 管理员登录弹窗（配合内联样式） ── */ #admin-login-overlay input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft-2); outline: none !important; } .admin-login-btn { box-shadow: 0 4px 14px rgba(31,138,190,0.30), inset 0 1px 0 rgba(255,255,255,0.25); transition: all 0.25s ease; } .admin-login-btn:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(31,138,190,0.40); transform: translateY(-1px); } /* ============================================================ * 响应式 * ============================================================ */ @media (max-width: 1000px) { html { scroll-snap-type: none; } .snap-section { min-height: auto; padding: 56px 20px 40px; } .services-section, .projects-section { padding-top: 20px; } .services-section .section-header, .projects-section .section-header { margin-bottom: 24px; } .snap-section-hero { padding: 56px 20px 64px; } .hero { min-height: 100dvh; } .section { padding: 56px 20px; } .services-showcase { width: min(80vw, 380px); grid-template-columns: 1fr; padding-bottom: 40px; } .service-card { max-width: none; } .projects-showcase { flex-direction: column; align-items: center; padding-bottom: 40px; } .project-showcase-card { width: 100%; max-width: 380px; } .footer-inner { padding: 16px 20px; flex-direction: column; text-align: center; } .footer { padding-bottom: max(20px, env(safe-area-inset-bottom)); } } /* 移动端导航抽屉 */ @media (max-width: 1000px) { .nav-links { display: none; position: absolute; top: 44px; left: 0; right: 0; background: var(--card-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; padding: 8px 16px 14px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); max-height: calc(100dvh - 44px); overflow-y: auto; } .nav-links.open { display: flex; } .nav-links a { padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; } .nav-toggle { display: block; } .nav-dropdown { width: 100%; } .nav-dropdown-trigger { width: 100%; } .nav-dropdown-menu { position: static; transform: none; box-shadow: none; border: none; background: var(--primary-soft); margin-top: 4px; padding: 4px 0 4px 16px; display: none; opacity: 1; visibility: visible; pointer-events: auto; } .nav-dropdown.open .nav-dropdown-menu { display: block; } .nav-dropdown.open .nav-dropdown-trigger i { transform: rotate(180deg); } .nav-dropdown-menu a { text-align: left; padding: 8px 12px; } .nav-toggle.open { color: var(--primary); } }