/* ========================================================== * Kizuki Genre Themes — 診断ジャンル別テーマ層 * base palette の SoT は common/tokens.css。本ファイルはその「拡張」。 * 必ず tokens.css の直後に読み込む (カスケード後勝ちで :root を上書き)。 * * 作用するのはが付いたページだけ。 * data-theme 未指定の全ページには副作用ゼロ (= warm-light のまま)。 * * ルール (詳細は .claude/skills/kizuki-genre-theme): * - 上書きしてよいのは「素材」: 地(--paper/--card)・文字(--ink系)・罫(--line系)・ * アクセント(--navy/--ai/--clay/--ochre/--rose/--leaf/--cyan)・グラデ・--font-display。 * - 触らないのは「形」: --bw / --radius / --shadow-* / --ease / 本文 --font-jp。 * - レガシーエイリアス(--cream/--coral 等)は再定義しない。--paper/--clay 等を * 変えれば自動追従する (tokens.css で var() 束縛済み)。 * - 全テキスト色 × 背景は WCAG AA (4.5:1) を満たす濃度にする。 * - prefers-color-scheme は使わない。濃色テーマは「OS 出し分け」ではなく * 「診断テーマとして意図的に選んだ配色」。OS 連動ダークは引き続き禁止。 * ========================================================== */ /* ========================================================== * RPG / ファンタジー — 羊皮紙ライト (案A・既定) * 剣と魔法 / 中世 / 羊皮紙 / 金 / 深紅 / 王国の青 / 魔術の紫 * ========================================================== */ [data-theme="rpg"] { /* 地・面: 羊皮紙 */ --paper: #F3E9D2; --paper-deep: #E7D8B6; --card: #FBF3E0; /* 文字: 焦茶インク (羊皮紙 #F3E9D2 上で AA) */ --ink: #2A2016; /* 紙地上 ~13:1 */ --ink-soft: #4F3D22; /* 紙地上 ~7:1 */ --ink-mute: #645234; /* 紙地上 ~4.8:1 */ /* アクセント (テキスト/白文字ボタン地の両方で AA を満たす濃度) */ --navy: #2E5E8C; /* 王国の青 (primary) */ --navy-deep: #244B70; --ai: #7A3B8C; /* 魔術の紫 */ --ai-soft: #9A5BAC; --cyan: #1F6E6E; --clay: #9C3A1E; /* 炎・戦士の深紅 */ --ochre: #845912; /* 金 (羊皮紙上で AA。装飾の明るい金は --ochre-bright) */ --rose: #A23A55; --leaf: #3F6B43; /* 装飾専用の明るい版 (大面積の塗り・グラデ・ドットのみ。テキスト禁止) */ --ochre-bright: #D9A53A; --clay-bright: #C9542E; --rose-bright: #C46A82; /* 罫: 古い紙の縁 */ --line: #D8C49A; --line-strong: #C2A877; /* グラデ: 夜明けの紫 → 緋 → 金 (白文字が映える濃度) */ --grad-hero: linear-gradient(100deg, #5A2E8C 0%, #9C2E3E 50%, #B8841E 100%); --grad-cta: linear-gradient(100deg, #5A2E8C 0%, #9C2E3E 100%); /* レガシー旧名も明示再束縛する。理由: 各LPのインライン :root が --cream 等を「リテラル値」で再定義しており (例 rpgjob/index.html の :root{--cream:#FBF8F2}), tokens.css の `--cream:var(--paper)` 束縛が上書きされ、--paper を変えても --cream が追従しない。 body{background:var(--cream)} 等の旧名参照に効かせるため、テーマ側で旧名も上書きする。 */ --cream: var(--paper); --cream-deep: var(--paper-deep); --coral: var(--clay); --mustard: var(--ochre); --teal: var(--cyan); --sky: var(--cyan); --lavender: var(--ai); } /* テーマ装飾: 背景の光を「松明の暖色グロー」に差し替え (インライン .pt-bg-deco を後勝ち上書き) */ [data-theme="rpg"] .pt-bg-deco { background: radial-gradient(1100px 560px at 50% -10%, rgba(122, 59, 140, 0.16), transparent 70%), radial-gradient(820px 480px at 88% 4%, rgba(184, 132, 30, 0.12), transparent 72%), radial-gradient(760px 520px at 6% 84%, rgba(46, 94, 140, 0.10), transparent 72%); } /* ========================================================== * RPG / ファンタジー — 濃色ダンジョン ★採用テーマ * rpgjob/index.html はでこれを使う。 * 濃地 (夜紫) に明色文字・明色アクセント。没入感とスクショ映えを優先。 * (上の [data-theme="rpg"] 羊皮紙ライトは見比べ用に残置) * 実機確認済み: AA 全テキスト合格 / ヘッダー・フッター色反転OK / * 白文字直書き CTA・マーキーは濃グラデ地で可読。 * ========================================================== */ [data-theme="rpg-dark"] { --paper: #241C2E; /* 深い夜紫 */ --paper-deep: #1B1525; --card: #2E2438; /* 文字: 羊皮紙色の明文字 (濃地 #241C2E 上で AA) */ --ink: #F1E7D0; /* 濃地上 ~12:1 */ --ink-soft: #CFC0A2; /* 濃地上 ~7:1 */ --ink-mute: #AB9C82; /* 濃地上 ~5:1 */ /* アクセント: 濃地で映える明度高めへ (濃地に明色テキスト前提) */ --navy: #6FA8D8; /* 濃地上 ~6:1 */ --navy-deep: #5A93C4; --ai: #C49AE6; /* 明るい魔術紫: 濃地上 ~7:1 */ --ai-soft: #D6B6F0; --cyan: #5CC2C2; --clay: #E8855E; /* 炎: 濃地上 ~6:1 */ --ochre: #E0A53E; /* 金: 濃地上 ~8:1 */ --rose: #E08198; --leaf: #7CB47A; --ochre-bright: #F0C36A; --clay-bright: #F0A07E; --rose-bright: #F0A3B6; --line: #463A52; --line-strong: #5A4A68; --grad-hero: linear-gradient(100deg, #7A3B8C 0%, #B53A4E 50%, #E0A53E 100%); --grad-cta: linear-gradient(100deg, #7A3B8C 0%, #B53A4E 100%); /* レガシー旧名も明示再束縛 (rpg ブロックと同じ理由) */ --cream: var(--paper); --cream-deep: var(--paper-deep); --coral: var(--clay); --mustard: var(--ochre); --teal: var(--cyan); --sky: var(--cyan); --lavender: var(--ai); /* 診断画面 (StepFlow) は stepflow.css 側で --sf-* が tokens を参照するようリファクタ済みのため、ここで --sf-* を列挙する必要はない (自動追従)。濃地に合わせて影だけ締める。 */ --sf-shadow: 0 10px 30px -14px rgba(0,0,0,0.5); } [data-theme="rpg-dark"] .pt-bg-deco { background: radial-gradient(1100px 560px at 50% -10%, rgba(196, 154, 230, 0.14), transparent 70%), radial-gradient(820px 480px at 88% 4%, rgba(224, 165, 62, 0.10), transparent 72%), radial-gradient(760px 520px at 6% 84%, rgba(111, 168, 216, 0.10), transparent 72%); } /* ========================================================== * univ / 大学キャラ診断 — カレッジ・ライト ★採用テーマ * univ/index.html・shindan.html・結果テンプレがでこれを使う。 * 世界観: 学び舎 / アカデミア / 常春のキャンパス / 蔵書 / アイビー。 * 生成り紙地に焦茶インク、アイビーグリーン(primary)+れんが+真鍮金+学藍。 * AA 検証済み: 全テキスト × 地 ≥ 4.5:1 (ink 13.8 / soft 9.3 / mute 5.9 / * ivy-text 5.5・白文字地 6.3 / brick-text 5.13・白文字地 5.83 / brass-text 4.77 / * ai 6.97 / study-navy 5.97 / rose 5.13 / leaf 4.50 / cyan 5.26)。 * ========================================================== */ [data-theme="univ"] { /* 地・面: 生成りの紙 (warm-light よりやや黄み寄りのアカデミア紙) */ --paper: #F6F0E2; --paper-deep: #EBE2CE; --card: #FCF8EE; /* 文字: 焦茶インク (生成り紙 #F6F0E2 上で AA) */ --ink: #2A2218; /* 紙地上 ~13.8:1 */ --ink-soft: #4A3D2A; /* 紙地上 ~9.3:1 */ --ink-mute: #6A5A40; /* 紙地上 ~5.9:1 */ /* アクセント (テキスト/白文字ボタン地の両方で AA) */ --navy: #2F6B4F; /* アイビーグリーン (primary)。text 5.5 / 白文字地 6.3 */ --navy-deep: #235540; --ai: #5A3FA0; /* アカデミック紫: 紙地上 ~6.97:1 */ --ai-soft: #7A5FC0; --cyan: #1F6E6E; --clay: #A8472B; /* れんが: text 5.13 / 白文字地 5.83 */ --ochre: #8A6310; /* 真鍮金 (紙地上 AA。装飾の明るい金は --ochre-bright) */ --rose: #A8425E; --leaf: #3F7A4F; /* 装飾専用の明るい版 (大面積塗り・グラデ・ドットのみ。テキスト禁止) */ --ochre-bright: #C99A3A; --clay-bright: #C85E40; --rose-bright: #C46A82; /* 罫: 古書・紙の縁 */ --line: #E0D5BE; --line-strong: #CDBE9E; /* グラデ: アイビー緑 → 学藍 → 真鍮金 (知性と実りのキャンパス。白文字が映える濃度) */ --grad-hero: linear-gradient(100deg, #235540 0%, #2E5E8C 52%, #9A6F12 100%); --grad-cta: linear-gradient(100deg, #235540 0%, #2E5E8C 100%); /* レガシー旧名も明示再束縛 (rpg ブロックと同じ理由: LPインライン :root のリテラル再定義で追従が壊れるため) */ --cream: var(--paper); --cream-deep: var(--paper-deep); --coral: var(--clay); --mustard: var(--ochre); --teal: var(--cyan); --sky: var(--cyan); --lavender: var(--ai); } /* テーマ装飾: 背景の光を「窓から差すキャンパスの陽光」に差し替え */ [data-theme="univ"] .pt-bg-deco { background: radial-gradient(1100px 560px at 50% -10%, rgba(47, 107, 79, 0.12), transparent 70%), radial-gradient(820px 480px at 88% 4%, rgba(154, 111, 18, 0.10), transparent 72%), radial-gradient(760px 520px at 6% 84%, rgba(46, 94, 140, 0.09), transparent 72%); } /* ========================================================== * 16type — 16タイプ性格診断 (知的・心理ラボ) * 16type/index.html・shindan.html・結果テンプレがでこれを使う。 * 世界観: 自分の頭の中をのぞく / 心理ラボ / 思考の地図 / 静かな知性。 * 淡い藍グレーの紙地に深い藍チャコールのインク、藍(primary)+プラム(AI)+真鍮金。 * AA 検証済み (地 #EEF1F6 上): ink #1E232E 14.6 / soft #424A5C 8.0 / mute #5C6678 5.3 / * navy #2C5482 5.0・白文字地 5.3 / ai #6B4BB0 5.7・白文字地 4.7 / * clay #A8472B 5.13 / ochre #876210 5.4 / rose #A8425E 5.13 / leaf #3F7A4F 4.6 / cyan #1F6E6E 5.2。 * ========================================================== */ [data-theme="16type"] { /* 地・面: 淡い藍グレーの紙 (思考ノート / ラボの白に冷ためのトーン) */ --paper: #EEF1F6; --paper-deep: #E2E7F0; --card: #FAFBFE; /* 文字: 深い藍チャコール (淡い藍グレー地 #EEF1F6 上で AA) */ --ink: #1E232E; /* 地上 ~14.6:1 */ --ink-soft: #424A5C; /* 地上 ~8.0:1 */ --ink-mute: #5C6678; /* 地上 ~5.3:1 */ /* アクセント (テキスト/白文字ボタン地の両方で AA) */ --navy: #2C5482; /* 知性の藍 (primary)。text 5.0 / 白文字地 5.3 */ --navy-deep: #214268; --ai: #6B4BB0; /* 心理プラム: text 5.7 / 白文字地 4.7 */ --ai-soft: #8A6FCC; --cyan: #1F6E6E; --clay: #A8472B; --ochre: #876210; /* 真鍮金 (装飾の明るい金は --ochre-bright) */ --rose: #A8425E; --leaf: #3F7A4F; /* 装飾専用の明るい版 (大面積塗り・グラデ・ドットのみ。テキスト禁止) */ --ochre-bright: #C99A3A; --clay-bright: #C85E40; --rose-bright: #C46A82; /* 罫: 藍がかったヘアライン */ --line: #D9E0EB; --line-strong: #C2CCDC; /* グラデ: 藍 → プラム → 真鍮金 (思考から発想へ。白文字が映える濃度) */ --grad-hero: linear-gradient(105deg, #214268 0%, #5A3FA0 55%, #8A6310 100%); --grad-cta: linear-gradient(105deg, #214268 0%, #5A3FA0 100%); /* レガシー旧名も明示再束縛 (LPインライン :root のリテラル再定義で追従が壊れるため) */ --cream: var(--paper); --cream-deep: var(--paper-deep); --coral: var(--clay); --mustard: var(--ochre); --teal: var(--cyan); --sky: var(--cyan); --lavender: var(--ai); } /* テーマ装飾: 背景の光を「思考の光点 / 淡い知の地図グロー」に差し替え */ [data-theme="16type"] .pt-bg-deco { background: radial-gradient(1100px 560px at 50% -10%, rgba(44, 84, 130, 0.13), transparent 70%), radial-gradient(820px 480px at 88% 4%, rgba(107, 75, 176, 0.10), transparent 72%), radial-gradient(760px 520px at 6% 84%, rgba(135, 98, 16, 0.07), transparent 72%); }