/* ============================================================ 云创空间官网 —— 暗色科技主题 [data-theme="dark"] 深色基底 + 发光金色点缀 + 更强点阵/辉光/金边，科技炫酷。 通过覆盖设计系统 token + 关键硬编码组件实现一键切换。 ============================================================ */ [data-theme="dark"] { /* 基底 */ --bg-page: #080b12; --paper: #0f131c; --paper-2: #0b0e16; --white: #151b27; /* 卡片/抬升面 */ --surface-card: #151b27; /* 文字（反相） */ --ink-900: #f3f5f9; --ink-700: #c2c9d6; --ink-500: #8a93a6; --ink-400: #6a7385; --ink-300: #49526a; /* 线条 */ --hairline: rgba(255, 255, 255, 0.08); --hairline-2: rgba(255, 255, 255, 0.16); /* 金色（暗底提亮、更跳） */ --gold-700: #ffc24d; --gold-600: #f0b03a; --gold-500: #ffd277; --gold-100: rgba(255, 194, 77, 0.14); --gold-050: rgba(255, 194, 77, 0.07); /* 语义别名重算 */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --accent: var(--gold-700); --accent-hover: var(--gold-500); --link: var(--gold-700); --link-hover: var(--gold-500); --border-subtle: var(--hairline); --border-default: var(--hairline-2); --focus-ring: rgba(255, 194, 77, 0.40); } /* ---------- 顶栏：深色玻璃 ---------- */ [data-theme="dark"] .yc-nav { background: rgba(10, 13, 20, 0.72); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .yc-brand__cn { color: var(--ink-900); } /* ---------- 页脚：固定更深（ink-900 在暗色被翻亮，这里写死） ---------- */ [data-theme="dark"] .yc-footer { background: #05070c; color: rgba(255, 255, 255, 0.66); } /* ---------- Hero 背景：深底 + 角落金辉 ---------- */ [data-theme="dark"] .yc-hero { background: radial-gradient(75% 60% at 85% -5%, rgba(255, 194, 77, 0.12) 0%, transparent 55%), var(--bg-page); } /* ---------- 点阵底纹 / 网格线：改成发光金，提亮 ---------- */ [data-theme="dark"] main > section::before { background-image: radial-gradient(rgba(255, 194, 77, 0.18) 1px, transparent 1.6px); opacity: .95; } [data-theme="dark"] .yc-hero::before { background-image: radial-gradient(rgba(255, 194, 77, 0.18) 1px, transparent 1.6px), linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); } /* ---------- 角落辉光更亮 ---------- */ [data-theme="dark"] main > section::after { background: radial-gradient(circle, rgba(255, 194, 77, 0.20) 0%, rgba(255, 194, 77, 0.07) 38%, transparent 70%); } /* ---------- 卡片：暗底 + 发光金边 + 微辉光投影 ---------- */ [data-theme="dark"] .yc-card, [data-theme="dark"] .yc-value, [data-theme="dark"] .yc-why__item, [data-theme="dark"] .yc-contact__form, [data-theme="dark"] .yc-hero__card { background: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, linear-gradient(160deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 194, 77, 0.45) 28%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 194, 77, 0.28) 100%) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(255, 194, 77, 0.10); } [data-theme="dark"] .yc-card--interactive:hover, [data-theme="dark"] .yc-why__item:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 46px rgba(255, 194, 77, 0.24); } /* ---------- chip / 输入框 / 徽标 暗底 ---------- */ [data-theme="dark"] .yc-chip { background: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, linear-gradient(180deg, rgba(255, 194, 77, 0.45), rgba(255, 255, 255, 0.1)) border-box; color: var(--ink-700); } [data-theme="dark"] .yc-input, [data-theme="dark"] .yc-textarea { background: #0c111a; color: var(--ink-900); border-color: rgba(255, 194, 77, 0.28); } [data-theme="dark"] .yc-iconbadge { background: rgba(255, 194, 77, 0.15); color: var(--gold-700); } [data-theme="dark"] .yc-iconbadge--ink { background: rgba(255, 255, 255, 0.06); color: var(--ink-900); } [data-theme="dark"] .yc-iconbadge--solid { background: var(--gold-700); color: #1a1205; } /* ---------- 流程编号圆 + 连线 ---------- */ [data-theme="dark"] .yc-step__num { background: linear-gradient(rgba(255, 194, 77, 0.16), rgba(255, 194, 77, 0.16)) padding-box, linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 194, 77, 0.55)) border-box; box-shadow: 0 0 18px rgba(255, 194, 77, 0.18); } [data-theme="dark"] .yc-steps::before { background: linear-gradient(90deg, transparent, var(--gold-700), transparent); opacity: .55; } /* ---------- FAQ ---------- */ [data-theme="dark"] .yc-faq__q::before { background: rgba(255, 194, 77, 0.16); color: var(--gold-700); } [data-theme="dark"] .yc-faq__item, [data-theme="dark"] .yc-faq__item:first-child { border-color: rgba(255, 255, 255, 0.08); } /* ---------- 金色强调：发光 ---------- */ [data-theme="dark"] .text-accent { text-shadow: 0 0 18px rgba(255, 194, 77, 0.35); } [data-theme="dark"] .yc-hero__title .text-accent { text-shadow: 0 0 28px rgba(255, 194, 77, 0.45); } [data-theme="dark"] .yc-eyebrow, [data-theme="dark"] .yc-secthead__eyebrow { text-shadow: 0 0 14px rgba(255, 194, 77, 0.25); } /* ---------- 主按钮：金色发光 ---------- */ [data-theme="dark"] .yc-btn--primary { box-shadow: 0 0 22px rgba(255, 194, 77, 0.30); } [data-theme="dark"] .yc-btn--primary { --_fg: #1a1205; } /* ============================================================ 主题切换按钮（亮/暗都显示） ============================================================ */ .yc-theme-toggle { position: fixed; z-index: 400; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--hairline-2); background: var(--surface-card); color: var(--gold-700); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-md); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .yc-theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: var(--shadow-lg); } .yc-theme-toggle i { width: 22px; height: 22px; } [data-theme="dark"] .yc-theme-toggle { background: #151b27; box-shadow: 0 0 0 1px rgba(255, 194, 77, 0.30), 0 10px 28px rgba(255, 194, 77, 0.22); } @media (max-width: 768px) { .yc-theme-toggle { right: 14px; bottom: 14px; width: 44px; height: 44px; } }