/* ============================================================================ src/assets/css/themes.css — tokens.css / shell.css の直後に読み込む ---------------------------------------------------------------------------- ・上書きしてよいのは tokens.css §2 の17トークン ＋ color-scheme だけ。 ・値はすべて既存3LPの実測 hex をそのまま使う。新しい色は作らない。 唯一の例外は「派生値」と注記した2つ（--rule-2 / --surface-2 の一部）で、 これは既存の --rule / --bg / --fg-1 からアルファ合成しただけのもの。 ・末尾の「レガシー別名」ブロックが移植作業の要。これがあるので、 移植する各アプリCSSは変数名を書き換えず、 セレクタのスコープ付与だけで動く。 ============================================================================ */ /* ══ botch — 夜藍と琥珀 ═══════════════════════════════════════════════════ */ html[data-app="botch"]{ color-scheme: dark; --bg : #0e1220; /* 旧 --night-0 */ --surface : #141a2c; /* 旧 --night-1 */ --surface-2 : #1b2338; /* 旧 --night-2 */ --fg-1 : #ece9e1; /* 旧 --ink */ --fg-2 : #8b93a8; /* 旧 --ink-mute */ --fg-3 : #5c6379; /* 旧 --ink-faint */ --rule : rgba(255,248,236,.10); /* 旧 --panel-line */ --rule-2 : rgba(255,248,236,.06); /* 派生値（--rule の 0.6 倍） */ --accent : #f2c987; /* 旧 --glow */ --accent-2 : #ffe7b4; /* SVG radialGradient 中心の実値 */ --accent-soft : rgba(242,201,135,.16); /* 旧 --glow-soft */ --accent-line : rgba(242,201,135,.28); /* 旧 --glow-line */ --accent-ink : #0e1220; --shadow-card : 0 24px 60px -24px rgba(0,0,0,.65); /* 端末フレームの実値 */ --font-display: "Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif; --font-num : var(--font-display); --btn-r : var(--r-md); /* 公式バッジ（角丸約8px）の隣なので矩形 */ /* --- レガシー別名（botch のCSSを変数名そのままで動かすための橋） --- */ --night-0:var(--bg); --night-1:var(--surface); --night-2:var(--surface-2); --glow:var(--accent); --glow-soft:var(--accent-soft); --glow-line:var(--accent-line); --ink:var(--fg-1); --ink-mute:var(--fg-2); --ink-faint:var(--fg-3); --panel:rgba(255,251,243,.055); /* 旧 --panel は実値のまま残す */ --panel-line:var(--rule); } /* botch 固有の直書き色（アプリCSS側でそのまま使う。テーマには昇格させない） #d99a45 SVG外周 / #e08a7d フォームエラー / rgba(232,228,220,.34) と .6 ＝「ブラウザで開く」ボタンの灰枠 （公式バッジと張り合わせない意図的な選択なので琥珀にしない） */ /* ══ Pareidol — 生成りと空 ════════════════════════════════════════════════ */ html[data-app="pareidol"]{ color-scheme: light; --bg : #faf5ec; /* 旧 --cream */ --surface : #fffdf9; /* 旧 --cream2 */ --surface-2 : #d8e7f7; /* 旧 --sky-soft */ --fg-1 : #31435a; /* 旧 --ink */ --fg-2 : #5a6c80; /* 旧 --ink2 */ --fg-3 : #7d8a9a; /* 旧 --mut */ --rule : #e3dccb; /* 旧 --line */ --rule-2 : #ece6d8; /* 旧 --line2 */ --accent : #5d8fc4; /* 旧 --sky-deep */ --accent-2 : #85b7eb; /* 旧 --sky */ --accent-soft : #d8e7f7; /* 旧 --sky-soft */ --accent-line : #85b7eb; --accent-ink : #ffffff; --shadow-card : 0 6px 22px rgba(49,67,90,.10); --font-display: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; --font-num : var(--font-body); --btn-r : var(--r-md); /* --- レガシー別名 --- */ --cream:var(--bg); --cream2:var(--surface); --ink:var(--fg-1); --ink2:var(--fg-2); --mut:var(--fg-3); --sky:var(--accent-2); --sky-deep:var(--accent); --sky-soft:#d8e7f7; --line:var(--rule); --line2:var(--rule-2); --sans:var(--font-body); --mincho:var(--font-display); /* ★★★ 名前衝突の解消（移植前に必ずやる） ★★★ Pareidol の旧 --accent は #c4763b（リンクホバーのテラコッタ）で、 シェルの --accent（＝主アクセント）と意味が全く違う。 pareidol.css の中の var(--accent) を **すべて** var(--accent-hover) に 一括置換したうえで、ここで定義する。置換を忘れると ホバー色が空色になり、テラコッタが消える。 */ --accent-hover: #c4763b; } /* Pareidol 固有の直書き色：#b45f4a フォームエラー / rgba(74,62,60,.14) styles-viewer の影 / rgba(250,245,236,.92) style-tag の地 */ /* ══ こぼれび — 紙と弁柄 ═════════════════════════════════════════════════ */ html[data-app="koborebi"]{ color-scheme: light; --bg : #F7F4EC; /* 旧 --bg（LP側の値を正とする） */ --surface : #FDFBF5; /* 旧 --card */ --surface-2 : #EFECE4; /* 派生値（--bg に --fg-1 を4%） */ --fg-1 : #26231C; /* 旧 --ink */ --fg-2 : #8E866F; /* 旧 --muted */ --fg-3 : #A59D89; /* 旧 --faint */ --rule : #E0DACA; /* 旧 --edge */ --rule-2 : #EAE6D9; /* 派生値（--rule と --bg の 55:45） */ --accent : #A34A38; /* 旧 --bengara */ --accent-2 : #C4A96A; /* 旧 --gold */ --accent-soft : rgba(163,74,56,.10); --accent-line : rgba(163,74,56,.25); /* CTAボタンの影の実値と同アルファ */ --accent-ink : #F2E7D8; /* 印章「灯」の文字色。落款がそのまま再現される */ --shadow-card : 0 6px 22px rgba(38,35,28,.10); --font-display: "Shippori Mincho","Hiragino Mincho ProN",serif; --font-num : "Cormorant","Times New Roman",Georgia,serif; /* 条番号 01〜15 */ --btn-r : var(--r-pill); /* こぼれび だけピル（既存の見え方を維持） */ /* --- レガシー別名 --- */ --card:var(--surface); --ink:var(--fg-1); --muted:var(--fg-2); --faint:var(--fg-3); --bengara:var(--accent); --gold:var(--accent-2); --edge:var(--rule); --serif:var(--font-display); --latin:var(--font-num); --sans:var(--font-body); } /* こぼれび 固有の直書き色：#F7F1E8 CTAボタンの文字 / rgba(38,35,28,.14) 印章の影 / rgba(38,35,28,.10) スクショの影 ★ privacy.html 専用パレット（#F4EFE4 / #23211C / #C24B3A / #E6DCC9 / #FBF8F1 / #6F665A / #9A8E7C / #A2937D / #B4A88E / #D8C9AC / #F1EBDD）は **全部捨てる**。LP から法務ページへ飛んだ瞬間に紙の色と朱が変わる現行の 事故が直る。本文フォントも Noto Sans JP → 共通 Zen Kaku Gothic New。 インラインSVG（2円のマーク）の #90A2AC/#6A828F/#44606F/#E1CD9D/#C4AB73/ #AD9258/#ECE3CC は残す（id に koborebi- プレフィックスを付ける）。 */ /* ══ アプリCSSの書き換え規則（3本共通・機械的にやれる） ═══════════════════ 1. 裸の要素セレクタを削除：html{} body{} a{} section{} h1{} *{box-sizing…} 特に危険：Pareidol の section{max-width:900px;padding:64px} こぼれび privacy の header/main/footer/ol/li/h1/h2/.brand/.div/ .foot/.body/.row/.num → こぼれび privacy は実質書き直し。条文だけ抜いて共通 .doc に載せる。 2. 残る全セレクタの頭に html[data-app="xxx"] を付ける。 LP専用は html[data-app="xxx"] .lp 配下へ。 3. html{background} / body{background} / body{overflow-x} をアプリ側から削除。 shell.css §3 が同じことをしている。 4. 変数名は書き換えない（上のレガシー別名で解決済み）。 唯一の例外が Pareidol の --accent → --accent-hover の一括置換。 5. 3LPとも持っている a{color;text-decoration} と、その打ち消し （botch 6箇所 / Pareidol の .btn:hover 等）は削除。 shell.css §3 のリンク規則が肩代わりする。 ======================================================================== */