56 lines
2.1 KiB
CSS
56 lines
2.1 KiB
CSS
/*
|
|
* Theme: Glass Dark
|
|
* 液态玻璃深色 — 深邃背景上的多层折射光感
|
|
* 适合：产品发布会、科技演讲、高端品牌展示、沉浸式叙事
|
|
*
|
|
* 特性：超强模糊 + 高饱和度、浓烈冷调光斑、玻璃高光边框
|
|
* 需要 base.html 的 backdrop-filter 支持（v1.1+）
|
|
*/
|
|
:root {
|
|
/* --- 配色 --- */
|
|
--color-primary: #0A84FF;
|
|
--color-secondary: #8e8e93;
|
|
--color-accent: #BF5AF2;
|
|
--color-bg: #1a1a1e;
|
|
--color-bg-alt: #232328;
|
|
--color-surface: rgba(255, 255, 255, 0.16);
|
|
--color-text: #f5f5f7;
|
|
--color-text-secondary: #98989d;
|
|
--color-text-on-primary: #ffffff;
|
|
--color-border: rgba(255, 255, 255, 0.28);
|
|
|
|
/* --- 字体 --- */
|
|
--font-heading: 'SF Pro Display', -apple-system, 'Helvetica Neue', 'Inter', sans-serif;
|
|
--font-body: 'SF Pro Text', -apple-system, 'Helvetica Neue', 'Inter', sans-serif;
|
|
--font-mono: 'SF Mono', 'Fira Code', monospace;
|
|
--font-size-title: 4.27rem;
|
|
--font-size-heading: 3.15rem;
|
|
--font-size-subheading: 1.69rem;
|
|
--font-size-body: 1.27rem;
|
|
--font-size-small: 0.98rem;
|
|
|
|
/* --- 间距和尺寸 --- */
|
|
--slide-padding: 5.62rem;
|
|
--spacing-xs: 0.56rem;
|
|
--spacing-sm: 1.12rem;
|
|
--spacing-md: 2.25rem;
|
|
--spacing-lg: 3.38rem;
|
|
--spacing-xl: 5.06rem;
|
|
|
|
/* --- 效果 --- */
|
|
--border-radius: 22px;
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
|
|
--shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
|
|
--transition-speed: 0.35s;
|
|
--transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
|
|
/* --- 玻璃/渐变扩展 --- */
|
|
--surface-blur: 48px;
|
|
--surface-saturate: 200%;
|
|
--bg-pattern:
|
|
radial-gradient(ellipse 80% 70% at 12% 38%, rgba(191, 90, 242, 0.35) 0%, transparent 70%),
|
|
radial-gradient(ellipse 70% 60% at 82% 15%, rgba(10, 132, 255, 0.30) 0%, transparent 70%),
|
|
radial-gradient(ellipse 60% 55% at 50% 88%, rgba(48, 209, 88, 0.18) 0%, transparent 70%);
|
|
}
|