/* ===================================================================== contact-modal.css — demo/dashboard access request modal Styled to match the site chrome (see site-chrome.css for the palette). ===================================================================== */ .cm-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 25, 47, .62); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: Inter, sans-serif; } .cm-overlay[hidden] { display: none; } /* body scroll lock is applied by the JS via this class on */ .cm-locked, .cm-locked body { overflow: hidden !important; } .cm-dialog { background: #fff; border-radius: 16px; width: min(880px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(8, 22, 42, .45); overflow: hidden; } .cm-head { padding: 26px 30px 18px; background: linear-gradient(to right, #F6F8FB, #C25E00); color: #fff; } .cm-head h2 { margin: 0 0 6px; font-family: Montserrat, Inter, sans-serif; font-size: 22px; color: #0d2544; } .cm-head p { margin: 0; font-size: 14px; color: #17365e; max-width: 60ch; } .cm-body { padding: 22px 30px 8px; overflow-y: auto; } .cm-alert { background: #fdecec; color: #a12622; border: 1px solid #f2b8b5; border-radius: 8px; padding: 10px 13px; font-size: 13.5px; margin-bottom: 16px; } .cm-alert[hidden] { display: none; } .cm-fieldset { border: 0; padding: 0; margin: 0 0 22px; } .cm-fieldset legend { font-family: Montserrat, Inter, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #C25E00; padding: 0 0 10px; } .cm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .cm-span2 { grid-column: 1 / -1; } .cm-field { display: flex; flex-direction: column; gap: 5px; } .cm-field > span { font-size: 12.5px; font-weight: 600; color: #33415c; } .cm-field i { color: #c0392b; font-style: normal; } .cm-field input, .cm-field select { width: 100%; padding: 9px 11px; border: 1px solid #cdd6e4; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; } .cm-field input:focus, .cm-field select:focus { outline: 2px solid #C25E00; border-color: #C25E00; } .cm-field input.cm-invalid, .cm-field select.cm-invalid { border-color: #c0392b; } .cm-err { font-size: 12px; color: #c0392b; font-style: normal; min-height: 0; } .cm-err:empty { display: none; } .cm-note { font-size: 12.5px; color: #6a7a90; margin: 4px 0 16px; } .cm-note i { color: #c0392b; font-style: normal; } .cm-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 30px; border-top: 1px solid #e6ecf5; background: #f8fafc; } .cm-btn { padding: 11px 22px; border-radius: 9px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; font-family: inherit; } .cm-primary { background: #C25E00; color: #fff; } .cm-primary:hover { background: #A54E00; } .cm-primary:disabled { opacity: .6; cursor: progress; } .cm-ghost { background: #fff; border-color: #9fb1c9; color: #33415c; } .cm-ghost:hover { background: #eef2f8; } .cm-danger { background: #c0392b; color: #fff; } .cm-danger:hover { background: #98291d; } /* stacked confirm / success layers */ .cm-confirm { position: absolute; inset: 0; z-index: 10; background: rgba(10, 25, 47, .55); display: flex; align-items: center; justify-content: center; padding: 24px; } .cm-confirm[hidden] { display: none; } .cm-confirm-box { background: #fff; border-radius: 14px; padding: 26px 28px; width: min(440px, 100%); box-shadow: 0 22px 60px rgba(8, 22, 42, .4); } .cm-confirm-box h3 { margin: 0 0 8px; font-family: Montserrat, Inter, sans-serif; font-size: 18px; color: #111827; } .cm-confirm-box p { margin: 0 0 18px; font-size: 14px; color: #4a5b73; line-height: 1.55; } .cm-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } @media (max-width: 700px) { .cm-grid { grid-template-columns: 1fr; } .cm-head, .cm-body, .cm-foot { padding-left: 20px; padding-right: 20px; } }