<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-contact.css?cb=">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-visual-modal.css?cb=">
<div class="property-contact" data-module="propertyContact,propertyVisualModal">
<div class="property-contact__wrapper">
<div class="property-contact__inside has-image js-agent">
<div class="property-contact__content">
<span class="property-contact__content-eyebrow">Meet your agent</span>
<span class="property-contact__content-title">Jennifer Ebanks</span>
</div>
<div class="property-contact__social">
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M5.48298 3C5.19175 3 4.91516 3.11639 4.70417 3.32787C3.66199 4.37912 3.20225 5.02728 3.05593 6.31888C2.68824 9.37092 4.11181 12.1911 7.96903 16.0574C12.5442 20.6433 16.3377 21 17.3912 21C17.5649 21 17.6659 20.9905 17.689 20.9882C19.0234 20.8283 19.653 20.3381 20.6759 19.3346C21.0931 18.9131 21.1096 18.247 20.7132 17.8477L17.7863 14.9139C17.6022 14.7299 17.352 14.6281 17.0825 14.6281C16.7908 14.6281 16.5147 14.744 16.3042 14.9551L15.4616 15.7986C15.1501 16.1104 14.7357 16.2821 14.2953 16.2821C14.0046 16.2821 13.718 16.2045 13.466 16.0579C12.5347 15.5147 11.4331 14.8098 10.3248 13.6994C9.31094 12.6813 8.67609 11.7407 7.98036 10.5528C7.59945 9.90222 7.70518 9.07664 8.23666 8.54439L9.07399 7.70651C9.49266 7.28686 9.50965 6.62025 9.11223 6.22047L6.18674 3.28671C6.00219 3.10172 5.75249 3 5.48298 3Z" stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-tel js-copy">
<a href="tel:1-345-325-0137" class="property-contact__tooltip-text">1-345-325-0137</a>
<button class="property-contact__tooltip-copy js-copy-trigger" data-copy="1-345-325-0137" data-index="0">
<i class="property-contact__tooltip-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
<path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
<path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
</svg>
</i>
<span class="property-contact__tooltip-copy-before">
Copy
</span>
<span class="property-contact__tooltip-copy-after">
Copied
</span>
</button>
</span>
</div>
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M2 6H22V19H2V6Z" stroke="white" stroke-width="2" />
<path d="M2 7L12.5 14L22 7" stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-email js-copy">
<a href="mailto:shanice.ebanks@provenance.com" class="property-contact__tooltip-text">shanice.ebanks@provenance.com</a>
<button class="property-contact__tooltip-copy js-copy-trigger" data-copy="shanice.ebanks@provenance.com" data-index="1">
<i class="property-contact__tooltip-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
<path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
<path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
</svg>
</i>
<span class="property-contact__tooltip-copy-before">
Copy
</span>
<span class="property-contact__tooltip-copy-after">
Copied
</span>
</button>
</span>
</div>
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M22 21L6 21C5.44771 21 5 20.5523 5 20L5 4C5 3.44771 5.44772 3 6 3L22 3C22.5523 3 23 3.44772 23 4L23 20C23 20.5523 22.5523 21 22 21Z" stroke="white" stroke-width="2" />
<path d="M10 17.5C10.5342 15.7156 12.123 14.4212 14 14.4212C15.877 14.4212 17.4658 15.7156 18 17.5M16.2222 9.19911C16.2222 10.4136 15.2273 11.3982 14 11.3982C12.7727 11.3982 11.7778 10.4136 11.7778 9.19911C11.7778 7.98457 12.7727 7 14 7C15.2273 7 16.2222 7.98457 16.2222 9.19911Z" stroke="white" stroke-width="2" />
<line x1="7" y1="8" x2="2" y2="8" stroke="white" stroke-width="2" />
<line x1="7" y1="17" x2="2" y2="17" stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-address-book">
<a href="/assets/themes/default/images/ajax-loader.gif" target="_blank" download class="property-contact__tooltip-download">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12" fill="none">
<path d="M0.5 7.5V11.5H13.5V7.5" stroke="#00B1E5" />
<path d="M7 0V7.5" stroke="#00B1E5" />
<path d="M4.5 5L7 7.5L9.5 5" stroke="#00B1E5" />
</svg>
Download contact
</a>
</span>
</div>
</div>
<span class="property-contact__mls">
MLS 413220
</span>
<div class="property-contact__img">
<img src="/media/agent.png" altText="Image Alt Text" loading="lazy" />
</div>
</div>
<div class="property-contact__action">
<div class="property-contact__action-inside">
<button class="property-contact__btn property-contact__btn--secondary js-agent-trigger">
Detail
</button>
<button class="property-contact__btn property-contact__btn--primary js-modal-open">
Enquire
</button>
</div>
<span class="property-contact__mls">
MLS 413220
</span>
</div>
</div>
<div class="modal modal--property-contact-details js-modal">
<div class="modal__container">
<div class="property-contact-details">
<div class="property-contact-details__header">
<div class="property-contact-details__header-img">
<img src="/media/agent.png" altText="Image Alt Text" loading="lazy" />
</div>
<div class="property-contact-details__header-text">
<span class="property-contact-details__header-eyebrow">Meet your agent</span>
<h2 class="property-contact-details__header-title">Jennifer Ebanks</h2>
</div>
<button class="modal__close property-contact-details__header-close js-modal-close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.3638 4.22168L19.778 5.63589L5.63585 19.778L4.22163 18.3638L18.3638 4.22168Z" fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
</svg>
</button>
</div>
<div class="property-contact-details__inside">
<div id='umbraco_form_764891253be44481887bba9174613eb3' class='umbraco-forms-form dartkyagentcontactform umbraco-forms-dart'>
<form action='/property/60-nexus-way-retail-102--ref-a0e4j000003okxaua2/' enctype='multipart/form-data' id='formcf91865f1d784bd9a91ec9db5e057740' method='post' novalidate='novalidate'><input data-val='true' data-val-required='The FormId field is required.' name='FormId' type='hidden' value='76489125-3be4-4481-887b-ba9174613eb3'><input data-val='true' data-val-required='The FormName field is required.' name='FormName' type='hidden' value='Dart.ky Agent Contact Form'><input data-val='true' data-val-required='The RecordId field is required.' name='RecordId' type='hidden' value='00000000-0000-0000-0000-000000000000'><input name='PreviousClicked' type='hidden' value=''><input name='Theme' type='hidden' value='dart'> <input type='hidden' name='FormStep' value='0'> <input type='hidden' name='RecordState' value='Q2ZESjhEbm9YOWtiUEdkRnQwSHNIZWpqcG1JMkdLX2E2QkpqenFLSlFBTUNKejFLMG96N2dxMUc4SFVTbXR2TkVsSVVLa1gyYkRiWlJKXzA2Yl9tblBfWDNfU2xuNndkTm9FVUhyQWMwaUtvblZPMm1QVnFObUdVRXl3a2tnZ2x6M0luSGc='>
<link rel='stylesheet' href='/assets/themes/DartKy/css/forms.css?1.0.0.1'>
<div class='umbraco-forms-page' id='474dcc82-ff4f-4b8a-8a2d-bdd21d75d80a'>
<fieldset class='umbraco-forms-fieldset' id='a2ad3d55-c493-4c31-fbd9-721d33b8c4a2'>
<div class='grid-x grid-padding-x'>
<div class='umbraco-forms-container cell medium-6'>
<div class=' umbraco-forms-field firstname shortanswer mandatory form__row'> <label for='b8f23209-eaf9-4662-baf8-5e2b11d32672' class='umbraco-forms-label form__label'> First Name <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='b8f23209-eaf9-4662-baf8-5e2b11d32672' id='b8f23209-eaf9-4662-baf8-5e2b11d32672' data-umb='b8f23209-eaf9-4662-baf8-5e2b11d32672' class='textfield__input text ' value='' maxlength='500' placeholder='First Name' data-val='true' data-val-required='Please provide a value for First Name'> <span class='field-validation-valid' data-valmsg-for='b8f23209-eaf9-4662-baf8-5e2b11d32672' data-valmsg-replace='true'></span> </div>
</div>
</div>
<div class='umbraco-forms-container cell medium-6'>
<div class=' umbraco-forms-field lastname shortanswer alternating form__row'> <label for='4397d64d-5c5f-4856-a1e2-e0c73111f916' class='umbraco-forms-label form__label'> Last Name </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='4397d64d-5c5f-4856-a1e2-e0c73111f916' id='4397d64d-5c5f-4856-a1e2-e0c73111f916' data-umb='4397d64d-5c5f-4856-a1e2-e0c73111f916' class='textfield__input text ' value='' maxlength='500' placeholder='Last Name'> <span class='field-validation-valid' data-valmsg-for='4397d64d-5c5f-4856-a1e2-e0c73111f916' data-valmsg-replace='true'></span> </div>
</div>
</div>
</div>
</fieldset>
<fieldset class='umbraco-forms-fieldset' id='024dc3e1-2125-469c-86c8-d29f99a16343'>
<div class='grid-x grid-padding-x'>
<div class='umbraco-forms-container cell medium-12'>
<div class=' umbraco-forms-field emailaddress shortanswer mandatory form__row'> <label for='13d07bf7-6a02-4cf3-8898-12d490733e20' class='umbraco-forms-label form__label'> Email Address <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='13d07bf7-6a02-4cf3-8898-12d490733e20' id='13d07bf7-6a02-4cf3-8898-12d490733e20' data-umb='13d07bf7-6a02-4cf3-8898-12d490733e20' class='textfield__input text ' value='' maxlength='500' placeholder='Email Address' data-val='true' data-val-required='Please provide a value for Email Address' data-val-regex='Please enter a valid email address' data-val-regex-pattern='[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+'> <span class='field-validation-valid' data-valmsg-for='13d07bf7-6a02-4cf3-8898-12d490733e20' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field company shortanswer alternating form__row'> <label for='798a5309-4102-4404-e759-ae99f1a4eee2' class='umbraco-forms-label form__label'> Company </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='798a5309-4102-4404-e759-ae99f1a4eee2' id='798a5309-4102-4404-e759-ae99f1a4eee2' data-umb='798a5309-4102-4404-e759-ae99f1a4eee2' class='textfield__input text ' value='' maxlength='500' placeholder='Company'> <span class='field-validation-valid' data-valmsg-for='798a5309-4102-4404-e759-ae99f1a4eee2' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field countryofresidence dropdown form__row'> <label for='de739321-c760-4fe2-e1be-bc6bec307e9c' class='umbraco-forms-label form__label'> Country of Residence </label>
<div class='umbraco-forms-field-wrapper'> <select class='dropdown valid' name='de739321-c760-4fe2-e1be-bc6bec307e9c' id='de739321-c760-4fe2-e1be-bc6bec307e9c' aria-invalid='false'>
<option value=''></option>
<option value='Country' selected='selected'>Country</option>
<option value='Cayman Islands'>Cayman Islands</option>
<option value='USA'>USA</option>
<option value='Aaland Islands'>Aaland Islands</option>
<option value='Afghanistan'>Afghanistan</option>
<option value='Albania'>Albania</option>
<option value='Algeria'>Algeria</option>
<option value='American Samoa'>American Samoa</option>
<option value='Andorra'>Andorra</option>
<option value='Angola'>Angola</option>
<option value='Anguilla'>Anguilla</option>
<option value='Antigua and Barbuda'>Antigua and Barbuda</option>
<option value='Argentina'>Argentina</option>
<option value='Armenia'>Armenia</option>
<option value='Aruba'>Aruba</option>
<option value='Australia'>Australia</option>
<option value='Austria'>Austria</option>
<option value='Azerbaijan'>Azerbaijan</option>
<option value='Bahamas'>Bahamas</option>
<option value='Bahrain'>Bahrain</option>
<option value='Bangladesh'>Bangladesh</option>
<option value='Barbados'>Barbados</option>
<option value='Belarus'>Belarus</option>
<option value='Belgium'>Belgium</option>
<option value='Belize'>Belize</option>
<option value='Benin'>Benin</option>
<option value='Bermuda'>Bermuda</option>
<option value='Bhutan'>Bhutan</option>
<option value='Bolivia'>Bolivia</option>
<option value='Bonair, Saint Eustatius, and Saba'>Bonair, Saint Eustatius, and Saba</option>
<option value='Bosnia and Herzegovina'>Bosnia and Herzegovina</option>
<option value='Botswana'>Botswana</option>
<option value='Bouvet Island'>Bouvet Island</option>
<option value='Brazil'>Brazil</option>
<option value='Brunei Darussalam'>Brunei Darussalam</option>
<option value='Burkina Faso'>Burkina Faso</option>
<option value='Bulgaria'>Bulgaria</option>
<option value='Burundi'>Burundi</option>
<option value='Cambodia'>Cambodia</option>
<option value='Cameroon'>Cameroon</option>
<option value='Canada'>Canada</option>
<option value='Cape Verde'>Cape Verde</option>
<option value='Central African Republic'>Central African Republic</option>
<option value='Chad'>Chad</option>
<option value='Chile'>Chile</option>
<option value='China'>China</option>
<option value='Christmas Island'>Christmas Island</option>
<option value='Colombia'>Colombia</option>
<option value='Comoros'>Comoros</option>
<option value='Congo'>Congo</option>
<option value='Cook Islands'>Cook Islands</option>
<option value='Costa Rica'>Costa Rica</option>
<option value='Cote d' Ivoire'>Cote d'Ivoire</option>
<option value='Croatia'>Croatia</option>
<option value='Cuba'>Cuba</option>
<option value='Curacao'>Curacao</option>
<option value='Cyprus'>Cyprus</option>
<option value='Czech Republic'>Czech Republic</option>
<option value='Democratic Republic of the Congo'>Democratic Republic of the Congo</option>
<option value='Denmark'>Denmark</option>
<option value='Djibouti'>Djibouti</option>
<option value='Dominica'>Dominica</option>
<option value='Dominican Republic'>Dominican Republic</option>
<option value='Ecuador'>Ecuador</option>
<option value='Egypt'>Egypt</option>
<option value='El Salvador'>El Salvador</option>
<option value='Equatorial Guinea'>Equatorial Guinea</option>
<option value='Eritrea'>Eritrea</option>
<option value='Estonia'>Estonia</option>
<option value='Ethiopia'>Ethiopia</option>
<option value='Falkland Islands'>Falkland Islands</option>
<option value='Faroe Islands'>Faroe Islands</option>
<option value='Fiji'>Fiji</option>
<option value='Finland'>Finland</option>
<option value='France'>France</option>
<option value='French Guiana'>French Guiana</option>
<option value='French Polynesia'>French Polynesia</option>
<option value='Gabon'>Gabon</option>
<option value='Gambia'>Gambia</option>
<option value='Georgia'>Georgia</option>
<option value='Germany'>Germany</option>
<option value='Ghana'>Ghana</option>
<option value='Gibraltar'>Gibraltar</option>
<option value='Greece'>Greece</option>
<option value='Greenland'>Greenland</option>
<option value='Grenada'>Grenada</option>
<option value='Guadeloupe'>Guadeloupe</option>
<option value='Guam'>Guam</option>
<option value='Guatemala'>Guatemala</option>
<option value='Guernsey'>Guernsey</option>
<option value='Guinea'>Guinea</option>
<option value='Guyana'>Guyana</option>
<option value='Haiti'>Haiti</option>
<option value='Honduras'>Honduras</option>
<option value='Hong Kong'>Hong Kong</option>
<option value='Hungary'>Hungary</option>
<option value='Iceland'>Iceland</option>
<option value='India'>India</option>
<option value='Indonesia'>Indonesia</option>
<option value='Iran'>Iran</option>
<option value='Iraq'>Iraq</option>
<option value='Ireland'>Ireland</option>
<option value='Isle of Man'>Isle of Man</option>
<option value='Israel'>Israel</option>
<option value='Italy'>Italy</option>
<option value='Jamaica'>Jamaica</option>
<option value='Japan'>Japan</option>
<option value='Jersey (Channel Islands)'>Jersey (Channel Islands)</option>
<option value='Jordan'>Jordan</option>
<option value='Kazakhstan'>Kazakhstan</option>
<option value='Kenya'>Kenya</option>
<option value='Kiribati'>Kiribati</option>
<option value='Kuwait'>Kuwait</option>
<option value='Kyrgyzstan'>Kyrgyzstan</option>
<option value='Laos People' s Democratic Republic'>Laos People's Democratic Republic</option>
<option value='Latvia'>Latvia</option>
<option value='Lebanon'>Lebanon</option>
<option value='Lesotho'>Lesotho</option>
<option value='Liberia'>Liberia</option>
<option value='Libya'>Libya</option>
<option value='Liechtenstein'>Liechtenstein</option>
<option value='Lithuania'>Lithuania</option>
<option value='Luxembourg'>Luxembourg</option>
<option value='Macau'>Macau</option>
<option value='Macedonia'>Macedonia</option>
<option value='Madagascar'>Madagascar</option>
<option value='Malawi'>Malawi</option>
<option value='Malaysia'>Malaysia</option>
<option value='Maldives'>Maldives</option>
<option value='Mali'>Mali</option>
<option value='Malta'>Malta</option>
<option value='Marshall Islands'>Marshall Islands</option>
<option value='Martinique'>Martinique</option>
<option value='Mauritania'>Mauritania</option>
<option value='Mauritius'>Mauritius</option>
<option value='Mayotte'>Mayotte</option>
<option value='Mexico'>Mexico</option>
<option value='Moldova, Republic of'>Moldova, Republic of</option>
<option value='Monaco'>Monaco</option>
<option value='Mongolia'>Mongolia</option>
<option value='Montenegro'>Montenegro</option>
<option value='Montserrat'>Montserrat</option>
<option value='Morocco'>Morocco</option>
<option value='Mozambique'>Mozambique</option>
<option value='Myanmar'>Myanmar</option>
<option value='Namibia'>Namibia</option>
<option value='Nepal'>Nepal</option>
<option value='Netherlands'>Netherlands</option>
<option value='Netherlands Antilles'>Netherlands Antilles</option>
<option value='New Caledonia'>New Caledonia</option>
<option value='New Zealand'>New Zealand</option>
<option value='Nicaragua'>Nicaragua</option>
<option value='Niger'>Niger</option>
<option value='Nigeria'>Nigeria</option>
<option value='Niue'>Niue</option>
<option value='Norway'>Norway</option>
<option value='Oman'>Oman</option>
<option value='Pakistan'>Pakistan</option>
<option value='Palau'>Palau</option>
<option value='Palestine'>Palestine</option>
<option value='Panama'>Panama</option>
<option value='Papua New Guinea'>Papua New Guinea</option>
<option value='Paraguay'>Paraguay</option>
<option value='Peru'>Peru</option>
<option value='Philippines'>Philippines</option>
<option value='Pitcairn'>Pitcairn</option>
<option value='Poland'>Poland</option>
<option value='Portugal'>Portugal</option>
<option value='Puerto Rico'>Puerto Rico</option>
<option value='Qatar'>Qatar</option>
<option value='Republic of Kosovo'>Republic of Kosovo</option>
<option value='Reunion'>Reunion</option>
<option value='Romania'>Romania</option>
<option value='Russia'>Russia</option>
<option value='Rwanda'>Rwanda</option>
<option value='Saint Kitts and Nevis'>Saint Kitts and Nevis</option>
<option value='Saint Lucia'>Saint Lucia</option>
<option value='Saint Martin'>Saint Martin</option>
<option value='Saint Vincent and the Grenadines'>Saint Vincent and the Grenadines</option>
<option value='Samoa (Independent)'>Samoa (Independent)</option>
<option value='San Marino'>San Marino</option>
<option value='Sao Tome and Principe'>Sao Tome and Principe</option>
<option value='Saudi Arabia'>Saudi Arabia</option>
<option value='Senegal'>Senegal</option>
<option value='Serbia'>Serbia</option>
<option value='Seychelles'>Seychelles</option>
<option value='Sierra Leone'>Sierra Leone</option>
<option value='Singapore'>Singapore</option>
<option value='Sint Martin'>Sint Martin</option>
<option value='Slovakia'>Slovakia</option>
<option value='Slovenia'>Slovenia</option>
<option value='Solomon Islands'>Solomon Islands</option>
<option value='Somalia'>Somalia</option>
<option value='South Africa'>South Africa</option>
<option value='South Georgia and the South Sandwich Islands'>South Georgia and the South Sandwich Islands</option>
<option value='South Korea'>South Korea</option>
<option value='South Sudan'>South Sudan</option>
<option value='Spain'>Spain</option>
<option value='Spratly Islands'>Spratly Islands</option>
<option value='Sri Lanka'>Sri Lanka</option>
<option value='Sudan'>Sudan</option>
<option value='Suriname'>Suriname</option>
<option value='Svalbard and Jan Mayen Islands'>Svalbard and Jan Mayen Islands</option>
<option value='Swaziland'>Swaziland</option>
<option value='Sweden'>Sweden</option>
<option value='Switzerland'>Switzerland</option>
<option value='Syria'>Syria</option>
<option value='Taiwan'>Taiwan</option>
<option value='Tajikistan'>Tajikistan</option>
<option value='Tanzania'>Tanzania</option>
<option value='Thailand'>Thailand</option>
<option value='Timor-Leste'>Timor-Leste</option>
<option value='Togo'>Togo</option>
<option value='Tokelau'>Tokelau</option>
<option value='Tonga'>Tonga</option>
<option value='Trinidad and Tobago'>Trinidad and Tobago</option>
<option value='Tunisia'>Tunisia</option>
<option value='Turkey'>Turkey</option>
<option value='Turkmenistan'>Turkmenistan</option>
<option value='Turks & Caicos Islands'>Turks & Caicos Islands</option>
<option value='Uganda'>Uganda</option>
<option value='Ukraine'>Ukraine</option>
<option value='United Arab Emirates'>United Arab Emirates</option>
<option value='United Kingdom'>United Kingdom</option>
<option value='Uruguay'>Uruguay</option>
<option value='Uzbekistan'>Uzbekistan</option>
<option value='Vanuatu'>Vanuatu</option>
<option value='Vatican City State (Holy See)'>Vatican City State (Holy See)</option>
<option value='Venezuela'>Venezuela</option>
<option value='Vietnam'>Vietnam</option>
<option value='Virgin Islands (British)'>Virgin Islands (British)</option>
<option value='Virgin Islands (U.S.)'>Virgin Islands (U.S.)</option>
<option value='Western Sahara'>Western Sahara</option>
<option value='Yemen'>Yemen</option>
<option value='Zambia'>Zambia</option>
<option value='Zimbabwe'>Zimbabwe</option>
</select> <span class='field-validation-valid' data-valmsg-for='de739321-c760-4fe2-e1be-bc6bec307e9c' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field message longanswer mandatory alternating form__row'> <label for='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' class='umbraco-forms-label form__label'> Message <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <textarea class='' name='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' id='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' data-umb='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' rows='2' cols='20' placeholder='Message' data-val='true' data-val-required='Please provide a value for Message'></textarea> <span class='field-validation-valid' data-valmsg-for='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field propertytitle hidden form__row'>
<div class='umbraco-forms-field-wrapper'> <input type='hidden' name='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' id='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' class='hidden' data-alias='propertyTitle' value='60 Nexus Way - Retail 102'> <span class='field-validation-valid' data-valmsg-for='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field propertyid hidden alternating form__row'>
<div class='umbraco-forms-field-wrapper'> <input type='hidden' name='8ac66ccd-dabe-415b-c281-ba070bfafd84' id='8ac66ccd-dabe-415b-c281-ba070bfafd84' class='hidden' data-alias='propertyId' value='90433'> <span class='field-validation-valid' data-valmsg-for='8ac66ccd-dabe-415b-c281-ba070bfafd84' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field ihavereadtheahrefprivacypolicytarget_blankprivacypolicyaandahreftermsofusetarget_blanktermsofusea checkbox mandatory form__row'>
<div class='umbraco-forms-field-wrapper'>
<div class='checkbox__container'> <input type='checkbox' name='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' id='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' value='true' data-umb='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' data-val='true' data-val-requiredcb='Please provide a value'> <input type='hidden' name='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' value='false'> <label for='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' class='umbraco-forms-label checkbox__label'> I have read the <a href='/privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a><span class='umbraco-forms-indicator'>*</span> </label> </div> <span class='field-validation-valid' data-valmsg-for='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' data-valmsg-replace='true'></span>
</div>
</div>
<div class=' umbraco-forms-field privacynotice titleanddescription alternating form__row'>
<div class='umbraco-forms-field-wrapper'>
<div id='34905f17-6129-4201-9353-53be87cee2fc' data-umb='34905f17-6129-4201-9353-53be87cee2fc' class='form-text '>
<p class='form-text__body'>Dart Enterprises Ltd. takes your privacy very seriously and will only use your personal information to respond to your inquiry. The full details of how we use the personal information you provide to us, and the steps we take to protect your privacy, can be found within our privacy policy.</p>
</div> <span class='field-validation-valid' data-valmsg-for='34905f17-6129-4201-9353-53be87cee2fc' data-valmsg-replace='true'></span>
</div>
</div>
<div class=' umbraco-forms-field recaptcha recaptchav3withscore mandatory form__row'>
<div class='umbraco-forms-field-wrapper'> <input type='hidden' id='ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f' name='g-recaptcha-response' value='HFcThrYkFPAjIqdDheXxJPXlEtN3UeYHMoLUsNJFlpLUAqAmAdFQFjKl1WNGJLMlxhJ2lNFUsYWA1TdT8mBSs0NhsKEhleKTJAbBJlURo0bxAIFjtlD3sPDzt6ewlPQg1TGH5ZL08UZSh2QBohX257FjtMZApUZzgzFll2agZoQS15IjgeWkkaAEQvNj9HWyNrdU4fJCd5KkA_ARodFXALYQtwNlFdcAkgehJERRF5UgBoaBx1Azg0Nm8KFRs'>
<script>
var hiddenField = document.getElementById('ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f');
var timerFunction = function() {
grecaptcha.execute('6LfV8sceAAAAALtthGRzueDQgY7iJqBaSVz-iWS0', {
action: 'umbracoform_submit'
}).then(function(token) { // Enable the submit button now we have a token hiddenField.form.querySelector('[type=submit]').removeAttribute('disabled'); hiddenField.value = token; }); setTimeout(timerFunction, 60 * 1000); }; document.addEventListener('DOMContentLoaded', function () { // Disable the submit button for this form, until we actually have a key from Google reCAPTCHA hiddenField.form.querySelector('[type=submit]').setAttribute('disabled', 'disabled'); grecaptcha.ready(function () { timerFunction(); }); });
</script> <span class='field-validation-valid' data-valmsg-for='ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f' data-valmsg-replace='true'></span>
</div>
</div>
</div>
</div>
</fieldset>
<div style='display: none'> <input type='text' name='76489125-3be4-4481-887b-ba9174613eb3'> </div>
<div class='umbraco-forms-navigation grid-x grid-padding-x'>
<div class='cell medium-12'> <input type='submit' class='btn form__submit' value='Submit' name='__next'> </div>
</div>
</div> <input name='__RequestVerificationToken' type='hidden' value='CfDJ8DnoX9kbPGdFt0HsHejjpmKncoPDN1nPb9ruifVnmNS4keGNydIW4szQyphB-A3bYhkbO5Zpu6ez5br2kFd8dUJ3r4BcWPXFP7JOc0DHFf7OzOd2Pf2WToy5JkKT-mhlbmduxXcIKvnwZvAnrW0NkVo'><input name='ufprt' type='hidden' value='CfDJ8DnoX9kbPGdFt0HsHejjpmI4_mu4GHFh75w_La-s78717RUSd0b1EBvhe1a1cWJEEA02Oh6aBJS9-l28ppRQiC_n3cqamclVixvrGiH-c9vIxfWqTntjN2QUOjHw6wt3OD2Qm2IsLsCO3r1s8rg6epE'>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-contact.css?cb={{cacheBuster}}">
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-visual-modal.css?cb={{cacheBuster}}">
{{/if}}
<div class="property-contact" data-module="propertyContact,propertyVisualModal">
<div class="property-contact__wrapper">
<div class="property-contact__inside{{#if image}} has-image{{/if}} js-agent">
<div class="property-contact__content">
<span class="property-contact__content-eyebrow">{{eyebrow}}</span>
<span class="property-contact__content-title">{{title}}</span>
</div>
<div class="property-contact__social">
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M5.48298 3C5.19175 3 4.91516 3.11639 4.70417 3.32787C3.66199 4.37912 3.20225 5.02728 3.05593 6.31888C2.68824 9.37092 4.11181 12.1911 7.96903 16.0574C12.5442 20.6433 16.3377 21 17.3912 21C17.5649 21 17.6659 20.9905 17.689 20.9882C19.0234 20.8283 19.653 20.3381 20.6759 19.3346C21.0931 18.9131 21.1096 18.247 20.7132 17.8477L17.7863 14.9139C17.6022 14.7299 17.352 14.6281 17.0825 14.6281C16.7908 14.6281 16.5147 14.744 16.3042 14.9551L15.4616 15.7986C15.1501 16.1104 14.7357 16.2821 14.2953 16.2821C14.0046 16.2821 13.718 16.2045 13.466 16.0579C12.5347 15.5147 11.4331 14.8098 10.3248 13.6994C9.31094 12.6813 8.67609 11.7407 7.98036 10.5528C7.59945 9.90222 7.70518 9.07664 8.23666 8.54439L9.07399 7.70651C9.49266 7.28686 9.50965 6.62025 9.11223 6.22047L6.18674 3.28671C6.00219 3.10172 5.75249 3 5.48298 3Z"
stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-tel js-copy">
<a href="tel:{{telephone}}" class="property-contact__tooltip-text">{{telephone}}</a>
<button class="property-contact__tooltip-copy js-copy-trigger" data-copy="{{telephone}}"
data-index="0">
<i class="property-contact__tooltip-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"
fill="none">
<path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
<path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
</svg>
</i>
<span class="property-contact__tooltip-copy-before">
Copy
</span>
<span class="property-contact__tooltip-copy-after">
Copied
</span>
</button>
</span>
</div>
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M2 6H22V19H2V6Z" stroke="white" stroke-width="2" />
<path d="M2 7L12.5 14L22 7" stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-email js-copy">
<a href="mailto:{{email}}" class="property-contact__tooltip-text">{{email}}</a>
<button class="property-contact__tooltip-copy js-copy-trigger" data-copy="{{email}}"
data-index="1">
<i class="property-contact__tooltip-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"
fill="none">
<path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
<path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
</svg>
</i>
<span class="property-contact__tooltip-copy-before">
Copy
</span>
<span class="property-contact__tooltip-copy-after">
Copied
</span>
</button>
</span>
</div>
{{#if hasAgent}}
<div class="property-contact__social-item">
<button class="property-contact__social-trigger">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M22 21L6 21C5.44771 21 5 20.5523 5 20L5 4C5 3.44771 5.44772 3 6 3L22 3C22.5523 3 23 3.44772 23 4L23 20C23 20.5523 22.5523 21 22 21Z"
stroke="white" stroke-width="2" />
<path
d="M10 17.5C10.5342 15.7156 12.123 14.4212 14 14.4212C15.877 14.4212 17.4658 15.7156 18 17.5M16.2222 9.19911C16.2222 10.4136 15.2273 11.3982 14 11.3982C12.7727 11.3982 11.7778 10.4136 11.7778 9.19911C11.7778 7.98457 12.7727 7 14 7C15.2273 7 16.2222 7.98457 16.2222 9.19911Z"
stroke="white" stroke-width="2" />
<line x1="7" y1="8" x2="2" y2="8" stroke="white" stroke-width="2" />
<line x1="7" y1="17" x2="2" y2="17" stroke="white" stroke-width="2" />
</svg>
</button>
<span class="property-contact__tooltip is-address-book">
<a href="{{vcardUrl}}" target="_blank" download class="property-contact__tooltip-download">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12"
fill="none">
<path d="M0.5 7.5V11.5H13.5V7.5" stroke="#00B1E5" />
<path d="M7 0V7.5" stroke="#00B1E5" />
<path d="M4.5 5L7 7.5L9.5 5" stroke="#00B1E5" />
</svg>
{{vcardText}}
</a>
</span>
</div>
{{/if}}
</div>
{{#if propertyMultipleListingSystemNumber}}
<span class="property-contact__mls">
{{propertyMultipleListingSystemNumber}}
</span>
{{/if}}
{{#if image}}
<div class="property-contact__img" >
<img src="{{image.src}}" altText="{{image.altText}}" loading="lazy" />
</div>
{{/if}}
</div>
<div class="property-contact__action">
<div class="property-contact__action-inside">
<button class="property-contact__btn property-contact__btn--secondary js-agent-trigger">
Detail
</button>
<button class="property-contact__btn property-contact__btn--primary js-modal-open">
Enquire
</button>
</div>
{{#if propertyMultipleListingSystemNumber}}
<span class="property-contact__mls">
{{propertyMultipleListingSystemNumber}}
</span>
{{/if}}
</div>
</div>
<div class="modal modal--property-contact-details js-modal">
<div class="modal__container">
<div class="property-contact-details">
<div class="property-contact-details__header">
{{#if image}}
<div class="property-contact-details__header-img" >
<img src="{{image.src}}" altText="{{image.altText}}" loading="lazy" />
</div>
{{/if}}
<div class="property-contact-details__header-text">
<span class="property-contact-details__header-eyebrow">{{eyebrow}}</span>
<h2 class="property-contact-details__header-title">{{title}}</h2>
</div>
<button class="modal__close property-contact-details__header-close js-modal-close">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18.3638 4.22168L19.778 5.63589L5.63585 19.778L4.22163 18.3638L18.3638 4.22168Z"
fill="white" />
<path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z"
fill="white" />
</svg>
</button>
</div>
<div class="property-contact-details__inside">
{{{form}}}
</div>
</div>
</div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"eyebrow": "Meet your agent",
"title": "Jennifer Ebanks",
"telephone": "1-345-325-0137",
"email": "shanice.ebanks@provenance.com",
"vcardUrl": "/assets/themes/default/images/ajax-loader.gif",
"vcardText": "Download contact",
"hasAgent": true,
"propertyMultipleListingSystemNumber": "MLS 413220",
"form": "<div id='umbraco_form_764891253be44481887bba9174613eb3' class='umbraco-forms-form dartkyagentcontactform umbraco-forms-dart'> <form action='/property/60-nexus-way-retail-102--ref-a0e4j000003okxaua2/' enctype='multipart/form-data' id='formcf91865f1d784bd9a91ec9db5e057740' method='post' novalidate='novalidate'><input data-val='true' data-val-required='The FormId field is required.' name='FormId' type='hidden' value='76489125-3be4-4481-887b-ba9174613eb3'><input data-val='true' data-val-required='The FormName field is required.' name='FormName' type='hidden' value='Dart.ky Agent Contact Form'><input data-val='true' data-val-required='The RecordId field is required.' name='RecordId' type='hidden' value='00000000-0000-0000-0000-000000000000'><input name='PreviousClicked' type='hidden' value=''><input name='Theme' type='hidden' value='dart'> <input type='hidden' name='FormStep' value='0'> <input type='hidden' name='RecordState' value='Q2ZESjhEbm9YOWtiUEdkRnQwSHNIZWpqcG1JMkdLX2E2QkpqenFLSlFBTUNKejFLMG96N2dxMUc4SFVTbXR2TkVsSVVLa1gyYkRiWlJKXzA2Yl9tblBfWDNfU2xuNndkTm9FVUhyQWMwaUtvblZPMm1QVnFObUdVRXl3a2tnZ2x6M0luSGc='> <link rel='stylesheet' href='/assets/themes/DartKy/css/forms.css?1.0.0.1'> <div class='umbraco-forms-page' id='474dcc82-ff4f-4b8a-8a2d-bdd21d75d80a'> <fieldset class='umbraco-forms-fieldset' id='a2ad3d55-c493-4c31-fbd9-721d33b8c4a2'> <div class='grid-x grid-padding-x'> <div class='umbraco-forms-container cell medium-6'> <div class=' umbraco-forms-field firstname shortanswer mandatory form__row'> <label for='b8f23209-eaf9-4662-baf8-5e2b11d32672' class='umbraco-forms-label form__label'> First Name <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='b8f23209-eaf9-4662-baf8-5e2b11d32672' id='b8f23209-eaf9-4662-baf8-5e2b11d32672' data-umb='b8f23209-eaf9-4662-baf8-5e2b11d32672' class='textfield__input text ' value='' maxlength='500' placeholder='First Name' data-val='true' data-val-required='Please provide a value for First Name'> <span class='field-validation-valid' data-valmsg-for='b8f23209-eaf9-4662-baf8-5e2b11d32672' data-valmsg-replace='true'></span> </div> </div> </div> <div class='umbraco-forms-container cell medium-6'> <div class=' umbraco-forms-field lastname shortanswer alternating form__row'> <label for='4397d64d-5c5f-4856-a1e2-e0c73111f916' class='umbraco-forms-label form__label'> Last Name </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='4397d64d-5c5f-4856-a1e2-e0c73111f916' id='4397d64d-5c5f-4856-a1e2-e0c73111f916' data-umb='4397d64d-5c5f-4856-a1e2-e0c73111f916' class='textfield__input text ' value='' maxlength='500' placeholder='Last Name'> <span class='field-validation-valid' data-valmsg-for='4397d64d-5c5f-4856-a1e2-e0c73111f916' data-valmsg-replace='true'></span> </div> </div> </div> </div> </fieldset> <fieldset class='umbraco-forms-fieldset' id='024dc3e1-2125-469c-86c8-d29f99a16343'> <div class='grid-x grid-padding-x'> <div class='umbraco-forms-container cell medium-12'> <div class=' umbraco-forms-field emailaddress shortanswer mandatory form__row'> <label for='13d07bf7-6a02-4cf3-8898-12d490733e20' class='umbraco-forms-label form__label'> Email Address <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='13d07bf7-6a02-4cf3-8898-12d490733e20' id='13d07bf7-6a02-4cf3-8898-12d490733e20' data-umb='13d07bf7-6a02-4cf3-8898-12d490733e20' class='textfield__input text ' value='' maxlength='500' placeholder='Email Address' data-val='true' data-val-required='Please provide a value for Email Address' data-val-regex='Please enter a valid email address' data-val-regex-pattern='[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+'> <span class='field-validation-valid' data-valmsg-for='13d07bf7-6a02-4cf3-8898-12d490733e20' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field company shortanswer alternating form__row'> <label for='798a5309-4102-4404-e759-ae99f1a4eee2' class='umbraco-forms-label form__label'> Company </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='798a5309-4102-4404-e759-ae99f1a4eee2' id='798a5309-4102-4404-e759-ae99f1a4eee2' data-umb='798a5309-4102-4404-e759-ae99f1a4eee2' class='textfield__input text ' value='' maxlength='500' placeholder='Company'> <span class='field-validation-valid' data-valmsg-for='798a5309-4102-4404-e759-ae99f1a4eee2' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field countryofresidence dropdown form__row'> <label for='de739321-c760-4fe2-e1be-bc6bec307e9c' class='umbraco-forms-label form__label'> Country of Residence </label> <div class='umbraco-forms-field-wrapper'> <select class='dropdown valid' name='de739321-c760-4fe2-e1be-bc6bec307e9c' id='de739321-c760-4fe2-e1be-bc6bec307e9c' aria-invalid='false'> <option value=''></option> <option value='Country' selected='selected'>Country</option> <option value='Cayman Islands'>Cayman Islands</option> <option value='USA'>USA</option> <option value='Aaland Islands'>Aaland Islands</option> <option value='Afghanistan'>Afghanistan</option> <option value='Albania'>Albania</option> <option value='Algeria'>Algeria</option> <option value='American Samoa'>American Samoa</option> <option value='Andorra'>Andorra</option> <option value='Angola'>Angola</option> <option value='Anguilla'>Anguilla</option> <option value='Antigua and Barbuda'>Antigua and Barbuda</option> <option value='Argentina'>Argentina</option> <option value='Armenia'>Armenia</option> <option value='Aruba'>Aruba</option> <option value='Australia'>Australia</option> <option value='Austria'>Austria</option> <option value='Azerbaijan'>Azerbaijan</option> <option value='Bahamas'>Bahamas</option> <option value='Bahrain'>Bahrain</option> <option value='Bangladesh'>Bangladesh</option> <option value='Barbados'>Barbados</option> <option value='Belarus'>Belarus</option> <option value='Belgium'>Belgium</option> <option value='Belize'>Belize</option> <option value='Benin'>Benin</option> <option value='Bermuda'>Bermuda</option> <option value='Bhutan'>Bhutan</option> <option value='Bolivia'>Bolivia</option> <option value='Bonair, Saint Eustatius, and Saba'>Bonair, Saint Eustatius, and Saba</option> <option value='Bosnia and Herzegovina'>Bosnia and Herzegovina</option> <option value='Botswana'>Botswana</option> <option value='Bouvet Island'>Bouvet Island</option> <option value='Brazil'>Brazil</option> <option value='Brunei Darussalam'>Brunei Darussalam</option> <option value='Burkina Faso'>Burkina Faso</option> <option value='Bulgaria'>Bulgaria</option> <option value='Burundi'>Burundi</option> <option value='Cambodia'>Cambodia</option> <option value='Cameroon'>Cameroon</option> <option value='Canada'>Canada</option> <option value='Cape Verde'>Cape Verde</option> <option value='Central African Republic'>Central African Republic</option> <option value='Chad'>Chad</option> <option value='Chile'>Chile</option> <option value='China'>China</option> <option value='Christmas Island'>Christmas Island</option> <option value='Colombia'>Colombia</option> <option value='Comoros'>Comoros</option> <option value='Congo'>Congo</option> <option value='Cook Islands'>Cook Islands</option> <option value='Costa Rica'>Costa Rica</option> <option value='Cote d'Ivoire'>Cote d'Ivoire</option> <option value='Croatia'>Croatia</option> <option value='Cuba'>Cuba</option> <option value='Curacao'>Curacao</option> <option value='Cyprus'>Cyprus</option> <option value='Czech Republic'>Czech Republic</option> <option value='Democratic Republic of the Congo'>Democratic Republic of the Congo</option> <option value='Denmark'>Denmark</option> <option value='Djibouti'>Djibouti</option> <option value='Dominica'>Dominica</option> <option value='Dominican Republic'>Dominican Republic</option> <option value='Ecuador'>Ecuador</option> <option value='Egypt'>Egypt</option> <option value='El Salvador'>El Salvador</option> <option value='Equatorial Guinea'>Equatorial Guinea</option> <option value='Eritrea'>Eritrea</option> <option value='Estonia'>Estonia</option> <option value='Ethiopia'>Ethiopia</option> <option value='Falkland Islands'>Falkland Islands</option> <option value='Faroe Islands'>Faroe Islands</option> <option value='Fiji'>Fiji</option> <option value='Finland'>Finland</option> <option value='France'>France</option> <option value='French Guiana'>French Guiana</option> <option value='French Polynesia'>French Polynesia</option> <option value='Gabon'>Gabon</option> <option value='Gambia'>Gambia</option> <option value='Georgia'>Georgia</option> <option value='Germany'>Germany</option> <option value='Ghana'>Ghana</option> <option value='Gibraltar'>Gibraltar</option> <option value='Greece'>Greece</option> <option value='Greenland'>Greenland</option> <option value='Grenada'>Grenada</option> <option value='Guadeloupe'>Guadeloupe</option> <option value='Guam'>Guam</option> <option value='Guatemala'>Guatemala</option> <option value='Guernsey'>Guernsey</option> <option value='Guinea'>Guinea</option> <option value='Guyana'>Guyana</option> <option value='Haiti'>Haiti</option> <option value='Honduras'>Honduras</option> <option value='Hong Kong'>Hong Kong</option> <option value='Hungary'>Hungary</option> <option value='Iceland'>Iceland</option> <option value='India'>India</option> <option value='Indonesia'>Indonesia</option> <option value='Iran'>Iran</option> <option value='Iraq'>Iraq</option> <option value='Ireland'>Ireland</option> <option value='Isle of Man'>Isle of Man</option> <option value='Israel'>Israel</option> <option value='Italy'>Italy</option> <option value='Jamaica'>Jamaica</option> <option value='Japan'>Japan</option> <option value='Jersey (Channel Islands)'>Jersey (Channel Islands)</option> <option value='Jordan'>Jordan</option> <option value='Kazakhstan'>Kazakhstan</option> <option value='Kenya'>Kenya</option> <option value='Kiribati'>Kiribati</option> <option value='Kuwait'>Kuwait</option> <option value='Kyrgyzstan'>Kyrgyzstan</option> <option value='Laos People's Democratic Republic'>Laos People's Democratic Republic</option> <option value='Latvia'>Latvia</option> <option value='Lebanon'>Lebanon</option> <option value='Lesotho'>Lesotho</option> <option value='Liberia'>Liberia</option> <option value='Libya'>Libya</option> <option value='Liechtenstein'>Liechtenstein</option> <option value='Lithuania'>Lithuania</option> <option value='Luxembourg'>Luxembourg</option> <option value='Macau'>Macau</option> <option value='Macedonia'>Macedonia</option> <option value='Madagascar'>Madagascar</option> <option value='Malawi'>Malawi</option> <option value='Malaysia'>Malaysia</option> <option value='Maldives'>Maldives</option> <option value='Mali'>Mali</option> <option value='Malta'>Malta</option> <option value='Marshall Islands'>Marshall Islands</option> <option value='Martinique'>Martinique</option> <option value='Mauritania'>Mauritania</option> <option value='Mauritius'>Mauritius</option> <option value='Mayotte'>Mayotte</option> <option value='Mexico'>Mexico</option> <option value='Moldova, Republic of'>Moldova, Republic of</option> <option value='Monaco'>Monaco</option> <option value='Mongolia'>Mongolia</option> <option value='Montenegro'>Montenegro</option> <option value='Montserrat'>Montserrat</option> <option value='Morocco'>Morocco</option> <option value='Mozambique'>Mozambique</option> <option value='Myanmar'>Myanmar</option> <option value='Namibia'>Namibia</option> <option value='Nepal'>Nepal</option> <option value='Netherlands'>Netherlands</option> <option value='Netherlands Antilles'>Netherlands Antilles</option> <option value='New Caledonia'>New Caledonia</option> <option value='New Zealand'>New Zealand</option> <option value='Nicaragua'>Nicaragua</option> <option value='Niger'>Niger</option> <option value='Nigeria'>Nigeria</option> <option value='Niue'>Niue</option> <option value='Norway'>Norway</option> <option value='Oman'>Oman</option> <option value='Pakistan'>Pakistan</option> <option value='Palau'>Palau</option> <option value='Palestine'>Palestine</option> <option value='Panama'>Panama</option> <option value='Papua New Guinea'>Papua New Guinea</option> <option value='Paraguay'>Paraguay</option> <option value='Peru'>Peru</option> <option value='Philippines'>Philippines</option> <option value='Pitcairn'>Pitcairn</option> <option value='Poland'>Poland</option> <option value='Portugal'>Portugal</option> <option value='Puerto Rico'>Puerto Rico</option> <option value='Qatar'>Qatar</option> <option value='Republic of Kosovo'>Republic of Kosovo</option> <option value='Reunion'>Reunion</option> <option value='Romania'>Romania</option> <option value='Russia'>Russia</option> <option value='Rwanda'>Rwanda</option> <option value='Saint Kitts and Nevis'>Saint Kitts and Nevis</option> <option value='Saint Lucia'>Saint Lucia</option> <option value='Saint Martin'>Saint Martin</option> <option value='Saint Vincent and the Grenadines'>Saint Vincent and the Grenadines</option> <option value='Samoa (Independent)'>Samoa (Independent)</option> <option value='San Marino'>San Marino</option> <option value='Sao Tome and Principe'>Sao Tome and Principe</option> <option value='Saudi Arabia'>Saudi Arabia</option> <option value='Senegal'>Senegal</option> <option value='Serbia'>Serbia</option> <option value='Seychelles'>Seychelles</option> <option value='Sierra Leone'>Sierra Leone</option> <option value='Singapore'>Singapore</option> <option value='Sint Martin'>Sint Martin</option> <option value='Slovakia'>Slovakia</option> <option value='Slovenia'>Slovenia</option> <option value='Solomon Islands'>Solomon Islands</option> <option value='Somalia'>Somalia</option> <option value='South Africa'>South Africa</option> <option value='South Georgia and the South Sandwich Islands'>South Georgia and the South Sandwich Islands</option> <option value='South Korea'>South Korea</option> <option value='South Sudan'>South Sudan</option> <option value='Spain'>Spain</option> <option value='Spratly Islands'>Spratly Islands</option> <option value='Sri Lanka'>Sri Lanka</option> <option value='Sudan'>Sudan</option> <option value='Suriname'>Suriname</option> <option value='Svalbard and Jan Mayen Islands'>Svalbard and Jan Mayen Islands</option> <option value='Swaziland'>Swaziland</option> <option value='Sweden'>Sweden</option> <option value='Switzerland'>Switzerland</option> <option value='Syria'>Syria</option> <option value='Taiwan'>Taiwan</option> <option value='Tajikistan'>Tajikistan</option> <option value='Tanzania'>Tanzania</option> <option value='Thailand'>Thailand</option> <option value='Timor-Leste'>Timor-Leste</option> <option value='Togo'>Togo</option> <option value='Tokelau'>Tokelau</option> <option value='Tonga'>Tonga</option> <option value='Trinidad and Tobago'>Trinidad and Tobago</option> <option value='Tunisia'>Tunisia</option> <option value='Turkey'>Turkey</option> <option value='Turkmenistan'>Turkmenistan</option> <option value='Turks & Caicos Islands'>Turks & Caicos Islands</option> <option value='Uganda'>Uganda</option> <option value='Ukraine'>Ukraine</option> <option value='United Arab Emirates'>United Arab Emirates</option> <option value='United Kingdom'>United Kingdom</option> <option value='Uruguay'>Uruguay</option> <option value='Uzbekistan'>Uzbekistan</option> <option value='Vanuatu'>Vanuatu</option> <option value='Vatican City State (Holy See)'>Vatican City State (Holy See)</option> <option value='Venezuela'>Venezuela</option> <option value='Vietnam'>Vietnam</option> <option value='Virgin Islands (British)'>Virgin Islands (British)</option> <option value='Virgin Islands (U.S.)'>Virgin Islands (U.S.)</option> <option value='Western Sahara'>Western Sahara</option> <option value='Yemen'>Yemen</option> <option value='Zambia'>Zambia</option> <option value='Zimbabwe'>Zimbabwe</option> </select> <span class='field-validation-valid' data-valmsg-for='de739321-c760-4fe2-e1be-bc6bec307e9c' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field message longanswer mandatory alternating form__row'> <label for='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' class='umbraco-forms-label form__label'> Message <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <textarea class='' name='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' id='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' data-umb='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' rows='2' cols='20' placeholder='Message' data-val='true' data-val-required='Please provide a value for Message'></textarea> <span class='field-validation-valid' data-valmsg-for='4ce0e0f1-152b-4bb8-cdcc-31eea15a1a9b' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field propertytitle hidden form__row'> <div class='umbraco-forms-field-wrapper'> <input type='hidden' name='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' id='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' class='hidden' data-alias='propertyTitle' value='60 Nexus Way - Retail 102'> <span class='field-validation-valid' data-valmsg-for='8551fc5d-f0d6-47e6-f7f5-c01be3d24f05' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field propertyid hidden alternating form__row'> <div class='umbraco-forms-field-wrapper'> <input type='hidden' name='8ac66ccd-dabe-415b-c281-ba070bfafd84' id='8ac66ccd-dabe-415b-c281-ba070bfafd84' class='hidden' data-alias='propertyId' value='90433'> <span class='field-validation-valid' data-valmsg-for='8ac66ccd-dabe-415b-c281-ba070bfafd84' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field ihavereadtheahrefprivacypolicytarget_blankprivacypolicyaandahreftermsofusetarget_blanktermsofusea checkbox mandatory form__row'> <div class='umbraco-forms-field-wrapper'> <div class='checkbox__container'> <input type='checkbox' name='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' id='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' value='true' data-umb='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' data-val='true' data-val-requiredcb='Please provide a value'> <input type='hidden' name='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' value='false'> <label for='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' class='umbraco-forms-label checkbox__label'> I have read the <a href='/privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a><span class='umbraco-forms-indicator'>*</span> </label> </div> <span class='field-validation-valid' data-valmsg-for='b4640f44-1dd6-4fa2-874a-bc8503ce6ba1' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field privacynotice titleanddescription alternating form__row'> <div class='umbraco-forms-field-wrapper'> <div id='34905f17-6129-4201-9353-53be87cee2fc' data-umb='34905f17-6129-4201-9353-53be87cee2fc' class='form-text '> <p class='form-text__body'>Dart Enterprises Ltd. takes your privacy very seriously and will only use your personal information to respond to your inquiry. The full details of how we use the personal information you provide to us, and the steps we take to protect your privacy, can be found within our privacy policy.</p> </div> <span class='field-validation-valid' data-valmsg-for='34905f17-6129-4201-9353-53be87cee2fc' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field recaptcha recaptchav3withscore mandatory form__row'> <div class='umbraco-forms-field-wrapper'> <input type='hidden' id='ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f' name='g-recaptcha-response' value='HFcThrYkFPAjIqdDheXxJPXlEtN3UeYHMoLUsNJFlpLUAqAmAdFQFjKl1WNGJLMlxhJ2lNFUsYWA1TdT8mBSs0NhsKEhleKTJAbBJlURo0bxAIFjtlD3sPDzt6ewlPQg1TGH5ZL08UZSh2QBohX257FjtMZApUZzgzFll2agZoQS15IjgeWkkaAEQvNj9HWyNrdU4fJCd5KkA_ARodFXALYQtwNlFdcAkgehJERRF5UgBoaBx1Azg0Nm8KFRs'> <script> var hiddenField = document.getElementById('ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f'); var timerFunction = function () { grecaptcha.execute('6LfV8sceAAAAALtthGRzueDQgY7iJqBaSVz-iWS0', { action: 'umbracoform_submit' }).then(function (token) { // Enable the submit button now we have a token hiddenField.form.querySelector('[type=submit]').removeAttribute('disabled'); hiddenField.value = token; }); setTimeout(timerFunction, 60 * 1000); }; document.addEventListener('DOMContentLoaded', function () { // Disable the submit button for this form, until we actually have a key from Google reCAPTCHA hiddenField.form.querySelector('[type=submit]').setAttribute('disabled', 'disabled'); grecaptcha.ready(function () { timerFunction(); }); }); </script> <span class='field-validation-valid' data-valmsg-for='ac3fdc1e-c9ca-4fcd-9ac8-d3761327225f' data-valmsg-replace='true'></span> </div> </div> </div> </div> </fieldset> <div style='display: none'> <input type='text' name='76489125-3be4-4481-887b-ba9174613eb3'> </div> <div class='umbraco-forms-navigation grid-x grid-padding-x'> <div class='cell medium-12'> <input type='submit' class='btn form__submit' value='Submit' name='__next'> </div> </div> </div> <input name='__RequestVerificationToken' type='hidden' value='CfDJ8DnoX9kbPGdFt0HsHejjpmKncoPDN1nPb9ruifVnmNS4keGNydIW4szQyphB-A3bYhkbO5Zpu6ez5br2kFd8dUJ3r4BcWPXFP7JOc0DHFf7OzOd2Pf2WToy5JkKT-mhlbmduxXcIKvnwZvAnrW0NkVo'><input name='ufprt' type='hidden' value='CfDJ8DnoX9kbPGdFt0HsHejjpmI4_mu4GHFh75w_La-s78717RUSd0b1EBvhe1a1cWJEEA02Oh6aBJS9-l28ppRQiC_n3cqamclVixvrGiH-c9vIxfWqTntjN2QUOjHw6wt3OD2Qm2IsLsCO3r1s8rg6epE'></form> </div>",
"image": {
"altText": "Image Alt Text",
"src": "/media/agent.png"
}
}
@use 'sass:map';
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
$property-contact-details: (
transition: 200ms,
max-width: rem(625),
border-radius: rem(5),
background-color: $color-grey,
header-min-height: rem(100),
header-background-color: $color-grey,
header-color: $color-white,
input-label-display: inline-block,
input-background-color: $color-grey,
input-border-color: $color-grey,
input-border-radius: 2px,
input-color: $color-black,
input-validation-color: $color-error,
input-placeholder-color: $color-grey,
submit-background-color: $color-black,
submit-color: $color-white,
submit-border-radius: rem(4),
dropdown-arrow-background-color: $color-error,
dropdown-arrow-color: $color-white,
);
.property-contact-details {
background-color: map.get($property-contact-details, 'background-color');
width: 100%;
@include breakpoint(medium) {
margin-left: auto;
margin-right: auto;
max-width: map.get($property-contact-details, 'max-width');
}
@media only screen and (min-height: 800px) {
border-radius: map.get($property-contact-details, 'border-radius');
}
&__header {
align-items: center;
background-color: map.get($property-contact-details, 'header-background-color');
display: flex;
flex-wrap: nowrap;
min-height: map.get($property-contact-details, 'header-min-height');
position: relative;
@include breakpoint(small down) {
padding: rem(25) rem(22) rem(21);
}
@include breakpoint(medium) {
padding: rem(24) rem(130) rem(19);
}
@media only screen and (min-height: 800px) {
border-radius: map.get($property-contact-details, 'border-radius') map.get($property-contact-details, 'border-radius') 0 0;
}
&-img {
@include breakpoint(small down) {
display: none;
}
@include breakpoint(medium) {
bottom: 0;
left: rem(40);
max-width: rem(130);
position: absolute;
top: 0;
width: 100%;
}
}
img {
@include breakpoint(medium) {
height: 100%;
object-fit: contain;
object-position: center bottom;
width: 100%;
}
}
&-close {
background-color: transparent;
border-width: 0;
font-size: 0;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
@include breakpoint(small down) {
right: rem(38);
}
@include breakpoint(medium) {
right: rem(40);
}
svg {
cursor: pointer;
pointer-events: none;
user-select: none;
}
}
&-text {
width: 100%;
@include breakpoint(medium) {
text-align: center;
}
}
&-eyebrow {
color: map.get($property-contact-details, 'header-color');
display: block;
font-size: rem(12);
font-style: normal;
font-weight: 700;
letter-spacing: rem(1.68);
line-height: rem(15.6);
text-transform: uppercase;
}
&-title {
color: map.get($property-contact-details, 'header-color');
font-style: normal;
font-weight: 700;
line-height: rem(34.72);
padding-top: rem(6);
@include breakpoint(small down) {
font-size: rem(26);
}
@include breakpoint(medium) {
font-size: rem(28);
}
}
}
&__inside {
@include breakpoint(small down) {
padding: rem(30) rem(22);
}
@include breakpoint(medium) {
padding: rem(40);
}
}
.umbraco-forms-form {
margin-left: -.9375rem;
margin-right: -.9375rem;
width: auto;
@include breakpoint(small down) {
margin-top: (-(rem(20)));
}
@include breakpoint(medium) {
margin-top: (-(rem(30)));
}
}
.umbraco-forms-field {
align-items: center;
background-color: transparent;
display: flex;
position: relative;
@include breakpoint(small down) {
margin-top: rem(30);
}
@include breakpoint(medium) {
margin-top: rem(40);
}
&.dropdown {
background-color: map.get($property-contact-details, 'input-background-color');
&::before,
&::after {
content: '';
pointer-events: none;
position: absolute;
user-select: none;
}
&::before {
background-color: map.get($property-contact-details, 'dropdown-arrow-background-color');
border-radius: 0 2px 2px 0;
bottom: 0;
right: 0;
top: 0;
width: rem(46);
z-index: 0;
}
&::after {
border-bottom: 2px solid map.get($property-contact-details, 'dropdown-arrow-color');
border-right: 2px solid map.get($property-contact-details, 'dropdown-arrow-color');
height: rem(8);
right: rem(19);
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: rem(8);
z-index: 1;
}
}
}
.umbraco-forms-field-wrapper {
width: 100%;
}
.umbraco-forms-field label {
background-color: map.get($property-contact-details, 'input-background-color');
display: map.get($property-contact-details, 'input-label-display');
height: rem(20);
left: rem(12);
padding: 0 rem(8);
position: absolute;
top: (-(rem(10)));
z-index: 3;
}
.umbraco-forms-field input {
height: rem(60);
}
.umbraco-forms-field textarea {
height: rem(100);
}
.umbraco-forms-field select,
.umbraco-forms-field input,
.umbraco-forms-field textarea {
background-color: map.get($property-contact-details, 'input-background-color');
border-color: map.get($property-contact-details, 'input-border-color');
border-radius: map.get($property-contact-details, 'input-border-radius');
border-style: solid;
border-width: 1px;
outline: none;
padding: rem(20);
position: relative;
width: 100%;
z-index: 2;
}
.umbraco-forms-field select {
appearance: none;
background-color: transparent;
height: rem(60);
}
.umbraco-forms-field select,
.umbraco-forms-field label,
.umbraco-forms-field input,
.umbraco-forms-field textarea {
color: map.get($property-contact-details, 'input-color');
cursor: pointer;
font-size: rem(15);
font-style: normal;
font-weight: 400;
letter-spacing: .3px;
line-height: rem(20);
transition: border-color map.get($property-contact-details, 'transition') ease-in-out;
&::placeholder {
color: map.get($property-contact-details, 'input-placeholder-color');
font-size: rem(15);
font-style: normal;
font-weight: 400;
letter-spacing: .3px;
line-height: rem(20);
}
&:focus {
border-color: $color-black;
}
}
.field-validation-valid {
display: none;
}
.field-validation-error {
color: map.get($property-contact-details, 'input-validation-color');
cursor: pointer;
display: block;
font-size: rem(15);
font-style: normal;
font-weight: 400;
letter-spacing: .3px;
line-height: rem(20);
margin-bottom: (-(rem(20)));
padding: rem(16) 0 0;
}
.umbraco-forms-navigation {
@include breakpoint(small down) {
padding-top: rem(30);
}
@include breakpoint(medium) {
padding-top: rem(40);
}
}
.btn {
align-items: center;
background-color: map.get($property-contact-details, 'submit-background-color');
border-radius: map.get($property-contact-details, 'submit-border-radius');
border-width: 0;
color: map.get($property-contact-details, 'submit-color');
display: flex;
font-size: rem(12);
font-style: normal;
font-weight: 700;
height: rem(58);
justify-content: center;
letter-spacing: rem(1.68);
line-height: rem(15.6);
margin-left: auto;
margin-right: auto;
max-width: rem(253);
text-transform: uppercase;
transition: opacity map.get($property-contact-details, 'transition') ease-in-out;
width: 100%;
&:focus,
&:hover {
opacity: .8;
}
}
}
import copyToClipboard from '../../../../js/utils/copy';
import toggleModal from '../../../../js/utils/modal-toggle';
import throttle from '../../../../js/utils/throttling';
import { isSmallBreakpoint } from '../../../../js/utils/breakpoints';
export class PropertyContact {
constructor(module) {
this.module = module;
this.copy = this.module.querySelectorAll('.js-copy');
this.preventClick = false;
this.classNames = {
active: 'is-active',
copied: 'property-contact__tooltip--active',
};
this.agentEventListener();
this.checkFormSubmission();
}
agentEventListener() {
this.module.addEventListener('click', (e) => {
const { classList, dataset } = e.target;
const { classNames, copy } = this;
const { copied } = classNames;
if (classList.contains('js-copy-trigger')) {
const { index } = dataset;
copyToClipboard(e.target, copy[index], copied);
}
if (classList.contains('js-agent-trigger')) {
this.expandAgent();
}
});
const propertyDetailComponent = document.querySelector('.property-detail');
const hideIfPastPropertyDetails = () => {
if (isSmallBreakpoint()) {
const propertyDetailsBounds = propertyDetailComponent.getBoundingClientRect();
if (propertyDetailsBounds.bottom < window.innerHeight) {
// The website visitor has scrolled past the property details component
// so hide this component
if (!this.module.classList.contains('hide')) {
this.module.classList.add('hide');
}
} else if (this.module.classList.contains('hide')) {
this.module.classList.remove('hide');
}
}
};
hideIfPastPropertyDetails();
window.addEventListener('scroll', throttle(100, hideIfPastPropertyDetails), { passive: true });
}
expandAgent() {
const { preventClick, classNames } = this;
const { active } = classNames;
const agent = this.module.querySelector('.js-agent');
if (preventClick) return;
this.preventClick = true;
if (agent.classList.contains(active)) {
agent.classList.remove(active);
} else {
agent.classList.add(active);
}
setTimeout(() => {
this.preventClick = false;
}, 400);
}
checkFormSubmission() {
const formSubmitted = this.module.classList.contains('js-form-submitted');
if (formSubmitted) {
const modal = this.module.querySelector('.js-modal');
toggleModal(modal, '', 'open');
}
}
}
export default (module) => new PropertyContact(module);
@use 'sass:map';
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import './property-contact-details';
$property-contact: (
mq-down: 840px,
transition-duration: 200ms,
property-transition-duration: 400ms,
inside-border-radius: rem(4),
inside-background-color: $color-grey,
content-eyebrow-color: $color-white,
content-title-color: $color-white,
social-icon-border-color: $color-black,
social-icon-active-border-color: $color-white,
tooltip-background-color: $color-white,
tooltip-arrow-color: $color-white,
tooltip-text-color: $color-black,
tooltip-text-active-color: $color-grey,
tooltip-copy-btn-color: $color-black,
tooltip-copy-btn-active-color: $color-grey,
tooltip-download-btn-color: $color-black,
tooltip-download-btn-active-color: $color-black,
action-background-color: $color-grey,
action-mls-color: rem(14),
action-btn-font-size: rem(14),
action-btn-font-weight: 400,
action-btn-border-radius: rem(4),
action-btn-height: rem(50),
primary-action-btn-background-color: $color-white,
primary-action-btn-color: $color-black,
primary-action-btn-border: 2px solid transparent,
primary-action-btn-active-background-color: $color-black,
primary-action-btn-active-color: $color-white,
primary-action-btn-active-border: 2px solid transparent,
secondary-action-btn-background-color: $color-black,
secondary-action-btn-color: $color-white,
secondary-action-btn-border: 2px solid transparent,
secondary-action-btn-active-background-color: $color-white,
secondary-action-btn-active-color: $color-black,
secondary-action-btn-active-border: 2px solid transparent,
);
.property-contact {
$ac: &;
@include breakpoint(medium) {
position: sticky;
top: rem(24);
}
@include breakpoint(small down) {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
transition: transform 0.3s ease-in-out;
width: 100%;
&.hide {
transform: translateY(100%);
}
}
&__wrapper {
width: 100%;
}
&__inside {
background-color: map.get($property-contact, 'inside-background-color');
padding: rem(30);
position: relative;
text-align: center;
@include breakpoint(medium) {
border-radius: map.get($property-contact, 'inside-border-radius');
}
@include breakpoint(small down) {
opacity: 0;
position: relative;
transform: translateY(100%);
transition: all map.get($property-contact, 'property-transition-duration') ease-in-out;
visibility: hidden;
z-index: 1;
}
#{$ac}__mls {
@include breakpoint(medium) {
display: none;
}
}
&.has-image {
text-align: left;
@include breakpoint(medium) {
padding-right: 33.3333%;
}
@include breakpoint(small down) {
padding-right: 16%;
}
#{$ac}__content {
text-align: left;
}
#{$ac}__social {
justify-content: flex-start;
}
}
&.is-active {
@include breakpoint(small down) {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}
}
&__content {
text-align: center;
&-eyebrow {
color: map.get($property-contact, 'content-eyebrow-color');
display: block;
font-size: rem(12);
font-style: normal;
font-weight: 700;
letter-spacing: rem(1.68);
line-height: rem(15.6);
text-transform: uppercase;
}
&-title {
color: map.get($property-contact, 'content-title-color');
display: block;
font-size: rem(28);
font-style: normal;
font-weight: 700;
line-height: rem(34.72);
padding-top: 6px;
}
}
&__social {
display: flex;
flex-wrap: nowrap;
justify-content: center;
padding-top: rem(32);
position: relative;
z-index: 1;
&-item {
margin-right: rem(14);
position: relative;
width: rem(50);
}
&-trigger {
background-color: transparent;
border-color: map.get($property-contact, 'social-icon-border-color');
border-radius: 50%;
border-style: solid;
border-width: 2px;
height: rem(50);
outline: none;
padding: 0;
position: relative;
width: rem(50);
svg {
height: rem(24);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: rem(24);
}
&:focus,
&:hover {
~ #{$ac}__tooltip {
opacity: 1;
visibility: visible;
}
}
}
}
&__tooltip {
align-items: center;
background-color: map.get($property-contact, 'tooltip-background-color');
border-radius: rem(5);
bottom: 128%;
display: flex;
left: 50%;
min-height: rem(45);
opacity: 0;
position: absolute;
transform: translateX(-50%);
transition: all map.get($property-contact, 'transition-duration') ease-in-out;
visibility: hidden;
white-space: nowrap;
@include breakpoint(medium) {
padding: rem(12) rem(20);
}
@include breakpoint(small down) {
padding: rem(12);
}
&:hover,
&:focus {
opacity: 1;
visibility: visible;
}
&::after {
border-color: map.get($property-contact, 'tooltip-arrow-color') transparent transparent;
border-style: solid;
border-width: rem(10);
content: '';
left: 50%;
position: absolute;
top: 100%;
transform: translateX(-50%);
}
&.is-email,
&.is-tel {
.has-image & {
left: 0;
transform: none;
}
&::after {
.has-image & {
left: rem(15);
transform: none;
}
}
}
&.is-active {
opacity: 1;
visibility: visible;
}
&-text {
color: map.get($property-contact, 'tooltip-text-color');
font-style: normal;
font-weight: 400;
line-height: normal;
margin-right: rem(15);
text-decoration-line: underline;
@include breakpoint(medium) {
font-size: rem(16);
}
@include breakpoint(small down) {
font-size: rem(12);
}
}
&-copy {
align-items: center;
background-color: transparent;
border-width: 0;
color: map.get($property-contact, 'tooltip-copy-btn-color');
display: flex;
flex-wrap: nowrap;
font-style: normal;
font-weight: 700;
letter-spacing: rem(1.68);
line-height: normal;
margin: 0;
outline: none;
padding: 0;
text-transform: uppercase;
transition: color map.get($property-contact, 'transition-duration') ease-in-out;
&:focus,
&:hover {
color: map.get($property-contact, 'tooltip-copy-btn-active-color');
}
&-before,
&-after {
cursor: default;
pointer-events: none;
user-select: none;
@include breakpoint(medium) {
font-size: rem(12);
}
@include breakpoint(small down) {
font-size: rem(10);
}
}
&-after {
display: none;
}
}
&-icon {
height: rem(18);
margin-right: rem(7);
width: rem(18);
svg {
height: 100%;
width: 100%;
}
}
&-download {
align-items: center;
background-color: transparent;
border-width: 0;
color: map.get($property-contact, 'tooltip-download-btn-color');
display: flex;
flex-wrap: nowrap;
font-style: normal;
font-weight: 700;
letter-spacing: rem(1.68);
line-height: normal;
margin: 0;
outline: none;
padding: 0;
text-transform: uppercase;
transition: color map.get($property-contact, 'transition-duration') ease-in-out;
@include breakpoint(medium) {
font-size: rem(12);
}
@include breakpoint(small down) {
font-size: rem(10);
}
&:focus,
&:hover {
color: map.get($property-contact, 'tooltip-download-btn-active-color');
}
svg {
height: rem(15);
margin-right: rem(10);
width: rem(15);
}
}
a {
color: map.get($property-contact, 'tooltip-text-color');
transition: color map.get($property-contact, 'transition-duration') ease-in-out;
&:focus,
&:hover {
color: map.get($property-contact, 'tooltip-text-active-color');
}
}
&--active {
#{$ac}__tooltip-copy-before {
display: none;
}
#{$ac}__tooltip-copy-after {
display: block;
}
}
}
&__img {
bottom: 0;
overflow: hidden;
position: absolute;
right: 0;
width: 100%;
@include breakpoint(medium) {
max-width: 33.3333%;
top: (-(rem(24)));
}
@include breakpoint(small down) {
max-width: 50%;
top: rem(67);
}
img {
height: 100%;
object-fit: contain;
object-position: bottom right;
width: 100%;
}
}
&__action {
background-color: map.get($property-contact, 'action-background-color');
position: relative;
z-index: 2;
@include breakpoint(medium) {
padding: rem(20) rem(30);
}
@include breakpoint(small down) {
padding: rem(20);
}
&-inside {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
#{$ac}__mls {
@include breakpoint(medium) {
text-align: center;
}
@include breakpoint(small down) {
display: none;
}
}
}
&__mls {
color: map.get($property-contact, 'action-mls-color');
display: block;
font-size: rem(15);
font-style: normal;
font-weight: 400;
letter-spacing: .3px;
line-height: rem(20);
padding-top: rem(20);
width: 100%;
}
&__btn {
align-items: center;
background-color: $color-white;
border-radius: map.get($property-contact, 'action-btn-border-radius');
color: $color-black;
display: flex;
font-size: map.get($property-contact, 'action-btn-font-size');
font-style: normal;
font-weight: map.get($property-contact, 'action-btn-font-weight');
height: map.get($property-contact, 'action-btn-height');
justify-content: center;
letter-spacing: rem(1.68);
line-height: normal;
outline: none;
padding: rem(12) rem(10);
text-align: center;
text-transform: uppercase;
transition: color, background-color, border-color, map.get($property-contact, 'transition-duration') ease-in-out;
width: 100%;
&--primary {
background-color: map.get($property-contact, 'primary-action-btn-background-color');
border: map.get($property-contact, 'primary-action-btn-border');
color: map.get($property-contact, 'primary-action-btn-color');
&:hover,
&:focus {
background-color: map.get($property-contact, 'primary-action-btn-active-background-color');
border: map.get($property-contact, 'primary-action-btn-active-border');
color: map.get($property-contact, 'primary-action-btn-active-color');
}
}
&--secondary {
background-color: map.get($property-contact, 'secondary-action-btn-background-color');
border: map.get($property-contact, 'secondary-action-btn-border');
color: map.get($property-contact, 'secondary-action-btn-color');
margin-right: rem(15);
@include breakpoint(medium) {
display: none;
}
&:hover,
&:focus {
background-color: map.get($property-contact, 'secondary-action-btn-active-background-color');
border: map.get($property-contact, 'secondary-action-btn-active-border');
color: map.get($property-contact, 'secondary-action-btn-active-color');
}
}
}
&:has(.modal.is-active) {
z-index: 352;
}
}
No notes defined.