56 lines
2.1 KiB
CSS
56 lines
2.1 KiB
CSS
/*
|
|
* Theme: Glass Light
|
|
* 液态玻璃浅色 — 多层半透明折射，色调随内容偏移
|
|
* 适合：产品发布、设计提案、品牌展示、科技新品介绍
|
|
*
|
|
* 特性：超强模糊 + 高饱和度、浓烈多彩光斑、玻璃高光边框
|
|
* 需要 base.html 的 backdrop-filter 支持（v1.1+）
|
|
*/
|
|
:root {
|
|
/* --- 配色 --- */
|
|
--color-primary: #007AFF;
|
|
--color-secondary: #8e8e93;
|
|
--color-accent: #AF52DE;
|
|
--color-bg: #e8e8f0;
|
|
--color-bg-alt: #e2e2ec;
|
|
--color-surface: rgba(255, 255, 255, 0.52);
|
|
--color-text: #1c1c1e;
|
|
--color-text-secondary: #636366;
|
|
--color-text-on-primary: #ffffff;
|
|
--color-border: rgba(255, 255, 255, 0.85);
|
|
|
|
/* --- 字体 --- */
|
|
--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.06), inset 0 1px 0 rgba(255, 255, 255, 0.90);
|
|
--shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.60);
|
|
--shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.10), inset 0 2px 0 rgba(255, 255, 255, 0.80), inset 0 0 0 1.5px rgba(255, 255, 255, 0.50);
|
|
--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 8% 35%, rgba(175, 82, 222, 0.30) 0%, transparent 70%),
|
|
radial-gradient(ellipse 70% 60% at 88% 18%, rgba(0, 122, 255, 0.26) 0%, transparent 70%),
|
|
radial-gradient(ellipse 60% 55% at 50% 90%, rgba(255, 149, 0, 0.18) 0%, transparent 70%);
|
|
}
|