@charset "UTF-8"; /* ========================================================================== LUMO — テーマ切り替え（Dark / Light）用の上書き -------------------------------------------------------------------------- style.css の「あと」に読み込むこと。 theme-switch.js が を書き換えて切り替える。 dark … 既定。style.css の :root がそのまま効くので上書き不要。 light … ライトテーマ。ロゴと同じ明暗関係。#DADADA / #303030 ========================================================================== */ /* -------------------------------------------------------------------------- light — ライトテーマ（ロゴと同じ明暗関係） -------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #DADADA; --bg-deep: #CFCFCF; --surface: #E6E6E6; --surface-2: #EFEFEF; --text: #303030; --dim: #5F5F5F; --faint: #8A8A8A; --line: rgba(var(--text-rgb), 0.18); --line-soft: rgba(var(--text-rgb), 0.09); --bg-rgb: 218, 218, 218; --bg-deep-rgb: 207, 207, 207; --surface-rgb: 230, 230, 230; --text-rgb: 48, 48, 48; /* 明るい地では金色が飛ぶので、濃いゴールドに差し替える */ --glint: #8A6415; --glint-glow: rgba(138, 100, 21, 0.28); } /* 暗闇に光が差す前提の演出はライトでは成立しないため止める */ :root[data-theme="light"] .hero-glow, :root[data-theme="light"] .hero-grain { display: none; } /* ロゴPNGが明るい色の場合、ライトでは反転させて見えるようにする。 最初から濃色のロゴを使うなら、この2ブロックを削除する。 */ :root[data-theme="light"] .brand-mark, :root[data-theme="light"] .footer-brand img, :root[data-theme="light"] .cta-mark img, :root[data-theme="light"] .hero-mark img { filter: invert(1); } /* ========================================================================== 切り替えパネル本体 ========================================================================== */ .theme-switch { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(var(--bg-rgb), 0.92); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; } .theme-switch b { padding-inline: 8px; font-weight: 400; color: var(--faint); } .theme-switch button { padding: 7px 12px; border-radius: 999px; color: var(--dim); text-transform: uppercase; transition: background-color 0.25s ease, color 0.25s ease; } .theme-switch button:hover { color: var(--text); } .theme-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); } @media (max-width: 600px) { .theme-switch { right: 10px; bottom: 10px; } .theme-switch b { display: none; } .theme-switch button { padding: 7px 10px; } } /* -------------------------------------------------------------------------- light テーマでは CTA帯の反転が二重になるため、逆向き（ダーク）に戻す -------------------------------------------------------------------------- */ :root[data-theme="light"] .cta-band { --bg: #1F1F1F; --bg-deep: #1A1A1A; --surface: #303030; --surface-2: #363636; --text: #DADADA; --dim: #9D9D9D; --faint: #6E6E6E; --bg-rgb: 31, 31, 31; --bg-deep-rgb: 26, 26, 26; --surface-rgb: 48, 48, 48; --text-rgb: 218, 218, 218; --glint: #FFE3B8; --glint-glow: rgba(255, 227, 184, 0.35); } /* light では上のロゴ反転指定と CTA の反転指定が打ち消し合う */ :root[data-theme="light"] .cta-band .cta-mark img { filter: none; }