/* * ConnectHQ — enquiry modal, standalone stylesheet. * * WHY THIS FILE EXISTS * -------------------- * The site-wide enquiry modal (#exampleModalCenter / #enquire_modal_form) is * Bootstrap 4 markup driven by bootstrap.min.js, jQuery Validate and * assets/js/enquiry-form.js. theme.css deliberately does NOT re-author it, * because its field names, the City->Area cascade, the desk steppers and the * legacy `location` value are what connecthqEmail.php and the CRM consume. * * When the themed pages (book-*, about, contact, office-space-solutions, * coworking-space-in-noida) were migrated to theme.css they stopped loading * bootstrap.min.css AND assets/css/style.css. The modal markup stayed. With no * `.modal{position:fixed;display:none}` the dialog stops being a dialog: it * renders as a plain, permanently-visible block at the foot of the page, full * width, with the grid collapsed to one column per field. * * Re-adding the whole 145KB Bootstrap would fix the modal and break everything * else — its reset and typography fight theme.css across the entire page, which * is exactly why it was dropped. So this file carries only the rules the modal * subtree needs, lifted from Bootstrap 4.0.0 and from the .enquiry-* blocks of * assets/css/style.css. * * SCOPING * ------- * Every rule is confined to `.modal`/`.modal-backdrop`/`body.modal-open` or to * the enquiry form itself. Nothing here can reach the themed page around it: * the grid rules are `.modal .row > .col-*`, never a bare `.col-md-6`. Load it * AFTER theme.css so the escape hatches in theme.css's "LEGACY ESCAPE HATCHES" * section (which raise specificity with `body.chq .modal ...`) still win where * they intentionally override these defaults. * * This file is NOT scoped to body.chq: coworking-space-in-noida.html and the * other legacy pages have the same modal, so one file serves both worlds. * * Keep in sync with: bootstrap.min.css (modal/grid/form-control primitives) and * style.css (.enquiry-* custom blocks). Those two remain the source of truth * for pages that still load them. */ /* ═══════════════════════════════════════════════════════════════ MODAL SHELL — Bootstrap 4.0.0 primitives ─────────────────────────────────────────────────────────────── Without .modal{display:none} the dialog is visible inline on page load. bootstrap.min.js adds .show and inline display:block when it opens, and appends .modal-backdrop to , so those states are reproduced here too. ═══════════════════════════════════════════════════════════════ */ .modal{ position:fixed; top:0;right:0;bottom:0;left:0; z-index:1050; display:none; overflow:hidden; outline:0; } /* Bootstrap's JS sets overflow on ; the scroll lives on .modal. */ body.modal-open{overflow:hidden} body.modal-open .modal{overflow-x:hidden;overflow-y:auto} .modal-backdrop{ position:fixed; top:0;right:0;bottom:0;left:0; z-index:1040; background-color:#000; } .modal-backdrop.fade{opacity:0} .modal-backdrop.show{opacity:.5} /* .fade/.show drive the open animation. Scoped to .modal so the utility class cannot blank out unrelated themed elements that happen to use .fade. */ .modal.fade{opacity:0;transition:opacity .15s linear} .modal.show{opacity:1} .modal.fade .modal-dialog{ transition:transform .3s ease-out; transform:translate(0,-25%); } .modal.show .modal-dialog{transform:translate(0,0)} .modal-dialog{ position:relative; width:auto; margin:1.75rem auto; max-width:500px; pointer-events:none; } .modal-dialog-centered{ display:flex; align-items:center; min-height:calc(100% - (1.75rem * 2)); } .modal-content{ position:relative; display:flex; flex-direction:column; width:100%; pointer-events:auto; background-color:#fff; background-clip:padding-box; border:1px solid rgba(0,0,0,.2); border-radius:.3rem; outline:0; } .modal-header{ display:flex; align-items:flex-start; justify-content:space-between; padding:1rem; border-bottom:1px solid #e9ecef; border-top-left-radius:.3rem; border-top-right-radius:.3rem; } .modal-title{margin-bottom:0;line-height:1.5} .modal-body{ position:relative; flex:1 1 auto; padding:1rem; } /* The dismiss "×". theme.css defines no .close, so it needs the full rule. */ .modal .close{ float:right; padding:0; margin:-1rem -1rem -1rem auto; font-size:1.5rem; font-weight:700; line-height:1; color:#000; text-shadow:0 1px 0 #fff; opacity:.5; background:transparent; border:0; cursor:pointer; } .modal .close:hover, .modal .close:focus{opacity:.85} /* ═══════════════════════════════════════════════════════════════ GRID — only inside a modal ─────────────────────────────────────────────────────────────── Deliberately written as `.modal .row > [class*="col-"]` rather than as bare .col-md-6 / .col-12 utilities, so these can never lay out anything on the themed page outside the dialog. ═══════════════════════════════════════════════════════════════ */ .modal .row{ display:flex; flex-wrap:wrap; margin-right:-15px; margin-left:-15px; } .modal .row > [class*="col-"]{ position:relative; width:100%; min-height:1px; padding-right:15px; padding-left:15px; } .modal .row > .col-12{flex:0 0 100%;max-width:100%} @media (min-width:768px){ .modal .row > .col-md-6{flex:0 0 50%;max-width:50%} } /* ═══════════════════════════════════════════════════════════════ FORM CONTROLS — Bootstrap's, not the theme's .form-ctrl ═══════════════════════════════════════════════════════════════ */ .modal .form-control{ display:block; width:100%; padding:.375rem .75rem; font-family:'Inter','Manrope',sans-serif; font-size:1rem; line-height:1.5; color:#495057; background-color:#fff; background-clip:padding-box; border:1px solid #ced4da; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .modal .form-control:focus{ color:#495057; background-color:#fff; border-color:#9b7fc4; outline:0; box-shadow:0 0 0 .2rem rgba(107,47,160,.15); } .modal .form-control::placeholder{color:#8a87a8;opacity:1} /* A native select needs an explicit height to line up with the text inputs. */ .modal select.form-control{ height:48px; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23495057' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } /* ═══════════════════════════════════════════════════════════════ ENQUIRY FORM — the .enquiry-* blocks from assets/css/style.css ─────────────────────────────────────────────────────────────── Reproduced verbatim in behaviour so the modal looks the same on a themed page as it does on a legacy one. style.css remains the source of truth. ═══════════════════════════════════════════════════════════════ */ .enquiry-grid > [class*="col-"]{margin-bottom:15px} .enquiry-grid .form-control{height:48px} .enquiry-grid select.form-control{color:#495057} .enquiry-grid span.help-block{display:block;margin-top:4px} .modal-dialog .enquiry-grid{margin-left:-8px;margin-right:-8px} /* Phone = country-code select fused to the number input; desks = number input fused to -/+ steppers. Both are one visual control made of two elements. */ .phone-group, .desk-group{display:flex;align-items:stretch} .phone-group .country-code{ flex:0 0 105px; width:105px; border-radius:4px 0 0 4px; padding-left:8px; padding-right:4px; } .phone-group input[name="phone"]{ flex:1 1 auto; min-width:0; border-left:0; border-radius:0 4px 4px 0; } .desk-group input[name="numberofseat"]{ flex:1 1 auto; min-width:0; border-radius:4px 0 0 4px; -moz-appearance:textfield; appearance:textfield; } .desk-group input[name="numberofseat"]::-webkit-outer-spin-button, .desk-group input[name="numberofseat"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .desk-group .desk-step{ flex:0 0 46px; width:46px; background:#f1f1f1; border:1px solid #bdbdbd; border-left:0; font-size:20px; line-height:1; color:#333; cursor:pointer; } .desk-group .desk-step:last-child{border-radius:0 4px 4px 0} .desk-group .desk-step:hover{background:#e2e2e2} .enquiry-consent{font-size:13px;line-height:1.5;margin-bottom:5px} .enquiry-consent a{color:#6B2FA0;font-weight:600} .enquiry-submit{display:flex;justify-content:flex-end} .enquiry-submit input[type="submit"]{width:auto;min-width:140px} /* The submit button. theme.css neutralises .modal .btn back to a flat look (see its LEGACY ESCAPE HATCHES); on a page without theme.css this supplies the whole button, so both paths land on the same appearance. */ .modal .btn{ display:inline-block; padding:10px 22px; font-family:'Inter','Manrope',sans-serif; font-size:1rem; font-weight:500; line-height:1.5; text-align:center; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:background-color .15s ease-in-out; } .modal .btn-primary{background-color:#6B2FA0;border-color:#6B2FA0;color:#fff} .modal .btn-primary:hover, .modal .btn-primary:focus{background-color:#7C3DB5;border-color:#7C3DB5;color:#fff} /* jQuery Validate injects these outside any class system. script.js configures errorElement:'span' and errorClass:'help-block', so the messages arrive as — .error is kept as well for the default configuration used by any other form on the page. */ .modal span.help-block, .modal label.error{ display:block; color:#cc1b24; font-size:12px; margin-top:4px; font-weight:400; } .modal .form-control.error{border-color:#cc1b24} /* The "submitting…" overlay, from style.css. Above the modal (z-index 1050). */ .form_submit_overlay{ position:absolute; width:100vw; height:100vh; left:0; z-index:100001; background:rgb(0 0 0 / 70%); display:none; } .form_submit_overlay svg{ width:100px; position:relative; top:50%; left:50%; transform:translate(-50%,-50%); } .form_submit_overlay.active{display:block} /* ═══════════════════════════════════════════════════════════════ INLINE (NON-MODAL) LEGACY FORMS ─────────────────────────────────────────────────────────────── contact.html's "Send a message" form (#enquire_modal_form2) is the same legacy Bootstrap markup but sits in the page, not in a dialog, so the .modal-scoped rules above cannot reach it. It relies on three Bootstrap utilities that no loaded stylesheet defines any more. .d-none matters most: it hides the `location` and `numberofseat` fields that connecthqEmail.php requires. Without it those inputs render in the middle of the form and the visitor sees "Number of seats" and a "Contact page" dropdown they were never meant to fill in. Scoped to the form so these never become site-wide utilities. ═══════════════════════════════════════════════════════════════ */ #enquire_modal_form2 .d-none{display:none !important} #enquire_modal_form2 .mt-3{margin-top:1rem !important} #enquire_modal_form2 .form-control{ display:block; width:100%; padding:.375rem .75rem; font-family:'Inter','Manrope',sans-serif; font-size:1rem; line-height:1.5; color:#495057; background-color:#fff; background-clip:padding-box; border:1px solid #ced4da; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; } #enquire_modal_form2 input.form-control{height:48px} #enquire_modal_form2 .form-control:focus{ color:#495057; border-color:#9b7fc4; outline:0; box-shadow:0 0 0 .2rem rgba(107,47,160,.15); } #enquire_modal_form2 .form-control::placeholder{color:#8a87a8;opacity:1} #enquire_modal_form2 .form-control.error{border-color:#cc1b24} #enquire_modal_form2 span.help-block, #enquire_modal_form2 label.error{ display:block; color:#cc1b24; font-size:12px; margin-top:4px; font-weight:400; } /* The theme's own .btn is a pill CTA; this legacy submit keeps the flat look used by the modal so both contact forms read the same. */ #enquire_modal_form2 input[type="submit"].btn{ display:inline-block; width:auto; min-width:160px; padding:12px 26px; font-family:'Inter','Manrope',sans-serif; font-size:1rem; font-weight:500; line-height:1.5; text-align:center; border:1px solid #6B2FA0; border-radius:2px; background-color:#6B2FA0; color:#fff; cursor:pointer; transition:background-color .15s ease-in-out; } #enquire_modal_form2 input[type="submit"].btn:hover, #enquire_modal_form2 input[type="submit"].btn:focus{ background-color:#7C3DB5; border-color:#7C3DB5; } /* ═══════════════════════════════════════════════════════════════ SMALL SCREENS ═══════════════════════════════════════════════════════════════ */ @media (max-width:575.98px){ .modal-dialog{margin:.5rem;max-width:calc(100% - 1rem)} .modal-dialog-centered{min-height:calc(100% - 1rem)} .enquiry-submit{justify-content:stretch} .enquiry-submit input[type="submit"]{width:100%} } @media (prefers-reduced-motion:reduce){ .modal.fade, .modal.fade .modal-dialog{transition:none} }