/* ========================================================================= VNJ DESIGN TOKENS — valorantnews.jp 確定版のデザイントークン。全コンポーネントはこの変数を参照します。 テーマは で切り替え。 ========================================================================= */ /* フォントは functions.php の 'vnj-fonts' で一括enqueue（重複・@importによる描画ブロックを廃止） */ :root{ /* ---- COLOR (DARK = デフォルト) ---- */ --vnj-bg:#0F1923; --vnj-bg-2:#15212F; --vnj-panel:#1A2A39; --vnj-panel-2:#213140; --vnj-line:rgba(236,232,225,.10); --vnj-line-strong:rgba(236,232,225,.18); --vnj-text:#ECE8E1; --vnj-dim:#8B9BA8; --vnj-faint:#566773; --vnj-red:#ECE8E1; /* 主アクセント＝モノトーン(オフホワイト)。変数名は互換のため据置 */ --vnj-on:#0F1923; /* アクセント塗りの上の文字色（ダーク＝暗色） */ --vnj-cyan:#AEB8C2; /* 副アクセント＝グレー（旧シアン） */ --vnj-gold:#E6B450; /* PR / 注意（機能色として維持） */ --vnj-shadow:rgba(0,0,0,.5); /* ---- TYPOGRAPHY ---- */ --vnj-ff-disp:"Rajdhani","Noto Sans JP",sans-serif; /* 英字ラベル・UI（JPフォールバックはNoto） */ --vnj-ff-num:"Teko",sans-serif; /* 大きな数字・スコア飾り */ --vnj-ff-head:"Noto Sans JP",sans-serif; /* 見出し（サイト共通）：日本語=Noto */ --vnj-ff-body:"Noto Sans JP",sans-serif; /* 本文（サイト共通）：日本語=Noto */ --vnj-ff-article:"Noto Sans JP",sans-serif; /* ★記事専用：記事タイトル/記事一覧タイトル/本文。Outfit廃止→Noto Sans JPに統一 */ --vnj-ff-mono:"JetBrains Mono",monospace; /* メタ・ID・時刻・スコア */ --vnj-fs:1; /* Tweakの文字サイズ倍率 */ /* ---- SPACING SCALE ---- */ --vnj-sp-1:4px; --vnj-sp-2:8px; --vnj-sp-3:12px; --vnj-sp-4:16px; --vnj-sp-5:22px; --vnj-sp-6:30px; --vnj-sp-7:44px; --vnj-sp-8:64px; /* ---- RADII / SHAPE ---- */ --vnj-cut:8px; /* 角落とし量（VALORANTのHUD感） */ --vnj-clip-tab:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%); /* カテゴリタブ */ --vnj-clip-btn:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px); /* ボタン */ --vnj-maxw:1140px; /* 外側コンテナ最大幅（front/single 共通） */ --vnj-pad:24px; /* 外側コンテナ左右padding（front/single 共通） */ --vnj-prose:740px; /* 記事本文(prose)カラムの最大幅＝日本語の行長を抑える */ } /* ---- LIGHT（さらに明るいライトグレー・寒色寄り） ---- */ [data-theme="light"]{ --vnj-bg:#FAFBFD; --vnj-bg-2:#FDFEFF; --vnj-panel:#FFFFFF; --vnj-panel-2:#F3F5F8; --vnj-line:rgba(16,28,48,.09); --vnj-line-strong:rgba(16,28,48,.18); --vnj-text:#101C30; --vnj-dim:#46536A; --vnj-faint:#8492A8; --vnj-red:#101C30; /* 主アクセント＝モノトーン(ニアブラック) */ --vnj-on:#FFFFFF; /* アクセント塗りの上の文字色（ライト＝白） */ --vnj-cyan:#46536A; /* 副アクセント＝グレー（旧シアン） */ --vnj-gold:#B07E12; --vnj-shadow:rgba(16,28,48,.14); } /* ---- BLAZE（レッド主役の高コントラスト・ダーク） ---- */ [data-theme="blaze"]{ --vnj-bg:#1A0F12; --vnj-bg-2:#241419; --vnj-panel:#2D1C22; --vnj-panel-2:#3A242C; --vnj-line:rgba(255,90,80,.16); --vnj-line-strong:rgba(255,90,80,.3); --vnj-text:#F6EAE8; --vnj-dim:#C99AA0; --vnj-faint:#8A5C62; --vnj-red:#FF4655; --vnj-on:#FFFFFF; /* blaze＝VALORANT赤モード（赤塗りの上は白文字） */ --vnj-cyan:#FF9A3C; --vnj-gold:#FFB347; --vnj-shadow:rgba(0,0,0,.6); }