/* ============================================================ * Sound Collective — Global overrides * 単発の per-page CSS では統一しきれない、複数ページを横断するスタイルの * 上書き専用ファイル。scltv_enqueue_design_tokens() の配列の最後に追加し、 * 他の sc-*.css より後に読み込ませて確実に上書きする。 * 他のエージェントが並行編集する sc-components.php / sc-home.css / * sc-header-footer.css / catalog・events・instructors 系ファイルは * このファイルからは編集しない(クラスをターゲットするだけ)。 * ============================================================ */ /* ------------------------------------------------------------ * GitHub #30: Subscription banner/button — #272727(ダーク)+ テクスチャ + PC全幅 * Figma: fPjY95UhP1I9BIfLJQkB3s PC 2705:69251 / SP 1498:20175 * デザインは Primary(赤)一色ではなく、ダーク地(#272727)にボトム側が * 赤く発光するテクスチャを重ねたもの。テクスチャ画像は Figma のバナー実寸 * (876x98)で書き出された半透明 PNG(sc-subs-texture.png)で、上部はほぼ * 透明・下端と左右端でアルファが濃くなる赤グローになっている。よって * #272727 の上にこの画像を banner 実寸 100% 100% で敷くと、Figma 通り * 「上=ダーク / 下=赤グロー」になる。 * 対象クラス(コードベース grep で確認済み。catalog/home には購読バナーは無い): * .sc-disc-subs … /disciplines/ 一覧ページ (sc-disciplines.php) * .sc-dj-sub … /disciplines/dj/ * .sc-mp-sub … /disciplines/music-production/ * .sc-se-sub … /disciplines/studio-engineering/ * .sc-voc-sub … /disciplines/vocals/ * .sc-mb-sub … /disciplines/music-business/ * .sc-inst-sub … /disciplines/instruments/ (仮称ディシプリン) * .sc-dl-sub … ディシプリン サブリスト24ページ (sc-disciplines-list.php) * 各ページの per-page CSS は同じ単一クラスセレクタで背景色を指定しているため * (詳細は sc-discipline-*.css / sc-disciplines.css / sc-disciplines-list.css)、 * 読み込み順(このファイルが最後)だけでは詳細度が同じ他の記述に上書きされる * 可能性があるため、背景だけ !important で確実に固定する。 * url() は環境非依存の相対参照(このCSSは blocksy-child/assets/css/ にあり、 * 画像は blocksy-child/assets/images/ にある)。 */ /* ------------------------------------------------------------ */ .sc-disc-subs, .sc-dj-sub, .sc-mp-sub, .sc-se-sub, .sc-voc-sub, .sc-mb-sub, .sc-inst-sub, .sc-dl-sub { background: #272727 url("../images/sc-subs-texture.png") center / 100% 100% no-repeat !important; } /* 各ページはディシプリンのブランド色で ::after に radial-gradient のグローを敷いているが、 * #272727 + テクスチャ統一後はブランド色のグローが浮いて見えるため非表示にする。 */ .sc-dj-sub::after, .sc-mp-sub::after, .sc-se-sub::after, .sc-voc-sub::after, .sc-mb-sub::after, .sc-inst-sub::after, .sc-dl-sub::after { display: none; } /* PC (>=1025px): 購読バナーはセクションのコンテンツ幅いっぱいに広げる */ @media (min-width: 1025px) { .sc-disc-subs, .sc-dj-sub, .sc-mp-sub, .sc-se-sub, .sc-voc-sub, .sc-mb-sub, .sc-inst-sub, .sc-dl-sub { max-width: none !important; width: 100%; } /* /disciplines/ 一覧ページのみ、Elementor の Shortcode ウィジェットが * align-items:center な flex コンテナ(.sc-disc-sec__inner)内で banner を * shrink-to-fit にラップしてしまうため、バナー自身の width:100% が * ラッパーに伝播しない。ラッパー(Elementor ウィジェット/ショートコードdiv) * を stretch させて全幅化する(他ウィジェットには影響しないよう :has() で * 購読バナーを含むものだけを対象にする)。 */ .sc-disc-sec__inner > *:has(.sc-disc-subs) { align-self: stretch; width: 100%; } .sc-disc-sec__inner > *:has(.sc-disc-subs) > * { width: 100%; } } /* ------------------------------------------------------------ * GitHub #40: ページ地色を #121212 に統一 * Blocksy/テーマの既定では #main-container / main.site-main は * 背景 transparent で、その背後(body 等)がページによっては明るく、 * 特に SP のヘッダー直下が明るく浮いて見える。コンテンツ領域の器である * #main-container と main.site-main に濃色地(#121212)を敷いて統一する。 * 各セクションは内側要素に独自背景を持つため、器を暗くしても既に正しく * 見えているダークセクションは崩れない。テーマ側が transparent を * 明示している可能性に備え !important で確実に固定する。 * 除外(#182): Tutor LMS フロントダッシュボードは対象外。Tutor が dashboard * 時のみ付与する body.tutor-screen-frontend-dashboard(実機確認済み)を * `body:not(...)` で除外し、ダッシュボードの黒漏れ(#121212)を止める。 * course single 等の `tutor-frontend` や全ページの `tutor-lms` は除外対象外 * なので通常ページ/コース詳細の暗背景は維持される。 */ /* ------------------------------------------------------------ */ /* ★ #190-B: `.woocommerce-page` も除外(理由・実測値は sc-design-tokens.css の同ブロック参照)。 * WooCommerce 有効化で商品/カート/チェックアウト/アカウントに暗背景が漏れ、Blocksy の * ライト文字色と組み合わさって商品名/価格が読めなくなっていた。 */ body:not(.tutor-screen-frontend-dashboard):not(.woocommerce-page) #main-container, body:not(.tutor-screen-frontend-dashboard):not(.woocommerce-page) main.site-main { background-color: #121212 !important; } /* ------------------------------------------------------------ * GitHub #204: ログイン後(Tutor ダッシュボード)でヘッダーがグレーに見える問題。 * * 原因: `.sc-hdr` は **意図的に半透明**(`background: rgba(16,16,16,.4)` + * `backdrop-filter: blur(22px)` = ガラス風)。通常ページは背後が #121212 なので黒く見えるが、 * ダッシュボードは上記 §8c の除外で暗背景を敷かないため **背後が白**(実測: body = rgb(255,255,255)) * になり、40% の黒が白に重なって**グレー**として見えていた。 * → 「透過されているだけで実際は黒ではない」という issue コメントのとおり。 * * 対策: ダッシュボードでのみヘッダーを**不透明な #121212** にしてログイン前と色を揃える。 * 透過が無くなるので `backdrop-filter` も無効化する(不要な合成レイヤーを作らない)。 * セレクタは §8c と同じ body class を使い (0,2,1) で `.sc-hdr`(0,1,0)に勝たせる = !important 不要。 * ダッシュボード以外のガラス風は一切変更しない。 * ------------------------------------------------------------ */ /* ★ 2026-07-27 追加: **WooCommerce ページも完全に同じ原因**なので同じ対策に揃える。 * §8c の除外に `.woocommerce-page` を足した(#190-B)ため、`/wc-cart/` `/wc-checkout/` * `/wc-account/` や `/product/*` でも **背後が白**(実測 dev `/wc-cart/`: body = * rgb(255,255,255) / `.sc-hdr` = rgba(16,16,16,.4) + blur(22px))になり、 * ヘッダーがグレーに見えていた。 * ⚠️ ここを「暗背景を敷き直す」方向で直してはいけない: #190-B の実測どおり Woo ページに * #121212 を戻すと商品名/価格のコントラストが 1.02:1 まで落ちて読めなくなる。 * 直すのは**ヘッダーだけ**。 */ body.tutor-screen-frontend-dashboard .sc-hdr, body.woocommerce-page .sc-hdr { background: #121212; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ------------------------------------------------------------ * GitHub #204 続き: ダッシュボードでヘッダーが1行目(アバター/挨拶/通知ベル)に重なる問題。 * * 原因: `.sc-hdr` は `position: fixed` で、その分の上部オフセットは * `sc-header-footer.css:24` の `#main-container { padding-top: 64px }` が担っている。 * ただし **PC(≥1025px)は #33 で意図的に `padding-top: 0`** にしている * ── 「ヘッダーが半透明 + reveal-on-scroll なので、余白を作らずページのダークな * ヒーローに重ねて白い隙間を消す」という設計。 * **ダッシュボードにはそのヒーローが無い**ため、コンテンツが上端から始まり * 固定ヘッダーの下に潜る(実測 PC1440・管理バー除外: 1行目 top≈60px vs ヘッダー 0–64px)。 * * 対策: ダッシュボードでは PC でもオフセットを戻す。**新しい仕組みを作らず、 * 既にオフセットの単一ソースである `#main-container` の padding-top を再有効化**する * (値も同じ 64px = `.sc-hdr { min-height: 64px }` と一致)。 * - margin ではなく padding: margin だと 64px の帯に body の背景が露出する。 * padding ならコンテナ自身の背景が連続するので、ダッシュボードの明るい地色でも破綻しない。 * - SP は基底ルールが既に 64px を与えているので何もしない(この上書きは PC 限定)。 * - #204 でダッシュボードのヘッダーを**不透明**にしたので、 * 「半透明だから重ねてよい」という #33 の前提がそもそも成立しない = 本オフセットと対で正しい。 * ------------------------------------------------------------ */ @media (min-width: 1025px) { body.tutor-screen-frontend-dashboard #main-container { padding-top: 64px; } } /* ------------------------------------------------------------ * GitHub #42: カードグリッド(折り返し型)を min300 / max400 で可変ラップ * 対象は「折り返す」グリッドのみ。横スクロールのカルーセル * (.sc-dl-cards / .sc-dl-carousel__track / ディシプリン詳細の * .sc-XX-cards 単体 / 一覧の .sc-disc-card 等)や、course-single・ * online-subscription の内部カードは別issueの担当なので触らない。 * * 実装方針: 対象グリッドはすべて flex-wrap に統一する。 * 当初 CSS-grid 型(catalog/dl/event/instructor)は既存の display:grid を * 維持し auto-fill + minmax(300px,400px) を使う方針だったが、これらの * グリッドは Elementor の flex ラッパー内の flex アイテムで幅が「不定」に * なり、auto-fill のトラック数算出が max トラック(400px)基準になって * 1440px でも 2 列しか並ばない(実測で確認)。flex-wrap は不定幅コンテナ * でも正しく折り返すため、全対象を display:flex; flex-wrap:wrap に統一し、 * 子カードを flex:1 1 300px / min-width:300px / max-width:400px で * 300〜400px に拘束する。justify-content:center で中央寄せを維持。 * * 対象(折り返しグリッド。カルーセルは除外): * (.sc-cat-grid /catalog/ は #134 で除外し sc-catalog.css に一本化) * .sc-dl-grid … disciplines-list free-workshop 3列グリッド * .sc-event-grid … /events/ * .sc-instructor-grid … /instructors/ * .sc-cmp-programs__grid … nyc-custom music programs * .sc-XX-cards--pair … 各ディシプリン詳細のプログラム2枚組 * ------------------------------------------------------------ */ /* --- 折り返しグリッド本体(flex-wrap + 中央寄せに統一) --- */ /* 注: .sc-cat-grid(/catalog/)は #134 でこの共有ルールから外し、レイアウトを * sc-catalog.css に一本化した(grid + auto-fill、下記 #60 ブロックもそちらへ移設)。 */ .sc-dl-grid, .sc-event-grid, .sc-instructor-grid, .sc-cmp-programs__grid, .sc-dj-cards--pair, .sc-se-cards--pair, .sc-inst-cards--pair, .sc-voc-cards--pair, .sc-mp-cards--pair, .sc-mb-cards--pair { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 16px; } /* --- 各グリッド直下のカードを 300〜400px で可変ラップ --- */ /* .sc-cat-grid > .sc-cat-card は #134 で除外(sc-catalog.css に統合)。 */ .sc-dl-grid > .sc-dl-card, .sc-event-grid > .sc-event-card, .sc-instructor-grid > .sc-instructor-card, .sc-cmp-programs__grid > .sc-cmp-pcard, .sc-dj-cards--pair > .sc-dj-card, .sc-se-cards--pair > .sc-se-card, .sc-inst-cards--pair > .sc-inst-card, .sc-voc-cards--pair > .sc-voc-card, .sc-mp-cards--pair > .sc-mp-card, .sc-mb-cards--pair > .sc-mb-card { flex: 1 1 300px; min-width: 300px; max-width: 400px; width: auto; } /* nyc-custom は Elementor 製で、コンポーネント側 CSS が * `.elementor-element.sc-cmp-pcard { flex:1 1 380px !important; min-width:0 !important }` * を当てており、上の非 !important ルールでは min-width が 0 に負ける。 * .elementor-element を含めて詳細度を上げ、!important で 300〜400px を確実に効かせる。 */ .sc-cmp-programs__grid > .elementor-element.sc-cmp-pcard { flex: 1 1 300px !important; min-width: 300px !important; max-width: 400px !important; width: auto !important; } /* GitHub #60/#134: catalog グリッド(.sc-cat-grid / .sc-cat-card)のレイアウトは * sc-catalog.css に一本化した。以前ここにあった #60 の grid + auto-fill 上書き * (display:grid !important 等)は削除。理由と設計は sc-catalog.css の該当ブロック * (「card grid — #42/#60 統合」)を参照。 */ /* ============================================================ * GitHub #46 — Full Program (FP) card restyle on the 6 per-discipline * DETAIL pages (dj / music-production / studio-engineering / vocals / * music-business / instruments). * * Mechanism: the Program section wraps its cards in * .sc--cards--pair * (emitted ONLY for the program section — both the monolith * sc-discipline-*.php and the Elementor block path in * sc-disciplines-blocks.php use --pair exclusively for is_program cards; * course/online/workshop use plain .sc--cards). So every selector * below is scoped to FP cards and never touches normal cards. * * Visuals mirror the /disciplines/ index FP card * (sc-disciplines.css .sc-disc-card--bordered / --fp-solo): * border #9a9a9a (grid) / #6a6a6a (solo), accent-COLORED title text, * inset+rounded+shadowed thumb, accent radial glow top+bottom * (lighten, opacity .55), white CTA (already white), and the PC * single-item full-width horizontal layout. * * Accent = each discipline's own existing --sc--accent token * (DJ orange / MP magenta / SE green / Vocals yellow / Business cyan / * Instruments white), exposed here as --sc-fp-acc so the grouped rules * can share one custom property. * This file is enqueued last on every page; the selectors are inert * outside discipline detail pages. * ============================================================ */ .sc-dj-cards--pair { --sc-fp-acc: var(--sc-dj-accent); } .sc-mp-cards--pair { --sc-fp-acc: var(--sc-mp-accent); } .sc-se-cards--pair { --sc-fp-acc: var(--sc-se-accent); } .sc-voc-cards--pair { --sc-fp-acc: var(--sc-voc-accent); } .sc-mb-cards--pair { --sc-fp-acc: var(--sc-mb-accent); } .sc-inst-cards--pair { --sc-fp-acc: var(--sc-inst-accent); } /* FP grid card: brighter border (#9a9a9a) */ .sc-dj-cards--pair .sc-dj-card, .sc-mp-cards--pair .sc-mp-card, .sc-se-cards--pair .sc-se-card, .sc-voc-cards--pair .sc-voc-card, .sc-mb-cards--pair .sc-mb-card, .sc-inst-cards--pair .sc-inst-card { border-color: #9a9a9a; } /* FP thumbnail: inset 8px, rounded, drop shadow (ratio 1920/1080 kept) */ .sc-dj-cards--pair .sc-dj-card__thumb, .sc-mp-cards--pair .sc-mp-card__thumb, .sc-se-cards--pair .sc-se-card__thumb, .sc-voc-cards--pair .sc-voc-card__thumb, .sc-mb-cards--pair .sc-mb-card__thumb, .sc-inst-cards--pair .sc-inst-card__thumb { position: relative; z-index: 1; margin: 8px; width: auto; border-radius: 8px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); } /* FP course-name title: accent-COLORED text (not a filled bar) */ .sc-dj-cards--pair .sc-dj-card__title, .sc-mp-cards--pair .sc-mp-card__title, .sc-se-cards--pair .sc-se-card__title, .sc-voc-cards--pair .sc-voc-card__title, .sc-mb-cards--pair .sc-mb-card__title, .sc-inst-cards--pair .sc-inst-card__title { background: none; padding: 0; color: var(--sc-fp-acc, var(--sc-primary)); } /* FP category glow — top + bottom, tinted by accent, blended lighten. * Overrides each discipline file's single blurred ::after. */ .sc-dj-cards--pair .sc-dj-card::before, .sc-dj-cards--pair .sc-dj-card::after, .sc-mp-cards--pair .sc-mp-card::before, .sc-mp-cards--pair .sc-mp-card::after, .sc-se-cards--pair .sc-se-card::before, .sc-se-cards--pair .sc-se-card::after, .sc-voc-cards--pair .sc-voc-card::before, .sc-voc-cards--pair .sc-voc-card::after, .sc-mb-cards--pair .sc-mb-card::before, .sc-mb-cards--pair .sc-mb-card::after, .sc-inst-cards--pair .sc-inst-card::before, .sc-inst-cards--pair .sc-inst-card::after { content: ""; position: absolute; left: 50%; right: auto; transform: translateX(-50%); width: 150%; height: 220px; z-index: 0; pointer-events: none; filter: none; mix-blend-mode: lighten; opacity: .55; } .sc-dj-cards--pair .sc-dj-card::before, .sc-mp-cards--pair .sc-mp-card::before, .sc-se-cards--pair .sc-se-card::before, .sc-voc-cards--pair .sc-voc-card::before, .sc-mb-cards--pair .sc-mb-card::before, .sc-inst-cards--pair .sc-inst-card::before { top: -96px; bottom: auto; background: radial-gradient(50% 100% at 50% 0%, var(--sc-fp-acc, transparent) 0%, transparent 72%); } .sc-dj-cards--pair .sc-dj-card::after, .sc-mp-cards--pair .sc-mp-card::after, .sc-se-cards--pair .sc-se-card::after, .sc-voc-cards--pair .sc-voc-card::after, .sc-mb-cards--pair .sc-mb-card::after, .sc-inst-cards--pair .sc-inst-card::after { top: auto; bottom: -96px; background: radial-gradient(50% 100% at 50% 100%, var(--sc-fp-acc, transparent) 0%, transparent 72%); } /* FP single-item full-width horizontal layout (PC only) — Figma 2107:46308. * Triggers when the Program section holds exactly one FP card. SP keeps the * normal vertical card (rules live inside this media query). */ @media (min-width:1025px) { .sc-dj-cards--pair:has(> .sc-dj-card:only-child) > .sc-dj-card, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) > .sc-mp-card, .sc-se-cards--pair:has(> .sc-se-card:only-child) > .sc-se-card, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) > .sc-voc-card, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) > .sc-mb-card, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) > .sc-inst-card { flex: 1 1 100%; width: 100%; max-width: none; flex-direction: row; align-items: stretch; border-color: #6a6a6a; } .sc-dj-cards--pair:has(> .sc-dj-card:only-child) > .sc-dj-card > .sc-dj-card__thumb, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) > .sc-mp-card > .sc-mp-card__thumb, .sc-se-cards--pair:has(> .sc-se-card:only-child) > .sc-se-card > .sc-se-card__thumb, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) > .sc-voc-card > .sc-voc-card__thumb, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) > .sc-mb-card > .sc-mb-card__thumb, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) > .sc-inst-card > .sc-inst-card__thumb { flex: 0 0 640px; width: 640px; aspect-ratio: 640/354; align-self: flex-start; margin: 8px; } .sc-dj-cards--pair:has(> .sc-dj-card:only-child) > .sc-dj-card > .sc-dj-card__body, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) > .sc-mp-card > .sc-mp-card__body, .sc-se-cards--pair:has(> .sc-se-card:only-child) > .sc-se-card > .sc-se-card__body, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) > .sc-voc-card > .sc-voc-card__body, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) > .sc-mb-card > .sc-mb-card__body, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) > .sc-inst-card > .sc-inst-card__body { flex: 1 1 0; min-width: 0; padding: 32px; justify-content: center; } .sc-dj-cards--pair:has(> .sc-dj-card:only-child) .sc-dj-card__title, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) .sc-mp-card__title, .sc-se-cards--pair:has(> .sc-se-card:only-child) .sc-se-card__title, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) .sc-voc-card__title, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) .sc-mb-card__title, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) .sc-inst-card__title { font-size: 32px; } /* solo glow emanates from bottom-right */ .sc-dj-cards--pair:has(> .sc-dj-card:only-child) > .sc-dj-card::before, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) > .sc-mp-card::before, .sc-se-cards--pair:has(> .sc-se-card:only-child) > .sc-se-card::before, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) > .sc-voc-card::before, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) > .sc-mb-card::before, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) > .sc-inst-card::before { display: none; } .sc-dj-cards--pair:has(> .sc-dj-card:only-child) > .sc-dj-card::after, .sc-mp-cards--pair:has(> .sc-mp-card:only-child) > .sc-mp-card::after, .sc-se-cards--pair:has(> .sc-se-card:only-child) > .sc-se-card::after, .sc-voc-cards--pair:has(> .sc-voc-card:only-child) > .sc-voc-card::after, .sc-mb-cards--pair:has(> .sc-mb-card:only-child) > .sc-mb-card::after, .sc-inst-cards--pair:has(> .sc-inst-card:only-child) > .sc-inst-card::after { left: auto; right: -8%; bottom: -110px; transform: none; width: 70%; height: 280px; background: radial-gradient(60% 100% at 100% 100%, var(--sc-fp-acc, transparent) 0%, transparent 72%); } } /* ============================================================ * GitHub #196 / #200: 追従CTA × サードパーティ製フローティングボタンの重なり回避 * * 相手は2つとも blocksy-child の外(issue の「子テーマに存在しない」は正しい): * (a) Blocksy 親テーマのスクロールトップ `.ct-back-to-top` * 実装 = blocksy/inc/components/back-to-top.php(`.ct-drawer-canvas[data-location=end]` 内) * customizer は **theme_mods_blocksy-child** 側(子テーマが active stylesheet のため。 * theme_mods_blocksy は空なので「設定が無い」と誤読しやすい): * has_back_top:'yes' / top_button_shape:'circle' / top_button_alignment:'right' / * back_top_visibility: desktop+tablet+mobile 全 true(Blocksy 既定は mobile=false)/ * topButtonSize 21・21・32 / topButtonOffset 25・25・108 / sideButtonOffset 25・25・19 * ※ camelCase キーは `back_top` / `top_button` の grep に掛からない * 実効 = ≥690px: bottom25・right25・45x45 / ≤689.98px: bottom108・right19・56x56 * (b) Elementor Pro Floating Buttons の電話ボタン `.e-contact-buttons` * 実装 = post 627662(post_type `e-floating-buttons`, "Call Button 2026 DD", * widget contact-buttons-var-5 / tel:+16467470144 / has-size-small=55x55 / z-index 10000) * 表示条件(_elementor_conditions)= course-category 779(In-Person Courses)/ * 780(In-Person Programs)配下 + 指定11ページ。hide_desktop なので ≤1024px のみ。 * → **電話はコース/プログラム詳細にだけ載る(=#196)。Hub6/All/20p には載らない(=#200 は矢印のみ)** * * 自テーマの追従CTAは仕様共通(§3)。実クラスは **9個**: * course詳細 `.sc-cs-fixedcta`(上端 60px)/ `.sc-cs-fixedbar`(上端 68px・#83) * Hub6 ×6 `.sc-{dj,se,voc,mb,inst,mp}-fixedcta` ← **Hub6 は `.sc-disc-fab` ではない** * All `.sc-disc-fab`([sc_disc_index_fab])/ 20p `.sc-dl-fixedcta` * * 方式: 相手を display:none で消さず(電話=クライアントのコンバージョン要素/矢印=customizer 設定)、 * 相手が持つ CSS 変数を上書きして上へ退避。載っている CTA の判定は `:has()` * (Hub6 の page ID は環境ごとに違うため body.page-id-* は使えず、PHP の body_class 追加も不要)。 * 詳細度は相手より1段だけ高く取り `!important` 不使用(§8c の方針)。 * ★ 罠: `.ct-back-to-top` の z-index:110 は当てにならない。祖先 `.ct-drawer-inner` が * position:fixed・z-index:100 でスタッキングコンテキストを作るため実効は 100 = 自CTAと同値で、 * DOM 順(drawer canvas が後)で矢印が上に来る。**z-index の上げ合いでは解決しない。座標で退避する。** * ★ 自CTAの bottom は env(safe-area-inset-bottom) を含むが相手2つは含まないので、退避量にも同じ * inset を足す(ノッチ機で間隔が食われるのを防ぐ)。 * * 実測(PC 1440x900 / /disciplines/dj/): 矢印 45x45@bottom25 と `.sc-dj-fixedcta` 213x36@bottom16 が * **縦 27px 重複・矢印は水平方向にピル内へ完全内包**、elementFromPoint は矢印 = 導出値と一致。 * ------------------------------------------------------------ */ /* --- PC(≥1025px): 右下ピル(Hub6 ×6 / All / 20p)の上へ矢印を退避 --- #200 --- */ @media (min-width: 1025px) { /* ピル上端 = bottom 16px + min-height 36px = 52px → +12px の間隔で 64px */ /* #221: LP の追従CTA(.sc-lp-fixedcta)も同一ジオメトリ(bottom16 + minH36)なので同じ退避量。 */ body:has(.sc-dj-fixedcta, .sc-se-fixedcta, .sc-voc-fixedcta, .sc-mb-fixedcta, .sc-inst-fixedcta, .sc-mp-fixedcta, .sc-disc-fab, .sc-dl-fixedcta, .sc-lp-fixedcta) .ct-back-to-top { --back-top-bottom-offset: calc(64px + env(safe-area-inset-bottom, 0px)); } /* `/nyc-custom-music-programs/` の「Book a Call」(.sc-cmp-fixedcta)は**ジオメトリが違う**ので * 上のピル用 64px では足りない。実測(PC 1440x900 / 2026-07-28): * CTA = 171x49 @ bottom24 → **上端が 73px** / 矢印 = 45x45 @ bottom25 → **重なる**。 * 退避量は他と同じ流儀(CTA 上端 + 12px)で **73 + 12 = 85px**。 * ⚠️ このページの CTA は `@media (min-width:1025px)` でしか表示されないので、 * 退避も同じ条件下に置く(本ブロックが min-width:1025px 内にあるためこのままでよい)。 */ body:has(.sc-cmp-fixedcta) .ct-back-to-top { --back-top-bottom-offset: calc(85px + env(safe-area-inset-bottom, 0px)); } } /* --- タブレット(768–1024px): course詳細の全幅CTAの上へ、電話→矢印の順に積む --- #196 --- */ @media (min-width: 768px) and (max-width: 1024px) { /* 相手同士の既定衝突(電話も矢印も bottom25/right25 = 矢印が電話の内側に完全に重なる)も解消。 自CTAが無いページ(In-Person Courses Landing 等)向け。 */ body:has(.e-contact-buttons) .ct-back-to-top { --back-top-bottom-offset: 92px; /* 電話 25 + 55 + 12 */ } /* CTA上端 = fixedbar 68px(fixedcta は 60px)→ 大きい方 +12px = 80px */ body:has(.sc-cs-fixedcta, .sc-cs-fixedbar) .e-contact-buttons.e-contact-buttons-var-5.has-v-alignment-bottom { --e-contact-buttons-vertical-offset: calc(80px + env(safe-area-inset-bottom, 0px)); } body:has(.sc-cs-fixedcta, .sc-cs-fixedbar) .ct-back-to-top { --back-top-bottom-offset: calc(80px + env(safe-area-inset-bottom, 0px)); } /* 電話も載るページ(In-Person)は 電話(80→135px)のさらに上へ */ body:has(.sc-cs-fixedcta, .sc-cs-fixedbar):has(.e-contact-buttons) .ct-back-to-top { --back-top-bottom-offset: calc(147px + env(safe-area-inset-bottom, 0px)); /* 80 + 55 + 12 */ } } /* --- SP(≤767px): 電話のみが course詳細CTAに重なる(矢印は既に bottom108px) --- #196 --- */ @media (max-width: 767px) { body:has(.sc-cs-fixedcta, .sc-cs-fixedbar) .e-contact-buttons.e-contact-buttons-var-5.has-v-alignment-bottom { --e-contact-buttons-vertical-offset: calc(80px + env(safe-area-inset-bottom, 0px)); /* 上端68 +12 */ } /* 電話を 80px へ上げると上端 135px となり、既定の矢印 bottom108px(上端164px)と 27px 重なる → 矢印も 147px(=80+55+12)へ。SP の 108px は「電話が 36px」前提のクライアント設定値。 */ body:has(.sc-cs-fixedcta, .sc-cs-fixedbar):has(.e-contact-buttons) .ct-back-to-top { --back-top-bottom-offset: calc(147px + env(safe-area-inset-bottom, 0px)); } /* Hub6 / All / 20p の SP は下中央ピル(上端48px)で、矢印 108px・電話は表示条件外 = 現状すでに非干渉のため何も当てない。 */ } /* ------------------------------------------------------------ * GitHub #226: CF7 の送信後メッセージ / エラーメッセージが黒文字で読めない * * 【原因(実測)】`.wpcf7-response-output` に **色を指定している CSS がどこにも無い**。 * - CF7 6.0.6 本体(`contact-form-7/includes/css/styles.css:14-42`)は border-color と * margin/padding だけで `color` を持たない。 * - Blocksy 親テーマ(`blocksy/static/bundle/cf-7.min.css`)は * `.wpcf7 .wpcf7-response-output { … font-style:italic }` = 斜体だけで `color` を持たない。 * - 子テーマ側も `.sc-contact--cf7 .wpcf7-response-output`(sc-home.css)/ * `.sc-event-rsvp--cf7 .wpcf7-response-output`(sc-events.css)は余白・角丸・字送りのみ。 * → 結果、`body { color: var(--theme-text-color) }`(blocksy main.min.css)を **継承**し、 * Blocksy customizer の `:root { --theme-text-color: #000000 }` で **黒**になる。 * リニューアル各ページは「暗い地に各コンポーネントが個別に color を指定する」設計なので、 * 色指定を持たないこの1要素だけが黒のまま取り残されていた。 * * 【スコープ = リニューアルの CF7 ラッパー全部。ただし全 CF7 一律にはしない】 * テーマ内の CF7 描画元は3つ・ラッパーは2つに集約されている(実測): * .sc-contact--cf7 … sc_home_contact_form_html()(home / /disciplines/ / Hub6×6 / * コース詳細全件 / LP / 20p サブリスト)+ sc_space_render_tour_form() * (/nyc-spaces/ 一覧・詳細の Book a Tour)。地= --sc-bg-bright(#272727) * .sc-event-rsvp--cf7 … sc_event_rsvp_render()(イベント詳細の RSVP)。地= 暗色 * 🔴 **`.wpcf7-response-output` を無条件(グローバル)に白くしてはいけない。** * 同じ CF7 が **明色地のレガシーページにも載っている**(2026-07-28 ローカル実測): * - `/book-a-tour-at-sound-collective/`(page 625047)= CF7 を含む内側コンテナ * `.elementor-element-e6ba296` が **background-color:#FFFFFF**(白カード) * - `/soundcollective-online-student-survey/`(page 29735)= Elementor セクション無し。 * `.entry-content` 直下なので地は Blocksy の body 既定 * `linear-gradient(0deg,#dcdcdc,#f8f8f8)` = **明色** * ここを白文字にすると今度はそちらが読めなくなるため、**リニューアルが所有する2ラッパーに * 限定する**。レガシー21ページ(地 #101010 = 暗色)は同症状が残るが、 * forms-handover.md §5-1 優先5 のとおり存続/301 が未確定なので本 issue では触らない。 * * 【specificity】 * 対象要素に `color` を直接指定している規則は **他に1つも無い**ので、 * 継承値(body 由来 #000000)に対しては詳細度に関わらず必ず勝つ(直接指定 > 継承)。 * そのうえで既存のラッパー限定規則(sc-home.css:219 / sc-events.css:392)と同じ形 * **(0,2,0)**(クラス2個)で書き、将来 CF7/Blocksy 側が * `.wpcf7 form .wpcf7-response-output`(0,2,1)や `.wpcf7 .wpcf7-response-output`(0,2,0)で * 色を足しても負けないようにしている(同点は後読み勝ち = 本ファイルは * scltv_enqueue_design_tokens() の最後に読み込まれる)。`!important` は不要。 * * 【エラー側】`.wpcf7-response-output` は成功(`form.sent`)/ 失敗(`failed`/`aborted`)/ * スパム(`spam`)/ バリデーション(`invalid`/`unaccepted`/`payment-required`)で * **同じ1要素**を使い回すので、この1規則で全状態が読めるようになる(状態差は border-color が担う)。 * 個別フィールドの `.wpcf7-not-valid-tip` は両ラッパーで既に #ff6b6b に上書き済み * (sc-home.css:217 / sc-events.css:390)なので追加不要。 * ------------------------------------------------------------ */ .sc-contact--cf7 .wpcf7-response-output, .sc-event-rsvp--cf7 .wpcf7-response-output { color: var(--sc-fg); } /* ============================================================ * 検索・フォーム入力の文字色(#226 と同根の Blocksy/ブラウザ既定 由来) * ------------------------------------------------------------ * 症状: 検索の input で入力中に文字が黒くなり暗色地と同化する(/search/ で報告)。 * * 原因は2層ある。実測(dev / 2026-07-28): * (a) **ブラウザのオートフィル**: ページ内に `:-webkit-autofill` の規則が **0 件**で、 * Chrome 既定の「黒文字 + 明色背景」がそのまま当たる。`color` ではなく * **`-webkit-text-fill-color`** で塗られるため、`color` を上書きしても直らない。 * (b) Blocksy 親テーマ `main.min.css` の * `input:is([type=...]):focus { color: var(--theme-form-text-focus-color, var(--theme-text-color)) }` * は詳細度 (0,2,1)。変数が未定義で `--theme-text-color: #000000` に落ちるため、 * コンポーネント側の `.sc-srch-box input`(0,1,1) では**フォーカス時に負ける**。 * * ⚠️ **グローバルに当てない。** 明色地のレガシーページにも同じ input があるため * (#226 と同じ理由)、**リニューアルの暗色コンポーネントに限定**する。 * ⚠️ 変数だけ上書きする方法(`--theme-form-text-focus-color` をラッパーに定義)は * 実測で効かなかった(オートフィルは `-webkit-text-fill-color` 側なので変数を通らない)。 * ============================================================ */ .sc-srch-box input:focus, .sc-drawer__search input:focus, .sc-event-search input:focus, .sc-contact--cf7 .wpcf7-form input:focus, .sc-contact--cf7 .wpcf7-form textarea:focus, .sc-event-rsvp--cf7 .wpcf7-form input:focus, .sc-event-rsvp--cf7 .wpcf7-form textarea:focus { color: var(--sc-fg); -webkit-text-fill-color: var(--sc-fg); } /* オートフィル: Chrome は色を `-webkit-text-fill-color` で、背景を内部レイヤーで塗る。 * 背景は `box-shadow` の inset で上書きし、`transition` を極端に長くして * 黄色いフラッシュを抑える(定番手法)。 */ .sc-srch-box input:-webkit-autofill, .sc-srch-box input:-webkit-autofill:hover, .sc-srch-box input:-webkit-autofill:focus, .sc-drawer__search input:-webkit-autofill, .sc-drawer__search input:-webkit-autofill:hover, .sc-drawer__search input:-webkit-autofill:focus, .sc-event-search input:-webkit-autofill, .sc-event-search input:-webkit-autofill:focus, .sc-contact--cf7 .wpcf7-form input:-webkit-autofill, .sc-contact--cf7 .wpcf7-form input:-webkit-autofill:focus, .sc-event-rsvp--cf7 .wpcf7-form input:-webkit-autofill, .sc-event-rsvp--cf7 .wpcf7-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--sc-fg); caret-color: var(--sc-fg); box-shadow: 0 0 0 1000px var(--sc-bg-hover-strong) inset; transition: background-color 9999s ease-out 0s; } /* ============================================================ * #267 / #269 §4-b: 注文結果画面（決済後に遷移するページ）の文字が読めない * * 症状: `/?tutor_order_placement=success&order_id=…` の「Order Confirmed」が * **真っ黒（rgb(0,0,0)）** で背景 rgb(18,18,18) と同化して読めない（STG 実測）。 * * 原因: Tutor 純正のユーティリティクラス。 * `.tutor-color-black { color: var(--tutor-body-color) }` → ライト前提で黒 * `.tutor-color-secondary { color: #41454f }` → 濃いグレー（これも読めない） * Tutor はライトテーマ前提なので、**ダーク化はこちらで当てる**必要がある。 * * 方針: `.tutor-color-*` をサイト全体で書き換えると Tutor の全画面（ダッシュボード・ * コース内など、まだダーク対応方針が未確定の画面）に波及する。**注文結果画面の * ラッパー配下だけにスコープする**（`.tutor-order-status-wrapper` は success / * failed の両テンプレートが共通で持つ。failed 側は Tutor 純正テンプレのままなので、 * CSS で当てておけば両方直る = 単一ソース）。 * ============================================================ */ .tutor-order-status-wrapper .tutor-color-black { color: var(--sc-fg); } .tutor-order-status-wrapper .tutor-color-secondary { color: var(--sc-fg-secondary); } /* アイコンは白背景前提の SVG ではなく単色線画なので、そのままで視認できる（実測）。 */ /* CTA。Tutor の .tutor-btn-secondary は白背景＋濃い文字なのでダークだと浮く。 * サイトのセカンダリボタン（枠線 + 現在の文字色）に寄せる。 */ .tutor-order-status-wrapper .tutor-btn-secondary, .tutor-order-status-actions .tutor-btn-secondary { background: transparent; color: var(--sc-fg); border: 1px solid var(--sc-fg-secondary); } .tutor-order-status-wrapper .tutor-btn-secondary:hover, .tutor-order-status-actions .tutor-btn-secondary:hover { background: var(--sc-bg-hover-strong); color: var(--sc-fg); }