/* ============================================================ Inquiry popup — portable, self-contained modal. Drop into any site: it picks up the host's --accent (fallback indigo) and themes light/dark from . No build step. ============================================================ */ .iq-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(10,10,14,.55); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; } .iq-overlay.open{ opacity:1; visibility:visible; } .iq-modal{ --iq-accent: var(--accent, #4f46e5); --iq-bg:#ffffff; --iq-surface:#f6f6f9; --iq-ink:#1c1c22; --iq-soft:#6b6b78; --iq-border:rgba(20,20,30,.14); --iq-radius:16px; width:min(560px,100%); max-height:calc(100dvh - 40px); overflow:auto; background:var(--iq-bg); color:var(--iq-ink); border-radius:var(--iq-radius); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); border:1px solid var(--iq-border); transform:translateY(14px) scale(.98); transition:transform .25s cubic-bezier(.22,.61,.36,1); font-family:inherit; } .iq-overlay.open .iq-modal{ transform:none; } html[data-theme="dark"] .iq-modal{ --iq-bg:#17171d; --iq-surface:#1f1f27; --iq-ink:#ececf2; --iq-soft:#a0a0ad; --iq-border:rgba(255,255,255,.12); } .iq-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 4px; } .iq-title{ font-size:1.3rem; font-weight:700; margin:0; line-height:1.2; } .iq-sub{ margin:6px 0 0; font-size:.9rem; color:var(--iq-soft); } .iq-close{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--iq-border); background:transparent; color:var(--iq-ink); cursor:pointer; font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s,border-color .2s; } .iq-close:hover{ background:var(--iq-surface); border-color:var(--iq-accent); } .iq-form{ padding:16px 24px 24px; display:grid; gap:14px; } .iq-row{ display:grid; gap:6px; } .iq-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .iq-label{ font-size:.8rem; font-weight:600; color:var(--iq-ink); } .iq-label .req{ color:var(--iq-accent); } .iq-input, .iq-select, .iq-textarea{ width:100%; font:inherit; font-size:.95rem; color:var(--iq-ink); background:var(--iq-surface); border:1px solid var(--iq-border); border-radius:10px; padding:11px 13px; transition:border-color .2s, box-shadow .2s; } .iq-input:focus, .iq-select:focus, .iq-textarea:focus{ outline:none; border-color:var(--iq-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--iq-accent) 22%, transparent); } .iq-textarea{ resize:vertical; min-height:96px; } .iq-phone{ display:grid; grid-template-columns:128px 1fr; gap:8px; } .iq-phone .iq-select{ padding-left:10px; padding-right:6px; } .iq-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .iq-err{ font-size:.78rem; color:#e5484d; margin:2px 0 0; min-height:0; } .iq-actions{ display:flex; gap:10px; margin-top:4px; } .iq-btn{ font:inherit; font-weight:700; font-size:.95rem; border-radius:999px; padding:12px 22px; cursor:pointer; border:1.5px solid transparent; transition:transform .2s, background .2s, border-color .2s; } .iq-btn-primary{ background:var(--iq-accent); color:#fff; flex:1; } .iq-btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.1) brightness(1.03); } .iq-btn-ghost{ background:transparent; color:var(--iq-ink); border-color:var(--iq-border); } .iq-btn-ghost:hover{ border-color:var(--iq-accent); } .iq-note{ font-size:.78rem; color:var(--iq-soft); margin:2px 0 0; text-align:center; } .iq-success{ padding:34px 24px 30px; text-align:center; } .iq-success .iq-check{ width:54px; height:54px; border-radius:50%; background:color-mix(in srgb, var(--iq-accent) 16%, transparent); color:var(--iq-accent); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 14px; } .iq-success h3{ margin:0 0 6px; font-size:1.2rem; } .iq-success p{ margin:0 0 18px; color:var(--iq-soft); font-size:.92rem; } @media (max-width:520px){ .iq-row2{ grid-template-columns:1fr; } .iq-phone{ grid-template-columns:112px 1fr; } } @media (prefers-reduced-motion:reduce){ .iq-overlay,.iq-modal{ transition:none; } }