{"id":397,"date":"2026-07-28T08:23:41","date_gmt":"2026-07-28T08:23:41","guid":{"rendered":"https:\/\/monichron.co.za\/?page_id=397"},"modified":"2026-07-28T14:18:49","modified_gmt":"2026-07-28T14:18:49","slug":"contact-2","status":"publish","type":"page","link":"https:\/\/monichron.co.za\/index.php\/contact-2\/","title":{"rendered":"Contact-2"},"content":{"rendered":"\n<style>\n  :root{ --ink-deep:#0B0F1F; --accent:#2F8FE8; --accent-deep:#1C6FC4; }\n  .cf-section{position:relative;background:var(--ink-deep);padding:110px 24px 130px;overflow:hidden;}\n  .cf-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 10%, rgba(47,143,232,0.14), transparent 70%);pointer-events:none;}\n  .cf-intro{position:relative;max-width:620px;margin:0 auto 60px;text-align:center;}\n  .cf-eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;}\n  .cf-eyebrow .rule{width:40px;height:3px;background:var(--accent);border-radius:2px;}\n  .cf-eyebrow span{font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#8fc4f7;font-family:'Inter',system-ui,sans-serif;}\n  .cf-heading{color:#fff;font-size:2rem;font-weight:800;margin:0 0 14px;letter-spacing:-0.01em;font-family:'Inter',system-ui,sans-serif;}\n  .cf-sub{color:rgba(255,255,255,0.6);font-size:0.98rem;line-height:1.6;margin:0;font-family:'Inter',system-ui,sans-serif;}\n  .cf-grid{position:relative;max-width:1100px;margin:0 auto;display:flex;gap:44px;align-items:flex-start;}\n  .cf-form-col{flex:1 1 560px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:22px;padding:36px;backdrop-filter:blur(20px);}\n  .cf-side-col{flex:0 0 340px;display:flex;flex-direction:column;gap:20px;}\n  .cf-honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none;}\n  .cf-row{display:flex;gap:16px;margin-bottom:20px;}\n  .cf-field{flex:1;display:flex;flex-direction:column;gap:8px;}\n  .cf-field label{color:#fff;font-size:0.82rem;font-weight:700;font-family:'Inter',system-ui,sans-serif;}\n  .cf-field label sup{color:#5fb0ff;}\n  .cf-field input, .cf-field textarea{\n    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:10px;\n    padding:12px 14px;color:#fff;font-size:0.92rem;font-family:'Inter',system-ui,sans-serif;\n    outline:none;transition:border-color 0.25s ease, box-shadow 0.25s ease;\n  }\n  .cf-field input::placeholder, .cf-field textarea::placeholder{color:rgba(255,255,255,0.35);}\n  .cf-field input:focus, .cf-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,143,232,0.22);}\n  .cf-field textarea{resize:vertical;min-height:120px;}\n  .cf-interests{margin:6px 0 26px;}\n  .cf-interests-label{color:#fff;font-size:0.82rem;font-weight:700;font-family:'Inter',system-ui,sans-serif;margin-bottom:10px;display:block;}\n  .cf-chip-row{display:flex;flex-wrap:wrap;gap:10px;}\n  .cf-chip{\n    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.75);\n    font-family:'Inter',system-ui,sans-serif;font-size:0.85rem;font-weight:600;\n    padding:11px 18px;border-radius:999px;cursor:pointer;transition:all 0.25s ease;\n  }\n  .cf-chip:hover{border-color:var(--accent);color:#fff;}\n  .cf-chip.is-selected{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(47,143,232,0.35);}\n  .cf-submit{\n    display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;\n    font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:0.85rem;letter-spacing:0.03em;text-transform:uppercase;\n    padding:14px 30px;border-radius:999px;cursor:pointer;transition:background 0.25s ease, transform 0.25s ease;\n  }\n  .cf-submit:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-2px);}\n  .cf-submit:disabled{opacity:0.6;cursor:default;}\n  .cf-status{margin-top:16px;font-family:'Inter',system-ui,sans-serif;font-size:0.88rem;display:none;}\n  .cf-status.is-success{color:#7be0a0;display:block;}\n  .cf-status.is-error{color:#ff8a8a;display:block;}\n  .cf-find-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:22px;padding:28px;backdrop-filter:blur(20px);}\n  .cf-find-card .rule{width:36px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:14px;}\n  .cf-find-card h3{color:#fff;font-size:1.4rem;font-weight:800;margin:0 0 16px;font-family:'Inter',system-ui,sans-serif;}\n  .cf-find-row{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,0.75);font-size:0.88rem;font-family:'Inter',system-ui,sans-serif;margin-bottom:10px;line-height:1.5;}\n  .cf-find-row svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--accent);fill:none;stroke-width:1.8;margin-top:2px;}\n  .cf-find-row a{color:rgba(255,255,255,0.75);text-decoration:none;}\n  .cf-find-row a:hover{color:#fff;}\n  .cf-map-wrap{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,0.14);height:280px;}\n  .cf-map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(0.15) invert(0.92) contrast(0.9);}\n  @media (max-width:900px){\n    .cf-grid{flex-direction:column;}\n    .cf-form-col{padding:26px;}\n    .cf-row{flex-direction:column;gap:16px;}\n  }\n\n  .cf-anim{opacity:0;transform:translateY(30px);transition:opacity 0.75s ease, transform 0.75s cubic-bezier(.22,1,.36,1);}\n  .cf-anim.is-visible{opacity:1;transform:translateY(0);}\n  .cf-intro{transition-delay:0s;}\n  .cf-form-col{transition-delay:0.12s;}\n  .cf-find-card{transition-delay:0.24s;}\n  .cf-map-wrap{transition-delay:0.34s;}\n  .cf-chip{opacity:0;transform:translateY(10px) scale(0.94);transition:opacity 0.45s ease, transform 0.45s cubic-bezier(.34,1.4,.64,1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease;}\n  .cf-chip.is-visible{opacity:1;transform:translateY(0) scale(1);}\n  .cf-chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:7px;}\n\n  @media (prefers-reduced-motion:reduce){\n    .cf-anim, .cf-chip{transition:none !important;opacity:1 !important;transform:none !important;}\n  }\n<\/style>\n\n<section class=\"cf-section\" id=\"cfSection\">\n  <div class=\"cf-intro cf-anim\">\n    <div class=\"cf-eyebrow\"><div class=\"rule\"><\/div><span>Get In Touch<\/span><\/div>\n    <h2 class=\"cf-heading\">Let&#8217;s build something together<\/h2>\n    <p class=\"cf-sub\">Whether you&#8217;ve got a project in mind or want to explore partnering with us, drop us a line below.<\/p>\n  <\/div>\n\n  <div class=\"cf-grid\">\n    <div class=\"cf-form-col cf-anim\">\n      <form id=\"cfForm\" novalidate>\n        <input type=\"text\" name=\"website\" class=\"cf-honeypot\" tabindex=\"-1\" autocomplete=\"off\">\n\n        <div class=\"cf-row\">\n          <div class=\"cf-field\">\n            <label>First Name <sup>*<\/sup><\/label>\n            <input type=\"text\" name=\"first_name\" required autocomplete=\"given-name\">\n          <\/div>\n          <div class=\"cf-field\">\n            <label>Last Name<\/label>\n            <input type=\"text\" name=\"last_name\" autocomplete=\"family-name\">\n          <\/div>\n        <\/div>\n\n        <div class=\"cf-row\">\n          <div class=\"cf-field\">\n            <label>Email <sup>*<\/sup><\/label>\n            <input type=\"email\" name=\"email\" required autocomplete=\"email\">\n          <\/div>\n        <\/div>\n\n        <div class=\"cf-row\">\n          <div class=\"cf-field\">\n            <label>Message<\/label>\n            <textarea name=\"message\" placeholder=\"Tell us a bit about what you need...\"><\/textarea>\n          <\/div>\n        <\/div>\n\n        <div class=\"cf-interests\">\n          <span class=\"cf-interests-label\">I&#8217;m reaching out because&#8230;<\/span>\n          <div class=\"cf-chip-row\" id=\"cfChipRow\">\n            <button type=\"button\" class=\"cf-chip\" data-value=\"partner\"><svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>I&#8217;m interested in becoming a partner<\/button>\n            <button type=\"button\" class=\"cf-chip\" data-value=\"project\"><svg viewBox=\"0 0 24 24\"><path d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\/><path d=\"M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\/><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\/><\/svg>I have a project to work on together<\/button>\n          <\/div>\n        <\/div>\n\n        <button type=\"submit\" class=\"cf-submit\" id=\"cfSubmitBtn\">Send Message<\/button>\n        <div class=\"cf-status\" id=\"cfStatus\"><\/div>\n      <\/form>\n    <\/div>\n\n    <div class=\"cf-side-col\">\n      <div class=\"cf-find-card cf-anim\">\n        <div class=\"rule\"><\/div>\n        <h3>Find Us<\/h3>\n        <div class=\"cf-find-row\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M3 11l9-8 9 8\"\/><path d=\"M5 10v10h14V10\"\/><\/svg>\n          <span>35 Ceylon Road, Glen Marais,<br>Kempton Park, 1619<\/span>\n        <\/div>\n        <div class=\"cf-find-row\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2l-7 20-4-9-9-4 20-7z\"\/><\/svg>\n          <a href=\"mailto:info@monichron.co.za\">info@monichron.co.za<\/a>\n        <\/div>\n      <\/div>\n      <div class=\"cf-map-wrap cf-anim\">\n        <iframe loading=\"lazy\"\n          src=\"https:\/\/maps.google.com\/maps?q=35%20Ceylon%20Road%2C%20Glen%20Marais%2C%20Kempton%20Park%2C%201619&#038;t=&#038;z=15&#038;ie=UTF8&#038;iwloc=&#038;output=embed\">\n        <\/iframe>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var form = document.getElementById('cfForm');\n  var chipRow = document.getElementById('cfChipRow');\n  var submitBtn = document.getElementById('cfSubmitBtn');\n  var statusEl = document.getElementById('cfStatus');\n  var cfSection = document.getElementById('cfSection');\n  var selected = [];\n\n  \/\/ ---- entrance animation: fade\/slide the main blocks + stagger the chips in ----\n  function revealSection(){\n    cfSection.querySelectorAll('.cf-anim').forEach(function(el){ el.classList.add('is-visible'); });\n    chipRow.querySelectorAll('.cf-chip').forEach(function(chip, i){\n      setTimeout(function(){ chip.classList.add('is-visible'); }, 450 + i * 90);\n    });\n  }\n  if('IntersectionObserver' in window){\n    var cfObserved = false;\n    var cfObserver = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(entry.isIntersecting){\n          if(!cfObserved){\n            cfObserved = true;\n            revealSection();\n            cfObserver.disconnect();\n          }\n        }\n      });\n    }, {threshold:0.2});\n    cfObserver.observe(cfSection);\n  } else {\n    revealSection();\n  }\n\n  chipRow.querySelectorAll('.cf-chip').forEach(function(chip){\n    chip.addEventListener('click', function(){\n      var val = chip.getAttribute('data-value');\n      var idx = selected.indexOf(val);\n      if(idx === -1){\n        selected.push(val);\n        chip.classList.add('is-selected');\n      } else {\n        selected.splice(idx, 1);\n        chip.classList.remove('is-selected');\n      }\n    });\n  });\n\n  function showStatus(kind, msg){\n    statusEl.textContent = msg;\n    statusEl.className = 'cf-status is-' + kind;\n  }\n\n  form.addEventListener('submit', function(e){\n    e.preventDefault();\n\n    var firstName = form.first_name.value.trim();\n    var email = form.email.value.trim();\n    var emailOk = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\n\n    if(!firstName || !emailOk){\n      showStatus('error', 'Please enter your name and a valid email address.');\n      return;\n    }\n\n    if(typeof window.monichronAjaxUrl === 'undefined'){\n      showStatus('error', 'Form is temporarily unavailable. Please email info@monichron.co.za directly.');\n      return;\n    }\n\n    submitBtn.disabled = true;\n    submitBtn.textContent = 'Sending...';\n    showStatus('', '');\n    statusEl.className = 'cf-status';\n\n    var data = new FormData();\n    data.append('action', 'monichron_contact_submit');\n    data.append('nonce', window.monichronContactNonce);\n    data.append('first_name', firstName);\n    data.append('last_name', form.last_name.value.trim());\n    data.append('email', email);\n    data.append('message', form.message.value.trim());\n    data.append('website', form.website.value);\n    selected.forEach(function(val){ data.append('interests[]', val); });\n\n    fetch(window.monichronAjaxUrl, { method:'POST', body:data, credentials:'same-origin' })\n      .then(function(res){ return res.json(); })\n      .then(function(json){\n        submitBtn.disabled = false;\n        submitBtn.textContent = 'Send Message';\n        var ok = json ? json.success : false;\n        if(ok){\n          var successMsg = \"Thanks \u2014 we'll be in touch soon.\";\n          if(json.data){ if(json.data.message){ successMsg = json.data.message; } }\n          showStatus('success', successMsg);\n          form.reset();\n          selected = [];\n          chipRow.querySelectorAll('.cf-chip').forEach(function(c){ c.classList.remove('is-selected'); });\n        } else {\n          var errMsg = 'Something went wrong. Please try again.';\n          if(json){ if(json.data){ if(json.data.message){ errMsg = json.data.message; } } }\n          showStatus('error', errMsg);\n        }\n      })\n      .catch(function(){\n        submitBtn.disabled = false;\n        submitBtn.textContent = 'Send Message';\n        showStatus('error', 'Network error. Please try again or email us directly.');\n      });\n  });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Get In Touch Let&#8217;s build something together Whether you&#8217;ve got a project in mind or want to explore partnering with us, drop us a line below. First Name * Last Name Email * Message I&#8217;m reaching out because&#8230; I&#8217;m interested in becoming a partner I have a project to work on together Send Message Find Us 35 Ceylon Road, Glen Marais,Kempton Park, 1619 info@monichron.co.za<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"blank-canvas","meta":{"_gspb_post_css":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-397","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":2,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/397\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/pages\/397\/revisions\/399"}],"wp:attachment":[{"href":"https:\/\/monichron.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}