/* 高科技风覆盖样式（在不破坏原页面结构前提下做“质感升级”） * 支持亮/暗两套主题：通过 控制 */ :root { --tech-bg-0: #060814; --tech-bg-1: #0a1630; --tech-bg-2: #071a2a; --tech-accent: #49a6ff; --tech-accent-2: #23f0c7; --tech-text: rgba(255, 255, 255, 0.92); --tech-muted: rgba(255, 255, 255, 0.72); --tech-border: rgba(255, 255, 255, 0.12); --tech-glow: 0 0 0 1px rgba(73, 166, 255, 0.18), 0 18px 48px rgba(7, 12, 33, 0.45); } /* 仅对带 theme-tech 的页面生效 */ html[data-theme="dark"] body.theme-tech { background: radial-gradient(1200px 700px at 20% -10%, rgba(73, 166, 255, 0.28), transparent 60%), radial-gradient(900px 600px at 95% 10%, rgba(35, 240, 199, 0.16), transparent 55%), linear-gradient(180deg, var(--tech-bg-0) 0%, var(--tech-bg-1) 40%, var(--tech-bg-2) 100%); color: var(--tech-text); } html[data-theme="light"] body.theme-tech { background: radial-gradient(1200px 700px at 15% -10%, rgba(24, 144, 255, 0.18), transparent 55%), radial-gradient(900px 600px at 95% 10%, rgba(6, 182, 212, 0.14), transparent 55%), linear-gradient(180deg, #ffffff 0%, #f6f9ff 45%, #ffffff 100%); color: #0f172a; } html[data-theme="dark"] body.theme-tech .bg-light { background: rgba(255, 255, 255, 0.04); } html[data-theme="light"] body.theme-tech .bg-light { background: rgba(15, 23, 42, 0.03); } /* 顶部导航：深色玻璃 */ body.theme-tech .navbar { background: rgba(8, 12, 24, 0.72); border-bottom: 1px solid var(--tech-border); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } html[data-theme="light"] body.theme-tech .navbar { background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 10px 30px rgba(2, 8, 23, 0.08); } html[data-theme="dark"] body.theme-tech .nav-link { color: rgba(255, 255, 255, 0.86); } html[data-theme="light"] body.theme-tech .nav-link { color: rgba(15, 23, 42, 0.86); } body.theme-tech .nav-link:hover, body.theme-tech .nav-link.active { color: #fff; } body.theme-tech .nav-link.active::after { background: linear-gradient(90deg, var(--tech-accent), var(--tech-accent-2)); } body.theme-tech .logo a { color: #fff; text-shadow: 0 0 18px rgba(73, 166, 255, 0.35); } html[data-theme="light"] body.theme-tech .logo a { color: #0f172a; text-shadow: none; } /* 通用标题/副标题 */ body.theme-tech .section-title, body.theme-tech .page-title { color: inherit; letter-spacing: -0.02em; } body.theme-tech .section-subtitle, body.theme-tech .page-subtitle { color: rgba(255, 255, 255, 0.78); } html[data-theme="light"] body.theme-tech .section-subtitle, html[data-theme="light"] body.theme-tech .page-subtitle { color: rgba(15, 23, 42, 0.70); } /* 卡片质感：玻璃 + 细边框 */ body.theme-tech .product-card, body.theme-tech .feature-card, body.theme-tech .feature-item, body.theme-tech .scenario-card, body.theme-tech .site-card, body.theme-tech .product-metric-card, body.theme-tech .site-value-item { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--tech-border); box-shadow: var(--tech-glow); backdrop-filter: blur(10px); } html[data-theme="light"] body.theme-tech .product-card, html[data-theme="light"] body.theme-tech .feature-card, html[data-theme="light"] body.theme-tech .feature-item, html[data-theme="light"] body.theme-tech .scenario-card, html[data-theme="light"] body.theme-tech .site-card, html[data-theme="light"] body.theme-tech .product-metric-card, html[data-theme="light"] body.theme-tech .site-value-item { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 10px 30px rgba(2, 8, 23, 0.08); backdrop-filter: blur(6px); } /* 关键：提升暗色主题下的可读性（标题/正文/链接） */ html[data-theme="dark"] body.theme-tech h1, html[data-theme="dark"] body.theme-tech h2, html[data-theme="dark"] body.theme-tech h3, html[data-theme="dark"] body.theme-tech h4, html[data-theme="dark"] body.theme-tech .product-title, html[data-theme="dark"] body.theme-tech .feature-title, html[data-theme="dark"] body.theme-tech .scenario-title { color: rgba(255, 255, 255, 0.94); } html[data-theme="dark"] body.theme-tech p, html[data-theme="dark"] body.theme-tech li, html[data-theme="dark"] body.theme-tech .product-desc, html[data-theme="dark"] body.theme-tech .feature-desc, html[data-theme="dark"] body.theme-tech .scenario-desc, html[data-theme="dark"] body.theme-tech .site-card p, html[data-theme="dark"] body.theme-tech .product-metric-card p { color: rgba(255, 255, 255, 0.78); } html[data-theme="light"] body.theme-tech p, html[data-theme="light"] body.theme-tech li, html[data-theme="light"] body.theme-tech .product-desc, html[data-theme="light"] body.theme-tech .feature-desc, html[data-theme="light"] body.theme-tech .scenario-desc, html[data-theme="light"] body.theme-tech .site-card p, html[data-theme="light"] body.theme-tech .product-metric-card p { color: rgba(15, 23, 42, 0.74); } html[data-theme="dark"] body.theme-tech a { color: rgba(180, 220, 255, 0.95); } html[data-theme="dark"] body.theme-tech a:hover { color: #ffffff; } /* 按钮：霓虹强调 */ body.theme-tech .btn.btn-primary { background: linear-gradient(90deg, var(--tech-accent) 0%, var(--tech-accent-2) 100%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 28px rgba(73, 166, 255, 0.28); } html[data-theme="light"] body.theme-tech .btn.btn-primary { box-shadow: 0 12px 28px rgba(24, 144, 255, 0.18); } body.theme-tech .btn.btn-outline, body.theme-tech .btn.btn-outline-dark, body.theme-tech .btn.btn-ghost { border-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.88); } body.theme-tech .btn.btn-outline:hover, body.theme-tech .btn.btn-outline-dark:hover, body.theme-tech .btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); } /* 页脚：更深、更统一 */ body.theme-tech .footer { background: rgba(5, 7, 16, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.08); } html[data-theme="light"] body.theme-tech .footer { background: rgba(2, 6, 23, 0.92); } /* 首屏/页头加一点“网格感” */ body.theme-tech .hero-background::before, body.theme-tech .page-header::before { opacity: 0.55; } /* 内页 page-header 背景更赛博 */ body.theme-tech .page-header { background: radial-gradient(900px 420px at 10% 0%, rgba(73, 166, 255, 0.35), transparent 60%), radial-gradient(900px 420px at 95% 10%, rgba(35, 240, 199, 0.22), transparent 60%), linear-gradient(125deg, #070b1d 0%, #0b2a4a 48%, #063148 100%); } html[data-theme="light"] body.theme-tech .page-header { background: radial-gradient(900px 420px at 10% 0%, rgba(56, 189, 248, 0.36), transparent 60%), radial-gradient(900px 420px at 95% 10%, rgba(45, 212, 191, 0.24), transparent 60%), linear-gradient(125deg, #0f2744 0%, #1e40af 52%, #075985 100%); } /* 导航右侧动作按钮（语言/主题） */ .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 14px; } .nav-action-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.92); text-decoration: none; font-weight: 700; font-size: 13px; cursor: pointer; } html[data-theme="light"] .nav-action-btn { border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.75); color: rgba(15, 23, 42, 0.92); } .nav-action-btn:hover { transform: translateY(-1px); } /* ========== 主题语义色变量（高对比） ========== */ html[data-theme="dark"] body.theme-tech { --fg-primary: #f1f5f9; --fg-secondary: #cbd5e1; --fg-muted: #94a3b8; --fg-link: #7dd3fc; --fg-link-hover: #ffffff; --surface-1: rgba(255, 255, 255, 0.08); --surface-2: rgba(255, 255, 255, 0.05); --surface-border: rgba(255, 255, 255, 0.14); --surface-elevated: rgba(15, 23, 42, 0.72); } html[data-theme="light"] body.theme-tech { --fg-primary: #0b1220; --fg-secondary: #1e293b; --fg-muted: #475569; --fg-link: #0369a1; --fg-link-hover: #0c4a6e; --surface-1: #ffffff; --surface-2: #f1f5f9; --surface-border: rgba(15, 23, 42, 0.12); --surface-elevated: #ffffff; } body.theme-tech { color: var(--fg-primary); } /* 导航：亮色模式下 hover 不再变白 */ html[data-theme="light"] body.theme-tech .nav-link:hover, html[data-theme="light"] body.theme-tech .nav-link.active { color: #0369a1; } html[data-theme="dark"] body.theme-tech .nav-link:hover, html[data-theme="dark"] body.theme-tech .nav-link.active { color: #ffffff; } /* 标题/正文统一高对比 */ body.theme-tech .section-title, body.theme-tech .page-title, body.theme-tech .product-title, body.theme-tech .feature-title, body.theme-tech .scenario-title, body.theme-tech .home-reason-title, body.theme-tech .site-card h3, body.theme-tech .site-value-item h3, body.theme-tech .content-text h2, body.theme-tech .lead-intro h2 { color: var(--fg-primary) !important; } body.theme-tech .section-subtitle, body.theme-tech .page-subtitle, body.theme-tech .product-desc, body.theme-tech .feature-desc, body.theme-tech .scenario-desc, body.theme-tech .home-reason-desc, body.theme-tech .about-text-block, body.theme-tech .about-text-block p, body.theme-tech .site-card p, body.theme-tech .site-value-item p, body.theme-tech .content-text p, body.theme-tech .product-metric-card p { color: var(--fg-muted) !important; } body.theme-tech a:not(.btn):not(.nav-link):not(.product-link):not(.lead-quick-item) { color: var(--fg-link); } body.theme-tech a:not(.btn):not(.nav-link):hover { color: var(--fg-link-hover); } /* 页头区域：始终白字（渐变背景上） */ body.theme-tech .page-header, body.theme-tech .page-header .page-title, body.theme-tech .page-header .page-subtitle, body.theme-tech .page-header .site-stat-card .num, body.theme-tech .page-header .site-stat-card .lbl { color: #ffffff !important; } html[data-theme="light"] body.theme-tech .page-header { color: #ffffff; } html[data-theme="light"] body.theme-tech .page-header .page-subtitle { color: rgba(255, 255, 255, 0.92) !important; } /* Hero 区域保持白字 */ body.theme-tech .hero, body.theme-tech .hero-title, body.theme-tech .hero-subtitle, body.theme-tech .hero-eyebrow { color: #ffffff; } /* 首页产品条 / 卡片 / 原因区 */ html[data-theme="dark"] body.theme-tech .home-product-strip { background: var(--surface-elevated); border-bottom-color: var(--surface-border); } html[data-theme="light"] body.theme-tech .home-product-strip { background: var(--surface-1); border-bottom-color: var(--surface-border); } body.theme-tech .home-product-pill { color: var(--fg-secondary); background: var(--surface-1); border-color: var(--surface-border); } body.theme-tech .home-product-pill:hover { color: var(--fg-link); border-color: var(--tech-accent); } body.theme-tech .home-reason-card, body.theme-tech .home-solution-featured, body.theme-tech .product-overview-card { background: var(--surface-1) !important; border-color: var(--surface-border) !important; } body.theme-tech .home-solution-featured-body h3 { color: var(--fg-primary) !important; } body.theme-tech .home-solution-featured-body p { color: var(--fg-muted) !important; } body.theme-tech .home-solution-tags span, body.theme-tech .product-tag { background: rgba(73, 166, 255, 0.15); color: var(--fg-link); } html[data-theme="light"] body.theme-tech .home-solution-tags span, html[data-theme="light"] body.theme-tech .product-tag { background: #e0f2fe; color: #0369a1; } body.theme-tech .product-link { color: var(--fg-link) !important; font-weight: 600; } /* 内页变量覆盖 */ html[data-theme="dark"] body.theme-tech.page-inner { --site-text: var(--fg-primary); --site-text-muted: var(--fg-muted); --site-bg: var(--surface-2); } html[data-theme="light"] body.theme-tech.page-inner { --site-text: var(--fg-primary); --site-text-muted: var(--fg-muted); --site-bg: #f1f5f9; } html[data-theme="dark"] body.theme-tech.page-home { --home-text: var(--fg-primary); --home-text-muted: var(--fg-muted); --home-bg: var(--surface-2); } html[data-theme="light"] body.theme-tech.page-home { --home-text: var(--fg-primary); --home-text-muted: var(--fg-muted); } /* 留资表单区 */ html[data-theme="dark"] body.theme-tech .lead-section { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } html[data-theme="light"] body.theme-tech .lead-section { background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 50%, #fff 100%); } body.theme-tech .lead-panel { background: var(--surface-elevated); border-color: var(--surface-border); } body.theme-tech .lead-form-wrap { background: var(--surface-1); } body.theme-tech .lead-form label { color: var(--fg-secondary) !important; } body.theme-tech .lead-form input, body.theme-tech .lead-form select, body.theme-tech .lead-form textarea { color: var(--fg-primary); background: var(--surface-1); border-color: var(--surface-border); } body.theme-tech .lead-quick-item { color: var(--fg-secondary) !important; } body.theme-tech .lead-contact-bar { color: var(--fg-muted) !important; } /* 时间线 / 产品页 */ body.theme-tech .site-timeline-body { background: var(--surface-1); border-color: var(--surface-border); } body.theme-tech .site-timeline-body h4 { color: var(--fg-primary) !important; } body.theme-tech .site-timeline-year { color: var(--tech-accent) !important; } /* 按钮：亮色模式下 outline 深色字 */ html[data-theme="light"] body.theme-tech .btn.btn-outline, html[data-theme="light"] body.theme-tech .btn.btn-outline-dark, html[data-theme="light"] body.theme-tech .btn.btn-ghost { border-color: rgba(15, 23, 42, 0.22); color: var(--fg-secondary); } html[data-theme="light"] body.theme-tech .btn.btn-outline:hover, html[data-theme="light"] body.theme-tech .btn.btn-outline-dark:hover { background: rgba(15, 23, 42, 0.06); color: var(--fg-primary); } html[data-theme="dark"] body.theme-tech .btn.btn-outline, html[data-theme="dark"] body.theme-tech .btn.btn-outline-dark, html[data-theme="dark"] body.theme-tech .btn.btn-ghost { border-color: rgba(255, 255, 255, 0.28); color: #f1f5f9; } /* 页脚链接对比度 */ body.theme-tech .footer-title { color: #ffffff; } body.theme-tech .footer-links li { color: rgba(255, 255, 255, 0.82); } body.theme-tech .footer-links a { color: rgba(255, 255, 255, 0.82) !important; } body.theme-tech .footer-links a:hover { color: #ffffff !important; } body.theme-tech .footer-bottom, body.theme-tech .footer-beian { color: rgba(255, 255, 255, 0.65) !important; } /* 主题切换按钮图标 */ .theme-toggle-btn .theme-icon { font-size: 16px; line-height: 1; } html[data-theme="light"] .theme-toggle-btn .theme-icon-light { display: inline; } html[data-theme="light"] .theme-toggle-btn .theme-icon-dark { display: none; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: none; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: inline; } .theme-toggle-btn[data-current-theme="light"] .theme-icon-light { display: inline; } .theme-toggle-btn[data-current-theme="light"] .theme-icon-dark { display: none; } .theme-toggle-btn[data-current-theme="dark"] .theme-icon-light { display: none; } .theme-toggle-btn[data-current-theme="dark"] .theme-icon-dark { display: inline; } @media (max-width: 768px) { .nav-actions { margin-left: 0; gap: 8px; } } /* ========== 最终可读性兜底：放在文件末尾，覆盖旧样式 ========== */ html[data-theme="light"] body.theme-tech { --fg-primary: #0f172a; --fg-secondary: #1e293b; --fg-muted: #334155; --surface-1: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2ff; --surface-border: #cbd5e1; } html[data-theme="dark"] body.theme-tech { --fg-primary: #f8fafc; --fg-secondary: #e2e8f0; --fg-muted: #cbd5e1; --surface-1: rgba(15, 23, 42, 0.92); --surface-2: rgba(30, 41, 59, 0.88); --surface-3: rgba(51, 65, 85, 0.82); --surface-border: rgba(148, 163, 184, 0.34); } body.theme-tech .section:not(.bg-primary), body.theme-tech .product-overview, body.theme-tech .product-showcase, body.theme-tech .product-center-value { color: var(--fg-primary); } body.theme-tech .bg-light:not(.page-header) { background: var(--surface-2) !important; } body.theme-tech .product-card, body.theme-tech .feature-card, body.theme-tech .feature-item, body.theme-tech .scenario-card, body.theme-tech .site-card, body.theme-tech .site-value-item, body.theme-tech .product-metric-card, body.theme-tech .product-overview-card, body.theme-tech .home-reason-card, body.theme-tech .home-solution-featured, body.theme-tech .site-timeline-body, body.theme-tech .lead-panel, body.theme-tech .lead-form-wrap { background: var(--surface-1) !important; border-color: var(--surface-border) !important; } body.theme-tech h1:not(.hero-title):not(.page-title), body.theme-tech h2:not(.cta-title), body.theme-tech h3, body.theme-tech h4, body.theme-tech .section-title, body.theme-tech .product-title, body.theme-tech .feature-title, body.theme-tech .scenario-title, body.theme-tech .home-reason-title, body.theme-tech .metric-title, body.theme-tech .product-showcase-main h2, body.theme-tech .product-overview-card h3, body.theme-tech .site-timeline-body h4 { color: var(--fg-primary) !important; } body.theme-tech p:not(.hero-subtitle):not(.cta-subtitle):not(.page-subtitle), body.theme-tech li, body.theme-tech .section-subtitle, body.theme-tech .product-desc, body.theme-tech .feature-desc, body.theme-tech .scenario-desc, body.theme-tech .home-reason-desc, body.theme-tech .product-showcase-main p, body.theme-tech .product-overview-card p, body.theme-tech .product-metric-card p, body.theme-tech .content-text p, body.theme-tech .about-text-block, body.theme-tech .lead-contact-bar { color: var(--fg-muted) !important; } body.theme-tech .page-header, body.theme-tech .page-header .page-title, body.theme-tech .page-header .page-subtitle, body.theme-tech .page-header h1, body.theme-tech .page-header p, body.theme-tech .page-header .num, body.theme-tech .page-header .lbl { color: #ffffff !important; } body.theme-tech .hero, body.theme-tech .hero h1, body.theme-tech .hero p, body.theme-tech .hero .hero-eyebrow, body.theme-tech .hero .badge { color: #ffffff !important; } body.theme-tech .home-stats-bar, body.theme-tech .home-stats-bar * { color: #ffffff !important; } /* CTA 标题/说明用白字；勿用 * 通配，否则会覆盖 btn-light 导致白底白字 */ body.theme-tech .cta.section.bg-primary .cta-title, body.theme-tech .cta.section.bg-primary .cta-subtitle, body.theme-tech .cta.section.bg-primary .cta-contact-hint, body.theme-tech .cta.section.bg-primary .cta-contact-hint a { color: #ffffff !important; } body.theme-tech .cta.section.bg-primary .btn.btn-light { background: #ffffff !important; color: #0f172a !important; border: 2px solid #ffffff !important; } body.theme-tech .cta.section.bg-primary .btn.btn-light:hover { background: #e2e8f0 !important; color: #0f172a !important; } body.theme-tech .cta.section.bg-primary .btn.btn-outline-light { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255, 255, 255, 0.85) !important; } body.theme-tech .cta.section.bg-primary .btn.btn-outline-light:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } body.theme-tech .product-feature-list span, body.theme-tech .product-tag, body.theme-tech .home-solution-tags span { background: var(--surface-3) !important; color: var(--fg-secondary) !important; border: 1px solid var(--surface-border); } html[data-theme="light"] body.theme-tech .product-feature-list span, html[data-theme="light"] body.theme-tech .product-tag, html[data-theme="light"] body.theme-tech .home-solution-tags span { color: #075985 !important; } body.theme-tech .btn.btn-primary { color: #001f2f !important; } body.theme-tech .btn.btn-light { color: #0f172a !important; } body.theme-tech .btn.btn-outline, body.theme-tech .btn.btn-outline-dark { color: var(--fg-secondary) !important; border-color: var(--surface-border) !important; } body.theme-tech .btn.btn-outline-light { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.72) !important; } body.theme-tech .lead-form input, body.theme-tech .lead-form select, body.theme-tech .lead-form textarea { background: var(--surface-2) !important; color: var(--fg-primary) !important; border-color: var(--surface-border) !important; } body.theme-tech .lead-form input::placeholder, body.theme-tech .lead-form textarea::placeholder { color: var(--fg-muted) !important; opacity: 0.8; } body.theme-tech .footer, body.theme-tech .footer * { color: rgba(255, 255, 255, 0.86) !important; } body.theme-tech .footer-title { color: #ffffff !important; }