/* * Demo Request modal — "See Greenova in Action" form + success screen. * * Re-skins Bootstrap's own modal markup (already loaded sitewide) rather * than fighting it — .modal/.modal-dialog/.modal-content keep Bootstrap's * focus-trap/backdrop/ESC-to-close JS behaviour AND its automatic * "disable body scroll while open" (Bootstrap's Modal component adds * `overflow:hidden` to itself — no extra CSS/JS needed for that * here). Every visual property below is an exact value from this build's * spec, not estimated. * * @package Greenova */ /* ============================================================================= Overlay/backdrop — Bootstrap generates a single .modal-backdrop element; safe to target globally since this is the only modal in the theme. ============================================================================= */ .modal-backdrop.show { background-color: rgba(230, 248, 255, 0.70); opacity: 1; /* Bootstrap's own opacity var is overridden — the rgba alpha above controls transparency instead. */ backdrop-filter: blur(70px); -webkit-backdrop-filter: blur(70px); } /* ============================================================================= Container ============================================================================= */ .demo-request-modal .modal-dialog { max-width: calc(100vw - 60px); width: 1321px; margin: 1.75rem auto; } .demo-request-modal .modal-content { position: relative; border: none; border-radius: 32px; background: #FFFFFF; padding: 56px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16); } .demo-request-modal__close { position: absolute; top: 32px; right: 32px; z-index: 2; /* Bootstrap's own .modal-body is position:relative (a z-index:auto positioned box) and comes after this button in the DOM — without an explicit z-index here, that gives .modal-body equal-priority stacking that wins on tree order, so it paints (and intercepts clicks) on TOP of this button wherever their boxes overlap. That overlap is invisible on desktop's wider padding, but the narrower tablet/mobile padding brings .modal-body's edge right under the button, silently swallowing every click on it. */ display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background-color: transparent; color: #58595B; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .demo-request-modal__close:hover { background-color: #F5F7FC; color: #000000; } /* ============================================================================= Header — logo + heading on the left, description on the right. ============================================================================= */ .demo-request-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 32px; } .demo-request-modal__header-left { display: flex; align-items: center; gap: 20px; } .demo-request-modal__logo { flex-shrink: 0; width: 85px; height: 93px; object-fit: contain; display: block; } .demo-request-modal__heading { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 48px; font-weight: 500; line-height: 52.8px; letter-spacing: -1.92px; color: #000000; margin: 0; } .demo-request-modal__description { flex-shrink: 0; width: 606px; max-width: 100%; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 150%; color: #6F7174; text-align: right; margin: 0; } .demo-request-modal__divider { border: none; border-top: 1px solid #E5E7EB; margin: 0 0 32px; } /* ============================================================================= Fields ============================================================================= */ .demo-request-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .demo-request-form__row--features { align-items: start; } .demo-request-form__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; } .demo-request-form__row .demo-request-form__field { margin-bottom: 0; } .demo-request-form__field label, .demo-request-form__checkbox-legend { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 500; color: #111827; } .demo-request-form__field input, .demo-request-form__field textarea { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 400; color: #000000; background: #FFFFFF; border: 1px solid #D6D3D1; border-radius: 10px; height: 56px; padding: 16px; box-sizing: border-box; width: 100%; transition: border-color 0.15s ease; } .demo-request-form__field textarea { height: auto; min-height: 160px; /* Matches the checkbox column's own natural height for visual balance. */ resize: vertical; } .demo-request-form__field input::placeholder, .demo-request-form__field textarea::placeholder { font-size: 16px; font-weight: 400; color: #A3A3A3; } .demo-request-form__field input:focus, .demo-request-form__field textarea:focus { outline: none; border-color: #219FD6; } .demo-request-form__required { color: #FF3B30; } .demo-request-form__field.has-error label { color: #FF3B30; } .demo-request-form__field.has-error input, .demo-request-form__field.has-error textarea { border-color: #FF3B30; } .demo-request-form__field-error { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; color: #FF3B30; display: none; } .demo-request-form__field.has-error .demo-request-form__field-error { display: block; } .demo-request-form__field--checkboxes { gap: 16px; } .demo-request-form__checkbox { display: flex; align-items: center; gap: 12px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; font-weight: 400; color: #2E2E2E; cursor: pointer; } .demo-request-form__checkbox input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #219FD6; cursor: pointer; } .demo-request-form__error { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; color: #B42318; background-color: #FEF3F2; border: 1px solid #FDA29B; border-radius: 10px; padding: 10px 14px; margin-bottom: 24px; } /* ============================================================================= Submit + footer note ============================================================================= */ .demo-request-form__submit { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; background-color: #219FD6; color: #FFFFFF; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; padding: 0 24px; margin-top: 8px; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .demo-request-form__submit:hover { background-color: #1a86b8; } .demo-request-form__submit:active { background-color: #146a91; } .demo-request-form__submit:disabled { opacity: 0.7; cursor: not-allowed; } .demo-request-form__spinner { display: none; width: 16px; height: 16px; margin-left: 10px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #FFFFFF; border-radius: 50%; animation: demo-request-spin 0.7s linear infinite; } .demo-request-form__submit.is-loading .demo-request-form__spinner { display: inline-block; } @keyframes demo-request-spin { to { transform: rotate(360deg); } } .demo-request-form__privacy-note { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; color: #6F7174; text-align: center; margin: 16px 0 0; } .demo-request-form__privacy-note a { color: #219FD6; text-decoration: underline; } /* ============================================================================= Success panel ============================================================================= */ .demo-request-modal__panel--success { text-align: center; padding-block: 24px; } .demo-request-modal__success-image { display: block; max-width: 100%; height: auto; margin: 0 auto 32px; } .demo-request-modal__success-title { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 48px; font-weight: 500; line-height: 52.8px; letter-spacing: -1.92px; color: #000000; text-align: center; margin: 0 0 16px; } .demo-request-modal__success-description { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 150%; color: #6F7174; text-align: center; margin: 0; } @media ( prefers-reduced-motion: reduce ) { .demo-request-form__spinner { animation: none; } } /* ============================================================================= Responsive ============================================================================= */ @media ( max-width: 991.98px ) { .demo-request-modal .modal-content { padding: 40px 32px; } .demo-request-modal__header { flex-direction: column; align-items: flex-start; gap: 16px; } .demo-request-modal__description { width: 100%; text-align: left; } .demo-request-modal__heading, .demo-request-modal__success-title { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; } } @media ( max-width: 575.98px ) { .demo-request-modal .modal-content { padding: 28px 20px; } .demo-request-form__row, .demo-request-form__row--features { grid-template-columns: 1fr; gap: 16px; } .demo-request-modal__logo { width: 56px; height: 61px; } .demo-request-modal__heading, .demo-request-modal__success-title { font-size: 24px; } .demo-request-modal__success-description { font-size: 15px; } }