/* * Frontend Design System V2: tokens * * 只在 .site-ui-v2 内建立新版设计变量。变量继续读取 theme.html 输出的 * --theme-* 与 --section-color-*，不会改变尚未迁移的旧页面。 */ .site-ui-v2 { /* 字体 */ --ui-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* 颜色 */ --ui-color-primary: var(--theme-primary, #0f766e); --ui-color-accent: var( --section-color, var(--theme-accent, #06b6d4) ); --ui-color-accent-deep: var( --section-color-deep, var(--theme-accent-deep, #0891b2) ); --ui-color-accent-soft: var( --section-color-soft, color-mix(in srgb, var(--ui-color-accent) 8%, transparent) ); --ui-color-page: var(--theme-surface-strong, #f8fafc); --ui-color-surface: var(--theme-bg, #ffffff); --ui-color-surface-muted: var(--theme-surface, #f1f5f9); --ui-color-surface-strong: var(--theme-surface-strong, #e2e8f0); --ui-color-text: var(--theme-text, #1e293b); --ui-color-text-strong: var(--theme-dark, #0f172a); --ui-color-text-secondary: var(--theme-text-2, #334155); --ui-color-text-muted: var(--theme-text-3, #475569); --ui-color-text-faint: var(--theme-text-muted, #94a3b8); --ui-color-border: var(--theme-border, #e2e8f0); --ui-color-border-strong: color-mix( in srgb, var(--ui-color-accent) 34%, var(--ui-color-border) ); --ui-color-success: #16a34a; --ui-color-warning: #d97706; --ui-color-danger: #dc2626; --ui-color-on-accent: #ffffff; --ui-color-overlay: rgba(15, 23, 42, 0.58); --ui-section-bg-white: #ffffff; --ui-section-bg-gray: var(--ui-color-page); --ui-section-bg-soft-blue: color-mix( in srgb, var(--ui-color-accent) 7%, #f8fafc ); --ui-section-bg-brand-gradient: linear-gradient( 135deg, color-mix(in srgb, var(--ui-color-accent) 8%, #ffffff) 0%, #ffffff 52%, color-mix(in srgb, var(--ui-color-primary) 7%, #f8fafc) 100% ); --ui-section-ambient-x: 88%; --ui-section-ambient-y: 10%; --ui-section-divider-color: color-mix( in srgb, var(--ui-color-accent) 12%, var(--ui-color-border) ); --ui-section-bg-cta-dark: linear-gradient( 135deg, color-mix(in srgb, var(--ui-color-accent-deep) 86%, #0f172a), color-mix(in srgb, var(--ui-color-primary) 82%, #0f172a) ); /* 字号与行高 */ --ui-text-xs: 12px; --ui-text-sm: 13px; --ui-text-base: 15px; --ui-text-md: 16px; --ui-text-lg: 18px; --ui-text-xl: 20px; --ui-text-2xl: clamp(24px, 3vw, 32px); --ui-text-3xl: clamp(28px, 4vw, 42px); --ui-text-hero: clamp(38px, 5vw, 64px); --ui-leading-tight: 1.25; --ui-leading-heading: 1.35; --ui-leading-body: 1.75; --ui-weight-regular: 400; --ui-weight-medium: 500; --ui-weight-semibold: 600; --ui-weight-bold: 700; --ui-weight-heavy: 800; /* 语义排版：组件和公共模块共同消费，避免各自维护默认字号 */ --ui-type-page-title-size: var(--ui-text-hero); --ui-type-page-title-weight: var(--ui-weight-heavy); --ui-type-page-title-leading: var(--ui-leading-tight); --ui-type-page-title-tracking: -0.035em; --ui-type-eyebrow-size: var(--ui-text-xs); --ui-type-eyebrow-weight: var(--ui-weight-semibold); --ui-type-eyebrow-leading: 1.5; --ui-type-eyebrow-tracking: 0.18em; --ui-type-section-title-size: var(--ui-text-3xl); --ui-type-section-title-weight: var(--ui-weight-bold); --ui-type-section-title-leading: var(--ui-leading-heading); --ui-type-section-title-tracking: -0.02em; --ui-type-section-description-size: var(--ui-text-md); --ui-type-section-description-weight: var(--ui-weight-regular); --ui-type-section-description-leading: 1.8; --ui-type-card-title-size: 19px; --ui-type-feed-card-title-size: 15px; --ui-type-card-title-weight: var(--ui-weight-bold); --ui-type-card-title-leading: var(--ui-leading-heading); --ui-type-card-description-size: 14px; --ui-type-body-size: var(--ui-text-base); --ui-type-body-weight: var(--ui-weight-regular); --ui-type-body-leading: var(--ui-leading-body); --ui-type-note-size: var(--ui-text-xs); --ui-type-note-weight: var(--ui-weight-regular); --ui-type-note-leading: 1.6; --ui-type-data-size: clamp(32px, 5vw, 64px); --ui-type-data-weight: var(--ui-weight-bold); --ui-type-data-leading: 1; /* 间距：以 4px 为基础阶梯 */ --ui-space-0: 0; --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-7: 28px; --ui-space-8: 32px; --ui-space-10: 40px; --ui-space-12: 48px; --ui-space-14: 56px; --ui-space-16: 64px; --ui-space-20: 80px; --ui-space-24: 96px; --ui-space-28: 112px; /* 容器与板块 */ --ui-container-max: 1280px; --ui-container-narrow: 880px; --ui-container-gutter: clamp(20px, 3vw, 32px); --ui-content-reading-measure: 72ch; --ui-section-space: clamp(64px, 7vw, 100px); --ui-section-space-tight: clamp(44px, 5vw, 72px); --ui-section-space-compact: var(--ui-section-space-tight); --ui-section-space-standard: var(--ui-section-space); --ui-section-space-spacious: clamp(80px, 9vw, 120px); --ui-section-heading-gap: var(--ui-space-16); --ui-section-heading-gap-compact: var(--ui-space-10); --ui-grid-gap: clamp(16px, 2vw, 24px); --ui-content-gap: clamp(28px, 4vw, 56px); /* 圆角 */ --ui-radius-xs: 4px; --ui-radius-sm: var(--theme-radius-sm, 8px); --ui-radius-md: var(--theme-radius, 12px); --ui-radius-lg: var(--theme-radius-lg, 16px); --ui-radius-xl: 24px; --ui-radius-pill: 999px; /* 阴影 */ --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 22px rgba(15, 23, 42, 0.05); --ui-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 18px 38px rgba(15, 23, 42, 0.08); --ui-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14); --ui-shadow-accent: 0 10px 28px color-mix( in srgb, var(--ui-color-accent) 22%, transparent ); /* 卡片基础视觉与反馈 */ --ui-card-radius: var(--ui-radius-lg); --ui-card-background: var(--ui-color-surface); --ui-card-border-color: var(--ui-color-border); --ui-card-border: 1px solid var(--ui-card-border-color); --ui-card-shadow: var(--ui-shadow-sm); --ui-card-shadow-hover: var(--ui-shadow-md); --ui-card-shadow-focus: var(--ui-focus-ring), var(--ui-card-shadow); --ui-card-padding: var(--ui-space-6); --ui-card-content-gap: var(--ui-space-3); --ui-card-hover-lift: -4px; --ui-card-media-hover-scale: 1.04; --ui-card-duration: 300ms; --ui-card-media-duration: 500ms; --ui-card-title-color: var(--ui-color-text-strong); --ui-card-text-color: var(--ui-color-text-muted); --ui-card-meta-color: var(--ui-color-text-faint); /* 控件 */ --ui-control-height-sm: 36px; --ui-control-height: 44px; --ui-control-height-lg: 52px; --ui-control-padding-x: 16px; --ui-control-border: 1px solid var(--ui-color-border); /* 操作、标签、编号与媒体 */ --ui-action-height: var(--ui-control-height); --ui-action-height-sm: var(--ui-control-height-sm); --ui-action-height-lg: var(--ui-control-height-lg); --ui-action-padding-x: var(--ui-space-6); --ui-action-gap: var(--ui-space-2); --ui-action-radius: var(--ui-radius-sm); --ui-action-font-size: var(--ui-text-base); --ui-action-card-font-size: 14px; --ui-action-font-weight: var(--ui-weight-semibold); --ui-tag-height: 28px; --ui-tag-padding-x: var(--ui-space-3); --ui-tag-gap: var(--ui-space-1); --ui-tag-radius: var(--ui-radius-pill); --ui-tag-font-size: var(--ui-text-xs); --ui-tag-font-weight: var(--ui-weight-medium); --ui-number-size: 50px; --ui-number-radius: var(--ui-radius-pill); --ui-number-font-size: var(--ui-text-sm); --ui-number-font-weight: var(--ui-weight-heavy); --ui-media-background: var(--ui-color-surface-muted); --ui-media-radius: inherit; --ui-media-object-fit: cover; --ui-media-hover-scale: var(--ui-card-media-hover-scale); --ui-media-duration: var(--ui-card-media-duration); /* 动效 */ --ui-duration-fast: 160ms; --ui-duration: 260ms; --ui-duration-slow: 420ms; --ui-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ui-focus-ring: 0 0 0 3px color-mix( in srgb, var(--ui-color-accent) 22%, transparent ); } /* * Ambient wash is resolved on each module so page-level composition variables * can move the light spot without duplicating the shared gradient recipe. */ .site-ui-v2 .page-module { --ui-section-bg-ambient-wash: radial-gradient( ellipse 58% 66% at var(--solution-ambient-x, var(--ui-section-ambient-x)) var(--solution-ambient-y, var(--ui-section-ambient-y)), color-mix( in srgb, var(--page-module-accent, var(--solution-accent, var(--ui-color-accent))) 8%, transparent ) 0%, color-mix( in srgb, var(--page-module-accent, var(--solution-accent, var(--ui-color-accent))) 3%, transparent ) 42%, transparent 72% ), linear-gradient(180deg, #fafcfc 0%, #f4f7f8 100%) #f5f8f9; }