/* ============================================================================ abi-look.css — Abiの視覚システム（ABI-SIG-002） ABI-SIG-001（動きの作法）が「どう動くか」を決めるのに対して、 これは「静止しているときに何が見えているか」を決める。 abi-ui.css の後ろに置く。旧トークン（--abi-bg / --abi-line 等）は このファイルの末尾で新しい階調へ差し替えるので、既存ページは を1行足すだけで階調・影・字の段階が入れ替わる。 外部リクエスト0件。グラデーションと粒は abi-look.js がその場で作る。 ========================================================================== */ :root { /* ========================================================================== 1. 色 — OKLCH で作った階調。藍700 が ABI-SIG-001 の #26348C そのもの 明度(L)は9段共通: .965 .905 .825 .735 .640 .545 .455 .3726 .270 彩度(C)は中央が最大の釣鐘。両端で落とさないと紙が色被りする ========================================================================== */ /* 藍 — 唯一の主色。Cmax .154（OKLCH） */ --abi-ai-50: #EFF3FF; --abi-ai-100: #D4DFFF; --abi-ai-200: #B0C3FF; --abi-ai-300: #8CA4F7; /* 暗い地の上の文字・線（対 #0B0B0C = 8.21） */ --abi-ai-400: #6C85E3; --abi-ai-500: #4F67C8; --abi-ai-600: #394CAA; /* 明るい地の上の文字の下限（対 #F3F0EA = 6.62） */ --abi-ai-700: #26348C; /* = ABI-SIG-001 の藍 */ --abi-ai-800: #131A61; /* 青磁 — 補助色その1。Cmax .055（藍の 0.36 倍）。 「藍以外の情報の層」を作るためだけに使う。藍と同時に置いても濁らない濃さに抑えてある */ --abi-seiji-50: #EBF6F7; --abi-seiji-100: #D1E4E6; --abi-seiji-200: #AECCD0; --abi-seiji-300: #89B2B6; --abi-seiji-400: #66969B; --abi-seiji-500: #477A7F; --abi-seiji-600: #2D5F65; --abi-seiji-700: #17484E; --abi-seiji-800: #032C31; /* 金 — 補助色その2。Cmax .052。光沢・縁・金属のためだけの暖色 */ --abi-kane-50: #F7F3EC; --abi-kane-100: #E7DED1; --abi-kane-200: #D1C4B0; --abi-kane-300: #B8A78C; --abi-kane-400: #9D896B; --abi-kane-500: #816D4D; --abi-kane-600: #675335; --abi-kane-700: #4F3D21; --abi-kane-800: #32240D; /* 生成り — 明るい面の6段 */ --abi-kinari-0: #FCFAF6; --abi-kinari-1: #F8F5F0; --abi-kinari-2: #F3F0EA; /* = ABI-SIG-001 の地（明） */ --abi-kinari-3: #E7E3DC; --abi-kinari-4: #D7D4CC; --abi-kinari-5: #C5C1B9; /* 墨 — 暗い面と文字の6段 */ --abi-sumi-0: #45484E; --abi-sumi-1: #33353B; --abi-sumi-2: #24262B; --abi-sumi-3: #16181D; /* = ABI-SIG-001 の墨（文字） */ --abi-sumi-4: #0D0E12; --abi-sumi-5: #0B0B0C; /* = ABI-SIG-001 の地（暗） */ /* 緋 — 警告と現在地だけ。装飾に使わない（ABI-SIG-001 を維持） */ --abi-hi-100: #FFD4CD; --abi-hi-300: #F38678; --abi-hi-500: #BF3B32; --abi-hi-700: #7E0005; /* --- 役割への割り当て（実測のコントラスト比を併記） ------------------ */ --abi-paper: var(--abi-kinari-2); --abi-paper-raised: var(--abi-kinari-0); --abi-paper-sunk: var(--abi-kinari-3); --abi-night: var(--abi-sumi-5); --abi-night-raised: var(--abi-sumi-2); --abi-text: var(--abi-sumi-3); /* 生成り上 15.61 : AAA */ --abi-text-2: var(--abi-sumi-0); /* 生成り上 8.06 : AAA */ --abi-text-3: #65635E; /* 注記。明るい面のどの段でもAA。kinari-2 上 5.28 / kinari-3 上 4.69 */ --abi-text-on-night: var(--abi-kinari-2); /* 墨地上 17.30 : AAA */ --abi-text-2-on-night: #A9A69E; /* 墨地上 8.09 : AAA */ --abi-link: var(--abi-ai-700); /* 生成り上 9.46 : AAA */ --abi-link-on-night:var(--abi-ai-300); /* 墨地上 8.21 : AAA */ --abi-accent2: var(--abi-seiji-600);/* 生成り上 6.29 : AA */ --abi-warn: var(--abi-hi-500); /* 生成り上 4.75 : AA */ --abi-rule: var(--abi-kinari-4); --abi-rule-soft: var(--abi-kinari-3); --abi-rule-night: #2A2C33; /* ========================================================================== 2. 奥行き — 4段。高さ(dp)を先に決め、影はそこから機械的に作る 影 = 環境光（広く薄い） + 直接光（狭く濃い）の2枚重ね ぼかし半径 = 高さ×2、下方向のずらし = 高さ、負の広がり = 高さ×0.5 同じ高さの物には必ず同じ影を使う。data-abi-lift="1..4" で強制できる ========================================================================== */ --abi-shadow-hue: 222 12% 6%; /* 影の色は黒ではなく墨の青寄り */ --abi-e1: 0 1px 2px -1px hsl(var(--abi-shadow-hue) / .10), 0 1px 1px hsl(var(--abi-shadow-hue) / .05); /* 高さ 1dp: 罫の代わり */ --abi-e2: 0 2px 4px -2px hsl(var(--abi-shadow-hue) / .10), 0 6px 12px -3px hsl(var(--abi-shadow-hue) / .09); /* 高さ 3dp: 札・入力 */ --abi-e3: 0 4px 8px -3px hsl(var(--abi-shadow-hue) / .10), 0 14px 28px -7px hsl(var(--abi-shadow-hue) / .13); /* 高さ 7dp: 浮いた面 */ --abi-e4: 0 8px 16px -6px hsl(var(--abi-shadow-hue) / .12), 0 28px 56px -14px hsl(var(--abi-shadow-hue) / .20); /* 高さ14dp: 覆う面 */ /* 暗い地では影が見えないので、光の縁（内側の1本）に置き換える */ --abi-e1-night: inset 0 1px 0 hsl(0 0% 100% / .045); --abi-e2-night: inset 0 1px 0 hsl(0 0% 100% / .06), 0 6px 14px -6px hsl(0 0% 0% / .55); --abi-e3-night: inset 0 1px 0 hsl(0 0% 100% / .075), 0 16px 34px -12px hsl(0 0% 0% / .62); --abi-e4-night: inset 0 1px 0 hsl(0 0% 100% / .09), 0 30px 62px -20px hsl(0 0% 0% / .70); /* ========================================================================== 3. 字 — 1.2 の等比。base(15px) を3段目に置く 見出しは大きいほど詰める（光学補正）。本文は詰めない。小さい字は開く ========================================================================== */ --abi-fs-1: 10.5px; --abi-fs-2: 12.5px; --abi-fs-3: 15px; /* base */ --abi-fs-4: 18px; --abi-fs-5: 21.5px; --abi-fs-6: 26px; --abi-fs-7: 31px; --abi-fs-8: 37px; --abi-fs-9: 45px; --abi-ls-display: -.022em; /* fs-7 以上 */ --abi-ls-head: -.014em; /* fs-4 〜 fs-6 */ --abi-ls-body: 0em; /* 本文は詰めない。日本語は詰めると読み落とす */ --abi-ls-small: .012em; /* fs-2 以下は開く */ --abi-ls-caps: .09em; /* 符牒・等幅の見出し */ --abi-lh-display: 1.22; --abi-lh-head: 1.42; --abi-lh-body: 1.9; --abi-lh-small: 1.75; --abi-lh-mono: 1.7; --abi-measure: 68ch; /* 本文の1行の上限 */ /* ========================================================================== 4. 粒 — 強さは1つの変数。abi-look.js が --abi-grain-img を焼き直す 0（無し）〜 0.14（強い）。既定 0.05 ========================================================================== */ --abi-grain: 0.05; --abi-grain-img: none; --abi-grain-size: 128px; /* ガラス */ --abi-glass-blur: 14px; --abi-glass-bg: hsl(40 33% 96% / .62); --abi-glass-bg-night: hsl(230 10% 8% / .55); } /* ========================================================================== 5. グラデーションの敷き方 ========================================================================== */ /* 既存ページへ後から足せるように、詳細度を意図的に操作している。 ・敷いたcanvas側はクラスを2回書いて強くする（.stage canvas のような 既存の指定に負けて位置が崩れるのを防ぐ） ・中身の子孫側は :where() で詳細度0にする（.hud のような absolute 指定を上書きして版面を壊さないため） */ .abi-look-bg.abi-look-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; border-radius: inherit; pointer-events: none; cursor: auto; transition: none; } :where([data-abi-look]) { position: relative; isolation: isolate; } :where([data-abi-look]) > :where(:not(.abi-look-bg)) { position: relative; z-index: 1; } /* 粒。α値を焼いたタイルなので opacity で薄めない（規則2） */ .abi-grain { position: relative; } .abi-grain::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background-image: var(--abi-grain-img); background-size: var(--abi-grain-size) var(--abi-grain-size); } .abi-grain-page::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background-image: var(--abi-grain-img); background-size: var(--abi-grain-size) var(--abi-grain-size); } /* ========================================================================== 6. 面と縁 ========================================================================== */ .abi-surface { background: var(--abi-paper-raised); border: 1px solid var(--abi-rule-soft); } .abi-surface-n { background: var(--abi-night-raised); border: 1px solid var(--abi-rule-night); color: var(--abi-text-on-night); } [data-abi-lift="1"] { box-shadow: var(--abi-e1); } [data-abi-lift="2"] { box-shadow: var(--abi-e2); } [data-abi-lift="3"] { box-shadow: var(--abi-e3); } [data-abi-lift="4"] { box-shadow: var(--abi-e4); } .abi-night [data-abi-lift="1"] { box-shadow: var(--abi-e1-night); } .abi-night [data-abi-lift="2"] { box-shadow: var(--abi-e2-night); } .abi-night [data-abi-lift="3"] { box-shadow: var(--abi-e3-night); } .abi-night [data-abi-lift="4"] { box-shadow: var(--abi-e4-night); } /* ガラス。backdrop-filter だけを使い、filter には触らない（規則1の検査と衝突させない） */ .abi-glass { background: var(--abi-glass-bg); -webkit-backdrop-filter: blur(var(--abi-glass-blur)) saturate(1.18); backdrop-filter: blur(var(--abi-glass-blur)) saturate(1.18); border: 1px solid hsl(0 0% 100% / .55); box-shadow: var(--abi-e2); } .abi-night .abi-glass, .abi-glass-n { background: var(--abi-glass-bg-night); -webkit-backdrop-filter: blur(var(--abi-glass-blur)) saturate(1.18); backdrop-filter: blur(var(--abi-glass-blur)) saturate(1.18); border: 1px solid hsl(0 0% 100% / .10); box-shadow: var(--abi-e2-night); } @supports not (backdrop-filter: blur(2px)) { .abi-glass { background: hsl(40 33% 96% / .93); } .abi-glass-n { background: hsl(230 10% 8% / .93); } } /* 1本の縁だけを虹彩にする。面には広げない */ .abi-rim { position: relative; border: 1px solid transparent; background-clip: padding-box; } .abi-rim::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(128deg, var(--abi-ai-500), var(--abi-seiji-300) 38%, var(--abi-kane-200) 62%, var(--abi-ai-600)); } /* ========================================================================== 7. 字の段階（クラスで当てる） ========================================================================== */ .abi-d1 { font-size: var(--abi-fs-9); letter-spacing: var(--abi-ls-display); line-height: var(--abi-lh-display); font-weight: 700; } .abi-d2 { font-size: var(--abi-fs-8); letter-spacing: var(--abi-ls-display); line-height: var(--abi-lh-display); font-weight: 700; } .abi-t1 { font-size: var(--abi-fs-7); letter-spacing: var(--abi-ls-display); line-height: 1.3; font-weight: 700; } .abi-t2 { font-size: var(--abi-fs-6); letter-spacing: var(--abi-ls-head); line-height: var(--abi-lh-head); font-weight: 700; } .abi-t3 { font-size: var(--abi-fs-5); letter-spacing: var(--abi-ls-head); line-height: var(--abi-lh-head); font-weight: 700; } .abi-t4 { font-size: var(--abi-fs-4); letter-spacing: var(--abi-ls-head); line-height: var(--abi-lh-head); font-weight: 700; } .abi-body { font-size: var(--abi-fs-3); letter-spacing: var(--abi-ls-body); line-height: var(--abi-lh-body); max-width: var(--abi-measure); } .abi-small { font-size: var(--abi-fs-2); letter-spacing: var(--abi-ls-small); line-height: var(--abi-lh-small); } .abi-tiny { font-size: var(--abi-fs-1); letter-spacing: var(--abi-ls-small); line-height: var(--abi-lh-small); } .abi-caps { font-family: var(--abi-mono); font-size: var(--abi-fs-2); letter-spacing: var(--abi-ls-caps); line-height: var(--abi-lh-mono); text-transform: none; color: var(--abi-text-3); } .abi-figure{ font-family: var(--abi-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ========================================================================== 8. 旧トークンの差し替え（abi-ui.css を読んだ既存ページへ効かせる） 値の意味は変えず、階調の中の正しい段へ寄せるだけ ========================================================================== */ :root { --abi-bg-dark: var(--abi-sumi-5); --abi-bg: var(--abi-kinari-2); --abi-ink: var(--abi-sumi-3); --abi-accent: var(--abi-ai-700); --abi-alert: var(--abi-hi-500); --abi-surface: var(--abi-kinari-0); --abi-sunk: var(--abi-kinari-3); --abi-line: var(--abi-kinari-4); --abi-line-soft: var(--abi-kinari-3); --abi-mute: var(--abi-text-3); --abi-ink-soft: var(--abi-text-2); } @media (prefers-reduced-motion: reduce) { .abi-look-bg { /* 絵は静止画なので触らない。動きの停止は ABI-SIG-001 側の仕事 */ } }