@charset "UTF-8"; /* ========================================================================== themes.css — 記事の内容に合わせた配色セット（要望④） -------------------------------------------------------------------------- 使い方: のようにクラスを 1 つ付けるだけ。 base.css で定義した CSS 変数を上書きするので、レイアウトや余白はどのテーマでも完全に同じまま、色の印象だけが変わる（＝統一感を保つ）。新しいテーマを足すときの決まりごと: - 変数は必ず「全部」書く。一部だけ上書きすると、前のテーマの色が混ざって読みにくい組み合わせが生まれるため。 - 本文色と背景色のコントラスト比は 7:1 以上（WCAG AAA 相当）を目安にする。子どもが読むページなので、薄い文字は避ける。 ========================================================================== */ /* -------------------------------------------------------------------------- 宇宙・天文 — 夜空の黒と星の青白さ -------------------------------------------------------------------------- */ body.theme-space { --bg: #06080f; --bg-elev: #101529; --bg-sunken: #0b0f1d; --fg: #e9ecf6; --fg-muted: #a8b0c8; --accent: #8fb6ff; --accent-ink: #06080f; --border: #2a3352; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.55); --focus: #ffd479; } /* 星空の背景。画像を使わず CSS のグラデーションだけで描いているので、誰かの写真を転載する心配がなく、読み込みも速い。 */ body.theme-space { background-image: radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.75), transparent 60%), radial-gradient(1.2px 1.2px at 68% 8%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1.6px 1.6px at 84% 42%, rgba(255,255,255,.65), transparent 60%), radial-gradient(1.1px 1.1px at 32% 62%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1.5px 1.5px at 52% 88%, rgba(255,255,255,.6), transparent 60%), radial-gradient(1.2px 1.2px at 8% 76%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1200px 700px at 78% -8%, rgba(84,110,220,.20), transparent 70%), radial-gradient(900px 600px at 6% 108%, rgba(150,80,200,.16), transparent 70%); background-attachment: fixed; } /* -------------------------------------------------------------------------- 生きもの・自然 — 葉の緑と土のベージュ -------------------------------------------------------------------------- */ body.theme-nature { --bg: #f4f8ef; --bg-elev: #ffffff; --bg-sunken: #e6efdd; --fg: #1d2b19; --fg-muted: #4f6247; --accent: #2f7d3e; --accent-ink: #ffffff; --border: #cadcbe; --shadow: 0 1px 2px rgba(31,60,25,.06), 0 8px 24px rgba(31,60,25,.08); --focus: #b4531f; } /* -------------------------------------------------------------------------- 歴史・むかしの話 — 古い紙のセピア -------------------------------------------------------------------------- */ body.theme-history { --bg: #f6efe1; --bg-elev: #fffaf0; --bg-sunken: #ece0c9; --fg: #2b2318; --fg-muted: #6b5b43; --accent: #8a5a2b; --accent-ink: #fffaf0; --border: #d9c8a6; --shadow: 0 1px 2px rgba(70,50,20,.07), 0 8px 24px rgba(70,50,20,.09); --focus: #1f5fa8; } /* -------------------------------------------------------------------------- 技術・コンピュータ — 夜の作業机のような濃紺 -------------------------------------------------------------------------- */ body.theme-tech { --bg: #0f1418; --bg-elev: #18212a; --bg-sunken: #131b22; --fg: #e6edf3; --fg-muted: #9fb0bf; --accent: #56c8b0; --accent-ink: #0f1418; --border: #2b3944; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.5); --focus: #ffd479; } /* -------------------------------------------------------------------------- 海・水 — 深い青と砂の白 -------------------------------------------------------------------------- */ body.theme-ocean { --bg: #eef6fa; --bg-elev: #ffffff; --bg-sunken: #d9ebf4; --fg: #10262f; --fg-muted: #3f6070; --accent: #14607f; --accent-ink: #ffffff; --border: #b9d7e5; --shadow: 0 1px 2px rgba(10,50,70,.07), 0 8px 24px rgba(10,50,70,.09); --focus: #c2410c; } /* -------------------------------------------------------------------------- からだ・健康 — やわらかい暖色 -------------------------------------------------------------------------- */ body.theme-body { --bg: #fdf3f1; --bg-elev: #ffffff; --bg-sunken: #f7e2dd; --fg: #2c1d1b; --fg-muted: #6b4b46; --accent: #b23a48; --accent-ink: #ffffff; --border: #eccdc6; --shadow: 0 1px 2px rgba(80,30,25,.06), 0 8px 24px rgba(80,30,25,.08); --focus: #1f5fa8; }