/* * style.css 已按板块拆分为 11 个文件，加载顺序见下。 * * ⚠️ 顺序敏感：本项目的 CSS 是「后写覆盖先写」的追加式写法， * 后面几层（尤其 09/10/11）刻意用来覆盖前面的局部规则。 * 所以在 HTML 里必须严格按 01 → 11 的顺序引入，不可调换。 * * 01-base.css 基础层（变量 / 重置 / body） * 02-layout.css 布局骨架（横幅 / 侧边栏 / 主内容区） * 03-components.css 通用组件（卡片 / 按钮 / 列表 / 搜索 / 筛选） * 04-post.css 文章与评论 * 05-media.css 相册 · 灯箱 · 表单 · 提示 · 页脚 * 06-responsive.css 响应式断点 * 07-music.css 音乐播放器 * 08-hero.css 首屏 Hero * 09-effects.css 深色模式与动效 * 10-pages.css 页面模块与彩蛋 * 11-theme.css 主题覆盖层（最后加载） */ /* ========================================================= 01-base · 基础层 承载范围：原 style.css 第 1-142 行 本节包含： - 主题变量 :root - 全局重置 * - body 基础样式 ========================================================= */ :root { --pink-50: #fff5f8; --pink-100: #ffe8f0; --pink-200: #ffd0e2; --pink-300: #ffb3cd; --pink-400: #ff88af; --pink-500: #ff6695; --pink-600: #e85580; --pink-700: #cc3366; --pink-800: #a82850; --white: #ffffff; --black: #000000; --bg-main: #fff5f8; --bg-card: rgba(255, 255, 255, 0.85); --text-primary: #4a2c38; --text-secondary: #8c6b78; --text-muted: #b89aa6; --border-light: rgba(255, 150, 175, 0.25); --border-medium: rgba(255, 130, 160, 0.4); --shadow-sm: 0 2px 12px rgba(200, 120, 150, 0.08); --shadow-md: 0 6px 24px rgba(200, 120, 150, 0.12); --shadow-lg: 0 12px 40px rgba(200, 100, 140, 0.15); --accent-soft: rgba(255, 150, 180, 0.15); --accent-hover: rgba(255, 180, 200, 0.3); --accent-glow: rgba(255, 100, 140, 0.3); --body-bg: #ffe0f0; --body-gradient: linear-gradient(135deg, #fff0f5 0%, #ffe0f0 30%, #ffd6e8 60%, #ffe8f2 100%); --surface-soft: rgba(255, 245, 250, 0.5); --surface-card: rgba(255, 248, 252, 0.7); --surface-input: rgba(255, 248, 252, 0.8); --surface-highlight: rgba(255, 230, 240, 0.4); --surface-highlight-strong: rgba(255, 200, 220, 0.3); --accent-border: rgba(255, 160, 190, 0.3); --accent-shadow: rgba(230, 85, 130, 0.3); --accent-shadow-strong: rgba(230, 85, 130, 0.45); --surface-control: rgba(255, 255, 255, 0.6); --surface-control-hover: rgba(255, 180, 200, 0.3); --surface-control-active: #ffe8f0; /* 气泡框底色（跟随主题，不用 --glass-*） */ --bubble-bg: rgba(255, 250, 253, 0.94); --text-heading: #cc3366; --text-on-accent: #ffffff; --accent-gradient: linear-gradient(135deg, #ff88af, #e85580); --accent-gradient-soft: linear-gradient(135deg, #ffd0e2, #ff88af); --overlay-color: rgba(0, 0, 0, 0.45); --disabled-surface: #c0c0c0; --danger: #c0392b; --danger-soft: rgba(220, 80, 80, 0.1); --danger-soft-strong: rgba(220, 80, 80, 0.2); --danger-border: rgba(220, 80, 80, 0.3); --banner-gradient: linear-gradient(135deg, #ffd0e2 0%, #ffb3cd 30%, #ffe8f0 60%, #ffc8d8 100%); --code-bg: #fff8fb; --code-inline-bg: rgba(255, 180, 200, 0.28); --code-keyword: #c2185b; --code-comment: #a89aa2; --code-meta: #2e8b57; --code-template: #d2691e; --code-pseudo: #b8860b; /* 图上玻璃层：盖在背景图/照片之上，不随樱花·雪花主题变化 */ --glass-05: rgba(255, 255, 255, 0.05); --glass-06: rgba(255, 255, 255, 0.06); --glass-08: rgba(255, 255, 255, 0.08); --glass-10: rgba(255, 255, 255, 0.10); --glass-12: rgba(255, 255, 255, 0.12); --glass-15: rgba(255, 255, 255, 0.15); --glass-20: rgba(255, 255, 255, 0.20); --glass-25: rgba(255, 255, 255, 0.25); --glass-28: rgba(255, 255, 255, 0.28); --glass-30: rgba(255, 255, 255, 0.30); --glass-35: rgba(255, 255, 255, 0.35); --glass-42: rgba(255, 255, 255, 0.42); --glass-48: rgba(255, 255, 255, 0.48); --glass-50: rgba(255, 255, 255, 0.50); --glass-60: rgba(255, 255, 255, 0.60); --glass-66: rgba(255, 255, 255, 0.66); --glass-70: rgba(255, 255, 255, 0.70); --glass-85: rgba(255, 255, 255, 0.85); --glass-88: rgba(255, 255, 255, 0.88); --glass-90: rgba(255, 255, 255, 0.90); --glass-92: rgba(255, 255, 255, 0.92); --glass-95: rgba(255, 255, 255, 0.95); /* 黑色遮罩层：图片/视频/弹窗之上 */ --scrim-03: rgba(0, 0, 0, 0.03); --scrim-05: rgba(0, 0, 0, 0.05); --scrim-08: rgba(0, 0, 0, 0.08); --scrim-10: rgba(0, 0, 0, 0.10); --scrim-12: rgba(0, 0, 0, 0.12); --scrim-15: rgba(0, 0, 0, 0.15); --scrim-20: rgba(0, 0, 0, 0.20); --scrim-25: rgba(0, 0, 0, 0.25); --scrim-30: rgba(0, 0, 0, 0.30); --scrim-35: rgba(0, 0, 0, 0.35); --scrim-50: rgba(0, 0, 0, 0.50); --scrim-65: rgba(0, 0, 0, 0.65); --scrim-92: rgba(0, 0, 0, 0.92); /* 组件角色色 */ --accent-glow-strong: rgba(255, 100, 140, 0.75); --banner-gradient: linear-gradient(135deg, #ffd0e2 0%, #ffb3cd 30%, #ffe8f0 60%, #ffc8d8 100%); --ciallo-grad: linear-gradient(135deg, #ad66ff, var(--pink-400), #fffc43); --hero-fb-sakura-morning: linear-gradient(160deg, #ffd6e5 0%, #fff1f6 48%, #ffc1d8 100%); --hero-fb-sakura-afternoon: linear-gradient(160deg, #ffb6cf 0%, #ffe8f1 48%, #f593b5 100%); --hero-fb-sakura-night: linear-gradient(160deg, #24152f 0%, #55305d 48%, #171326 100%); --hero-fb-snow-morning: linear-gradient(160deg, #cfe1ff 0%, #e8f1ff 45%, #bcd5ff 100%); --hero-fb-snow-afternoon: linear-gradient(160deg, #cfe1ff 0%, #e8f1ff 45%, #bcd5ff 100%); --hero-fb-snow-night: linear-gradient(160deg, #152440 0%, #263f68 48%, #0f1b32 100%); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); --banner-height: 300px; --divider-height: 100px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Quicksand', system-ui, sans-serif; background-color: var(--body-bg); background-image: var(--body-gradient); background-attachment: fixed; min-height: 100vh; overflow-x: hidden; color: var(--text-primary); transition: background-color 0.4s ease, background-image 0.4s ease; /* 触屏点击时不要出现系统灰色高亮，交给各自的 :active 样式反馈 */ -webkit-tap-highlight-color: transparent; } body.has-bg-image { background-size: cover; background-position: center; background-blend-mode: overlay; }