@charset "UTF-8"; /* ════════════════════════════════════════════════════════════════════════════ ELIO STUDIO · 全站统一品牌视觉与交互规范（Brand System v1.0） --------------------------------------------------------------------------- 唯一事实源（Single Source of Truth）。本文件必须置于 styles.css 之后加载： 设计依据：《天井标识手册 V4》（黑 / 金 / 金亮 / 杏仁 / 铜）+ 参考图二 （全屏沉浸大图、顶部细长导航、衬线字体、大留白、无边框极简）。 规范范围：色彩 / 字体 / 间距 / 圆角 / 阴影 / 动效 / 层级 / 标识 / 图标 / 组件。 约束：全站所有板块（首页、关于、作品集、资源库、详情页、页脚、后台）一律 只引用本文件声明的 token，禁止再写死色值、字号、时长与圆角。 ════════════════════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────────────────────── 1 · 设计令牌 ──────────────────────────────────────────────────────────────────────────── */ :root { /* 1.1–1.5 色彩与别名 → 已全部迁移至 tokens.css（唯一事实源）。 brand.css 不再定义任何色值；历史变量名（--brand-ink / --brand-tx / --bg / --gold …） 由 tokens.css 第 4 节「兼容别名」统一重定向，随 html[data-theme] 两态解析。 */ /* 1.6 字体 — 组合固定为「衬线标题 + 无衬线正文 + 等宽元信息」 */ --font-serif: 'Noto Serif SC', 'Songti SC', 'Source Han Serif SC', 'Cormorant Garamond', Georgia, serif; --font-display: var(--font-serif); --font-sans: 'Inter', 'HarmonyOS Sans SC', 'MiSans', 'PingFang SC', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-cin: 'Cinzel', 'Noto Serif SC', serif; /* 英文标签 / 编号 */ --font-num: 'Cormorant Garamond', Didot, Georgia, serif; /* 大数字 */ --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --serif: var(--font-serif); --disp: var(--font-num); --cin: var(--font-cin); --sans: var(--font-sans); --mono: var(--font-mono); --font-heading: var(--font-serif); /* 1.7 字号阶梯（流体） */ --fs-display: clamp(34px, 7.2vw, 104px); /* 首屏主标题 */ --fs-h1: clamp(34px, 4.6vw, 64px); /* 页面主标题 */ --fs-h2: clamp(26px, 3.2vw, 42px); /* 板块标题 */ --fs-h3: clamp(19px, 1.8vw, 24px); /* 卡片 / 子块标题 */ --fs-h4: 17px; /* 小标题 */ --fs-body: 15px; --fs-sm: 13px; --fs-xs: 11.5px; --fs-label: 10.5px; /* 全大写标签 */ --fs-num: clamp(38px, 4.4vw, 58px); /* 数据大数字 */ /* 1.8 字重 / 行高 / 字距 */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-bold: 600; --lh-tight: 1.04; --lh-title: 1.18; --lh-body: 1.85; --track-tight: -0.02em; --track-caps: 0.18em; --track-wide: 0.28em; /* 1.9 间距（4px 基准） */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px; --sp-10: 96px; --sp-11: 128px; --sp-12: 160px; --sec-y: clamp(88px, 10vw, 160px); /* 板块垂直节奏（大留白） */ --block-y: clamp(40px, 5vw, 72px); --w-page: 1280px; /* 内容容器最大宽 */ --w-wide: 1560px; /* 宽版容器（作品网格） */ --w-text: 720px; /* 长文阅读宽 */ --gutter: clamp(20px, 4vw, 48px); /* 页面左右安全边距 */ /* 1.10 圆角（收敛：极简细圆角 + 胶囊，禁用 14–50px 的随意值） */ --r-0: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* 1.11 阴影（暖黑、低饱和、克制） */ --sh-1: 0 1px 2px rgba(0, 0, 0, .30); --sh-2: 0 10px 30px rgba(0, 0, 0, .40); --sh-3: 0 24px 64px rgba(0, 0, 0, .55); --sh-gold: 0 0 0 1px rgba(176, 141, 90, .35), 0 12px 34px rgba(176, 141, 90, .18); /* 1.12 动效（全站唯一时长 / 缓动来源） */ --dur-1: 160ms; /* 微反馈：hover / focus */ --dur-2: 280ms; /* 常规：菜单、按钮、卡片 */ --dur-3: 480ms; /* 结构：面板、图片 */ --dur-4: 900ms; /* 叙事：首屏入场、大图揭示 */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --tx-fast: var(--dur-1) var(--ease-soft); --tx: var(--dur-2) var(--ease-out); --tx-slow: var(--dur-3) var(--ease-out); --reveal-y: 24px; /* 滚动入场位移统一值 */ --reveal-x: -16px; /* 1.13 层级 */ --z-base: 1; --z-raise: 10; --z-sticky: 100; --z-header: 1000; --z-overlay: 1500; --z-modal: 2000; --z-toast: 3000; /* 1.14 标识尺寸 / 图标线宽 */ --tj-s: 40px; --ico-stroke: 1.5; /* 1.15 兼容：旧变量名（--section-gap / --letter-space-* / --transition）重定向 */ --section-gap: var(--sec-y); --letter-space-wide: var(--track-wide); --letter-space-caps: var(--track-caps); --transition: var(--dur-3) var(--ease-out); --cursor-glow-color: var(--brand-gold); } /* 1.16 暖白模式补丁 → 已废止并收敛至 tokens.css 第 2 节（纸白令牌）+ 第 5 节（浅色组件适配层）。 */ /* ──────────────────────────────────────────────────────────────────────────── 2 · 全局基线 ──────────────────────────────────────────────────────────────────────────── */ html { -webkit-text-size-adjust: 100%; } body { background: var(--brand-ink); color: var(--brand-tx); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-reg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); } ::selection { background: var(--brand-gold); color: #0A0A0A; } /* 标题层级统一：衬线 + 紧行高 + 负字距（全站标题一律走这里） */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-serif); font-weight: var(--fw-light); line-height: var(--lh-title); letter-spacing: var(--track-tight); color: var(--brand-tx); } h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-med); line-height: 1.5; } p { color: var(--brand-tx-dim); line-height: var(--lh-body); font-weight: var(--fw-light); } a { color: inherit; transition: color var(--tx-fast), border-color var(--tx-fast); } img, video, canvas { max-width: 100%; } /* 焦点可见性统一（无障碍硬要求，禁止 outline:none） */ :focus-visible { outline: 1px solid var(--brand-gold); outline-offset: 3px; border-radius: var(--r-xs); } /* 滚动条统一 */ * { scrollbar-width: thin; scrollbar-color: var(--brand-line-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brand-line-strong); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--brand-gold); } /* 全站动效降级（系统级无障碍开关，一处生效全域生效） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal, .reveal-3d, .r3d-up, [class*="reveal-"] { opacity: 1 !important; transform: none !important; } } /* ──────────────────────────────────────────────────────────────────────────── 3 · 品牌标识（天井标识 · Logo System） ──────────────────────────────────────────────────────────────────────────── */ /* 3.1 标识本体：固定 1:1 比例，永不拉伸，永不填充孔位 */ .tj-logo { width: var(--tj-s); height: var(--tj-s); display: inline-block; flex: 0 0 auto; position: relative; } .tj-logo svg { display: block; width: 100%; height: 100%; } .tj-logo .tj-p { fill: var(--brand-gold); transition: fill var(--tx-fast); } /* 3.2 品牌锁定组合（标识 + 中文名 + 英文名，全站页眉页脚统一引用） */ .brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; } .brand-lockup:hover .brand-lockup__cn { color: var(--brand-gold-l); } /* 3.3 品牌名文字规格（无标识场景：加载页 / 页脚 / 名片式排版） */ .brand-wordmark { font-family: var(--font-serif); font-weight: var(--fw-light); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-almond); } /* ──────────────────────────────────────────────────────────────────────────── 4 · 图标体系（Icon System） 规则：24 网格 / 1.5px 描边 / currentColor / 圆角端点；尺寸仅 16·20·24·32 四档。 ──────────────────────────────────────────────────────────────────────────── */ .ico { width: 24px; height: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; fill: none; color: currentColor; stroke: currentColor; stroke-width: var(--ico-stroke); stroke-linecap: round; stroke-linejoin: round; } /* 4.0 描边归一（V2 第 2 轮补齐） 历史内联 SVG 各自写死了 stroke-width（1.3 / 1.6 / 1.8 / 2 / 2.2 …），与 1.5 令牌漂移。 凡 24 网格且自带 stroke-width 属性的内联图标，一律由令牌接管（CSS 声明优先级高于 表现属性，子路径通过继承生效）；非 24 网格的大号装饰图形（如 18 网格 stroke-width=3） 不受影响。 */ svg[viewBox="0 0 24 24"][stroke-width] { stroke-width: var(--ico-stroke); } /* 4.1 图标按钮（页眉 / 卡片操作区统一） */ .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--brand-tx-dim); cursor: pointer; transition: color var(--tx-fast), background-color var(--tx-fast), transform var(--tx-fast); } .icon-btn:hover { color: var(--brand-gold-l); background: var(--brand-gold-dim); } .icon-btn:active { transform: scale(.94); } /* ──────────────────────────────────────────────────────────────────────────── 5 · 组件规范 ──────────────────────────────────────────────────────────────────────────── */ /* 5.1 板块头部三段式：EN 标签 → 衬线标题 → 说明 */ .sec-head { margin-bottom: var(--block-y); } .sec-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--brand-gold); opacity: .6; } /* 5.2 多级标题导视标识（对应全站四级编号体系 01.2 / 01.2.3） 规则：编号用 Cinzel 大字距，标题用衬线，前置换行细线，形成可扫读的导视 */ .idx { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--brand-gold); font-variant-numeric: tabular-nums; white-space: nowrap; } .sec-title .idx, .h2 .idx, .h3 .idx { margin-right: .5em; color: var(--brand-gold); } .guide-line::after { content: ''; flex: 1; height: 1px; background: var(--brand-line); } /* 5.3 按钮（三种即可：实心主按钮 / 描边次按钮 / 纯文字链接） */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 13px 30px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; background: transparent; color: var(--brand-tx); transition: background-color var(--tx), color var(--tx), border-color var(--tx), transform var(--tx-fast), box-shadow var(--tx); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); } .btn-primary, .btn--primary { background: var(--brand-gold); border-color: var(--brand-gold); color: #0A0A0A; } .btn-primary:hover, .btn--primary:hover { background: var(--brand-gold-l); border-color: var(--brand-gold-l); color: #0A0A0A; box-shadow: var(--sh-gold); } .btn-ghost, .btn-outline, .btn--ghost { background: transparent; border-color: var(--brand-line-strong); color: var(--brand-tx); } .btn-ghost:hover, .btn-outline:hover, .btn--ghost:hover { border-color: var(--brand-gold); color: var(--brand-gold-l); } .btn-text, .btn--text { padding: 6px 0; border: 0; color: var(--brand-tx); } .btn-text:hover, .btn--text:hover { color: var(--brand-gold-l); } /* 文字按钮的下划线揭示（全站统一交互语言） */ .btn-text::after, .link-underline::after { content: ''; display: block; height: 1px; width: 0; background: currentColor; transition: width var(--tx); } .btn-text:hover::after, .link-underline:hover::after { width: 100%; } /* 5.4 标签 / 徽标 / 筛选胶囊 */ .tag, .pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 12px; border: 1px solid var(--brand-line); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-dim); transition: color var(--tx-fast), border-color var(--tx-fast), background-color var(--tx-fast); } .pill:hover, .pill.is-active { color: var(--brand-gold); border-color: var(--brand-gold); background: var(--brand-gold-dim); } /* 5.5 卡片（无边框优先：以留白与线条分层，禁止重投影） */ .card { background: var(--brand-ink-3); border: 1px solid var(--brand-line-soft); border-radius: var(--r-md); transition: background-color var(--tx), border-color var(--tx), transform var(--tx), box-shadow var(--tx); } .card:hover { border-color: var(--brand-line); box-shadow: var(--sh-2); } .card--media:hover img { transform: scale(1.03); } /* 5.6 分隔线 */ .hairline { height: 1px; background: var(--brand-line); border: 0; margin: var(--sp-8) 0; } /* 5.7 表单控件 */ input, textarea, select { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--brand-tx); background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-sm); padding: 11px 14px; transition: border-color var(--tx-fast), background-color var(--tx-fast); } input:focus, textarea:focus, select:focus { border-color: var(--brand-gold); outline: none; } input::placeholder, textarea::placeholder { color: var(--brand-tx-ghost); } /* ──────────────────────────────────────────────────────────────────────────── 6 · 顶部细长导航（参考图二：细长、透明、无边框、全大写字距菜单） ──────────────────────────────────────────────────────────────────────────── */ #header { height: 68px; padding: 0 var(--gutter); grid-template-columns: minmax(180px, auto) 1fr minmax(140px, auto); background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), backdrop-filter var(--dur-3) var(--ease-out); } /* 悬于首屏大图之上：仅压暗渐变，不加边框 */ #header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--brand-scrim-top); opacity: 1; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); } /* 滚动后：细线 + 毛玻璃，保持极简 */ #header.scrolled { background: rgba(10, 10, 10, .82); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); border-bottom-color: var(--brand-line-soft); } #header.scrolled::before { opacity: 0; } /* 页眉标识组合 */ #header .header-brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; } #header .header-brand .tj-logo { --tj-s: 30px; } #header .brand-text { display: flex; flex-direction: column; gap: 2px; } #header .brand-name { font-family: var(--font-serif); font-size: 16px; font-weight: var(--fw-med); letter-spacing: .05em; line-height: 1.05; color: var(--brand-tx); } #header .brand-sub { font-family: var(--font-cin); font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); line-height: 1; } #header .header-brand:hover .brand-name { color: var(--brand-gold-l); } /* 菜单：去胶囊、去底、拉开字距 */ #header .header-nav { background: none; border: 0; border-radius: 0; padding: 0; gap: clamp(12px, 2vw, 30px); } #header .header-nav a, #header .nav-more-btn { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-dim); background: none; border: 0; border-radius: 0; padding: 6px 0; position: relative; } #header .header-nav a:hover, #header .nav-more-btn:hover { color: var(--brand-tx); background: none; } /* 活动态：金字 + 细线，替代原金色胶囊 */ #header .header-nav a.active, #header .nav-more-btn.open { color: var(--brand-gold); background: none; box-shadow: none; } #header .header-nav a::after, #header .nav-more-btn::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--brand-gold); transition: width var(--tx); } #header .header-nav a:hover::after, #header .header-nav a.active::after, #header .nav-more-btn:hover::after, #header .nav-more-btn.open::after { width: 100%; } #header .header-nav a.active::before { display: none; } #header .header-nav a:not(:last-child)::after { content: ''; } #header nav a:not(:last-child)::after { content: ''; } /* 下拉菜单：品牌化（细线、暗面、克制阴影） */ #header .nav-more-menu { background: rgba(17, 17, 16, .97); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--sp-2); } #header .nav-more-menu a { font-size: var(--fs-sm); letter-spacing: .04em; text-transform: none; color: var(--brand-tx-dim); border-radius: var(--r-sm); padding: 9px 14px; } #header .nav-more-menu a:hover { color: var(--brand-tx); background: var(--brand-ink-4); } #header .nav-more-menu a.active { color: var(--brand-gold); background: var(--brand-gold-dim); } /* 页眉右侧：时间 / 状态 / 按钮统一尺度与颜色 */ #header .header-right { gap: var(--sp-4); } #header #liveClock { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand-tx-mute); letter-spacing: .08em; } #header .nav-btn, #header .nav-btn-square { border-radius: var(--r-sm); border-color: var(--brand-line); color: var(--brand-tx-dim); background: transparent; } #header .nav-btn { min-height: 34px; padding: 8px 16px; font-size: var(--fs-label); letter-spacing: var(--track-caps); } #header .nav-btn-square { width: 34px; height: 34px; } #header .nav-btn:hover, #header .nav-btn-square:hover { color: var(--brand-tx); border-color: var(--brand-line-strong); background: rgba(237, 234, 228, .04); } /* 收敛历史遗留的粉色悬浮态（#e05268）→ 品牌金 */ #header .nav-btn.primary, #header .nav-btn.primary:hover, #header .nav-btn-square.nav-btn-logout:hover { background: var(--brand-gold); border-color: var(--brand-gold); color: #0A0A0A; box-shadow: var(--sh-gold); } #header .hamburger span { background: var(--brand-tx-dim); } #header .hamburger:hover span { background: var(--brand-gold); } /* 移动端抽屉：品牌化面板 */ .mobile-nav { background: rgba(17, 17, 16, .97); border: 1px solid var(--brand-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); } .mobile-nav a { background: transparent; border: 1px solid var(--brand-line-soft); border-radius: var(--r-sm); color: var(--brand-tx-dim); font-size: var(--fs-sm); letter-spacing: .06em; } .mobile-nav a:hover, .mobile-nav a.active { color: var(--brand-gold); background: var(--brand-gold-dim); border-color: rgba(176, 141, 90, .35); } .mobile-nav .mn-full { font-family: var(--font-cin); letter-spacing: var(--track-caps); color: var(--brand-tx-mute); } /* ──────────────────────────────────────────────────────────────────────────── 7 · 首页 · 全屏沉浸式首屏（参考图二重设计） 结构：#hero > .hero-stage（全屏媒体层）+ .hero-scrim + .hero-inner（左下内容） ──────────────────────────────────────────────────────────────────────────── */ #hero { position: relative; } .hero-section { min-height: 100svh; padding: 0 var(--gutter) clamp(72px, 9vh, 120px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; max-width: none; margin: 0; overflow: hidden; background: var(--brand-ink); } /* 7.1 全屏媒体层：优先真实大图（.hero-media--photo），无图时由 3D 粒子/渐变兜底 */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 78% 18%, rgba(201, 165, 123, .22) 0%, rgba(201, 165, 123, 0) 58%), radial-gradient(90% 70% at 12% 88%, rgba(107, 58, 46, .22) 0%, rgba(107, 58, 46, 0) 60%), linear-gradient(168deg, #1A1713 0%, #0E0D0B 46%, #060606 100%); } .hero-media--photo { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-media > canvas, #hero3d { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block; } /* 景深遮罩：保证左下文字始终可读（无边框、无面板） */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--brand-scrim); background-image: linear-gradient(180deg, rgba(10, 10, 10, .66) 0%, rgba(10, 10, 10, .10) 40%, rgba(10, 10, 10, .30) 62%, rgba(10, 10, 10, .92) 100%), linear-gradient(90deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .16) 52%, rgba(10, 10, 10, 0) 100%); } /* 7.2 内容编排：左下角起排，大留白 */ .hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-page); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-5); font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-gold); } .hero-eyebrow::after { display: none; } .hero-eyebrow .h-eb-line { width: 36px; height: 1px; background: var(--brand-gold); opacity: .55; } /* 主标题：衬线、轻字重、紧凑行高、负字距（沿用 kineticize 字符动画） */ .hero-headline { font-family: var(--font-serif) !important; font-size: var(--fs-display); font-weight: var(--fw-light); font-style: normal; line-height: var(--lh-tight); letter-spacing: var(--track-tight); margin: 0 0 var(--sp-5); max-width: 15em; text-align: left; color: var(--brand-almond); -webkit-text-fill-color: currentColor; background: none; text-rendering: optimizeLegibility; animation: heroTextIn var(--dur-4) var(--ease-out) both; } .hero-headline em, .hero-headline i { font-style: italic; color: var(--brand-gold-l); -webkit-text-fill-color: currentColor; } .hero-headline::after { display: none; } /* 移除历史金色下划线装饰 */ .hero-headline .kw { display: inline-block; opacity: 0; animation: kwIn var(--dur-3) var(--ease-out) forwards; } @keyframes kwIn { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } } /* 中英双语副题：英文用 Cinzel 字距，中文用无衬线细体 */ .hero-subname, .hero-en-sub { font-family: var(--font-cin); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-dim); margin: 0 0 var(--sp-2); } .hero-intro { max-width: 46ch; margin: 0 0 var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-light); color: rgba(237, 234, 228, .74); } .hero-intro .hero-highlight { color: inherit; } /* 7.3 首屏动作区（READ MORE 式，极简、无边框） */ .hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-5); flex-wrap: wrap; align-self: stretch; width: 100%; margin-bottom: var(--sp-8); } /* 首屏按钮：玻璃质感（半透明 + 细描边 + 背景模糊），不做整块实心色块， 与「全屏大图 + 无边框极简」的参考风格一致；悬停时才上金色，作为唯一强调点。 */ .hero-actions .btn { padding: 12px 26px; border-radius: var(--r-pill); background: rgba(245, 241, 234, .06); border: 1px solid rgba(245, 241, 234, .22); color: var(--brand-almond); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); box-shadow: none; } .hero-actions .btn:hover { background: rgba(245, 241, 234, .12); border-color: rgba(245, 241, 234, .34); color: var(--brand-almond); box-shadow: none; transform: translateY(-1px); } .hero-actions .btn-primary { background: rgba(245, 241, 234, .10); border-color: rgba(245, 241, 234, .28); color: var(--brand-almond); } .hero-actions .btn-primary:hover { background: var(--brand-gold); border-color: var(--brand-gold); color: #0A0A0A; } .hero-actions .btn-text, .hero-actions .btn-ghost { border: 1px solid rgba(245, 241, 234, .16); background: rgba(10, 10, 10, .18); } .hero-actions .btn-text::after, .hero-actions .link-underline::after { display: none; } .hero-actions .btn-arrow { transition: transform var(--tx); } .hero-actions .btn:hover .btn-arrow { transform: translateX(4px); } /* 7.4 首屏数据条：贴底细线分隔，无卡片、无背景（历史 .h-stat 卡片盒在此扁平化） */ .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); width: 100%; max-width: none; margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--brand-line); } .hero-stats .h-stat, .hero-stats .h-stat:hover { position: static; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; overflow: visible; } .hero-stats .h-stat::before { content: none; } .hero-stats .h-stat { display: flex; flex-direction: column; gap: 2px; } .hero-stats .h-stat-n, .hero-stats .h-stat b { font-family: var(--font-num); font-size: var(--fs-num); font-weight: var(--fw-light); line-height: 1; color: var(--brand-almond); letter-spacing: -.01em; display: block; } .hero-stats .h-stat i { font-style: normal; font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); margin-top: 0; } /* 7.5 滚动提示 / 索引器（右下，细线风格） */ .hero-scroll-hint { position: absolute; right: var(--gutter); left: auto; transform: none; bottom: clamp(72px, 9vh, 120px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--brand-tx-mute); text-transform: uppercase; } .hero-scroll-hint span { width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--brand-line-strong), transparent); animation: none; } .hero-scroll-hint span::after { content: ''; display: block; width: 1px; height: 16px; background: var(--brand-gold); animation: scrollCue 2.4s var(--ease-inout) infinite; } .hero-scroll-hint em { font-style: normal; } @keyframes scrollCue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } } /* 7.6 巨型标识：降级为低对比水印，去掉摆动/呼吸/光点/垂线等历史装饰动画，避免与首屏文字争夺焦点 */ .hero-mega-logo { position: absolute; right: clamp(24px, 6vw, 96px); top: 18%; z-index: 1; width: clamp(96px, 13vw, 168px); opacity: .1; margin: 0; padding: 0; animation: none !important; pointer-events: none; } .hero-mega-logo::before, .hero-mega-logo::after { content: none !important; display: none !important; } .hero-mega-logo .tj-logo, .hero-mega-logo .tj-p { animation: none !important; } .hero-mega-logo .tj-logo svg { filter: none; } /* 7.7 首屏 3D 画布之上的暗角（若存在） */ #hero3dVignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(10, 10, 10, .55) 100%); } @media (max-width: 900px) { .hero-section { padding-bottom: clamp(56px, 8vh, 88px); min-height: 92svh; } .hero-scroll-hint { display: none; } .hero-mega-logo { display: none; } .hero-stats { gap: var(--sp-6); } .hero-headline { max-width: 100%; } .hero-intro { font-size: var(--fs-sm); } .hero-actions { gap: var(--sp-4); align-self: stretch; width: 100%; } } @media (max-width: 480px) { .hero-headline { font-size: clamp(30px, 9.4vw, 42px); } .hero-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .hero-actions .btn { width: 100%; } } /* ──────────────────────────────────────────────────────────────────────────── 8 · 全站收敛补丁（消除历史分层的非品牌残留，保持既有布局不被破坏） ──────────────────────────────────────────────────────────────────────────── */ /* 8.1 板块分隔线统一为品牌线色（原 rgba(176,141,90,.1)） */ .section:not(:last-of-type)::after { background: var(--brand-line-soft); } .section, #about, #skills, #services, #testimonials, #faq { background: var(--brand-ink); } /* 8.2 卡片悬浮光晕：由金色描边光圈收敛为暖黑投影 */ .project-card:hover { box-shadow: var(--sh-2); } /* 8.3 资源库：边框色、金色渐变底、状态绿统一走令牌 */ .res-authbar { border-color: var(--brand-line); border-left-color: var(--brand-gold); background: var(--brand-ink-2); border-radius: var(--r-sm); } .res-authbar .rab-tag { color: var(--brand-gold); } .res-authbar .rab-tag.rab-ok { color: var(--state-ok); } .res-authbar .rab-note, .res-desc { color: var(--brand-tx-dim); } .res-title, .res-name { color: var(--brand-tx); } .res-row.has-dl { background: linear-gradient(90deg, var(--brand-gold-dim), transparent 40%); } .res-list { border-top-color: var(--brand-line); } .res-cat { border-radius: var(--r-pill); } /* 8.4 页脚渐变过渡条：暖黑 + 极淡金 */ .footer::before { background: linear-gradient(to bottom, transparent, var(--brand-ink) 70%, rgba(176, 141, 90, .04)); } /* 8.5 隐藏的历史遗留元素（统一在一处声明） */ .logo, .theme-dots, .carousel-btn, .header-actions { display: none; } /* 8.6 详情页 / 长文：正文宽度与行高统一，图片无边框、无圆角（参考图三/五） */ .detail-body, .detail-content { max-width: var(--w-text); margin-inline: auto; } .detail-body p, .detail-content p { line-height: var(--lh-body); } .detail-body img, .detail-content img { border-radius: 0; border: 0; } /* 8.7 后台 / 编辑器：沿用品牌令牌，避免出现第二套配色 */ .admin-panel, .editor-panel, .cm-panel { background: var(--brand-ink-2); border-color: var(--brand-line); color: var(--brand-tx); } /* ──────────────────────────────────────────────────────────────────────────── 9 · 动效与交互语言（全站统一行为） 规则：入场 = 上移 + 淡入，时长 ≤ --dur-3；hover = ≤ --dur-1；禁止弹跳/旋转特效。 ──────────────────────────────────────────────────────────────────────────── */ .reveal, .reveal-3d { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); will-change: opacity, transform; } .reveal.is-visible, .reveal.visible, .reveal-3d.is-visible, .reveal-3d.visible, .r3d-up.is-visible { opacity: 1; transform: none; } /* 大标题遮罩揭示：仅用于板块主标题，全站一致 */ .reveal-line { display: block; overflow: hidden; } .reveal-line > span { display: block; transform: translateY(100%); transition: transform var(--dur-4) var(--ease-out); } .reveal-line.is-visible > span { transform: none; } /* 图片揭示：由下向上裁切，统一时长 */ .img-reveal { overflow: hidden; } .img-reveal > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out); } .img-reveal:hover > img { transform: scale(1.02); } /* 光标光晕：品牌金、收敛强度 */ :root { --cursor-glow-size: 260px; } /* ──────────────────────────────────────────────────────────────────────────── 10 · 既有组件收敛映射（把历史分层中的写法接到同一套品牌规格上） 说明：以下选择器覆盖项目里已存在但风格不一的类名（.section-* / .res-* / .detail-*）， 不改结构、只统一字体、字距、颜色与装饰，使全站板块头部完全一致。 ──────────────────────────────────────────────────────────────────────────── */ /* 10.1 板块小标签：等宽 → Cinzel，统一字距与品牌金 */ .section-eyebrow, .res-kicker, .bk-eyebrow, .sec-kicker { font-family: var(--font-cin); font-size: var(--fs-label); font-weight: var(--fw-reg); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--sp-4); display: inline-block; } /* 10.2 板块英文副题 */ .section-title-en { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); font-weight: var(--fw-reg); margin-bottom: var(--sp-4); } /* 10.3 板块主标题：统一衬线 / 轻字重 / 杏仁色，去掉历史 2px 金色下限条 */ .section-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: var(--fw-light); letter-spacing: var(--track-tight); line-height: var(--lh-title); color: var(--brand-almond); margin-bottom: var(--sp-3); } .section-title::after { content: none; } /* 10.4 金色渐变标题：收敛为单一品牌金渐变（避免三色混用） */ .grad-title { background: linear-gradient(92deg, var(--brand-almond) 0%, var(--brand-gold-l) 72%, var(--brand-gold) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 10.5 段落说明文字 */ .section-desc, .res-desc { font-size: var(--fs-sm); color: var(--brand-tx-dim); font-weight: var(--fw-light); max-width: var(--w-text); } /* 10.6 面包屑：统一为 Cinzel 小字 + 品牌弱色 */ .detail-breadcrumb { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); gap: var(--sp-3); } .detail-breadcrumb a { color: var(--brand-tx-mute); } .detail-breadcrumb a:hover { color: var(--brand-gold); } .detail-breadcrumb .sep { color: var(--brand-tx-ghost); } /* 10.7 首屏眉题内部结构（细线 + 大写标签） */ .hero-eyebrow .h-eb-tag { font-size: var(--fs-label); letter-spacing: var(--track-wide); } /* 10.8 数据条内的单位与数字统一走字体令牌 */ .h-stat-n, .stat-num, .num-big { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; } /* 10.9 筛选胶囊 / 标签类：圆角与描边统一 */ .filter-pill, .res-cat, .tag-pill { border-radius: var(--r-pill); border: 1px solid var(--brand-line); background: transparent; color: var(--brand-tx-dim); transition: color var(--tx-fast), border-color var(--tx-fast), background-color var(--tx-fast); } .filter-pill:hover, .filter-pill.active, .res-cat:hover, .res-cat.active, .res-cat.is-active { color: var(--brand-gold); border-color: var(--brand-gold); background: var(--brand-gold-dim); } /* 10.10 媒体块：全站图片统一无边框、无圆角或细圆角，禁止重投影 */ figure, .media-frame { border-radius: 0; } /* 10.11 页脚：品牌弱色 + 细线分隔 */ .footer { color: var(--brand-tx-dim); } .footer a:hover { color: var(--brand-gold-l); } .footer .footer-title, .footer-title { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } /* 10.12 提示条 / 通知类：统一使用状态令牌，禁止再出现粉色 #e05268 或亮绿 #5fd18a */ .notice, .toast, .alert { border-radius: var(--r-sm); border: 1px solid var(--brand-line); background: var(--brand-ink-2); color: var(--brand-tx); } /* 10.13 金色文字统一入口（原 #B08D5A / #C9A57B 的写死值一律改用变量） */ .text-gold, em.gold, .gold-text { color: var(--brand-gold); } /* ──────────────────────────────────────────────────────────────────────────── 11 · 真实组件类名收敛（按运行时 DOM 清单逐个校准） 背景：第 10 节按「常见命名」映射了一部分选择器，但站点实际使用的类名是 .res-* / .pc-* / .tst-* / .rv-* / .skill-* / .sp-* / .st-big-* / .ct-* … 本节按运行时实测的类名清单补齐，只覆盖令牌类属性（字体 / 字距 / 颜色 / 描边 / 圆角 / 阴影 / 过渡），不改变任何布局尺寸，确保不破坏既有排版。 ──────────────────────────────────────────────────────────────────────────── */ /* 11.1 资源库 03.1（.res-*：列表行 + 展开详情 + 站点卡） */ .res-wrap, .res-head { border-color: var(--brand-line); } .res-kicker { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-gold); } .res-title { font-family: var(--font-serif); font-weight: var(--fw-light); color: var(--brand-almond); letter-spacing: var(--track-tight); } .res-desc, .res-info, .rd-desc, .rd-meta, .rd-hint { color: var(--brand-tx-dim); font-weight: var(--fw-light); } .res-row { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: none; transition: background-color var(--tx), border-color var(--tx); } .res-row:hover { background: var(--brand-ink-3); border-color: var(--brand-line-strong); box-shadow: var(--sh-1); } .res-name { color: var(--brand-tx); font-family: var(--font-sans); font-weight: var(--fw-med); } .res-site, .res-type, .rd-k, .rd-sep { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .res-type, .res-cat, .res-tags > * { border-radius: var(--r-pill); border: 1px solid var(--brand-line); color: var(--brand-tx-dim); background: transparent; } .res-op, .res-go, .rd-go { color: var(--brand-tx-dim); border-radius: var(--r-sm); transition: color var(--tx-fast), border-color var(--tx-fast); } .res-op:hover, .res-go:hover, .rd-go:hover { color: var(--brand-gold); } .res-op-fav.on, .res-op-fav.is-on { color: var(--brand-gold); } .res-star-ic { color: var(--brand-gold); } .res-operror, .res-op-copy.failed { color: var(--state-danger); } .res-op-copy.done { color: var(--state-ok); } .res-detail { background: var(--brand-ink); border-top: 1px solid var(--brand-line); } .res-cat.active, .res-cat.is-active, .filter-pill.active { color: var(--brand-gold); border-color: var(--brand-gold); background: var(--brand-gold-dim); } .res-list > * { border-color: var(--brand-line); } /* 资源板块入口卡 */ .rs-card { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: none; transition: border-color var(--tx), background-color var(--tx); } .rs-card:hover { background: var(--brand-ink-3); border-color: var(--brand-line-strong); } .rs-ic { color: var(--brand-gold); } .rs-info { color: var(--brand-tx-dim); } .rs-go { color: var(--brand-gold); } /* 11.2 作品集 01.3（.pc-*：四列等高网格卡片） */ .project-card { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: none; transition: border-color var(--tx), background-color var(--tx); } .project-card:hover { border-color: var(--brand-line-strong); background: var(--brand-ink-3); box-shadow: var(--sh-2); } .pc-image, .pc-collage { border-radius: 0; overflow: hidden; } .pc-image img, .pc-collage img { border-radius: 0; border: 0; } .pc-body { background: transparent; } .pc-meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .pc-en { font-family: var(--font-cin); font-size: var(--fs-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); } .pc-elio-no, .case-num, .se-no, .ss-no, .step-num, .sp-num, .timeline-no, .nbm-no { font-family: var(--font-mono); letter-spacing: var(--track-caps); color: var(--brand-gold); } .pc-tag, .pc-tags > *, .tag-pill { border-radius: var(--r-pill); border: 1px solid var(--brand-line); color: var(--brand-tx-dim); background: transparent; } .pc-client, .pc-loc, .pc-extra { color: var(--brand-tx-dim); font-size: var(--fs-sm); } .card-3d, .card-3d-inner, .card-tilt { box-shadow: none; } /* 11.3 详情浮层（.detail-overlay / .detail-inner / .detail-close） */ .detail-overlay { background: rgba(10, 10, 10, .88); backdrop-filter: blur(8px); } .detail-inner { background: var(--brand-ink); border: 1px solid var(--brand-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); color: var(--brand-tx); } .detail-close { color: var(--brand-tx-dim); border: 1px solid var(--brand-line); border-radius: var(--r-pill); background: transparent; transition: color var(--tx-fast), border-color var(--tx-fast); } .detail-close:hover { color: var(--brand-gold); border-color: var(--brand-gold); } .detail-overlay h1, .detail-overlay h2, .detail-overlay h3 { font-family: var(--font-serif); font-weight: var(--fw-light); color: var(--brand-almond); letter-spacing: var(--track-tight); } .detail-overlay p, .detail-overlay li { color: var(--brand-tx-dim); line-height: var(--lh-body); font-weight: var(--fw-light); } .detail-overlay a { color: var(--brand-gold); } .detail-overlay img { border-radius: 0; border: 0; } /* 11.4 客户评价（.tst-* 首页评价板 / .rv-* 评价卡） */ .tst-card, .rv-card { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: none; transition: border-color var(--tx), background-color var(--tx); } .tst-card:hover, .rv-card:hover { border-color: var(--brand-line-strong); background: var(--brand-ink-3); } .tst-stars, .tst-star, .rv-star { color: var(--brand-gold); } .tst-text, .rv-quote { color: var(--brand-tx); font-family: var(--font-serif); font-weight: var(--fw-light); line-height: var(--lh-body); } .tst-ref, .rv-ref, .rv-role, .tst-sub { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .tst-user, .rv-author, .rv-name { color: var(--brand-tx); font-weight: var(--fw-med); } .tst-avatar { border: 1px solid var(--brand-line); border-radius: 50%; filter: grayscale(1); } .tst-dot { background: var(--brand-line-strong); border-radius: var(--r-pill); } .tst-dot.active, .tst-dot.on { background: var(--brand-gold); } /* 11.5 履历 / 时间线（.timeline-* / .insight-timeline-* / .period / .company） */ .timeline-item, .insight-timeline-item { border-color: var(--brand-line); } .timeline-no, .insight-timeline-date { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--brand-gold); } .insight-timeline-content { color: var(--brand-tx); } .period, .company { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--brand-tx-mute); } .insight-read { color: var(--brand-gold); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; } /* 11.6 技能 / 服务 / 流程（.skill-* / .service-item / .process-item / .sp-* / .step-*） */ .skill-item, .service-item, .process-item, .studio-pillar { border-color: var(--brand-line); } .skill-name, .step-num, .sp-num { color: var(--brand-tx); } .skill-pct { font-family: var(--font-num); color: var(--brand-gold); } .skill-bar { background: var(--brand-line-soft); border-radius: var(--r-pill); overflow: hidden; } .skill-bar-fill { background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-l)); } .skill-desc, .service-item p, .process-item p { color: var(--brand-tx-dim); font-weight: var(--fw-light); } .s-icon, .sp-icon { color: var(--brand-gold); } /* 11.6b 图标容器归一（V2 第 2 轮补齐） ① 尺寸只认 16·20·24·32 四档，历史 22px 非法值统一回收为 24px； ② 撤销 .studio-pillar:hover .sp-icon 的 rotate(6deg) scale(1.06)——违反动效规范 （禁止旋转/弹跳，仅允许上移 + 淡入）。 */ .service-item .s-icon svg, .s-icon svg, .sp-icon svg { width: 24px; height: 24px; } .sp-icon { width: 44px; height: 44px; } .studio-pillar:hover .sp-icon { transform: none; } .s-en, .sp-en { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); } .step-dot { background: var(--brand-line-strong); } .step-dot.active, .step-dot.on { background: var(--brand-gold); } .step-line { background: var(--brand-line); } /* 11.7 板块列表条目与编号（.ss-* / .se-* / .nbb-* / .nbm-* / .mn-*） */ .ss-item, .se-subnav a { border-color: var(--brand-line); color: var(--brand-tx-dim); } .ss-item:hover, .se-subnav a:hover { color: var(--brand-gold); border-color: var(--brand-gold); } .ss-zh { color: var(--brand-tx); } .ss-en, .nbb-en, .nbm-en, .mn-t-en { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); } .nbb-zh, .nbm-zh, .mn-t-zh { color: var(--brand-tx); } .nav-board-btn { border: 1px solid transparent; border-radius: var(--r-sm); transition: color var(--tx-fast), border-color var(--tx-fast), background-color var(--tx-fast); } .nav-board-btn:hover, .nav-board-btn.active { color: var(--brand-gold); border-color: var(--brand-line); background: var(--brand-gold-dim); } .nbb-ico, .nng-ico { color: var(--brand-gold); } .nav-board-menu { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: var(--sh-3); } .mn-group-title { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); } .mn-tile { background: var(--brand-ink-3); border: 1px solid var(--brand-line); border-radius: var(--r-sm); transition: border-color var(--tx-fast), background-color var(--tx-fast); } .mn-tile:hover { border-color: var(--brand-gold); background: var(--brand-gold-dim); } /* 11.8 大字号数字与年份（.st-big-* / .fw-* / .case-num-item） */ .st-big-num, .fw-no, .case-num { font-family: var(--font-num); font-weight: var(--fw-light); color: var(--brand-almond); letter-spacing: -.01em; } .st-big-unit, .st-big-label, .st-big-en, .fw-year { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .st-big-unit { color: var(--brand-gold); } .fw-main { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: none; } .fw-bg { opacity: .4; } /* 11.9 联系与 FAQ（.ct-* / .contact-detail / .faq-*） */ .ct-item, .contact-detail { border-color: var(--brand-line); } .ct-icon { color: var(--brand-gold); } .ct-text, .contact-detail .val { color: var(--brand-tx); } .contact-detail .k, .ct-item .k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .faq-item { background: transparent; border-bottom: 1px solid var(--brand-line); border-radius: 0; } .faq-q { font-family: var(--font-serif); font-weight: var(--fw-light); color: var(--brand-tx); letter-spacing: var(--track-tight); } .faq-q:hover { color: var(--brand-gold); } .faq-a, .faq-a p { color: var(--brand-tx-dim); line-height: var(--lh-body); font-weight: var(--fw-light); } .faq-item.active .faq-q, .faq-item.on .faq-q { color: var(--brand-gold); } .faq-item .arrow { color: var(--brand-tx-mute); } .faq-filter, .faq-filter .filter-pill { border-radius: var(--r-pill); } .philo-item, .prin-tag { border-color: var(--brand-line); color: var(--brand-tx-dim); } .prin-tag { border-radius: var(--r-pill); } /* 11.10 浮动控件与全局浮层（统一描边 / 圆角 / 过渡，不做尺寸改动） */ .backTop, .next-section-btn, .music-toggle, .nav-btn-square, .bg-settings-btn, .chapter-nav .cn-item { border: 1px solid var(--brand-line); border-radius: var(--r-pill); background: rgba(17, 17, 16, .72); color: var(--brand-tx-dim); transition: color var(--tx-fast), border-color var(--tx-fast), background-color var(--tx-fast); } .backTop:hover, .next-section-btn:hover, .music-toggle:hover, .nav-btn-square:hover, .bg-settings-btn:hover, .chapter-nav .cn-item:hover { color: var(--brand-gold); border-color: var(--brand-gold); background: rgba(17, 17, 16, .9); } .chapter-nav .cn-label { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--brand-tx-mute); } .chapter-nav .cn-dot { background: var(--brand-line-strong); border-radius: var(--r-pill); } .chapter-nav .cn-item.active .cn-dot, .chapter-nav .cn-item.on .cn-dot { background: var(--brand-gold); } .page-loader { background: var(--brand-ink); color: var(--brand-tx-dim); } .modal-overlay, .lightbox, .add-modal, .cms-overlay, .export-overlay, .bg-panel-overlay { background: rgba(10, 10, 10, .86); backdrop-filter: blur(8px); } .modal, .add-modal .modal-card, .cms-panel, .export-preview, .bg-panel { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); color: var(--brand-tx); } .toastContainer .toast, .toast { background: var(--brand-ink-3); border: 1px solid var(--brand-line); border-radius: var(--r-sm); color: var(--brand-tx); box-shadow: var(--sh-2); } .site-guide { background: var(--brand-ink-2); border: 1px solid var(--brand-line); border-radius: var(--r-md); box-shadow: var(--sh-3); color: var(--brand-tx-dim); } .site-guide h1, .site-guide h2 { font-family: var(--font-serif); font-weight: var(--fw-light); color: var(--brand-almond); } /* 11.11 交互过渡统一：所有可点元素默认走 --dur-1/--dur-2，禁止散落的 .35s/.5s */ a, button, .btn, .filter-pill, .res-op, .res-go, .faq-q, .nav-board-btn, .pc-tag, .rs-card, .res-row, .project-card, .tst-card, .rv-card { transition-duration: var(--dur-2); transition-timing-function: var(--ease-out); } a:active, button:active, .btn:active { transition-duration: var(--dur-1); } /* ════════════════════════════════════════════════════════════════════════════ 12 · 本轮改造层（ref1 资源库 / ref2 作品集 / ref3–ref6 详情页） 依据：ref1-library（左侧固定导航 + 卡片网格 + 搜索筛选，暗色克制） ref2-worklist（四列等高矩形图片网格 + 底部双行标题与描述，无圆角） ref3–ref6（左文右图双栏 · 多图并列 · 九宫格交替的详情页长文） 约束：仍只引用 §1 令牌；圆角统一收敛到 --r-xs/--r-sm（无圆角倾向）。 双主题：标题与按钮文字统一走 --brand-tx（暖白模式下 --brand-almond 为浅底同色， 会造成浅底浅字不可读），深色模式视觉与 --brand-almond 基本等价。 ════════════════════════════════════════════════════════════════════════════ */ /* ── 12.1 资源库 · 顶部横向分类导航 + 紧凑卡片网格（本轮 §13.3 已收敛版式） ── */ #resources .res-shell, .res-wrap.res-shell{ display:block; gap:0; align-items:start; border:0; padding:0; background:transparent; } .res-shell .res-kicker{font-family:var(--font-cin);font-size:var(--fs-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-gold)} .res-shell .res-title{font-family:var(--font-serif);font-size:var(--fs-h3);font-weight:var(--fw-light);color:var(--brand-tx);margin:0;letter-spacing:var(--track-tight)} .res-shell .res-side-note{margin:0;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.7;color:var(--brand-tx-mute)} .res-shell .res-cat{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; padding:9px 10px;background:transparent;border:1px solid transparent;border-radius:var(--r-xs); color:var(--brand-tx-dim);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-reg); letter-spacing:.02em;cursor:pointer;transition:color var(--tx-fast),background-color var(--tx-fast),border-color var(--tx-fast); } .res-shell .res-cat:hover{color:var(--brand-tx);background:var(--brand-ink-3);border-color:var(--brand-line)} .res-shell .res-cat.active,.res-shell .res-cat.is-active{color:var(--brand-gold);background:var(--brand-gold-dim);border-color:var(--brand-gold);border-radius:var(--r-xs)} .res-shell .res-cat-ic{flex:0 0 20px;font-size:13px;line-height:1;opacity:.85;text-align:center} .res-shell .res-cat-nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .res-shell .res-cat-ct{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--brand-tx-mute);letter-spacing:.06em} .res-shell .res-cat.active .res-cat-ct{color:var(--brand-gold-l)} /* 右侧：搜索 / 排序 / 卡片式网格 */ .res-shell .res-main{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0} .res-shell .res-head--main .res-desc{margin:0;max-width:var(--w-text);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--brand-tx-dim)} .res-shell .res-topbar{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3); padding:var(--sp-3);background:var(--brand-ink-2);border:1px solid var(--brand-line);border-radius:var(--r-sm); position:sticky; top:calc(var(--nav-h,72px) + 12px); z-index:6; } .res-shell .res-search{ flex:1 1 260px;display:flex;align-items:center;gap:8px;min-width:0; padding:8px 12px;background:var(--brand-ink);border:1px solid var(--brand-line);border-radius:var(--r-xs);color:var(--brand-tx-mute); transition:border-color var(--tx-fast),color var(--tx-fast); } .res-shell .res-search:focus-within{border-color:var(--brand-gold);color:var(--brand-gold)} .res-shell .res-search input{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:none;color:var(--brand-tx);font-family:var(--font-sans);font-size:var(--fs-sm)} .res-shell .res-search input::placeholder{color:var(--brand-tx-ghost)} .res-shell .res-sort{ flex:0 0 auto;appearance:none;padding:8px 30px 8px 12px;cursor:pointer; background:var(--brand-ink) url("data:image/svg+xml;utf8,") no-repeat right 10px center; border:1px solid var(--brand-line);border-radius:var(--r-xs);color:var(--brand-tx-dim);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em; } .res-shell .res-sort:hover{border-color:var(--brand-line-strong);color:var(--brand-tx)} .res-shell .res-count{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--brand-tx-mute);white-space:nowrap} .res-shell .res-chips{display:flex;flex-wrap:wrap;gap:8px} .res-shell .res-chips:empty{display:none} .res-shell .res-chips > *{ padding:4px 10px;border:1px solid var(--brand-line);border-radius:var(--r-xs); font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-tx-dim); } /* 卡片网格：自适应多列，暗色克制（图标 + 名称 + 说明 + 标签 + 操作） */ .res-shell .res-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:var(--sp-4);align-items:stretch; } .res-shell .res-card{ display:flex;flex-direction:column;gap:10px;padding:var(--sp-4);position:relative;overflow:hidden;min-width:0; background:var(--brand-ink-2);border:1px solid var(--brand-line);border-radius:var(--r-sm);box-shadow:none; cursor:pointer;transition:background-color var(--tx),border-color var(--tx),transform var(--tx); } .res-shell .res-card:hover{background:var(--brand-ink-3);border-color:var(--brand-line-strong);transform:translateY(-2px)} .res-shell .rc-head{display:flex;align-items:center;gap:10px} .res-shell .rc-ic{ flex:0 0 34px;height:34px;display:flex;align-items:center;justify-content:center; background:var(--brand-ink);border:1px solid var(--brand-line);border-radius:var(--r-xs); font-family:var(--font-cin);font-size:13px;letter-spacing:.04em;color:var(--brand-gold); } .res-shell .res-type{ padding:3px 9px;border:1px solid var(--brand-line);border-radius:var(--r-xs); font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-tx-dim);background:transparent; } .res-shell .rc-ops{margin-left:auto;display:flex;align-items:center;gap:6px} .res-shell .res-op{ padding:4px 8px;background:transparent;border:1px solid var(--brand-line);border-radius:var(--r-xs); color:var(--brand-tx-mute);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em;cursor:pointer; transition:color var(--tx-fast),border-color var(--tx-fast); } .res-shell .res-op:hover{color:var(--brand-gold);border-color:var(--brand-gold)} .res-shell .res-star-ic.on{color:var(--brand-gold)} .res-shell .res-op-dl{color:var(--brand-gold-l);border-color:var(--brand-gold)} .res-shell .res-op-dl:hover{background:var(--brand-gold-dim)} .res-shell .res-name{margin:0;font-family:var(--font-serif);font-size:var(--fs-h4);font-weight:var(--fw-med);color:var(--brand-tx);line-height:1.35} .res-shell .res-info{margin:0;flex:1 1 auto;font-size:var(--fs-sm);line-height:1.75;color:var(--brand-tx-dim); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .res-shell .rc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--brand-tx-ghost)} .res-shell .res-site{letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere} .res-shell .res-name,.res-shell .res-info,.res-shell .rd-desc,.res-shell .rd-meta{overflow-wrap:anywhere;word-break:break-word} .res-shell .res-grid > *{min-width:0} .res-shell .res-tags{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .res-shell .res-tags > *{padding:2px 7px;border:1px solid var(--brand-line-soft);border-radius:var(--r-xs);color:var(--brand-tx-mute)} .res-shell .rc-acts{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--brand-line-soft)} .res-shell .res-go{ margin-left:auto;padding:5px 10px;border:1px solid var(--brand-line);border-radius:var(--r-xs); color:var(--brand-tx);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.08em; transition:background-color var(--tx-fast),border-color var(--tx-fast),color var(--tx-fast); } .res-shell .res-go:hover{background:var(--brand-gold);border-color:var(--brand-gold);color:var(--brand-ink)} .res-shell .res-detail{max-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:max-height var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);font-size:var(--fs-xs);color:var(--brand-tx-mute)} .res-shell .res-card.open .res-detail{max-height:320px;opacity:1;transform:none;padding-top:14px;margin-top:2px} .res-shell .rd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0 6px;font-family:var(--font-mono);letter-spacing:.06em} .res-shell .rd-k{color:var(--brand-tx-ghost);text-transform:uppercase} .res-shell .rd-sep{width:1px;height:10px;background:var(--brand-line);margin:0 4px} .res-shell .rd-desc{line-height:1.85} .res-shell .rd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:8px} .res-shell .rd-hint{color:var(--brand-tx-ghost)} .res-shell .rd-go{margin-left:auto;color:var(--brand-gold)} .res-shell .res-empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--brand-tx-mute);font-size:var(--fs-sm); border:1px dashed var(--brand-line);border-radius:var(--r-sm)} .res-shell .res-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding-top:var(--sp-3)} .res-shell .res-pager:empty{display:none} .res-shell .res-pager button{ min-width:32px;padding:6px 10px;background:transparent;border:1px solid var(--brand-line);border-radius:var(--r-xs); color:var(--brand-tx-dim);font-family:var(--font-mono);font-size:var(--fs-xs);cursor:pointer;transition:color var(--tx-fast),border-color var(--tx-fast); } .res-shell .res-pager button:hover{color:var(--brand-gold);border-color:var(--brand-gold)} .res-shell .res-pager button.active,.res-shell .res-pager button.on{color:var(--brand-gold);border-color:var(--brand-gold);background:var(--brand-gold-dim)} .res-shell .res-more{display:flex;flex-wrap:wrap;gap:10px;padding-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--brand-tx-ghost)} .res-shell .res-more-note{margin-left:auto} /* AI 精选区（保持暗色卡片，与 grid 同语言） */ .res-shell .res-spotlight{padding:var(--sp-5);background:var(--brand-ink-2);border:1px solid var(--brand-line);border-radius:var(--r-sm);opacity:0;transform:translateY(10px);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)} .res-shell .res-spotlight.in-view{opacity:1;transform:none} .res-shell .rs-head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:var(--sp-4)} .res-shell .rs-tag{font-family:var(--font-cin);font-size:var(--fs-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-gold)} .res-shell .rs-note{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;color:var(--brand-tx-ghost)} .res-shell .rs-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-3)} .res-shell .rs-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--brand-ink);border:1px solid var(--brand-line);border-radius:var(--r-xs);transition:border-color var(--tx-fast),background-color var(--tx-fast)} .res-shell .rs-card:hover{border-color:var(--brand-gold);background:var(--brand-ink-3)} .res-shell .rs-ic{flex:0 0 auto;font-size:16px;color:var(--brand-gold)} .res-shell .rs-info{display:flex;flex-direction:column;min-width:0} .res-shell .rs-info b{font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--brand-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .res-shell .rs-info i{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--brand-tx-mute)} .res-shell .rs-go{margin-left:auto;color:var(--brand-tx-ghost);font-size:12px} .res-shell .res-authbar{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--brand-tx-mute);line-height:1.8} /* ── 12.2 作品集 · 四列等高矩形网格（ref2） ────────────────────────────────── */ .works-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(18px,2vw,32px); row-gap:clamp(40px,4.2vw,72px); padding-bottom:var(--block-y); } .works-grid .work-card,.works-grid .project-card.work-card{ display:flex;flex-direction:column;background:transparent;border:0;border-radius:0;box-shadow:none; transform:none;cursor:pointer;overflow:visible; } .works-grid .work-card::after{content:none} .works-grid .work-card:hover{transform:none;box-shadow:none} .works-grid .wc-media{ position:relative;margin:0;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:0; background:var(--brand-ink-3); } .works-grid .wc-media img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1);transition:transform .8s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.98)} .works-grid .work-card:hover .wc-media img{transform:scale(1.05);filter:brightness(1.05) saturate(1.04)} .works-grid .wc-media .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--brand-tx-ghost)} .works-grid .wc-no,.works-grid .wc-flag{ position:absolute;top:12px;padding:3px 8px;background:rgba(10,10,10,.72);border-radius:0; font-family:var(--font-cin);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-gold-l); } .works-grid .wc-no{right:12px;border:1px solid var(--brand-line)} .works-grid .wc-flag{left:12px;color:var(--brand-almond);background:var(--brand-copper)} .works-grid .wc-body{display:flex;flex-direction:column;gap:6px;padding:16px 0 0;border-radius:0} .works-grid .wc-meta{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-tx-mute)} .works-grid .wc-title{margin:0;font-family:var(--font-serif);font-size:var(--fs-h4);font-weight:var(--fw-med);line-height:1.35;color:var(--brand-tx);letter-spacing:-.01em;position:relative;display:inline-block;align-self:flex-start} .works-grid .wc-title::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--brand-gold);transition:width .6s var(--ease-out)} .works-grid .work-card:hover .wc-title::after{width:100%} .works-grid .wc-title-en{font-family:var(--font-serif);font-style:italic;font-size:var(--fs-xs);letter-spacing:.04em;color:var(--brand-tx-mute)} .works-grid .wc-desc{margin:0;font-size:var(--fs-sm);line-height:1.75;color:var(--brand-tx-dim); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .works-grid .work-card:hover .wc-title{color:var(--brand-gold-l)} .works-grid .work-card--case{outline:1px solid var(--brand-line);outline-offset:-1px} .works-grid .work-card--case:hover{outline-color:var(--brand-gold)} .works-grid .add-project-btn{grid-column:span 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; min-height:220px;border:1px dashed var(--brand-line);border-radius:0;color:var(--brand-tx-mute);cursor:pointer; font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em} .works-grid .add-project-btn:hover{border-color:var(--brand-gold);color:var(--brand-gold)} .works-grid .pc-delete{position:absolute;top:10px;left:10px;z-index:10;width:24px;height:24px;border-radius:0; background:rgba(10,10,10,.7);border:1px solid var(--brand-line);color:var(--brand-tx-dim);font-size:13px;cursor:pointer; display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--tx-fast),color var(--tx-fast)} .works-grid .work-card:hover .pc-delete{opacity:1} .works-grid .pc-delete:hover{color:var(--brand-almond);background:var(--state-danger)} .works-grid .filter-no-results{grid-column:1/-1} /* 作品集筛选胶囊：去圆角、暗色描边（与资源库同语言，但保留 ref2 的克制排版感） */ #projects .filter-pill{border-radius:var(--r-xs);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase} #projects .filter-group-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-tx-mute)} @media (max-width:1180px){ .works-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .res-shell .res-cat{width:auto;border:1px solid var(--brand-line);border-radius:var(--r-xs)} } @media (max-width:820px){ .works-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .res-shell .res-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))} .res-shell .res-topbar{position:static} } @media (max-width:520px){ .works-grid{grid-template-columns:minmax(0,1fr)} .res-shell .res-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .res-shell .res-more-note{display:none} } /* ═══════ 品牌设计系统预留：图标尺寸档 / 标识尺寸档 / 组合锁型 ═══════ 说明：清理孤立类时按品牌规范保留（当前页面暂无引用，供新板块直接复用） */ .tj-logo--xs { --tj-s: 20px; } .tj-logo--sm { --tj-s: 28px; } .tj-logo--md { --tj-s: 40px; } .tj-logo--lg { --tj-s: 64px; } .tj-logo--xl { --tj-s: 120px; } .brand-lockup__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-lockup__en { font-family: var(--font-cin); font-size: var(--fs-label); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--brand-tx-mute); line-height: 1; white-space: nowrap; } .brand-lockup--stack { flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .ico--16 { width: 16px; height: 16px; } .ico--20 { width: 20px; height: 20px; } .ico--24 { width: 24px; height: 24px; } .ico--32 { width: 32px; height: 32px; } .ico--lg { width: 32px; height: 32px; } .ico--text { vertical-align: -.18em; } /* ══════════════════════════════════════════════════════════════════════════ §13 全站版式收敛层（本轮改造：导视收窄 / 资源库顶栏 / 页宽统一 / 移动端） -------------------------------------------------------------------------- 覆盖方式：brand.css 在 styles.css、work-detail.css 之后加载， 同特异度下后者胜出，因此本节全部使用「同选择器 + 后置」覆盖，不改旧文件。 本节只改版式（尺寸 / 留白 / 排布），不动任何交互类名、DOM 钩子与 JS 逻辑。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 13.1 全站页宽口径：内容列 = min(1280px, 视口 − 2×gutter) ─────────────── 旧况：主页内层 1280 / 资源库 1200 / 作品集 1326 / 职业规划·履历 880， 同一站点四种口径，越往下的板块越窄。 现况：#about / #resume 等板块的左右留白改为「gutter 与大屏居中留白取大者」， 使所有板块内容列左缘、右缘与主页、资源库、作品集完全对齐。 */ .section{ padding-left:max(var(--gutter), calc((100% - var(--w-page)) / 2)); padding-right:max(var(--gutter), calc((100% - var(--w-page)) / 2)); } .res-wrap,.res-section,.studio-wrap,.bk-wrap{max-width:var(--w-page)} .res-wrap{max-width:var(--w-page) !important} #resources .res-wrap,#resources .res-shell,.res-wrap.res-shell{ width:100%;max-width:var(--w-page);margin-left:auto;margin-right:auto; } .timeline{max-width:var(--w-page);margin-left:auto;margin-right:auto} .timeline-item{max-width:920px} /* 作品详情页（work-p01~p08 / work-cangyuxian）同口径： 旧 .wd-wrap 宽 min(1440px,100%) + padding，且工作页不加载 styles.css 的 *{box-sizing:border-box} 复位，content-box 下 100% 再加左右 padding， 外框 = 视口 + 40px，375/430 移动端实测横向溢出 32px（407 / 462）。 现统一：border-box + 「内容列 1280，左右留白 = max(gutter, 大屏居中留白)」， 与主页 .section 及各板块完全同口径，任何视口都不再溢出。 【本轮修正】原写法在此块上叠加了「限宽 1280 + 左右内距 80」，1440 视口 实测 .wd-wrap 外框 1280 起于 80、内容列仅 1120 起于 160（比主页内容列 窄 160、右移 80），且 .wd-hero-in 再叠一层 48 内距 → 内容列 1024 / 起于 208。 现与 work-detail.css 同式：元素自身即内容列，左右留白改用同式「外距」， 内距归零 → 1440 视口实测 1280 / 起于 80，与主页一致。 */ .wd-wrap{ width:auto;max-width:var(--w-page);box-sizing:border-box; margin-left:max(var(--gutter), calc((100% - var(--w-page)) / 2)); margin-right:max(var(--gutter), calc((100% - var(--w-page)) / 2)); padding-left:0;padding-right:0; } /* 13.1b 板块级容器（首屏 / 区块横幅 / 获奖横幅 / 客户评价板）并入同一口径： 旧况（1440 视口实测）：.tst-board 内容列 1328 起于 56、.hero-section 起于 48、 .board-divider 起于 56、.big-type-block 起于 24、.award-banner 宽 calc(100% - 112px)， 与 .section 的 1280 / 80 各不一致；同一页面的左缘出现 24 / 48 / 56 / 80 四种值。 现况：统一为「内容列 1280，左右留白 = max(gutter, 大屏居中留白)」， 即所有板块的正文左缘、右缘与 #projects / #resources 完全对齐。 只改左右内距（padding-left/right 长写），各板块原有的上下间距与内容宽度不变。 */ .hero-section,.stats-row,.svc-board,.tst-board,.board-divider,.big-type-block{ padding-left:max(var(--gutter), calc((100% - var(--w-page)) / 2)); padding-right:max(var(--gutter), calc((100% - var(--w-page)) / 2)); } /* 获奖横幅：外板接收内容列后，横幅自身改为 100% 充满该列（高度与动效不变） */ .award-board{ padding-left:max(var(--gutter), calc((100% - var(--w-page)) / 2)); padding-right:max(var(--gutter), calc((100% - var(--w-page)) / 2)); } .award-banner{width:100%;max-width:var(--w-page);margin-left:auto;margin-right:auto} /* 客户评价子块导视原本额外内缩 56px（旧板内距），板内距归一后必须归零， 否则其条目左缘比同板标题再右移 56px。 */ .tst-board .se-subnav{padding-left:0;padding-right:0} /* ── 13.2 右侧滑动导视：v3 极简窄轨（容器完全退形 / 常隐渐现 + 悬浮展开） ── 历史：面板自带背景 / 描边 / 圆角 / 阴影，默认 opacity:.78 常驻显形，视觉过重 （用户反馈"太突出、有形状"）。v3 起容器彻底退形：无背景、无描边、无阴影、 无圆角、无毛玻璃，桌面端默认 opacity:0，鼠标进入 / 键盘聚焦 / 触屏点击展开时 .28s 渐入，移开 .52s 渐出，只保留一条极细窄轨。 （spec 的整段替换会连带删掉下方 .cn-head-lab / .cn-label 的 max-width 展开链， 文字将永远不可见，故此处做"保守收敛"：只改容器形态，展开逻辑原样保留。） 结构（由 app.js initGuideRail 注入）：头部「序号/总数/区块名」，主体 16 节点 窄轨态只留线 + 点，悬浮（桌面）或点击（触屏）后展开文字；展开为固定浮层， 不改变页面布局。 */ #chapterNav.chapter-nav{ right:20px;gap:1px;padding:0;width:auto;max-width:calc(100vw - 40px); border:0;border-radius:0;background:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none; opacity:.32; transition:opacity .6s var(--ease-out); } /* v3 规格（theme-v3-spec 第 1 步）：默认近隐形（.32，只余刻度线）， 悬停 / 键盘聚焦 / 触屏展开时才渐显到 1。刻意不采用「桌面端 opacity:0」写法—— 低强度常显既满足"占位很小"，又不会把导视变成不可发现的点击目标。 */ #chapterNav.chapter-nav:hover, #chapterNav.chapter-nav:focus-within, #chapterNav.chapter-nav[data-open="true"]{opacity:1;background:transparent;border:0;box-shadow:none} #chapterNav .cn-head{ display:flex;flex-direction:column;align-items:flex-end;gap:2px;width:100%; padding:0 0 12px;background:transparent;border:0;color:var(--brand-tx-dim);cursor:pointer; } #chapterNav .cn-head-top{display:flex;align-items:baseline;gap:2px;line-height:1} #chapterNav .guide-index{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--accent)} #chapterNav .guide-total{font-family:var(--font-mono);font-size:9px;letter-spacing:.02em;color:var(--text-ghost)} #chapterNav .cn-head-chev{display:none} /* 文字：默认零占位完全收起（max-width:0），悬停 / 展开时自右向左渐入 （旧版只改 opacity 不改 max-width，元素仍占横向空间，是"过宽"的根因） */ #chapterNav .cn-head-lab, #chapterNav .cn-label{ display:block;max-width:0;opacity:0;overflow:hidden; transform:translateX(7px);text-align:right;white-space:nowrap; transition:max-width .5s var(--ease-out),opacity .36s var(--ease-out),transform .5s var(--ease-out); } #chapterNav .cn-head-lab{ font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-caps); text-transform:uppercase;color:var(--text-secondary); } #chapterNav:hover .cn-head-lab,#chapterNav[data-open="true"] .cn-head-lab, #chapterNav:hover .cn-label,#chapterNav[data-open="true"] .cn-label{ max-width:180px;opacity:1;transform:none; } #chapterNav .cn-body{display:flex;flex-direction:column;gap:0;width:100%;align-items:flex-end} #chapterNav .cn-item{ display:flex;align-items:center;justify-content:flex-end;gap:9px; padding:6px 0;border-radius:0;background:transparent;width:100%; } #chapterNav .cn-item:hover{background:transparent} #chapterNav .cn-item .cn-line{ width:13px;flex:0 0 13px;height:1px;background:var(--line-strong);opacity:.75; transition:width .4s var(--ease-out),background-color .4s var(--ease-out),opacity .4s var(--ease-out); } #chapterNav .cn-item:hover .cn-line{width:21px;flex-basis:21px;opacity:1} #chapterNav .cn-item.on .cn-line{width:27px;flex-basis:27px;background:var(--accent);opacity:1} /* 纯刻度线轨：圆点整体隐去，只留一根会生长的短线——最极简的形态 */ #chapterNav .cn-item .cn-dot{display:none} #chapterNav .cn-item .cn-label{font-size:9.5px;letter-spacing:.2em;color:var(--text-secondary)} #chapterNav .cn-item:hover .cn-label{color:var(--text-primary)} #chapterNav .cn-item.on .cn-label{color:var(--accent)} /* ── 13.2.1 v3 刻度轨收形：进度条 + 小屏兜底 ──────────────────────────── v3 规范（theme-v3-spec 第 1 步）：节点圆点整体隐去、发光全删，导航只用 「线宽 13 / 21 / 27px」三档刻度表达当前位置；底部进度条改用语义令牌 （--line / --accent），与皮肤切换同源，不再写死品牌金。 */ /* v3（theme-v3-spec 第 1 步）：进度条收为 22px 短金线——不再占满容器宽度、 自身不再构成「形状」，与极简导航同源（对齐右缘、1px 发丝线）。 */ #chapterNav .guide-progress{width:22px;height:1px;margin-top:12px;background:var(--line);overflow:hidden;align-self:flex-end} #chapterNav .guide-progress span{display:block;width:0;height:100%;background:var(--accent);transition:width .4s var(--ease-out)} @media (max-height:640px){ #chapterNav .cn-body{max-height:42vh;overflow-y:auto} } /* ── 13.3 资源库：左侧固定栏 → 顶部横向分类导航；卡片缩小、更紧凑多列 ────── 旧况：.res-shell 为「左 212~268px 固定栏 + 右网格」，960px 被导航吃掉； 卡片最小 258px，1440 视口只有 3 列（287px/张），一屏看不了几张。 现况：分类导航横置于页头下方并吸顶，卡片最小 196px（1440 下 6 列）， 一屏信息量约 2 倍，搜索 / 排序 / 分页 / 详情 / 收藏逻辑全部原样保留。 */ .res-shell .res-main{gap:var(--sp-3)} .res-shell .res-head--main{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px; padding-bottom:var(--sp-3);border-bottom:1px solid var(--brand-line); } .res-shell .res-head-txt{display:flex;flex-direction:column;gap:4px;min-width:0} .res-shell .res-head--main .res-side-note{margin:0 0 0 auto;text-align:right} .res-shell .res-head--main .res-authbar{margin:0;padding:8px 12px;gap:10px;border-radius:var(--r-xs)} .res-shell .res-head--main .res-desc{flex:1 1 100%;margin:0} /* 工具条：分类导航 + 搜索 / 排序 / 计数，整体吸顶，滚动时始终可见 */ .res-shell .res-toolbar{ position:sticky;top:calc(var(--nav-h,72px) + 8px);z-index:60; display:flex;flex-direction:column;align-items:stretch;gap:8px; padding:9px 10px;background:var(--brand-ink-2);border:1px solid var(--brand-line); border-radius:var(--r-sm); /* 旧 styles.css 的 .res-toolbar 是 align-items:center 的横向 flex + flex-wrap:wrap， 改列向后必须同时复位 wrap：列向 + wrap 会成为「多列」容器，每列的交叉轴尺寸 由内容 max-content 决定而非容器宽度（375 实测 .res-topnav / .res-topbar 被撑到 1015px，是容器 333px 的 3 倍，造成整页横向溢出）。复位 nowrap 后两者回到 100% 列宽， 分类条自身 overflow-x:auto 保持横向可滑。 */ flex-wrap:nowrap; } /* 旧 styles.css 的 .res-toolbar 是 align-items:center 的横向 flex， 改列向后残留的 center 会让分类条 / 搜索条各自收缩居中（1440 实测分类条仅 1102px 且左缘落在 169，与卡片网格左缘 90 不齐）。此处复位为 stretch，使两者同列左对齐。 */ .res-shell .res-topnav{ display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;margin:0; overflow-x:auto;overflow-y:hidden;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-bottom:1px; } .res-shell .res-topnav::-webkit-scrollbar{display:none} .res-shell .res-topnav .res-cat{ width:auto;flex:0 0 auto;gap:6px;padding:6px 10px;font-size:var(--fs-xs); border:1px solid var(--brand-line);border-radius:var(--r-xs);white-space:nowrap; } .res-shell .res-topnav .res-cat-ic{flex:0 0 auto;font-size:11px} .res-shell .res-topnav .res-cat-nm{flex:0 0 auto;overflow:visible;white-space:nowrap} .res-shell .res-topnav .res-cat-ct{flex:0 0 auto;font-size:9px;letter-spacing:.04em} .res-shell .res-topbar{position:static;top:auto;background:transparent;border:0;padding:0;gap:8px} .res-shell .res-topbar .res-search{flex:1 1 220px;min-width:0} /* 双保险：两条工具都不允许超过所在列宽（列向 nowrap 下本应自动 100%，此处防御 其它样式表 / 后续改动再次引入内容尺寸）。 */ .res-shell .res-topnav,.res-shell .res-topbar{max-width:100%;min-width:0} /* 卡片网格：更小更密的列宽 + 更紧凑的卡片内距 */ .res-shell .res-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;align-items:stretch} .res-shell .res-card{padding:12px;gap:7px;border-radius:var(--r-xs)} .res-shell .rc-head{gap:8px} .res-shell .rc-ic{flex:0 0 28px;height:28px;font-size:11px} .res-shell .res-type{padding:2px 6px;font-size:9px} .res-shell .res-name{font-size:13.5px;line-height:1.35} .res-shell .res-info{font-size:11px;line-height:1.65;-webkit-line-clamp:2} .res-shell .rc-foot{gap:6px;font-size:9px} .res-shell .res-op,.res-shell .res-go{font-size:9.5px;padding:4px 7px;letter-spacing:.06em} .res-shell .res-tags{gap:4px} .res-shell .res-spotlight{padding:var(--sp-4)} .res-shell .rs-cards{gap:8px} .res-shell .rs-card{padding:9px 10px;gap:8px} @media (min-width:1440px){ .res-shell .res-grid{grid-template-columns:repeat(auto-fill,minmax(204px,1fr))} } @media (max-width:1180px){ .res-shell .res-grid{grid-template-columns:repeat(auto-fill,minmax(182px,1fr))} } @media (max-width:820px){ .res-shell .res-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px} } /* ── 13.4 移动端（375~430）与窄屏适配 ────────────────────────────────────── ① 导视：小屏改为常驻窄轨（默认收起，点击头部展开为浮层），不再整块消失； ② 资源库：分类导航横向可滑、卡片两列、页头折行收拢； ③ 字号 / 间距整体下调一档，防止横向溢出与元素重叠。 */ @media (max-width:1024px){ #chapterNav.chapter-nav{display:flex;right:6px;padding:7px 4px;gap:5px;opacity:.72} #chapterNav .cn-body{gap:4px} #chapterNav .cn-item{padding:2px 1px} #chapterNav .cn-head{padding:1px 0 6px} /* 移动端抽屉导航：贴住实测头部高度，避免与头部重叠或留缝 */ #mobileNav,.mobile-nav{top:var(--nav-h,72px);max-height:calc(100vh - var(--nav-h,72px));overflow-y:auto} } @media (max-width:768px){ #chapterNav.chapter-nav[data-open="true"]{max-width:76vw} #chapterNav:hover .cn-head-lab,#chapterNav[data-open="true"] .cn-head-lab, #chapterNav:hover .cn-label,#chapterNav[data-open="true"] .cn-label{max-width:128px} .res-shell .res-toolbar{top:calc(var(--nav-h,62px) + 6px);padding:8px} .res-shell .res-head--main{gap:6px 10px} .res-shell .res-head--main .res-side-note{width:100%;margin-left:0;text-align:left} .res-shell .res-head--main .res-desc{font-size:12px;line-height:1.7} .res-shell .res-topbar{flex-wrap:wrap} .res-shell .res-topbar .res-search{flex:1 1 100%} /* 工作室流程：原 repeat(5,1fr) 在 ≤768 会横向溢出（375 实测 .sp-steps 内容 556 超出可用 390，整页 body 被撑到 576），改为纵向时间轴（与 styles.css 原有 ≤420px 兜底同一套写法，此处提前到 768 生效）。 */ .sp-steps{grid-template-columns:1fr;margin-top:32px} .sp-steps::before{display:none} .sp-step{padding:0 0 0 44px;margin-bottom:24px} .sp-step::before{top:2px;left:0} .sp-step .sp-num{margin:0 0 8px} } @media (max-width:560px){ .res-shell .res-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} } @media (max-width:430px){ .res-shell .res-topnav .res-cat{padding:5px 8px;font-size:11px;gap:5px} .res-shell .res-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .res-shell .res-card{padding:10px;gap:6px} .res-shell .res-name{font-size:12.5px} .res-shell .res-info{font-size:10.5px;-webkit-line-clamp:3} .res-shell .rc-ic{flex:0 0 24px;height:24px;font-size:10px} .res-shell .res-type{display:none} .res-shell .res-pager button{padding:6px 10px} #chapterNav .cn-label,#chapterNav .cn-head-lab{letter-spacing:.14em} } /* ── 13.4b 头部右簇 + 小字号收口（375~430 实测） ─────────────────────────── ① 头部：品牌占 180px，余量 155px 内要放「主题 / 账户 / 菜单」三个按钮，三者 flex-shrink 默认 1 被压扁（主题键实测宽 2px 已不可点），账户键文字被裁 （clientWidth 32 < scrollWidth 38）。改为不收缩 + 收内距，三者合计 126px 稳定放下。 ② 可读文字最小 10.5px：区块编号 .se-no 是 .72em 相对字号，在 10.5px 眉题下只有 7.56px；导视进度分母 / 标签 9~10px。此处仅抬「可读文字」，纯装饰性标识不动。 */ @media (max-width:430px){ /* 页头改一行 flex：原三列网格（minmax(180px,auto) 1fr minmax(140px,auto)）在 375 下 可用宽仅 335px，第三列被压到 15px，右簇按钮溢出到列外并与品牌重叠 （实测主题键 x=84 落在品牌 x=62~180 之上）。改 flex 后品牌 180 + 右簇 155 无重叠。 */ #header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 14px} #header .header-brand{flex:0 1 auto;min-width:0} #header .header-nav{flex:0 1 auto;min-width:0;overflow:hidden} #header .header-right{gap:8px;flex:0 0 auto;justify-content:flex-end} #header .header-right>*{flex:0 0 auto} #header .brand-text{min-width:0} #header .nav-btn{padding:8px 12px;font-size:12px;letter-spacing:.06em} #header .nav-btn-square{width:34px;height:34px;flex:0 0 34px} #header .hamburger{width:34px;height:34px;flex:0 0 34px;padding:0;align-items:center;justify-content:center;gap:4px} #header .brand-sub{font-size:10px;letter-spacing:.18em} .se-no{font-size:10.5px;padding:1px 6px;margin-right:8px} .se-subnav .ss-no{font-size:10.5px} #chapterNav .guide-total{font-size:10.5px} #chapterNav .cn-head-lab,#chapterNav .cn-item .cn-label{font-size:10.5px;letter-spacing:.16em} #chapterNav .cn-item{padding:5px 2px} .res-shell .rc-foot{font-size:10px;gap:5px} } /* ── 13.5 客户评价板块（.tst-board）——收尾：口径确认 + 375/430 字号收口 ────── ① 口径：已在 13.1b 并入全站口径（内容列 1280、左右留白 max(gutter, 居中留白)）， 1440 视口实测由旧「宽 1328 / 左缘 56」变为「宽 1280 / 左缘 80」， 与 #projects / #resources 的正文左缘完全对齐（styles.css 原 .tst-board{padding:120px 56px 40px} 及窄屏 padding:80px 20px 20px 均被 brand.css 后置覆盖，同特异度下品牌层稳定胜出，无需 !important）。 ② 字号：375/430 实测 .tst-sub（评价小标题）与 .tst-user i（作者角色）仅 9px、 .tst-ref（对应作品 chip）10px，三者均为可读正文，统一抬到 10.5px； .tst-en 为装饰性英文眉标（9px + 6px 字距），保持装饰定位不改。 */ @media (max-width:430px){ .tst-sub{font-size:10.5px;letter-spacing:.06em} .tst-user i{font-size:10.5px;letter-spacing:.06em} .tst-ref{font-size:10.5px} .tst-text{font-size:13px} } /* ── 13.6 移动端导轨（375 / 430）：贴右边缘收窄为 20px 进度脊，零压正文 ───── 复测方法：收起入场幕（#welcome）、隐藏 #bgPanel，对全部正文叶节点逐字形 与固定层做二维求交，并剔除「被祖先 overflow 裁掉」与「叠放次序高于该层」的 元素（排除跑马灯与入场层误报）。测得： 375 —— 导轨外框 316~369（宽 53、right:6），正文列右缘 355 → 首屏 .hero-highlight（"商业空间与住宅空间双主线…"）被压 ox 38 / oy 16； 430 —— 导轨外框 371~424（宽 53、right:6），正文列右缘 410 → 被压 3 处：.hero-highlight 15px、"1/50"（.h-stat-n）16×46、 "专业综合排名" 30px。 根因：窄轨态宽度被「计数头 36 + 章节线 20 + 圆点 5 + 间距」撑到 53px，大于 全站 20px 的 gutter，必然侵入正文列。修法：≤430 收起态把导轨压到 20px 并 贴右边缘（right:0）——正文列右缘恰在 20px 处，两者相接而不交叠，且该结论与 滚动位置无关（导轨横向永远只占用 gutter）。收起态只保留「进度脊」：章节线 12px + 进度条，计数头（01/16）、圆点、文案全部归展开态，当前章节以金色线 标示；头部加高为 20×58 触区。交互不变：点头部展开完整浮层（≤76vw）， 点面板外空白或 Esc 收起。 */ @media (max-width:430px){ #chapterNav.chapter-nav{ box-sizing:border-box;right:0;width:20px;max-width:20px; padding:6px 2px;gap:4px;opacity:.8; border-radius:var(--r-sm) 0 0 var(--r-sm); } #chapterNav .cn-head{padding:26px 0 28px;gap:0;min-height:58px} #chapterNav .cn-head-top{display:none} #chapterNav .cn-head-chev{width:12px;margin-top:0} #chapterNav .cn-body{gap:4px} #chapterNav .cn-item{gap:0;padding:4px 0;justify-content:center} #chapterNav .cn-item .cn-line{width:12px;flex:0 0 12px} #chapterNav .cn-item:hover .cn-line, #chapterNav .cn-item.on .cn-line{width:12px;flex-basis:12px} #chapterNav .cn-item.on .cn-line{background:var(--brand-gold)} #chapterNav .cn-item .cn-dot{display:none} /* 展开态（点头部 / data-open）：恢复完整浮层形态（宽度上限 76vw 见 §13.4） */ #chapterNav.chapter-nav[data-open="true"]{ right:6px;width:auto;max-width:76vw;padding:7px 4px;gap:5px; border-radius:var(--r-sm); } #chapterNav[data-open="true"] .cn-head{padding:1px 0 6px;gap:3px;min-height:0} #chapterNav[data-open="true"] .cn-head-top{display:flex} #chapterNav[data-open="true"] .cn-head-chev{width:16px;margin-top:3px} #chapterNav[data-open="true"] .cn-item{gap:6px;padding:5px 2px;justify-content:flex-start} #chapterNav[data-open="true"] .cn-item .cn-dot{display:block} #chapterNav[data-open="true"] .cn-item .cn-line{width:12px;flex:0 0 12px} #chapterNav[data-open="true"] .cn-item.on .cn-line{width:20px;flex-basis:20px} } /* ── 14 · 大屏容器阶梯（20261002） ────────────────────────────────────────── 旧况：全站内容列统一锁死 1280px，视口 ≥1440 时左右留白过大、版面显得内缩。 现况：按视口分档放宽内容列宽，与 --w-page 同源—— 1440–1799 → 1440px；≥1800 → 1560px；<1440 保持 1280px 不变。 .section / .res-wrap / .wd-wrap / .timeline 等全部引用 --w-page 的容器 自动随之舒展，无需逐块改动；窄屏与各断点栅格列数不受影响。 */ @media (min-width:1440px){ :root{ --w-page:1440px } } @media (min-width:1800px){ :root{ --w-page:1560px } }