/* * matching-cf7.css * * CF7 全フォーム共通の「送信中…」「送信完了」ポップアップ。 * matching-cf7-bridge.js が submit イベントで直下に 1 つだけ * `.matching-cf7-sending-overlay` を挿入し、状態クラスで表示を切替する。 * * .matching-cf7-sending-overlay.is-active ← 表示 * .matching-cf7-sending-overlay.is-active.is-sending ← 「送信中…」表示 * .matching-cf7-sending-overlay.is-active.is-sent ← 「送信完了」表示 * * wrapper の display:none / overflow / z-index に左右されないよう、 * overlay 自体は body 直下に置く設計。 */ /* CF7 標準スピナーは全フォームで非表示にする。送信中の UI は matching-cf7-sending-overlay（下記）に統一する。 */ .wpcf7 .wpcf7-spinner, .wpcf7-form .wpcf7-spinner { display: none !important; } /* 背景スクロールロック（任意） */ body.matching-cf7-overlay-open { overflow: hidden; } /* ===== overlay 本体（画面全体を覆う暗幕） ===== */ .matching-cf7-sending-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 99999; opacity: 0; transition: opacity 0.18s ease; pointer-events: none; padding: 1.5rem; box-sizing: border-box; } .matching-cf7-sending-overlay.is-active { display: flex; opacity: 1; pointer-events: auto; } /* ===== 中央のポップアップカード ===== */ .matching-cf7-sending-overlay-inner { display: inline-flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 2.2rem 2.8rem 2.4rem; background: #fff; border: 1px solid var(--matching-color-border, #d8d8d8); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); color: var(--matching-color-heading, #1f2937); min-width: 20rem; max-width: min(34rem, calc(100vw - 3rem)); text-align: center; } .matching-cf7-sending-overlay.is-active .matching-cf7-sending-overlay-inner { animation: matching-cf7-overlay-in 0.22s ease-out; } @keyframes matching-cf7-overlay-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ===== スピナー ===== */ .matching-cf7-sending-spinner { display: none; width: 3rem; height: 3rem; border: 0.32rem solid color-mix(in srgb, var(--matching-color-primary, #2563eb) 18%, transparent); border-top-color: var(--matching-color-primary, #2563eb); border-radius: 50%; animation: matching-cf7-spin 0.85s linear infinite; } .matching-cf7-sending-overlay.is-sending .matching-cf7-sending-spinner { display: inline-block; } @keyframes matching-cf7-spin { to { transform: rotate(360deg); } } /* ===== ラベル ===== */ .matching-cf7-sending-label { display: none; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; } .matching-cf7-sending-overlay.is-sending .is-sending-label { display: inline-flex; } .matching-cf7-sending-overlay.is-sent .is-sent-label { display: inline-flex; animation: matching-cf7-pop 0.35s ease-out; } .matching-cf7-sending-label.is-sent-label { color: var(--matching-color-success-text, #16a34a); } .matching-cf7-sending-label.is-sent-label svg { width: 1.5em; height: 1.5em; padding: 0.18em; color: #fff; background: var(--matching-color-success-text, #16a34a); border-radius: 999px; box-sizing: border-box; } @keyframes matching-cf7-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }