/* Theme Name: RockinMe Base Description: RockinMeコアプラグイン向けの汎用baseテーマ（骨格）。配色hex・フォント名・コピーは一切含まない。すべてtenant-config（label-config層）からCSSカスタムプロパティとして注入される（functions.php参照）。レーベルモード／アーティストモードの出し分けにも対応。 Author: Five Magics Inc. Version: 0.9.0 Text Domain: rockinme-base */ /* * 重要: このファイルには配色hex値・フォントファミリー名を一切書かない。 * :root のCSSカスタムプロパティ（--color-*, --font-*）は * functions.php の rockinme_base_inline_tokens() が、アクティブな * tenant-configの値から動的に生成してに出力する。 * これにより、baseテーマ本体を一切変更せずにtenant-configの差し替えだけで * 別レーベル・別アーティストの配色に切り替えられる（設計原則の絶対条件）。 */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--color-canvas); color:var(--color-ink); font-family:var(--font-body); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} a:focus-visible, button:focus-visible{outline:2px solid var(--color-accent-2);outline-offset:3px;} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .wrap{max-width:1240px;margin:0 auto;padding:0 32px;} @media (max-width:640px){.wrap{padding:0 20px;}} /* ---------- NAV ---------- */ /* ヘッダー全体をスクロール追従（sticky）にする。site-headerは常にビューポート 全幅で背景色を敷き、中のsite-navだけを.wrapで中央寄せの最大幅にする （sticky時に左右の余白が透けないようにするため）。 */ .site-header{ position:sticky; top:0; z-index:100; background:var(--color-canvas); border-bottom:1px solid var(--color-line-dark); } nav.site-nav{ display:flex;align-items:center;justify-content:space-between; padding:18px 32px; gap:16px; position:relative; } .wordmark{ font-family:var(--font-display); font-size:1.4rem; letter-spacing:0.01em; display:flex;align-items:baseline;gap:8px; flex-shrink:0; } .wordmark .bang{color:var(--color-accent-1);} /* レーベルロゴ（SVG、2026-08新設）。設定されている場合、ナビのワードマークで テキストの代わりに表示する（.wordmark.has-logoの時のみ）。ロゴの fill="currentColor"は.wordmarkの文字色に自動追従する（単色ロゴの場合。 このロゴのように内部で独自の色を持つSVGはそちらが優先される）。 2026-08-10、Jackyさんの指示でテキスト時より大きく表示するよう変更 （高さはもはやテキストのfont-sizeに揃えていない）。 同日、「まだ小さい」とのフィードバックを受け2.4rem→4remへさらに拡大 （1段階目からさらに約1.7倍）。 */ .wordmark.has-logo{align-items:center;} /* 2026-08-10、Jackyさんの要望でサイズをハードコードから設定可能に変更。 --logo-size-nav等はGeneral Settingsの「Logo Sizes」から設定でき、 functions.phpのrockinme_base_inline_tokens()がにCSS変数として 出力する。未設定時はこれまで通りのデフォルト値（var()の第2引数）に フォールバックする。 */ .wordmark-logo{display:block;height:var(--logo-size-nav, 4rem);width:auto;} .wordmark-logo svg{height:100%;width:auto;max-width:100%;display:block;} @media (max-width:800px){.wordmark-logo{height:var(--logo-size-nav-mobile, 3.2rem);}} .nav-links{display:flex;gap:32px;align-items:center;} /* 2026-08、ナビをWP標準のwp_nav_menu()に置き換えた際（Jackyさんの要望: 外観 > メニューで編集できるようにしたい）に追加。標準の出力は