/* ============================================================= style-glass-ink.css · v6.2 液态玻璃 × 水墨融合（方向 C） 壳层：宣纸纹理 + 墨粒（浅色）／墨黑山水颗粒 + 压暗（深色） 玻璃：卡片厚度内影 + 顶部液态内发光 + 高光白芯（浅深分强度） 策略：全部以选择器覆盖现有规则，新增文件隔离、可整体回滚。 断点契约：本文件不引入新 @media 宽度值（responsive.test.js 白名单）。 ============================================================= */ /* 玻璃内发光强度：浅色亮玻璃 / 深色暗玻璃（[data-theme=dark] 块须在后，同特异性后置胜出） */ :root { --glass-glow: rgba(255, 255, 255, 0.5); --glass-thick: rgba(0, 0, 0, 0.05); --ink-halo: rgba(96, 84, 64, 0.08); --ink-focus: rgba(96, 84, 64, 0.16); --glass-edge: rgba(255, 255, 255, 0.05); /* F-30：玻璃白描边 */ --glass-sheen: #ffffff; /* F-30：高光白芯 */ --ink-stroke: rgba(90, 78, 60, 0.55); /* F-30：笔触线（浅色） */ --check-white: #fff; /* F-30：色块上对勾 */ } [data-theme="dark"] { --glass-glow: rgba(255, 255, 255, 0.09); --glass-thick: rgba(0, 0, 0, 0.35); --ink-halo: rgba(232, 222, 208, 0.07); --ink-focus: rgba(232, 222, 208, 0.14); --glass-edge: rgba(255, 255, 255, 0.05); --glass-sheen: #ffffff; --ink-stroke: rgba(232, 222, 208, 0.38); /* 与 .section-title::after 暗色覆盖值一致 */ --check-white: #fff; } /* ---------- 纸纹噪声（浅色宣纸：纤维 + 颗粒 + 纸角泛黄，罩在壁纸雾化层上） ---------- */ body::after { opacity: 0.45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"), repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0 1px, transparent 1px 3px), radial-gradient(140% 120% at 85% 8%, rgba(96,74,44,0.07), transparent 55%); } /* ---------- 深色墨黑山水：大墨晕 + 细墨点 + 顶部微亮/底部压暗（山水纵深） ---------- */ [data-theme="dark"] body::after { opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"), radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,0.07), transparent 45%), radial-gradient(150% 115% at 50% 120%, rgba(0,0,0,0.5), transparent 62%); } /* ---------- 玻璃卡片精修：液态厚度 + 顶部浸润光 + 高光白芯 ---------- */ .main-card { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 var(--border-hi), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px var(--glass-edge); } .main-card::before { background: linear-gradient(90deg, transparent, var(--border-hi) 18%, var(--glass-sheen) 50%, var(--border-hi) 82%, transparent); } /* ---------- 水墨融入：hover 墨晕环 + 点击墨压 + 标题笔触线 ---------- */ .main-card:hover { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16), 0 0 0 5px var(--ink-halo), inset 0 1px 0 var(--border-hi), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px rgba(255, 255, 255, 0.08); } .main-card:active { transform: translateY(-1px) scale(0.996); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 0 0 9px var(--ink-halo), inset 0 1px 0 var(--border-hi), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* 深色卡片存在 [data-theme="dark"] 前缀特化规则（style-cards.css）， * 需同特异性后置覆盖，否则玻璃精修与墨晕在深色下失效 */ [data-theme="dark"] .main-card { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px var(--glass-edge); } [data-theme="dark"] .main-card:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 5px var(--ink-halo), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px var(--glass-edge); } [data-theme="dark"] .main-card:active { transform: translateY(-1px) scale(0.996); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 9px var(--ink-halo), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 var(--glass-thick), inset 0 20px 32px -18px var(--glass-glow), 0 0 0 1px var(--glass-edge); } .btn:active { box-shadow: 0 0 0 6px var(--ink-halo); } /* 笔触线：中间浓、两端虚，似一笔墨痕 */ .section-title::after { background: linear-gradient(90deg, transparent 0%, var(--ink-stroke) 30%, var(--ink-stroke) 70%, transparent 100%); } [data-theme="dark"] .section-title::after { background: linear-gradient(90deg, transparent 0%, var(--ink-stroke) 30%, var(--ink-stroke) 70%, transparent 100%); } /* ---------- 动效统一：墨晕过渡 + 浮现墨感缓动（--ease-ink） ---------- */ .ink-transit { background: radial-gradient(420px 300px at 50% 42%, rgba(50, 40, 30, 0.26), transparent 55%), radial-gradient(900px 650px at 50% 42%, rgba(50, 40, 30, 0.12), transparent 72%); animation-duration: .38s; animation-timing-function: var(--ease-ink); } [data-theme="dark"] .ink-transit { background: radial-gradient(420px 300px at 50% 42%, rgba(232, 226, 216, 0.12), transparent 55%), radial-gradient(900px 650px at 50% 42%, rgba(232, 226, 216, 0.05), transparent 72%); } .card-animate-in { animation-timing-function: var(--ease-ink); } .main-card { transition-timing-function: var(--ease-ink); } /* ---------- 聚焦墨晕（v6.2 微交互 ④）：聚焦时墨色晕环缓缓晕开 ---------- */ textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { transition: border-color .3s var(--ease-ink), box-shadow .3s var(--ease-ink); } textarea:focus, select:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ink-focus), 0 0 16px 1px var(--ink-focus); } /* ---------- 数字跳动（v6.2 微交互 ②）：统计值变化时墨滴弹跳 ---------- */ @keyframes numInk { 0% { transform: scale(1); } 30% { transform: scale(1.3) translateY(-3px); } 62% { transform: scale(0.92) translateY(1px); } 100% { transform: scale(1); } } .num-bump { animation: numInk .45s var(--ease-ink); display: inline-block; } /* ---------- 任务完成打勾（v6.2 微交互 ①）：墨晕扩散 + 笔触对勾 ---------- * 墨晕用 transition 实现（0→9px 透明环）：仅状态变化时播放， * 页面加载时已勾选任务不会重播动画 */ .tpl-done { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 6px; background: transparent; position: relative; cursor: pointer; flex: none; box-shadow: 0 0 0 0 transparent; transition: border-color .25s var(--ease-ink), background .25s var(--ease-ink), box-shadow .4s var(--ease-ink); } .tpl-done:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ink-halo); } .tpl-done:checked { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 9px transparent; } .tpl-done::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--check-white); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .22s var(--ease-ink) .1s; } .tpl-done:checked::after { transform: rotate(45deg) scale(1); }