/* ============================================================ uiux-effects — 絵の具の浸透グラデーション + ガラス + 光の縁 uiux-design-harness の再利用可能な効果ライブラリ。 正本: reference/liquid-glass-water.md (実屈折・濡れた稜線・透明な器) reference/gradient-craft.md (停止点が彩度を担う・色相60°で中間停止点) 原則: 縁は線で描かない (光で作る)。面をベタ塗りしない (色は tint と縁に宿る)。 blur 単独はガラスではない — 実屈折 (SVG displacement) が本体。 使い方: ← #fxRefract を注入し html.fx-refract-on を立てる 要素に class を付ける: .fx-glass (面) + .fx-rim (縁) + .fx-wet (上縁の光) 色は --fx-* トークンで案件色に上書きする。 屈折の強さ: (既定 14)。 fallback 階段 (正本 §2 の宣言済み ladder。blur 単独へ退化させない): T1 raw WebGL2 実描画 — 本ライブラリのスコープ外 (材質面は §0b の手札へ) T2 静的 SVG displacement — fx-refract.js が注入に成功した時だけ html.fx-refract-on で有効化。blur はこの段の「前段」としてだけ出る T3 通常カード — 既定段。光の縁 + tint + 落ちる影。blur も url() も持たない 光源は単一: 全ての方向効果 (rim の conic / wet の上縁 / 影の落ちる向き) は --fx-light-from 1 個の方位 token から派生する (共有 height-field→normal→ 単一光源の CSS 版。方向がバラバラな光は「どこから照らされているか分からない」 = 樹脂読みの原因)。 ============================================================ */ :root { /* ブランド梯子 — 案件の brand token から採る (正本 §3: 構造と hue を分離) */ --fx-hi: #ffd6e8; /* 濡れた稜線の最明部 */ --fx-mid: #f78cb8; /* アクセント中間 */ --fx-deep: #c61e63; /* 沈む側の深み */ --fx-plum: #a8548c; /* 滲みの中間色 (絵の具の混色) */ --fx-ink: #0a0c16; /* 夜世界の下地 */ --fx-light-from: 210deg; /* 単一光源の方位 (左上)。全方向効果はここから派生 */ } /* ---------- ガラス面 (glass) ---------- 既定段 (T3) = 通常カード: tint の薄い面 + 上縁受光 + 落ちる影。 backdrop-filter は置かない — blur 単独はガラスではなく (正本 §5 #1)、 未解決 url() 参照も filter チェーンごと落ちるので T3 では両方持たない。 T2 (実屈折) は fx-refract.js が #fxRefract を注入して html.fx-refract-on を 立てた時だけ有効化される — blur はその段の「前段」としてだけ出る (正本 §2)。 */ .fx-glass { position: relative; /* tint は薄い面 + 彩度。ベタ塗りしない (L4) */ background: linear-gradient(180deg, color-mix(in oklab, var(--fx-hi) 7%, transparent), color-mix(in oklab, var(--fx-hi) 2%, transparent)); /* 縁は線でなく光: 上縁の受光 + 下の沈み + 落ちる影 + 浮遊影。一様な輪郭線は入れない */ box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fx-hi) 22%, transparent), inset 0 -1px 0 rgba(0,0,0,.28), 0 10px 24px -14px rgba(0,0,0,.6), 0 24px 48px -24px rgba(0,0,0,.5); } /* T2 実屈折段 — #fxRefract が文書に在る時だけ有効化される。 blur(14px) は Kawase 前段の役割 (正本 §2 段1)、url() が本体 (段3)。 */ html.fx-refract-on .fx-glass { backdrop-filter: url(#fxRefract) blur(14px) saturate(1.2); -webkit-backdrop-filter: url(#fxRefract) blur(14px) saturate(1.2); } /* 選択/注目 — アクセントの光が当たる (塗りではなく発光) */ .fx-glass[data-on] { background: linear-gradient(180deg, color-mix(in oklab, var(--fx-mid) 20%, transparent), color-mix(in oklab, var(--fx-deep) 10%, transparent)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--fx-hi) 40%, transparent), inset 0 -1px 0 rgba(0,0,0,.2), inset 0 0 18px -6px color-mix(in oklab, var(--fx-mid) 35%, transparent), 0 6px 18px -10px color-mix(in oklab, var(--fx-deep) 55%, transparent), 0 0 22px -8px color-mix(in oklab, var(--fx-mid) 40%, transparent); } /* ---------- 光の縁 (rim) — 線でなく周回で太さと色が変わる光 ---------- 使い方: 要素に position:relative + .fx-rim。::before が conic-gradient で 上は濡れた稜線・下は沈む影を描く。絵の具が滲むように hi→mid→plum→透明。 一様な inset 線は使わない (正本 §5 anti-pattern #7)。 回転の起点は --fx-light-from (単一光源) — 明部が光源方位に来る。 */ .fx-rim { position: relative; isolation: isolate; } .fx-rim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--fx-rim-w, 1px); z-index: -1; pointer-events: none; background: conic-gradient(from var(--fx-light-from) at 50% 50%, color-mix(in oklab, var(--fx-hi) 0%, transparent) 0deg, color-mix(in oklab, var(--fx-hi) 55%, transparent) 28deg, color-mix(in oklab, var(--fx-mid) 85%, transparent) 74deg, color-mix(in oklab, var(--fx-mid) 30%, transparent) 132deg, color-mix(in oklab, var(--fx-plum) 12%, transparent) 196deg, color-mix(in oklab, var(--fx-plum) 5%, transparent) 250deg, color-mix(in oklab, var(--fx-mid) 22%, transparent) 306deg, color-mix(in oklab, var(--fx-hi) 0%, transparent) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 -0.5px 0.5px color-mix(in oklab, var(--fx-hi) 35%, transparent)); } /* 縁の太さに変化をつける (絵の具の滲み) */ .fx-rim[data-rim="thick"] { --fx-rim-w: 2px; } .fx-rim[data-rim="hair"] { --fx-rim-w: .5px; } /* ---------- 絵の具の浸透グラデーション (paint) ---------- 2 色を直接つながない。色相が 60° 以上離れたら中間停止点を置く (gradient-craft §2)。 停止点が彩度を、色空間 (oklab) が明度を担う。 */ .fx-paint { background: linear-gradient(135deg in oklab, var(--fx-a, var(--fx-mid)) 0%, var(--fx-b, var(--fx-plum)) 48%, var(--fx-c, var(--fx-deep)) 100%); } .fx-paint[data-kind="radial"] { background: radial-gradient(120% 120% at 30% 20% in oklab, var(--fx-a, var(--fx-hi)) 0%, var(--fx-b, var(--fx-mid)) 42%, var(--fx-c, var(--fx-ink)) 100%); } /* 帯 (band) — 発光の筋。芯は無彩色、温度差は内外で (gradient-craft §4) */ .fx-band { background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--fx-hi) 21%, transparent) 18%, color-mix(in oklab, var(--fx-mid) 11%, transparent) 62%, transparent 100%); } /* ---------- 濡れた稜線 (wet edge) — 上縁だけの細い光 ---------- 全面一様の光沢は樹脂。勾配が立つ場所だけに光を走らせる (L3)。 光源方位 (--fx-light-from) 側の端を明るく、反対側を消す。 */ .fx-wet { position: relative; } .fx-wet::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--fx-hi) 60%, transparent) 30%, color-mix(in oklab, var(--fx-hi) 90%, transparent) 50%, color-mix(in oklab, var(--fx-hi) 60%, transparent) 70%, transparent); opacity: .8; } /* ---------- 浮遊影 (lift) — ガラスが浮いて見える深い影 ---------- */ .fx-lift { box-shadow: 0 48px 88px -34px rgba(0,0,0,.95), 0 28px 56px -40px color-mix(in oklab, var(--fx-deep) 60%, transparent); } /* ---------- reduced-motion ---------- 波は静止するが屈折は残す (正本 §2)。ここではアニメを止めるだけ。 */ @media (prefers-reduced-motion: reduce) { .fx-rim::before, .fx-wet::after { transition: none; animation: none; } }