/* ================================================================ Google Form Modal — Lexington Physics ──────────────────────────────────────────────────────────────── ▸ 粘贴位置：在每个需要弹窗的 HTML 页面 中引入： 放在 style.css 之后即可。 ================================================================ */ /* ── 1. "Apply / Register" CTA 按钮 ──────────────────────────── */ .lp-form-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2.2rem; background: var(--mit-red); /* #A31F34 */ color: #fff; font-family: var(--body-font); /* Inter */ font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1rem; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease; box-shadow: 0 4px 14px rgba(163, 31, 52, 0.22); } .lp-form-btn:hover { background-color: #7A1727; transform: translateY(-2px) scale(1.015); box-shadow: 0 8px 24px rgba(163, 31, 52, 0.32); } .lp-form-btn:active { transform: translateY(0) scale(1); box-shadow: 0 2px 8px rgba(163, 31, 52, 0.2); } /* Optional: ghost / outline variant for lighter sections */ .lp-form-btn--outline { background: transparent; color: var(--mit-red); border: 1.5px solid var(--mit-red); box-shadow: none; } .lp-form-btn--outline:hover { background: var(--mit-red); color: #fff; box-shadow: 0 8px 24px rgba(163, 31, 52, 0.28); } /* ── 2. 弹窗遮罩层（Overlay / Backdrop） ────────────────────── */ .lp-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: none; /* 默认完全隐藏 */ align-items: center; justify-content: center; padding: 1.5rem; /* 毛玻璃暗色背景 */ background: rgba(10, 10, 12, 0.65); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); } /* 激活状态：使用 display:flex 而非 opacity 切换，避免合成层冲突 */ .lp-modal-overlay.is-active { display: flex; } /* ── 3. 弹窗卡片（Modal Card） ──────────────────────────────── */ .lp-modal-card { position: relative; z-index: 1; /* 确保在 backdrop-filter 之上 */ width: 100%; max-width: 720px; height: 85vh; max-height: 860px; min-height: 300px; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 4px 20px rgba(0, 0, 0, 0.15); /* Slide Up 入场动画 */ animation: lp-modal-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes lp-modal-slide-up { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── 4. 关闭按钮（Close × Button） ──────────────────────────── */ .lp-modal-close { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: #333333; font-size: 1.25rem; font-weight: 300; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.2s; line-height: 1; font-family: 'Inter', Helvetica, Arial, sans-serif; } .lp-modal-close:hover { background: rgba(163, 31, 52, 0.12); color: #A31F34; transform: rotate(90deg); } /* ── 5. iframe 容器 ─────────────────────────────────────────── */ .lp-modal-card iframe { display: block; width: 100%; height: 100%; border: none; } /* ── 6. 加载指示器（Loading spinner） ────────────────────────── */ .lp-modal-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #ffffff; z-index: 1; transition: opacity 0.3s ease; } .lp-modal-loader.is-hidden { opacity: 0; pointer-events: none; } .lp-modal-loader-spinner { width: 36px; height: 36px; border: 3px solid rgba(163, 31, 52, 0.15); border-top-color: #A31F34; border-radius: 50%; animation: lp-spin 0.8s linear infinite; } .lp-modal-loader-text { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 0.82rem; font-weight: 400; color: #8A8B8C; letter-spacing: 0.04rem; } @keyframes lp-spin { to { transform: rotate(360deg); } } /* ── 7. 响应式 ──────────────────────────────────────────────── */ @media (max-width: 600px) { .lp-modal-card { max-width: 100%; height: 90vh; border-radius: 14px 14px 0 0; } .lp-modal-overlay { align-items: flex-end; padding: 0; } .lp-form-btn { width: 100%; justify-content: center; } }