/* ========================================================= biz-overrides.css --------------------------------------------------------- Neutrope Biz サイト全体スコープのちょい足し / 上書き集。 特定 CPT (honne_phrase 等) や特定機能 (sticky mascot 等) に閉じない、全ページで効くべきローカライズ・微調整を ここに集約する。 現在のスコープ: - .nt-card.is-preparing の表示文言を日本語化 将来 site-wide な追加が出た時もこのファイルに足していく。 ========================================================= */ /* Parent Neutrope Starter は配布版として default を "Coming soon" にしている。Neutrope Biz は日本語サイトなので 「準備中」に上書きする。 注意: 親テーマは .nt-card.is-preparing 自身に直接 `--nt-preparing-label: "Coming soon"` を宣言している。 CSS variable は要素自身の宣言が祖先継承より優先されるため、 body { --nt-preparing-label: "準備中" } は効かない。 同じセレクタ `.nt-card.is-preparing` で再宣言して、 cascade (= biz-overrides.css は親 CSS より後にロードされる) で上書きする。 */ .nt-card.is-preparing { --nt-preparing-label: "準備中"; } /* ========================================================= .nt-cta カード化 (Neutrope Biz 固定ページ末尾 CTA 共通) --------------------------------------------------------- 親テーマ .nt-cta の青系背景 + 白文字 (--nt-bg-cta / --nt-fg-cta) はそのまま維持する。固定ページ本文 (Gutenberg ブロック) で出力される CTA に対して、角丸・余白・shadow・ border の質感だけを上品に整えてカード型のシルエットに寄せる。 スコープ: - .wp-block-group.nt-cta で「Gutenberg ブロック出力の CTA」 にのみ当てる。固定ページ本文の
パターン (Home / Products / Services / CF7 Lead Desk など) が対象。 - archive-honne_phrase.php のような PHP テンプレートで直接 出力される
型は対象外にして、 親テーマ既定のフルブリードセクションのまま維持する。 方針: - background は指定しない (親の青を維持) - .nt-cta__title / .nt-cta__lead の color / 文字スタイル も指定しない (親の白文字系を維持) - border / shadow は青背景に乗せて違和感が出ない 白の薄いハイライト線 + ダークドロップ系の組み合わせ 構造的な前提: - Home / Products / Services / CF7 Lead Desk すべて、
に内包された
構造になっている (Home / Products / Services は今回 alignfull 型から本 構造へリファクタ済み)。 - そのため .wp-block-group.nt-cta 自身では幅制御せず、 親 .nt-container の max-width: var(--nt-container) (1120px) にそのまま乗る。CSS で max-width を二重に書かない。 .wp-block-group.nt-cta は specificity 0,2,0 で親テーマの .nt-cta (0,1,0) より高く、!important なしで安全に上書き できる。biz-overrides.css は cascade 的にも親 CSS の後に ロードされる。 */ .wp-block-group.nt-cta { /* .nt-card と border-radius を揃える (var(--nt-radius-md) = 16px)。 前回 24px は Free / Pro カードや「今後の予定」カードの nt-card と比べて角丸が大きく見えていた問題を解消する。 */ border-radius: var(--nt-radius-md); /* 青背景に薄い白ハイライトで「縁取り」感を出す。色そのものを 変えずにエッジを立てる役割で、ダーク CTA の見え方は維持。 */ border: 1px solid rgba(255, 255, 255, 0.18); /* 強すぎず、ページに対して CTA が一段浮き上がる程度の 柔らかいドロップシャドウ。slate-900 系のニュートラル ダークを軽く差して青背景でも違和感が出ないようにする。 */ box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16); /* 親 .nt-cta の padding-block: var(--nt-section-y) は フルセクション用に大きすぎる。カードらしいゆったり サイズに上書きし、横方向にも padding を確保して タイトル / リード文がカード端に張り付かないように。 */ padding-block: clamp(40px, 5vw, 64px); padding-inline: clamp(24px, 5vw, 56px); } .wp-block-group.nt-cta .nt-cta__actions { /* タイトル / リード文との視覚的なリズムを少しゆったりに。 親の margin-top: var(--nt-gap) より気持ち広く取り、 「結論ボタン」の存在感を出す。文字色やボタン色は親の ダーク CTA 用ルールをそのまま使う。 */ margin-top: 2em; } /* CTA 内の filled ボタンを、サイト共通の標準ボタン (is-style-outline--N が出力する 0.667em 1.33em padding) と縦の存在感を揃える。親テーマ blocks.css の .wp-block-button__link 既定 padding は 0.45em 1.4em で、 そのままだと CTA filled が縦に薄く見えてしまう。 :not(.is-style-outline) でスコープを切ることで、CTA 内に 万一 outline ボタンが置かれてもそちらの padding は触らない。 背景・文字色・border は親 .nt-cta の filled ボタン rule (--nt-color-primary 系) をそのまま継承する。 */ .wp-block-group.nt-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link { padding: 0.667em 1.6em; } /* SP では padding を控えめにして、画面端との余白が窮屈に ならないようにする。border-radius は PC と同じ var(--nt-radius-md) (16px) のまま (nt-card の SP も同値で 揃う)。border / shadow / 背景 / 文字色 / ボタン padding は PC と同じものを継承する。 */ @media (max-width: 600px) { .wp-block-group.nt-cta { padding-block: clamp(28px, 6vw, 40px); padding-inline: clamp(20px, 5vw, 28px); } } /* ========================================================= Footer menu alignment --------------------------------------------------------- 親テーマ既定の .nt-footer__main 配下は brand / nav / contact / bottom の縦並びになっており、「お問い合わせ」「プライバシー ポリシー」のリンクが中央列に取り残されて見えてしまう。 Neutrope Biz では PC ではコンテンツ幅内の右端に横並び、SP で は中央寄せに揃えて、ブランドロゴ (左) と menu (右) のバランス を取る。 Cowork 側で live DOM に CSS 注入して見た目を検証済の値。 フッター以外 (header / cta / honne-jiten 等) には影響しない よう .nt-footer__* スコープに閉じる。 ========================================================= */ .nt-footer__main { display: flex; flex-direction: column; align-items: center; gap: var(--nt-gap); text-align: center; } .nt-footer__brand { margin: 0; } .nt-footer__nav { width: 100%; } .nt-footer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; list-style: none; margin: 0; padding: 0; } .nt-footer__menu a { text-decoration: none; } @media (min-width: 720px) { .nt-footer__main { flex-direction: row; align-items: flex-start; justify-content: flex-start; column-gap: 0; text-align: left; } .nt-footer__brand { margin-right: auto; } .nt-footer__nav { width: auto; margin-left: auto; } .nt-footer__menu { justify-content: flex-end; } } /* ========================================================= Card outline button (.nt-card .is-style-outline) --------------------------------------------------------- 問題: WordPress core が出力する global-styles-inline-css に `:root :where(.wp-element-button, .wp-block-button__link) { background-color: #32373c; color: #fff; ... }` というルールが入っており、これがアウトラインボタンの `:where(.wp-block-button.is-style-outline > ... :not(.has-background)) { background-color: initial; }` と specificity (0,1,0 同等) が等しく、ロード順が後の global-styles が勝つ結果、Home / Products / Services / Contents のカード内ボタンが「黒ベタ + 白文字」になっていた。 対策: .nt-card 配下に限定して specificity 0,4,0 で 明示的に透明背景 + 薄い border + 本文色のアウトラインに 戻す。CTA セクション内のボタン (.nt-cta 配下) には影響 しないので、青 CTA + filled の primary ボタンは現状維持。 詳細ページ側で使われている `is-style-outline--1`〜 `is-style-outline--5` の block-style-variation 専用ボタン (こちらは .nt-card 外、別の inline CSS で 0.667em 1.33em padding + currentColor border) にも影響しない。 ホバー / focus 時: - 背景は primary 6% の薄い tint (#2563eb @ 6% alpha) - border 色を primary 45% に上げて反応を示す - 文字色は本文色のままで、テキストが見えなくなる コントラスト低下は起きない ========================================================= */ .nt-card .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--nt-color-text); border: 1px solid color-mix(in srgb, var(--nt-color-text) 22%, transparent); } .nt-card .wp-block-button.is-style-outline > .wp-block-button__link:hover, .nt-card .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background: color-mix(in srgb, var(--nt-color-primary) 6%, transparent); color: var(--nt-color-text); border-color: color-mix(in srgb, var(--nt-color-primary) 45%, transparent); } /* ========================================================= Section background utility classes --------------------------------------------------------- Home / Products / Services / Contact / Contents の特定セクションに 付与して、淡い背景色をつけるためのユーティリティクラス。 固定ページ本文の wp:group 側 (className) で指定し、インライン style は使わない方針。親テーマ .nt-section--alt (var(--nt-color-surface) = #f8fafc) と併用しても、specificity が 等しいため後勝ちで本クラスの色が優先される。 - .nbc-section-bg-soft : #f8fbff (ほんのり青みの淡いオフホワイト) - .nbc-section-bg-blue : #eef6ff (淡い青、CTA / 一覧トップ用) ========================================================= */ .nbc-section-bg-soft { background: #f8fbff; } .nbc-section-bg-blue { background: #eef6ff; } /* ========================================================= Home (page-id-35) only: page-wide soft background --------------------------------------------------------- トップページ全体のベース背景を #f8fbff にして、Hero と各 セクションの間で色のチラつきが起きないようにする。 スコープは body.page-id-35 (= Home のみ) に閉じる。 下層ページ (Products / Services / Contact / Contents / 各 detail / 本音辞典) には一切影響しない。 親テーマの .nt-section--alt は --nt-color-surface (#f8fafc) を 背景に当てるが、Home 上ではその色がページバック (#f8fbff) と 微妙にずれて見えるため、Home に限り .nt-section--alt の 背景もページバックに揃える (= ユーザー指示「CONTACT 外側を ページ全体背景に馴染ませる」を SERVICES / CHILL BIZ / CONTACT 外側まで横展開)。 個別セクションに付与する .nbc-section-bg-blue (#eef6ff) は 現状の Home では PRODUCTS / CONTENTS のみで、いずれも .nt-section--alt と併用していないため、specificity 衝突は 発生しない (PRODUCTS / CONTENTS は .nt-section + .nbc-section-bg-blue のみ、.nt-section--alt なしのため本 --alt 上書きが効かない)。 */ body.page-id-35 { background: #f8fbff; } body.page-id-35 .nt-section--alt { background: #f8fbff; } /* ========================================================= CHILL BIZ peek banner (.nbc-chill-peek) --------------------------------------------------------- 画面左中央から「ひょいっ」と顔を出す /chill-biz/ への導線。 PC マウス環境でだけ、マウスが画面左 100px 以内に入ったときに slide-in + 軽くブルブル揺れる。functions.php が wp_footer で markup を出力し、chill-peek.js が .is-visible クラスを 付け外しする。 見た目: 画像そのものだけを置く透過バナー。背景・枠・影・ 角丸はすべて外し、フィルム的に画像 1 枚だけ覗き込む形。 - 通常時: viewport 外 (translateX(-112px)) に隠す - 表示時: translateX(12px) で左端から少しだけ覗かせる - 表示と同時に nbc-chill-peek-wiggle で 1 回だけ揺れる - hover 可能なポインタ (= PC) 以外、または SP では非表示 - prefers-reduced-motion: reduce では transition / animation を切る ========================================================= */ .nbc-chill-peek { position: fixed; left: 0; top: 50%; z-index: 80; width: 100px; transform: translate(-112px, -50%); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); text-decoration: none; background: transparent; border: 0; box-shadow: none; will-change: transform; } .nbc-chill-peek.is-visible { transform: translate(12px, -50%); animation: nbc-chill-peek-wiggle 0.45s ease 0.12s 1; } .nbc-chill-peek:focus-visible { transform: translate(12px, -50%); outline: 2px solid currentColor; outline-offset: 4px; } .nbc-chill-peek img { display: block; width: 100px; height: auto; border-radius: 0; box-shadow: none; background: transparent; } .nbc-chill-peek:hover img { filter: none; } /* 表示直後の小さな揺れ。.is-visible 付与後 0.12s 待ってから 0.45s で 1 サイクル、左右に微回転 + 1〜2px の水平揺らぎ。 translate(12px, -50%) を基準に動かすので、終端も同じ値で 揃えてベース transform にスムーズに戻る。 */ @keyframes nbc-chill-peek-wiggle { 0% { transform: translate(12px, -50%) rotate(0deg); } 20% { transform: translate(14px, -50%) rotate(-3deg); } 40% { transform: translate(10px, -50%) rotate(3deg); } 60% { transform: translate(13px, -50%) rotate(-2deg); } 80% { transform: translate(11px, -50%) rotate(2deg); } 100% { transform: translate(12px, -50%) rotate(0deg); } } /* SP / タッチ端末では非表示。狭い viewport で左 100px 内に常に親指が 触れて誤反応するのを避ける目的もある。 */ @media (hover: none), (pointer: coarse), (max-width: 767px) { .nbc-chill-peek { display: none; } } @media (prefers-reduced-motion: reduce) { .nbc-chill-peek { transition: none; } .nbc-chill-peek.is-visible { animation: none; } } /* ========================================================= CHILL BIZ Auto Memo article styles --------------------------------------------------------- CHILL BIZ Auto Memo プラグイン (neutrope-chill-biz-auto-memo) が生成した投稿、または同等構造で手書きされた AI 公式アップデート メモ記事に対する見た目の上書き。 有効スコープ: body に `cbam-has-release-date` クラスが付いた single post のみ (functions.php 側で post_meta `_chill_biz_original_published_at` の有無で判定して付与)。 通常 post には一切付与されないので、本セクションの宣言は 他記事に副作用ゼロ。 担当 (本セクションは見た目だけ。実体 HTML 差し替えは template-parts/content-single.php 子テーマ override 側で行う): - タイトル下マージン拡大 (タイトルと最初の H2 の間) - L 字装飾線 (左上 ┌ / 右下 ┘ の bookend) - 「公式情報」セクションを薄い枠で囲む (.cbam-official-box) - 公式記事リンクの矢印アイコン左マージン (.cbam-official-box の中の FontAwesome を少し離す) font-size:0 + ::before 等の hack は使わない。チップテキスト 「Amazon Bedrock」やラベル「発表日」は content-single.php で実体 出力する。 ========================================================= */ /* H1 タイトル下に十分な余白。最初の H2「何が発表された?」との間が 詰まって見える状況を解消する。 */ body.cbam-has-release-date .nt-article__title { margin-bottom: 1.5em; } /* 公式記事リンクの矢印 (Font Awesome) を文字の右に少しだけ離す。 .cbam-official-box の内側でだけ効くようスコープを切る。 */ .cbam-official-box a .fas, .cbam-official-box a .fa-solid { margin-left: 0.4em; font-size: 0.9em; } /* ========================================================= CHILL BIZ Auto Memo article panel background --------------------------------------------------------- 記事本文エリア (チップ / 発表日 / タイトル / 「何が発表された?」 / 「メモ」 / 「公式情報」box) をひとつのソフトな面で見せるための 背景パネル。template-parts/content-single.php 側で memo 記事の header + content 周りを
で wrap している。footer (tags) / author-card / share-bottom は panel の外側にあるので影響しない。 背景色は既存サイトパレットの var(--nt-color-surface) を流用。 現行 nt-preset-tech では #eef6ff に解決される、サイト全体の ベースバック #f8fbff (var(--nt-color-bg)) と Home の .nbc-section-bg-blue (#eef6ff) と同じ「ひとつ濃い側の青みオフ ホワイト」で、新規色は作らない。ベースバック #f8fbff の上に #eef6ff のパネルが乗ることで、装飾なしでも記事カラムが 1 段 持ち上がって見える。 横幅 (panel 自体): panel の見た目幅は「Home / CHILL BIZ など固定ページ下部の CONTACT 欄 (.nt-cta 青カード) の見える横幅」と完全に揃える。 実測 (viewport 1894): .nt-container : max-width 1120px、padding-inline 32px .nt-cta (青カード) : 1056px (= 1120 - 32*2)、これが視覚的な CONTACT 欄の幅 つまり .nt-cta の見える横幅 = var(--nt-container) - var(--nt-container-padding) * 2 という関係。padding は親テーマで clamp(16px, 4vw, 32px) なので 大画面では 32px、小画面では狭まる。calc でこの式をそのまま 使えば、CONTACT 欄と panel が必ず同じ見た目幅で揃う。 grid 配置は `grid-column: full` (= 親 .nt-article grid の [full-start]/[full-end] = 全幅トラック) + `justify-self: center` で中央寄せ。max-width で 1056px (= 上記式) に絞り、それ以上は 広がらない。これで panel は wide 列 (1120px) より少し狭い、 ちょうど CONTACT 欄と同じ横幅になる。 横幅 (panel 内側 = 本文): panel 内側の .nt-article__header / .nt-article-content は さらに max-width: var(--nt-container-narrow) (760px) + margin-inline: auto で中央寄せして、本文幅は通常記事と 完全に同じ 760px に保つ。親テーマの .nt-article-content や .nt-article__header のグローバル定義は変えていないので、 CBAM 記事以外には影響しない。 padding-block (上下) は上下に余裕を取ってチップの少し上から official-box の少し下までを 1 枚の面に乗せる。 border-radius は親テーマ既定の var(--nt-radius-md, 16px) を 流用。 ========================================================= */ body.cbam-has-release-date { --cbam-panel-bg: var(--nt-color-surface, #eef6ff); --cbam-panel-padding-top: 40px; --cbam-panel-padding-bottom: 48px; --cbam-panel-radius: var(--nt-radius-md, 16px); } body.cbam-has-release-date .cbam-article-panel { /* full 列に乗せて中央寄せ、max-width を CONTACT 欄 (.nt-cta) の 見える横幅と同じ式で決める。calc 式は var(--nt-container) - var(--nt-container-padding) * 2 で、現行 preset では 1120 - 32*2 = 1056px。padding が clamp で 小画面では縮むので、SP でも CONTACT 欄と揃って崩れない。 */ grid-column: full; justify-self: center; width: 100%; max-width: calc(var(--nt-container, 1120px) - var(--nt-container-padding, 32px) * 2); background: var(--cbam-panel-bg); border-radius: var(--cbam-panel-radius); /* padding-inline は 0: 内側の header / content は別途 max-width で 760px に絞るので、ここでは左右パディング不要。 */ padding: var(--cbam-panel-padding-top) 0 var(--cbam-panel-padding-bottom); margin-block: 16px 24px; } /* panel 内側の本文要素は max-width で content 列幅 (760px) に絞り、 中央寄せする。panel 自体は wide (1120px) に広がっているので 左右に背景の余白が見える。スコープを body.cbam-has-release-date .cbam-article-panel > ... に限定して、 通常記事や他ページの .nt-article__header / .nt-article-content には 一切影響しないようにする。 .nt-article-content は親テーマ 03-layout.css で `.nt-article-content { display: contents; }` になっており、 そのままだと box が無くて max-width が効かない (子要素が panel 直下に展開されて 1120px に広がる)。CBAM 記事内では panel 自体が grid 親ではない (素の block) ので、display: contents を block に戻して max-width を効かせる。 親テーマ全体の .nt-article-content には触らない。 */ body.cbam-has-release-date .cbam-article-panel > .nt-article__header, body.cbam-has-release-date .cbam-article-panel > .nt-article-content { max-width: var(--nt-container-narrow, 760px); margin-inline: auto; } body.cbam-has-release-date .cbam-article-panel > .nt-article-content { display: block; } /* SP では padding-block を控えめにする (padding-inline は元から 0)。 */ @media (max-width: 600px) { body.cbam-has-release-date { --cbam-panel-padding-top: 28px; --cbam-panel-padding-bottom: 32px; } body.cbam-has-release-date .cbam-article-panel { margin-block: 8px 16px; } /* SP では wide 列が container-padding まで詰まるので 内側 max-width も自動で 100% 近くまで縮む。max-width は そのまま置いておいて問題なし。 */ } /* 公式情報 box の境界 (装飾とは独立)。 */ .cbam-official-box { border: 1px solid rgba(15, 23, 42, 0.12); border-radius: var(--nt-radius-md, 16px); padding: 1.25em 1.5em; margin-top: 2.5em; background: rgba(248, 250, 252, 0.6); } .cbam-official-box h2 { margin-top: 0; } @media (max-width: 600px) { .cbam-official-box { padding: 1em 1.1em; margin-top: 2em; } body.cbam-has-release-date .nt-article__title { margin-bottom: 1.25em; } } /* ========================================================= CHILL BIZ Auto Memo: /chill-biz/ 一覧カード --------------------------------------------------------- /chill-biz/ 固定ページの `[cbam_post_list]` shortcode が出力する 一覧カードのスタイル。Query Loop は使わず、PHP 側で > 構造を直接出している (functions.php の nbc_cbam_post_list_shortcode 参照)。 構造: 既存サイトの色トークン (var(--nt-*)) のみ使用、新色なし。 ========================================================= */ .cbam-post-list { list-style: none; margin: 0; padding: 0; } .cbam-card { padding-block: 1.25em; border-bottom: 1px solid var(--nt-color-border, #dbeafe); } .cbam-card:last-child { border-bottom: 0; } .cbam-card__title { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.45; margin: 0 0 0.5em; } /* カード見出しは本文テキスト色 (var(--nt-color-text)) を既定にして 「タイトル == 読み物」感を出す。リンクであることはホバー時に primary 色 + 下線で示す。既存サイトの h リンクのトーンに揃える。 */ .cbam-card__title a { color: var(--nt-color-text, #0f172a); text-decoration: none; } .cbam-card__title a:hover, .cbam-card__title a:focus-visible { color: var(--nt-color-primary, #2563eb); text-decoration: underline; } .cbam-card__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 0.5em; color: var(--nt-color-muted, #64748b); font-size: 0.875rem; line-height: 1.5; } .cbam-card__meta-item { /* 各 meta 項目 (= 発表日 / 出典) は内部で折り返さない。 出典名が途中で省略されるのを防ぐ。横スペース不足時は item ごと改行 (flex-wrap) で次行に送る。 */ white-space: nowrap; } .cbam-card__meta-item--source { /* 出典名は長くなることがあるため、極端に長い場合だけ wrap を許可。 通常 (~30 文字以内) は nowrap で 1 行に収まる。 */ white-space: normal; } .cbam-card__meta-label { color: var(--nt-color-text, #0f172a); font-weight: 600; } .cbam-card__summary { margin: 0 0 0.75em; color: var(--nt-color-text, #0f172a); font-size: 0.95rem; line-height: 1.7; } .cbam-card__more { margin: 0; } .cbam-card__more-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--nt-color-primary, #2563eb); text-decoration: none; font-size: 0.95rem; } .cbam-card__more-link:hover, .cbam-card__more-link:focus-visible { text-decoration: underline; } .cbam-card__more-link .fas, .cbam-card__more-link .fa-solid { font-size: 0.9em; } /* Empty state (一覧 0 件のとき) と Pagination のスタイル。 paginate_links( type=list ) は