/* 読み物ページ（上部タブから行ける、一覧と作品詳細以外のページ）が共有する土台。出どころは Claude Design で起こしたモックで、その配色は自作の reverve-X-analysis（作品 x-analysis）から書き出したデザインシステム。この系統は、作品一覧・作品詳細（assets/style.css だけを読むページ）と次の 3 点で違う。 1. ダーク専用。OS がライト設定でも暗いまま出す 2. 角丸あり（4 / 6 / 8 / 12px）・面は半透明・アイコンを使う 3. 書体を外部（Google Fonts）から読む — Inter / Noto Sans JP / Material Symbols 3 は一覧・詳細には無い性質で、**閲覧者の IP・ブラウザ情報・見ているページの URL が Google へ渡る**。見た目を優先する判断で受け入れたもの。他のページに広げるときは同じ判断をもう一度すること（CLAUDE.md の「外部読み込み」の項に経緯を書いてある）。 **クラス名の hx- 接頭辞は harness 由来だが、いまは「暗い系統の読み物ページ」の意**。 2 枚目（loop）を足すときに一括で改名する案もあったが、HTML と CSS にまたがる 80 個近い名前を書き換える割に見た目は 1px も変わらないので、名前は据え置いて意味だけ広げた。ページ固有の図と衝突させないための接頭辞、という役目は変わらない。ページ固有の図は各ページの CSS が持つ: assets/skills.css … 出自のタイル・出自カード・マトリクス・一覧のカード assets/harness.css … レール図・段階の表・負債の 3 段 assets/loop.css … 層の帯・4 本柱・階段・棒グラフ・誤りの対比ほか読み込む順は style.css → doc-dark.css → ページ固有。 */ /* ---------- トークン ---------- .hx はに付く。ここで assets/style.css の変数を上書きすると、共有しているヘッダー（.site-head）とタブ（.site-tabs）も一緒にモックの配色になる。 **メディアクエリで囲まない**のが要点 — 囲むと OS がライトのときだけ元のクリーム色に戻り、本文だけ暗いという最悪の組み合わせになる。 */ /* スクロールバーなどブラウザ自身が描く部分は root 要素の指定しか見ない。 .hx（＝）に書くと、OS がライト設定のときスクロールバーだけ明るく残る。このファイルは読み物ページしか読まないので、:root に書いても一覧・詳細には漏れない。 */ :root { color-scheme: dark; } .hx { /* style.css のトークンを上書き（ヘッダーとタブがこれを見る）。上書きするのは色だけでよい。形の側（--radius / --shadow / --hatch / --maxw / --font）を読むのは一覧・詳細だけが使う部品（.card / .shot / .diagram）で、読み物ページには出てこない。角丸は下の --hx-r-* が、影は --hx-shadow が持つ。 */ --bg: #101b22; --surface: #0f172a; --surface-2: #1e293b; --border: #1e293b; --border-strong: #334155; --text: #ffffff; --muted: #94a3b8; --accent: #1ca0f2; --accent-soft: rgba(28, 160, 242, 0.1); --on-accent: #04121c; /* モック由来の追加トークン。リテラル色を書いてよいのはこのブロックだけ */ --hx-body: #cbd5e1; --hx-body-2: #e2e8f0; --hx-subtle: #64748b; --hx-dash: #475569; --hx-card: rgba(15, 23, 42, 0.5); --hx-sunken: rgba(30, 41, 59, 0.6); /* 沈んだ面。表の見出し行 */ --hx-sunken-soft: rgba(30, 41, 59, 0.4); /* 同じ面を、パネルの中に小さく置くとき */ --hx-topbar: rgba(16, 27, 34, 0.8); /* 差し色の面。上の --accent-soft（0.1）と合わせて 4 段あり、広い面ほど薄くする */ --hx-accent-row: rgba(28, 160, 242, 0.04); /* 行 1 本ぶん */ --hx-accent-wash: rgba(28, 160, 242, 0.07); /* 区画に敷く */ --hx-accent-mark: rgba(28, 160, 242, 0.14); /* 語句 1 つの下敷き */ --hx-ok: #34d399; --hx-ok-line: #065f46; /* 緑の面も同じ考え方で 3 段 */ --hx-ok-fill-soft: rgba(6, 78, 59, 0.25); /* 注意書き 1 枚 */ --hx-ok-fill: rgba(6, 78, 59, 0.4); /* 表のセル */ --hx-ok-fill-strong: rgba(6, 78, 59, 0.5); /* タグ */ --hx-warn: #fbbf24; --hx-warn-line: #78350f; --hx-warn-fill: rgba(120, 53, 15, 0.25); --hx-warn-fill-soft: rgba(120, 53, 15, 0.14); /* 破線のカードに敷く薄い面 */ --hx-warn-row: rgba(120, 53, 15, 0.1); /* 表の行 1 本ぶん */ --hx-warn-dash: rgba(251, 191, 36, 0.45); /* 破線の枠。実線の警告色より弱く */ --hx-bad: #fb7185; --hx-bad-line: #9f1239; --hx-bad-fill: rgba(136, 19, 55, 0.16); --hx-bad-dash: rgba(251, 113, 133, 0.7); /* 分野の色（skills だけが使う）。台帳の categoryMeta の tone がそのまま名前になる。ここだけ **RGB の 3 値**で持つ。同じ色を文字・枠・下敷きの面・カードの地といくつもの濃さで使うので、rgb(var(--x) / .13) の形で透明度を変えられる必要があるため（hex だと濃さの段ごとに別トークンが要り、7 分野 × 段の数になる。どの濃さを何に使っているかの一覧は assets/skills.css の冒頭にある）。色そのものは他のトークンと同じデザインシステム由来（Tailwind の 400 番台）。 7 分野は色相を全部変えてある。カード全体を分野色で塗るようになってから、以前の「ドキュメント＝青 96 165 250」は「開発＝青 28 160 242」と、「Cloudflare＝黄 250 204 21」は「専門知識＝黄 251 191 36」と見分けが付かなかった。 */ --hx-cat-doc: 167 139 250; /* violet */ --hx-cat-dev: 28 160 242; /* 差し色と同じ青 */ --hx-cat-creative: 244 114 182; /* pink */ --hx-cat-comm: 52 211 153; /* emerald */ --hx-cat-domain: 251 191 36; /* amber */ --hx-cat-mkt: 249 115 22; /* orange */ --hx-cat-cf: 34 211 238; /* cyan */ /* 台帳の categoryMeta に無い分野（カタログに足されたばかりのもの）が落ちる先 */ --hx-cat-none: 148 163 184; /* 斜線。「実測ではない・まだ確定していない」区間に敷く。濃さで意味を作らないための逃げ道で、面の塗りと違って値が読めないことを見た目で言う */ --hx-hatch: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.3) 0 5px, transparent 5px 10px); --hx-bad-hatch: repeating-linear-gradient(135deg, rgba(244, 63, 94, 0.55) 0 6px, rgba(244, 63, 94, 0.2) 6px 12px); /* 角丸は 4 / 6 / 8 / 12px の 4 段（CLAUDE.md に書いてある寸法） */ --hx-r-sm: 4px; --hx-r-md: 6px; --hx-r-lg: 8px; --hx-r-xl: 12px; /* 和文は Noto Sans JP。落ちたときは OS の既定ゴシックへ（style.css の --font と同じ並び） */ --hx-ui: Inter, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif; --hx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* デザインシステムが持つ影は 1 種類だけ。奥行きは 1px の罫線が担う */ --hx-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* 上の 1 種類に足した唯一の例外。触れたカードを持ち上げるときの影で、使うのは skills の一覧だけ。色を持つので置き場はここ（リテラル色は .hx だけ） */ --hx-shadow-lift: 0 8px 24px 0 rgb(0 0 0 / 0.35); font-family: var(--hx-ui); font-size: 15px; line-height: 1.7; color: var(--hx-body); } .hx a { text-decoration: none; } .hx a:hover { text-decoration: underline; } /* タブは style.css 側で下ボーダーを現在地の印にしているので、下線を出さない */ .hx .site-tabs a, .hx .site-tabs a:hover { text-decoration: none; } .hx :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- アイコン ---------- Material Symbols は合字（ligature）で描く。書体が落ちると "bolt" のような名前がそのまま出てしまうので、幅 1em で刈り込んで行送りが壊れないようにしてある。読み込み中に名前が見えるのは側の display=block で塞いでいる。 */ .ms { display: inline-block; width: 1em; overflow: hidden; font-family: "Material Symbols Outlined"; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; /* font-variation-settings は書かない。の URL に可変軸を付けていないので配信されるのは既定値の 1 本（FILL 0 / wght 400 / GRAD 0 / opsz 24）で、指定しても効かない。軸を振りたくなったら URL 側から直すこと。 */ } /* ---------- ページ見出しの帯 ---------- */ .hx-pagehead { border-bottom: 1px solid var(--border); background: var(--hx-topbar); } .hx-pagehead .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; min-height: 64px; padding-top: 14px; padding-bottom: 14px; } .hx-pagehead h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--text); } .hx-pagehead p { margin: 0; font-size: 13px; color: var(--hx-subtle); } .hx-pill { margin-left: auto; padding: 3px 10px; border-radius: 9999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 500; white-space: nowrap; } /* ---------- 本文の器と、地の文 ---------- */ .hx-main { padding-bottom: 8px; } .hx-lead { margin: 0; max-width: 86ch; font-size: 15px; line-height: 1.85; color: var(--hx-body); } .hx-lead b { color: var(--hx-body-2); font-weight: 500; } /* 強調句。差し色の下敷きを敷く */ .hx-mark { padding: 1px 5px; border-radius: var(--hx-r-sm); background: var(--hx-accent-mark); color: var(--text); font-weight: 500; } .hx-meta { margin: 0; max-width: 86ch; padding-top: 18px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.8; color: var(--hx-subtle); } /* ---------- 節 ---------- */ .hx-sec { padding: 48px 0 0; } /* 直下の子に限定しない（`>` にしない）。loop は節番号と見出しを 1 つの行にまとめるので h2 が孫になる。harness には入れ子の h2 が無いので、広げても取り違えは起きない。 */ .hx-sec h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--text); } .hx-sec-note { margin: 10px 0 22px; max-width: 86ch; font-size: 13.5px; line-height: 1.8; color: var(--muted); } .hx-sec-note b { color: var(--hx-body-2); font-weight: 500; } .hx-cap { margin: 12px 0 0; max-width: 96ch; font-size: 12px; line-height: 1.8; color: var(--hx-subtle); } .hx-cap b { color: var(--hx-body-2); font-weight: 500; } .hx-cap .hx-cap-accent { color: var(--accent); } .hx-fig { margin: 0 0 26px; } /* 図が広すぎるときの逃がし方。overflow はこの外側が持ち、min-width は必ず**中の要素**が持つ。 min-width をこちら側に置くと、外側が広がって本文ごとはみ出す（点検に落ちる）。 */ .hx-scroll { overflow-x: auto; } /* ---------- 注意書きのカード（アイコン＋文） ---------- */ .hx-note { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--hx-r-lg); background: var(--hx-sunken-soft); } .hx-note.is-ok { border-color: var(--hx-ok-line); background: var(--hx-ok-fill-soft); } /* 破線＝未完成・意図的に空・繋がっていない。読み物ページ共通の意味 */ .hx-note.is-dashed { border: 1px dashed var(--hx-warn-dash); background: var(--hx-warn-fill-soft); } .hx-note .ms { flex: none; margin-top: 3px; font-size: 16px; color: var(--hx-bad); } /* 既定は赤。橙と緑はクラスで指定する（位置で決めると、注意書きを 1 枚足しただけで色が黙ってずれる）。 */ .hx-note.is-warn .ms, .hx-note.is-dashed .ms { color: var(--hx-warn); } .hx-note.is-ok .ms { color: var(--hx-ok); } .hx-note p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); } .hx-note.is-ok p { color: var(--hx-body-2); } .hx-note b { color: var(--hx-body-2); font-weight: 500; } .hx-note.is-ok b { color: var(--text); font-weight: 700; } .hx-note.is-dashed b { color: var(--hx-warn); font-weight: 500; } /* ---------- 数字のカード ---------- 列数はページごとに違う（harness は 5 枚・loop は 4 枚）ので、列数と畳み方は各ページの CSS が --hx-kpi-cols で決める。下の 4 は変数が無かったときの保険で、実際の列数は harness.css / loop.css がそれぞれ書いている。**ここを直しても両ページの見た目は変わらない。** */ .hx-kpis { display: grid; grid-template-columns: repeat(var(--hx-kpi-cols, 4), minmax(0, 1fr)); gap: 16px; } .hx-kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--hx-r-xl); background: var(--hx-card); box-shadow: var(--hx-shadow); } .hx-kpi-top { display: flex; align-items: center; gap: 8px; } .hx-kpi-top .ms { margin-left: auto; font-size: 20px; color: var(--hx-subtle); } .hx-kpi-label { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hx-subtle); } .hx-kpi-value { display: flex; align-items: baseline; gap: 7px; margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; } .hx-kpi-delta { font-size: 12px; font-weight: 500; color: var(--hx-ok); } /* 高さは grid が揃えるので、説明は下端に寄せて足並みを合わせる（margin: 0 を書き忘れると

の既定余白が残り、数字と説明の間が開く） */ .hx-kpi-sub { margin: auto 0 0; padding-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--hx-subtle); } /* 主役の 1 枚だけ差し色にする */ .hx-kpi.is-focus { border-color: var(--accent); background: var(--hx-accent-wash); } .hx-kpi.is-focus .hx-kpi-value, .hx-kpi.is-focus .hx-kpi-label, .hx-kpi.is-focus .hx-kpi-top .ms { color: var(--accent); } .hx-kpi.is-focus .hx-kpi-sub { color: var(--muted); } /* ---------- タグ ---------- */ .hx-tag { display: inline-block; padding: 1px 8px; border-radius: 9999px; background: var(--surface-2); color: var(--muted); font-size: 10px; line-height: 1.8; white-space: nowrap; } .hx-tag.is-agent { background: var(--accent-soft); color: var(--accent); } .hx-tag.is-cmd { color: var(--hx-body-2); } .hx-tag.is-ok { background: var(--hx-ok-fill-strong); color: var(--hx-ok); } .hx-tag.is-warn { background: var(--hx-warn-fill); color: var(--hx-warn); } .hx-tag.is-bad { background: var(--hx-bad-fill); color: var(--hx-bad); } /* ---------- パネルと行の一覧 ---------- */ .hx-panel { padding: 6px 22px; border: 1px solid var(--border); border-radius: var(--hx-r-xl); background: var(--hx-card); box-shadow: var(--hx-shadow); } /* 図を入れるときは内側を広くとる（行の一覧を入れるときの 6px では図が窮屈になる） */ .hx-panel.is-fig { padding: 26px 28px; } /* 図とその注記のあとにパネルが続くときだけ間を空ける */ .hx-cap + .hx-panel { margin-top: 22px; } .hx-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .hx-rows > li { padding: 16px 0; border-top: 1px solid var(--border); } .hx-rows > li:first-child { border-top: 0; } .hx-row-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 9px; margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--hx-body-2); } .hx-row-desc { margin: 0; max-width: 100ch; font-size: 13px; line-height: 1.8; color: var(--muted); } /* いちばん重い 1 件だけカードとして立てる */ .hx-rows > li.is-alarm { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--hx-warn-line); border-radius: var(--hx-r-lg); background: var(--hx-warn-fill); } .hx-rows > li.is-alarm + li { border-top: 0; } .hx-rows > li.is-alarm .hx-row-name { color: var(--text); } /* 自動で強制されるものだけ左に差し色を立てる（規約は文章で効かせているだけなので立てない） */ .hx-rows > li.is-flag { padding-left: 14px; border-left: 3px solid var(--hx-ok); } /* ---------- 引用ブロック（言い切りを 1 つだけ立てる） ---------- */ .hx-quote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--accent); border-radius: 0 var(--hx-r-lg) var(--hx-r-lg) 0; background: var(--accent-soft); color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.6; } .hx-quote.is-plain { color: var(--hx-body-2); font-size: 13.5px; font-weight: 400; line-height: 1.85; } /* ---------- 脚注 ---------- */ .hx-foot { display: flex; flex-direction: column; gap: 6px; margin: 48px 0 0; padding: 20px 0 44px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.8; color: var(--hx-subtle); } .hx-foot p { margin: 0; max-width: 96ch; } /* ---------- 畳み方（共通部分だけ） ---------- 広い方から順に書く。逆順だと 375px でも後ろの広い方の指定が勝つ。各ページ固有の図の畳み方は、それぞれの CSS が持つ。左右の余白は style.css の .wrap（640px 以下で 16px）に任せる。ここに `.hx .wrap { padding: 0 16px }` を書き足してはいけない — 詳細度が .site-head .wrap と並び、後から読まれるぶん勝つので、ヘッダー（28/24px）と見出し帯（14px）と .hx-main（8px）の上下余白まで 0 に潰れる。style.css 側の同じ 1 行は詳細度が 1 つ低いので潰さない。写すときに .hx を足したことで起きる事故（実際に踏んだ）。 */ @media (max-width: 640px) { .hx-panel { padding: 4px 16px; } /* 図のパネルは別に書く。.hx-panel.is-fig はクラス 2 つぶんで強いので、上の .hx-panel 1 行では上書きされず、狭い画面でも 26/28px のまま残ってしまう */ .hx-panel.is-fig { padding: 18px 14px; } .hx-pagehead .wrap { min-height: 0; } .hx-pill { margin-left: 0; } /* font-size が効くのは言い切りの版だけ。.hx-quote.is-plain はクラス 2 つぶんで強いので 13.5px のまま残る（意図どおり — あちらは地の文なので狭い画面で大きくしない）。 padding は .is-plain 側が持っていないので、両方に効く。 */ .hx-quote { padding: 15px 17px; font-size: 15.5px; } }