/* ============================================================ 超级大脑官网 · 全站深色皮肤（Day&Night 统一版 v2）注入位置：各内容页之后、前策略：重建设计令牌（语义化，文字/背景分离），不再反色原有 token 品牌蓝：#3FB5FD（与 3D 动画首页一致） ============================================================ */ :root { /* 背景层（保持深色语义） */ --bg-page: #0A121C !important; --bg-panel: #101C29 !important; --bg-panel-2: #16222F !important; --bg-nav: rgba(7, 17, 28, .85) !important; --bg-footer: #060D15 !important; --bg-input: #16222F !important; /* 文字层（深色下亮） */ --text-hi: #E8F0F8 !important; /* 主标题 */ --text-mid: #B9CBDE !important; /* 正文 */ --text-low: #8FA3B7 !important; /* 次要 */ --text-mute: #7C93A7 !important; /* 弱化（提亮至 AA） */ /* 边框层 */ --line: #253444 !important; /* 品牌 */ --brand: #3FB5FD !important; --brand-2: #1E9CE8 !important; --brand-soft: #10455F !important; --brand-glow: rgba(63, 181, 253, .25) !important; /* 阴影（深色更深） */ --shadow-1: 0 1px 3px rgba(0, 0, 0, .45) !important; --shadow-2: 0 4px 16px rgba(0, 0, 0, .5) !important; --shadow-3: 0 12px 40px rgba(0, 0, 0, .6) !important; /* 覆盖原 token（仅影响文字色彩的地方，避免背景/文字冲突） */ --ink-50: #16222F !important; /* 原浅灰底 → 深面板2 */ --ink-100: #253444 !important; /* 原浅边框 → 深边框 */ --ink-950: #E8F0F8 !important; /* 原深色字 → 亮色文字（谨慎使用，勿作背景） */ --ink-900: #E4ECF5 !important; --ink-800: #C9D6E4 !important; --ink-700: #B9CBDE !important; --ink-500: #8FA3B7 !important; --ink-400: #7C93A7 !important; --ink-300: #5A6E80 !important; --ink-200: #3A4A5A !important; --blue-500: #3FB5FD !important; --blue-600: #1E9CE8 !important; --blue-300: #8CD8FF !important; --blue-50: #10222F !important; --green-500: #34D399 !important; } /* ============ 背景与文字 ============ */ html { background: var(--bg-page) !important; } body { background: var(--bg-page) !important; color: var(--text-mid) !important; } ::selection { background: rgba(63, 181, 253, .3); } h1, h2, h3, h4 { color: var(--text-hi) !important; } p { color: var(--text-mid) !important; } /* ============ 页面 Hero ============ */ .api-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } .api-hero h1 { color: var(--text-hi) !important; } .api-hero p { color: var(--text-low) !important; } .terms-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } .terms-hero h1 { color: var(--text-hi) !important; } .terms-hero p { color: var(--text-low) !important; } .policy-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } .policy-hero h1 { color: var(--text-hi) !important; } .policy-hero p { color: var(--text-low) !important; } .page-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } .page-hero h1 { color: var(--text-hi) !important; } .page-hero p { color: var(--text-low) !important; } .page-hero .gradient-text { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)) !important; -webkit-background-clip: text !important; background-clip: text !important; } .help-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } .help-hero h1 { color: var(--text-hi) !important; } .help-hero p { color: var(--text-low) !important; } .about-hero { background: linear-gradient(175deg, #000000 0%, #0A121C 100%) !important; } /* ============ 章节背景 ============ */ .sec-bg-light, .feat-block.alt, .section-alt { background: #0E1B26 !important; } .about-story-section, .timeline-section, .roadmap-section { background: #0E1B26 !important; } /* ============ 通用卡片 ============ */ .price-card, .case-card, .about-card, .step-card, .help-cta-card, .team-card, .deploy-card, .faq-item, .security-card, .audit-card, .platform-ad-item, .trial-card, .api-card, .version-card, .timeline-item { background: var(--bg-panel) !important; border-color: var(--line) !important; } .price-card:hover { border-color: var(--blue-500) !important; box-shadow: var(--shadow-3) !important; } .price-card.featured { border-color: var(--blue-500) !important; box-shadow: 0 0 0 1px rgba(63, 181, 253, .2), 0 12px 40px rgba(63, 181, 253, .12) !important; } .price-card h3, .case-card h3, .about-card h3, .step-card h4, .help-cta-card h3, .team-card h3, .deploy-card h3 { color: var(--text-hi) !important; } .price-card .price-sub, .case-card p, .about-card p, .step-card p, .help-cta-card p, .team-card p, .deploy-card p { color: var(--text-low) !important; } .price-amount { color: var(--blue-300) !important; } .price-badge { color: var(--blue-300) !important; background: rgba(63, 181, 253, .12) !important; } /* ============ 表格 ============ */ .compare-table { background: var(--bg-panel) !important; box-shadow: var(--shadow-1) !important; } .compare-table th { background: var(--bg-panel-2) !important; color: var(--text-low) !important; border-bottom-color: var(--line) !important; } .compare-table td { border-bottom-color: var(--line) !important; color: var(--text-low) !important; } .compare-table td:first-child { color: var(--text-mid) !important; } .compare-table .dash { color: var(--text-mute) !important; } /* ============ 代码块 ============ */ .code-block { background: #0E1B26 !important; border-color: var(--line) !important; } .code-block code { color: var(--text-mid) !important; } .code-copy-btn { background: var(--bg-panel-2) !important; color: var(--text-low) !important; } /* ============ 图片/视觉块 ============ */ .feat-visual { background: var(--bg-panel) !important; border-color: var(--line) !important; } .feat-visual-placeholder { background: linear-gradient(175deg, #0E1B26, #10222F) !important; } .feat-visual-placeholder svg { stroke: var(--blue-300) !important; } .feat-tag { background: rgba(63, 181, 253, .12) !important; color: var(--blue-300) !important; } .feat-content h2 { color: var(--text-hi) !important; } .feat-content .feat-desc { color: var(--text-low) !important; } .feat-list li { color: var(--text-mid) !important; } .feat-check { background: rgba(63, 181, 253, .12) !important; color: var(--blue-300) !important; } .feat-fabe { background: var(--bg-panel-2) !important; } .fabe-label { color: var(--blue-300) !important; } .fabe-text { color: var(--text-mid) !important; } /* ============ FAQ ============ */ .faq-item { border: 1px solid var(--line) !important; } .faq-q { color: var(--text-hi) !important; background: var(--bg-panel) !important; } .faq-a { color: var(--text-low) !important; } .faq-icon { background: var(--bg-panel-2) !important; color: var(--blue-300) !important; } /* ============ 图标卡 ============ */ .security-card h3, .audit-card h3, .cert-badge { color: var(--text-hi) !important; } .security-icon, .audit-icon { background: rgba(63, 181, 253, .1) !important; } .cert-badge { background: rgba(63, 181, 253, .1) !important; } /* ============ 架构图（deploy） ============ */ .arch-diagram { background: var(--bg-panel) !important; border-color: var(--line) !important; } .arch-layer { border-color: var(--line) !important; } .arch-layer-head { color: var(--text-low) !important; } .arch-node { background: var(--bg-panel-2) !important; border-color: var(--line) !important; color: var(--text-mid) !important; } .arch-arrow { border-color: var(--text-mute) !important; } /* ============ 步骤（deploy） ============ */ .step-num { color: var(--blue-300) !important; background: rgba(63, 181, 253, .12) !important; } .step-code { background: #0E1B26 !important; border-color: var(--line) !important; } /* ============ 版本/时间线 ============ */ .version-card, .timeline-item { background: var(--bg-panel) !important; border-color: var(--line) !important; } .timeline-dot { background: var(--blue-500) !important; } .timeline-date { color: var(--text-mute) !important; } /* ============ 帮助中心 ============ */ .help-search { background: var(--bg-input) !important; border-color: var(--line) !important; } .help-search input { color: var(--text-hi) !important; } .help-category-title { color: var(--text-low) !important; } /* ============ 联系/Modal ============ */ .modal-overlay { background: rgba(0, 0, 0, .65) !important; } .modal-box { background: var(--bg-panel) !important; } .modal-box h3 { color: var(--text-hi) !important; } .modal-box .modal-sub { color: var(--text-low) !important; } .modal-close { background: var(--bg-panel-2) !important; color: var(--text-low) !important; } .modal-close:hover { background: var(--line) !important; color: var(--text-hi) !important; } .form-group label { color: var(--text-mid) !important; } .form-group input, .form-group select, .form-group textarea { background: var(--bg-input) !important; border-color: var(--line) !important; color: var(--text-mid) !important; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-mute) !important; } .form-group input:focus { border-color: var(--blue-500) !important; box-shadow: 0 0 0 3px rgba(63, 181, 253, .15) !important; } /* ============ 页脚 ============ */ .footer { background: var(--bg-footer) !important; } .footer-brand-text { color: var(--text-hi) !important; } .footer-brand-text small { color: var(--text-mute) !important; } .footer-col h4 { color: var(--text-hi) !important; } .footer-col a { color: var(--text-low) !important; } .footer-col a:hover { color: var(--blue-300) !important; } .footer-desc { color: var(--text-mute) !important; } .footer-bottom { border-top-color: rgba(255, 255, 255, .06) !important; } .footer-bottom-left { color: var(--text-mute) !important; } /* ============ Back to Top ============ */ .back-top { background: var(--blue-500) !important; box-shadow: 0 4px 16px rgba(63, 181, 253, .35) !important; } /* ============ 按钮 ============ */ .btn-primary { box-shadow: 0 2px 8px rgba(63, 181, 253, .3) !important; } .btn-outline { color: var(--blue-300) !important; background: transparent !important; border-color: var(--blue-500) !important; } .btn-outline:hover { background: rgba(63, 181, 253, .1) !important; color: var(--blue-300) !important; } .btn-highlight { color: var(--blue-300) !important; background: transparent !important; border: 2px solid var(--blue-500) !important; } .btn-highlight:hover { background: rgba(63, 181, 253, .1) !important; } .btn-ghost { color: var(--text-low) !important; border: 1.5px solid var(--line) !important; } .btn-ghost:hover { background: var(--bg-panel-2) !important; color: var(--text-hi) !important; } /* ============ 特殊：原 ink-950 作为背景的组件（需要保留深色） ============ */ .api-section, .enterprise, .roadmap-section { background: var(--bg-page) !important; } .quick-code, .step-code, .sdk-logo { background: #0E1B26 !important; } /* ==================== 补充：白块残留整改（v2.1） ==================== */ /* 通用卡片补漏（pricing/cases/about/deploy/partner/platform） */ .custom-card, .industry-card, .roi-card, .scenario-card, .about-value, .qs-card, .api-sidebar, .ops-card, .migrate-feat, .spec-card, .process-step, .mode-card, .sdk-card, .pillar-card, .plugin-card, .quick-step, .benefit-card, .trial-card, .platform-card, .path-card, .feature-card, .svc-card, .stage-card, .integration-card { background: var(--bg-panel) !important; border-color: var(--line) !important; } .custom-card:hover, .industry-card:hover, .roi-card:hover, .scenario-card:hover, .about-value:hover, .qs-card:hover, .spec-card:hover, .mode-card:hover, .pillar-card:hover, .plugin-card:hover, .benefit-card:hover, .sdk-card:hover { border-color: var(--blue-500) !important; box-shadow: var(--shadow-3) !important; } .custom-card h3, .industry-card h3, .scenario-card h3, .about-value h3, .qs-card h3, .ops-card h3, .migrate-feat h3, .spec-card h3, .process-step h3, .mode-card h3, .sdk-card h3, .pillar-card h3, .plugin-card h3, .quick-step h3, .benefit-card h3, .spec-card.recommended h3, .api-sidebar h2, .api-sidebar h3, .roi-card h3, .roi-card h4, .custom-card h2 { color: var(--text-hi) !important; } .custom-card p, .industry-card p, .scenario-card p, .about-value p, .qs-card p, .ops-card p, .migrate-feat p, .spec-card p, .process-step p, .mode-card p, .sdk-card p, .pillar-card p, .plugin-card p, .quick-step p, .benefit-card p, .roi-card p, .roi-card span, .api-sidebar p, .api-sidebar li, .api-sidebar a { color: var(--text-low) !important; } .mode-card.featured { border-color: var(--blue-500) !important; background: linear-gradient(180deg, #13283C, #101C29) !important; } .benefit-card.featured { border-color: var(--blue-500) !important; background: linear-gradient(180deg, #13283C, #101C29) !important; } .spec-card.recommended { border-color: var(--blue-500) !important; } /* 表格按钮（tab 切换） */ .tab-btn, .pricing-tab { background: var(--bg-panel-2) !important; color: var(--text-low) !important; border-color: var(--line) !important; } .tab-btn.active, .pricing-tab.active { background: rgba(63, 181, 253, .15) !important; color: var(--blue-300) !important; border-color: var(--blue-500) !important; } /* btn-white（蓝底白字按钮）深色下的可读性 */ .btn-white { background: var(--blue-500) !important; color: #04121F !important; border-color: var(--blue-500) !important; } .btn-white:hover { box-shadow: 0 4px 20px rgba(63, 181, 253, .4) !important; } /* 章节深底（arch-section 等） */ .arch-section { background: var(--bg-page) !important; } .migrate-flow { background: var(--bg-panel) !important; border-color: var(--line) !important; } /* ============ 截屏/图片包边 ============ */ .feat-visual img, .about-story-img, .case-cover, .screenshot-wrap img { filter: brightness(.92) contrast(1.02); border-radius: var(--r-md); }