/* ============================================================================ 主题层 —— 深色/浅色切换 ---------------------------------------------------------------------------- 这是一层覆盖，加载顺序必须在 app.css / service.css / projectv3.css 之后。 刻意不去改那三个文件：app.css 有 302K / 13714 行，其中绝大部分是 Foundation 框架的死代码（页面实际只用到 58 个 class），直接改它风险高且不可回滚。 token 取自 VoltAgent/awesome-design-md 的 apple/DESIGN.md。 注意：Apple 那套体系原文写明"在明暗语境下是统一的，不是一个模式开关"—— 深浅块是同页交替的区段分隔，并没有提供配套的深色模式色板。 所以下面的 dark 语义映射是基于它的 token 自行搭的，不是照抄。 ⚠️ 核心原则：压在照片/视频上的元素不跟随主题，压在实色面板上的才跟随。 这个站 80% 的屏幕是全屏建筑摄影和视频，图片不会因为切主题而变。 把压在图上的白字也跟着变黑，只会导致深色模式下文字看不清。 ========================================================================= */ /* --------------------------------------------------------------------------- 1. Apple 原始 token（不直接用于组件，只作为语义层的取值来源） ------------------------------------------------------------------------ */ :root { --apple-white: #ffffff; --apple-parchment: #f5f5f7; --apple-pearl: #fafafc; --apple-tile-1: #272729; --apple-tile-2: #2a2a2c; --apple-tile-3: #252527; --apple-black: #000000; --apple-ink: #1d1d1f; --apple-ink-80: #333333; --apple-ink-48: #7a7a7a; --apple-body-on-dark: #ffffff; --apple-body-muted: #cccccc; --apple-hairline: #e0e0e0; --apple-divider: #f0f0f0; --apple-chip-gray: #d2d2d7; /* 品牌红保留，替代 Apple 体系里的 Action Blue —— logo 是红的，换蓝会打架 */ --brand-red: #c60f13; --brand-red-bright: #f43233; /* Apple 间距与圆角标尺 */ --space-xs: 8px; --space-sm: 12px; --space-md: 17px; --space-lg: 24px; --radius-sm: 8px; --radius-md: 11px; --radius-lg: 18px; --radius-pill: 9999px; /* 字体：SF Pro 打头，但必须跟中文字体，否则中文会落到衬线默认字体。 浏览器按字形逐个回退，拉丁字母走 SF Pro，汉字走苹方/黑体。 */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } /* --------------------------------------------------------------------------- 2. 语义 token ------------------------------------------------------------------------ */ :root, :root[data-theme='light'] { --surface: var(--apple-parchment); /* 页面底色，原 #F4F4F4 */ --surface-panel: var(--apple-white); /* 项目详情/菜单面板 */ --text: var(--apple-ink); --text-secondary: var(--apple-ink-80); --text-muted: var(--apple-ink-48); --hairline: var(--apple-hairline); --accent: var(--brand-red); --control-icon: #898989; /* 内页汉堡线条，原值 */ --credits: var(--apple-ink-48); /* 服务页图片渐隐到面板底色，用 RGB 分量方便写 rgba() */ --surface-rgb: 245, 245, 247; } :root[data-theme='dark'] { --surface: var(--apple-black); --surface-panel: var(--apple-tile-1); --text: var(--apple-body-on-dark); --text-secondary: var(--apple-body-muted); --text-muted: #8a8a8e; --hairline: rgba(255, 255, 255, 0.16); /* 深色上把红提亮，对应 Apple「链接在深色面上升级为 Sky Link Blue」的同一逻辑 */ --accent: var(--brand-red-bright); --control-icon: var(--apple-body-muted); --credits: #8a8a8e; --surface-rgb: 0, 0, 0; } /* 没手动选过主题时跟随系统。手动选过则 data-theme 落在 上，优先级更高。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --surface: var(--apple-black); --surface-panel: var(--apple-tile-1); --text: var(--apple-body-on-dark); --text-secondary: var(--apple-body-muted); --text-muted: #8a8a8e; --hairline: rgba(255, 255, 255, 0.16); --accent: var(--brand-red-bright); --control-icon: var(--apple-body-muted); --credits: #8a8a8e; --surface-rgb: 0, 0, 0; } } /* --------------------------------------------------------------------------- 3. 全局 ------------------------------------------------------------------------ */ body { background-color: var(--surface); font-family: var(--font-sans); /* 主题切换时给个过渡，避免生硬跳变。只过渡颜色，不碰 transform—— 那是 GSAP/Velocity 的地盘，加 transition 会和它们打架。 */ transition: background-color 0.3s ease; } /* Apple 规则：display 尺寸用负字距。只作用于拉丁文标题， 中文加负字距会挤在一起，所以不设全局 letter-spacing。 */ .kvell-slider-nav__circle, .navigation_link span span { font-family: var(--font-sans); letter-spacing: -0.02em; } /* --------------------------------------------------------------------------- 4. 菜单遮罩（实色面板 → 跟随主题） ------------------------------------------------------------------------ */ #menu_overlay .navigation-panel { background: var(--surface-panel) !important; transition: background-color 0.3s ease; } .navigation_link, .navigation_links .left-menu-links span, .navigation_links .right-menu-links span { color: var(--text); } .navigation_links .left-menu-links .navigation_link:hover span, .navigation_links .right-menu-links .navigation_link:hover span { color: var(--accent); } /* --------------------------------------------------------------------------- 5. 项目详情面板（实色 → 跟随主题） ------------------------------------------------------------------------ */ .project .content-box { background: var(--surface-panel); transition: background-color 0.3s ease; } .project .content-box .title { color: var(--text); } .project .content-box .sub-title { color: var(--text-muted); } .project .content-box .content-line, /* 原样式这条带 !important，必须同等武装才能覆盖 */ .project .content-box .content-line span { color: var(--text-secondary) !important; } /* --------------------------------------------------------------------------- 6. 服务页右侧面板（实色 → 跟随主题） ------------------------------------------------------------------------ */ .service .right-content-box { color: var(--text); } .service .right-content-box h3 { color: var(--text); } .service .right-content-box h3 p.sub-title { color: var(--text-muted); } .service .right-content-box .content-p, .service .right-content-box .content-p .service-item { color: var(--text-secondary); } /* 服务页锚点在白面板上，跟随主题 */ .service .kvell-slider-nav__circle { color: var(--text); } /* 图片向面板底色渐隐——深色模式要淡出到黑，否则照片下方会突兀地接一条白边 */ #service .scaled-header__image .img-bg { background: linear-gradient( to bottom, rgba(var(--surface-rgb), 0), rgba(var(--surface-rgb), 1) ); } /* --------------------------------------------------------------------------- 7. 内页控件（在面板上 → 跟随主题） ------------------------------------------------------------------------ */ .service .hamburger .line, .project .hamburger .line { background: var(--control-icon); } .homepage__credits, .homepage__credits a { color: var(--credits); } /* --------------------------------------------------------------------------- 8. 主题 / 语言切换控件 ---------------------------------------------------------------------------- 刻意不把 #navigation_trig 挪进容器里——siteNavigation.js 依赖它的现有位置， 动它会牵连菜单动画。这里只是在它左边另起两个独立定位的按钮。 ------------------------------------------------------------------------ */ .site-control { position: absolute; top: 35px; z-index: 111; display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-sm); border: none; border-radius: var(--radius-pill); background: rgba(var(--surface-rgb), 0.55); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); color: var(--text); font-family: var(--font-sans); font-size: 14px; font-weight: 400; letter-spacing: -0.224px; line-height: 1.29; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } /* Apple 规则：scale(0.95) 是全系统统一的按下态 */ .site-control:active { transform: scale(0.95); } .site-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .site-control--theme { right: 80px; width: 32px; padding: 0; } .site-control--lang { right: 124px; min-width: 44px; } .site-control svg { width: 16px; height: 16px; display: block; } /* 首页控件压在视频上，底色不可预测——给一层固定的暗色胶囊保证可读， 两个主题下都用同一套，因为视频本身不跟随主题。 */ .m01:not(.service):not(.project) .site-control { background: rgba(0, 0, 0, 0.35); color: #ffffff; } /* 图标按主题显隐：亮色显示月亮（点了变暗），暗色显示太阳 */ .site-control--theme .icon-sun { display: none; } .site-control--theme .icon-moon { display: block; } :root[data-theme='dark'] .site-control--theme .icon-sun { display: block; } :root[data-theme='dark'] .site-control--theme .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .site-control--theme .icon-sun { display: block; } :root:not([data-theme]) .site-control--theme .icon-moon { display: none; } } /* 窄屏把控件收紧，避免和汉堡挤在一起 */ @media (max-width: 639px) { .site-control { top: 30px; height: 28px; } .site-control--theme { right: 70px; width: 28px; } .site-control--lang { right: 106px; min-width: 40px; font-size: 12px; } }