/* ============================================================ theme.css — カラー上書きレイヤー（style.css の後に読み込む） ------------------------------------------------------------ ■ 目的: 白×墨黒の単調さを、生成り紙＋ゴールド差し色＋香調カラーで解く ■ リバート: base.html のこのを1行消すだけで完全に元の白黒へ戻る ■ 差し色の切替: を bordeaux / sage に変える （未指定でも gold が既定） ============================================================ */ /* ---------- 1. 生成り紙＋温墨（ライト） ---------- */ :root { --bg: #faf8f4; /* 生成り紙 */ --surface: #ffffff; /* カードは白で浮かせる */ --surface2: #f3efe7; /* 温かいニュートラル面 */ --border: #e9e3d8; --border-accent: #d8d0c1; --text: #1c1813; /* 茶を含んだ墨 */ --text2: #8b8276; /* 温グレー */ --shadow: 0 1px 3px rgba(60,45,25,.06); --shadow-hover: 0 16px 40px rgba(60,45,25,.10); } /* ヘッダーの半透明背景も生成りに追従 */ .header { background: rgba(250,248,244,.85); } /* ---------- 2. 差し色（accent）— 既定ゴールド ---------- */ /* --accent は style.css 全体で「ラベル・CTA・★・強調・アクティブ」に使われる。 ここを金にすると、見出し本文は墨のまま、要所だけ金が差してエディトリアルになる。 */ :root, [data-accent="gold"] { --accent: #a67c43; /* アンティークゴールド */ --accent-hover: #8a6531; --blue: #9a8f7c; /* 副ニュートラルも温める */ --blue-hover: #a67c43; --blue-light: rgba(166,124,67,.10); --pink: #c7b9a3; --pink-light: rgba(166,124,67,.07); } [data-accent="bordeaux"] { --accent: #8a3344; /* ボルドー／ワイン */ --accent-hover: #6f2636; --blue: #9a8f7c; --blue-hover: #8a3344; --blue-light: rgba(138,51,68,.08); --pink: #c9a6ad; --pink-light: rgba(138,51,68,.06); } [data-accent="sage"] { --accent: #5f7350; /* セージ */ --accent-hover: #4c5d40; --blue: #8d917f; --blue-hover: #5f7350; --blue-light: rgba(95,115,80,.10); --pink: #b3bca6; --pink-light: rgba(95,115,80,.06); } /* ---------- 3. 温かいダーク ---------- */ [data-theme="dark"] { --bg: #14110c; --surface: #1b1712; --surface2: #221d16; --border: #332c22; --border-accent: #483d2f; --text: #f1ece2; --text2: #a39a89; --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-hover: 0 16px 40px rgba(0,0,0,.55); } [data-theme="dark"] .header { background: rgba(20,17,12,.85); } /* ダークは金を明るめにして光らせる */ [data-theme="dark"], [data-theme="dark"][data-accent="gold"] { --accent: #cba368; --accent-hover: #ddb87f; --blue-light: rgba(203,163,104,.12); --pink-light: rgba(203,163,104,.08); } [data-theme="dark"][data-accent="bordeaux"] { --accent: #cc6d7e; --accent-hover: #db8593; --blue-light: rgba(204,109,126,.12); --pink-light: rgba(204,109,126,.08); } [data-theme="dark"][data-accent="sage"] { --accent: #9bb087; --accent-hover: #aec39a; --blue-light: rgba(155,176,135,.12); --pink-light: rgba(155,176,135,.08); } /* ---------- 4. 細部の金の効かせ方 ---------- */ /* ヒーローの飾り罫を金に */ .hero::before { opacity: 1; } /* ロゴ英字キャプションをほのかに金へ */ .logo-en { color: var(--accent); opacity: .7; } /* 検索ボタン・ヒーローCTAなど墨背景のボタンは金に乗せ替え */ .search-form button, .btn-hero { background: var(--accent); } .search-form button:hover { background: var(--accent-hover); opacity: 1; } /* ステップ帯（黒背景）の見出しは金のキッカーで締める */ .ng-band .ng-kicker { color: var(--accent); } .ng-step:hover { border-color: var(--accent); } /* ★レーティングは金で */ .ng-stars, .fdetail-stars { color: var(--accent); } /* ---------- 5. 香調カラーコード ---------- */ /* frag_card に inline で渡す --tone（=f.tone.c）を、色ドットとして露出。 写真カードでも香りの系統色が必ず1点入る。 */ .ng-feature { --tone: var(--border-accent); } .ng-feature .ng-accords { display: flex; align-items: center; } .ng-feature .ng-accords::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); margin-right: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 16%, transparent); } /* カード上端に香調色のヘアラインを忍ばせる（hoverで出現） */ .ng-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); border-radius: 16px 16px 0 0; opacity: 0; transition: opacity .35s; z-index: 3; } .ng-feature:hover::before { opacity: 1; } /* 詳細ページのノート見出し（dt）に香調ドットを添える素地 */ .fnotes-row dt { display: flex; align-items: center; gap: 7px; }