From 3185ca9aded907ec03cd3db8ed7bbfec5d949a7c Mon Sep 17 00:00:00 2001 From: Keegan Leary <35752455+learyjk@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:37:36 -0700 Subject: [PATCH] styles for marketo --- src/utils/styles-2.css | 631 ++++++++++++++++++++++++++++++++++++ src/utils/styles-backup.css | 575 ++++++++++++++++++++++++++++++++ src/utils/styles.css | 445 ++++++++++++------------- 3 files changed, 1431 insertions(+), 220 deletions(-) create mode 100644 src/utils/styles-2.css create mode 100644 src/utils/styles-backup.css diff --git a/src/utils/styles-2.css b/src/utils/styles-2.css new file mode 100644 index 0000000..c1537a3 --- /dev/null +++ b/src/utils/styles-2.css @@ -0,0 +1,631 @@ +:root { + --form-spacing: 2rem; +} + +/*** MARKETO STYLES ***/ +.mktoForm .mktoLabel { + display: inline-block; +} + +/* Divides top two fields */ +.marketo-form.landing-page-form.mktoForm .mktoFormRow:first-of-type { + width: calc(50% - (var(--form-spacing) / 2)); + display: inline-block; + margin-right: calc(var(--form-spacing) / 2); +} + +/* Divides top two fields */ +.marketo-form.landing-page-form.mktoForm .mktoFormRow:nth-of-type(2) { + width: calc(50% - (var(--form-spacing) / 2)); + display: inline-block; + margin-left: calc(var(--form-spacing) / 2); +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorMsg { + background: rgba(40, 44, 54, 0.93); + font-weight: 500; + border: none; + -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + color: #fff; + text-shadow: none; + font-family: SofiaPro, Helvetica Neue, Helvetica, Arial, sans-serif !important; + padding: 10px 14px; +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorArrow { + background: #282c36; + border: none; +} + +.mktoForm .mktoLabel { + display: inline-block; + font-family: SofiaPro, Helvetica Neue, Helvetica, Arial, sans-serif !important; + font-size: 1rem; + font-weight: 400 !important; + color: #3f4450 !important; + float: none !important; + width: auto !important; +} + +.mktoFieldDescriptor.mktoFormCol { + margin-bottom: 0 !important; +} + +.contact-form .js-attachmentField { + height: 100%; + opacity: 0; + position: absolute; + top: 0; + z-index: 1; +} + +.contact-form .cursor-pointer:hover, +.contact-form .cursor-pointer:focus, +.contact-form ::-webkit-file-upload-button { + cursor: pointer; +} + +.contact-form .form-container { + position: relative; + left: 50%; + transform: translateX(-50%); +} + +.contact-form .js-attachment .paperclip-red { + display: none; +} + +.contact-form .js-attachment:hover { + color: #ef3934; +} + +.contact-form .js-attachment:hover .paperclip-black { + display: none; +} + +.contact-form .js-attachment:hover .paperclip-red { + display: inline-block; +} + +/* .marketo-form:before, +.contact-form:before { + content: " "; + display: table; +} */ + +/* .marketo-form:after, +.contact-form:after { + content: " "; + display: table; + clear: both; +} */ + +/* .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, +.contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 231px !important; +} */ + +.marketo-form.email-only.side-by-side .form-html-version .mktoFormRow input, +.contact-form.email-only.side-by-side .form-html-version .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + line-height: 2; +} + +/* .marketo-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"], +.contact-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"] { + border-color: #d4d4d4; + background: #f6f6f9; + border-radius: 6px !important; +} */ + +@media (max-width: 767px) { + .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, + .contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 100% !important; + } +} + +@media (min-width: 48rem) { + .marketo-form .form-html-version .md-pr2, + .contact-form .form-html-version .md-pr2 { + padding-right: 16px; + } +} + +.marketo-form .form-html-version .mb2, +.contact-form .form-html-version .mb2 { + margin-bottom: 16px; +} + +.marketo-form .form-html-version .block, +.contact-form .form-html-version .block { + width: 100%; + display: block; +} + +.marketo-form .form-html-version input, +.contact-form .form-html-version input { + width: 100%; +} + +.marketo-form .form-html-version input[type="email"], +.contact-form .form-html-version input[type="email"] { + font-size: 1rem; + min-height: 2.75em; + padding: 1px 1rem 0; + vertical-align: middle; + width: 100%; +} + +.marketo-form .form-html-version input, +.marketo-form .form-html-version button, +.contact-form .form-html-version input, +.contact-form .form-html-version button { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form .form-html-version button, +.contact-form .form-html-version button { + display: inline-block; + cursor: pointer; + border-radius: 4px; + background-color: #fb4338; + color: #fff; + font-size: 1rem; + font-weight: 600; + box-shadow: none; + line-height: 2.5rem; + padding: 1px 1.5rem 0; + height: auto; + min-width: 92px; + border: 1px solid transparent; +} + +.marketo-form.landing-page-form input[type="text"], +.marketo-form.landing-page-form input[type="url"], +.marketo-form.landing-page-form input[type="email"], +.marketo-form.landing-page-form input[type="tel"], +.marketo-form.landing-page-form input[type="number"], +.marketo-form.landing-page-form input[type="date"], +.contact-form.landing-page-form input[type="text"], +.contact-form.landing-page-form input[type="url"], +.contact-form.landing-page-form input[type="email"], +.contact-form.landing-page-form input[type="tel"], +.contact-form.landing-page-form input[type="number"], +.contact-form.landing-page-form input[type="date"] { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +/* .marketo-form.landing-page-form textarea, +.marketo-form.landing-page-form select, +.marketo-form.landing-page-form textarea.mktoField, +.marketo-form.landing-page-form select.mktoField, +.contact-form.landing-page-form textarea, +.contact-form.landing-page-form select, +.contact-form.landing-page-form textarea.mktoField, +.contact-form.landing-page-form select.mktoField { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + background-color: #f6f6f9; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} */ + +.marketo-form.landing-page-form select.mktoField, +.contact-form.landing-page-form select.mktoField { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + background-image: url(/images/icons/common/icons-100_carbon40-f-12_down-carat.svg); + background-position: center right 12px; + background-size: 12px 12px; + background-repeat: no-repeat; +} + +/* .marketo-form.landing-page-form input, +.contact-form.landing-page-form input { + background: #f6f6f9 !important; +} */ + +.marketo-form.landing-page-form .mktoLabel, +.contact-form.landing-page-form .mktoLabel { + display: inline-block; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-size: 1rem; + font-weight: 400 !important; + color: #3f4450 !important; + float: none !important; + width: auto !important; +} + +.marketo-form.landing-page-form .mktoAsterix, +.contact-form.landing-page-form .mktoAsterix { + display: none; +} + +.marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, +.contact-form.landing-page-form .mktoRequriedField .mktoAsterix { + align-items: center; + background: #ef3732; + border-radius: 50%; + color: #ef3732 !important; + display: flex; + justify-content: center; + left: 5px; + padding-left: 0 !important; + position: relative; + top: 6px; + height: 7px; + width: 7px; +} + +@media screen and (max-width: 480px) { + .marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, + .contact-form.landing-page-form .mktoRequriedField .mktoAsterix { + float: right !important; + } +} + +.marketo-form.landing-page-form .mktoButtonRow, +.contact-form.landing-page-form .mktoButtonRow { + text-align: left; +} + +.marketo-form.right-aligned, +.contact-form.right-aligned { + float: right; + width: auto !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow, +.contact-form.email-only.side-by-side .mktoFormRow { + width: 264px !important; + max-width: 100%; + display: block; + float: left; + clear: none; + margin-right: 20px !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow:not(.contains-email), +.contact-form.email-only.side-by-side .mktoFormRow:not(.contains-email) { + display: none; +} + +.marketo-form.email-only.side-by-side .mktoFormRow .mktoLabel, +.marketo-form.email-only.side-by-side .mktoFormRow .mktoOffset, +.contact-form.email-only.side-by-side .mktoFormRow .mktoLabel, +.contact-form.email-only.side-by-side .mktoFormRow .mktoOffset { + display: none !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow .mktoFieldDescriptor, +.contact-form.email-only.side-by-side .mktoFormRow .mktoFieldDescriptor { + margin-bottom: 0 !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow input, +.contact-form.email-only.side-by-side .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-weight: 400; + -webkit-font-smoothing: antialiased; + border: 2px solid #e9eaf2 !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow, +.contact-form.email-only.side-by-side .mktoButtonRow { + display: block; + float: left; + width: auto !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow .mktoButton, +.contact-form.email-only.side-by-side .mktoButtonRow .mktoButton { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + margin-top: 0 !important; + font-size: 1rem !important; + background-color: #f9423d !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow .mktoButton:hover, +.contact-form.email-only.side-by-side .mktoButtonRow .mktoButton:hover { + background-color: #e23c32 !important; +} + +.marketo-form.flex.email-only .mktoFormRow, +.contact-form.flex.email-only .mktoFormRow { + flex: 1 1 auto; + margin-right: 16px !important; +} + +.marketo-form.slate-button .mktoButtonRow button.mktoButton, +.contact-form.slate-button .mktoButtonRow button.mktoButton { + background-color: #282c36 !important; +} + +.marketo-form.white-fields input, +.marketo-form.white-fields select, +.marketo-form.white-fields textarea, +.contact-form.white-fields input, +.contact-form.white-fields select, +.contact-form.white-fields textarea { + background: #fff !important; +} + +.marketo-form .input-tooltip i, +.contact-form .input-tooltip i { + padding: 0 !important; +} + +.marketo-form .policy-link, +.contact-form .policy-link { + padding: 0; +} + +@media only screen and (max-width: 480px) { + .marketo-form .mktoFormRow .mktoRequiredField .mktoAsterix, + .contact-form .mktoFormRow .mktoRequiredField .mktoAsterix { + float: right !important; + } +} + +@media (min-width: 768px) { + .marketo-form.email-only.side-by-side.input-calc-183 .mktoFormRow { + width: calc(100% - 183px) !important; + } +} + +@media (max-width: 767px) { + .marketo-form.email-only.side-by-side, + .marketo-form.landing-page-form { + display: block !important; + padding: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + .marketo-form.email-only.side-by-side .mktoFormRow, + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.email-only.side-by-side .mktoButton, + .marketo-form.landing-page-form .mktoFormRow, + .marketo-form.landing-page-form .mktoButtonRow, + .marketo-form.landing-page-form .mktoButton { + float: none; + width: 100% !important; + text-align: center; + margin-right: auto !important; + margin-left: auto !important; /* keep! */ + } + + .marketo-form.email-only.side-by-side .mktoFormRow input, + .marketo-form.landing-page-form .mktoFormRow input { + text-align: center; + } + + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.landing-page-form .mktoButtonRow { + margin-top: 8px !important; + } +} + +.mktoForm .mktoFormRow .mktoError { + bottom: -54px !important; +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorArrow { + background: #282c36; + border: none; +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorMsg { + background: #282c36; + background: rgba(40, 44, 54, 0.93); + font-weight: 500; + border: none; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + color: #fff; + text-shadow: none; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + padding: 10px 14px; +} + +.marketo-form .email-form-terms { + max-width: 400px; + padding-top: 1rem; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + clear: both; +} + +.marketo-form.slate-button .email-form-terms { + color: #fff !important; +} + +.marketo-form.slate-button .email-form-terms a { + color: #282c36; +} + +.marketo-form .terms-text, +.marketo-form .terms-text a { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.input-tooltip { + position: relative; +} + +.input-tooltip .top { + width: 215px; + text-align: center; + top: -20px; + left: 50%; + transform: translate(-50%, -100%); + padding: 12px; + color: #fff; + background-color: #3a3c47; + font-weight: 400; + border-radius: 4px; + position: absolute; + z-index: 99999999; + box-sizing: border-box; + visibility: hidden; + opacity: 0; + transition: opacity 0.8s; +} + +.input-tooltip-content { + font-size: 12px; + line-height: 1.5; +} + +.input-tooltip.visible .top { + visibility: visible; + opacity: 1; +} + +.input-tooltip .top i { + position: absolute; + top: 100%; + left: 50%; + margin-left: -12px; + width: 24px; + height: 12px; + overflow: hidden; +} + +.input-tooltip .top i::after { + content: ""; + position: absolute; + width: 12px; + height: 12px; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + background-color: #3a3c47; +} + +@media screen and (max-width: 767px) { + .marketo-form .email-form-terms { + max-width: 100%; + } +} + +.marketo-form.mktoForm { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +/* .marketo-form.mktoForm input[type="email"] { + background: #f6f6f9; + border-radius: 6px !important; +} */ + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { + border-radius: 4px !important; + background-color: #fb4338 !important; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-weight: 600 !important; + box-shadow: none !important; +} + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:after { + display: none; +} + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover { + background-color: #e23c33 !important; +} + +.marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { + width: 231px !important; +} + +.marketo-form.mktoForm.email-only.side-by-side .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + line-height: 2; +} + +.marketo-form.mktoForm.email-only.side-by-side + .mktoFormRow + input[type="email"] { + border-color: #d4d4d4; +} + +@media (max-width: 767px) { + .marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { + width: 100% !important; + } +} + +.bg-gray .marketo-form.mktoForm input[type="email"], +.bg-carbon-5 .marketo-form.mktoForm input[type="email"] { + background: #fff; +} + +.marketo-form.mktoForm.white-inputs input[type="email"] { + background: #fff !important; +} + +.bg-gem .marketo-form.mktoForm input[type="email"], +.bg-gem-55 .marketo-form.mktoForm input[type="email"], +.bg-gem-60 .marketo-form.mktoForm input[type="email"], +.bg-gem-70 .marketo-form.mktoForm input[type="email"] { + background-color: #31317c; + color: #bdccff; + border-color: #6f83ff !important; + transition: border-color 0.3s ease-in-out; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]::-moz-placeholder { + color: #bdcdff; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]::placeholder { + color: #bdcdff; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]:focus { + outline: none; + border-color: #bdcdff !important; +} + +.bg-gem .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-55 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-60 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-70 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { + background-color: #d3d236 !important; + color: #4141a2 !important; +} + +.bg-gem .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-55 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-60 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-70 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover { + background-color: #b8be05 !important; +} + +.input[type="tel"], +.input[type="text"], +.input[type="number"] { + border: 2px solid #e9eaf2; + min-height: 44px; +} diff --git a/src/utils/styles-backup.css b/src/utils/styles-backup.css new file mode 100644 index 0000000..566d5e5 --- /dev/null +++ b/src/utils/styles-backup.css @@ -0,0 +1,575 @@ +.contact-form .js-attachmentField { + height: 100%; + opacity: 0; + position: absolute; + top: 0; + z-index: 1; +} + +.contact-form .cursor-pointer:hover, +.contact-form .cursor-pointer:focus, +.contact-form ::-webkit-file-upload-button { + cursor: pointer; +} + +.contact-form .form-container { + position: relative; + left: 50%; + transform: translateX(-50%); +} + +.contact-form .js-attachment .paperclip-red { + display: none; +} + +.contact-form .js-attachment:hover { + color: #ef3934; +} + +.contact-form .js-attachment:hover .paperclip-black { + display: none; +} + +.contact-form .js-attachment:hover .paperclip-red { + display: inline-block; +} + +/* .marketo-form:before, + .contact-form:before { + content: " "; + display: table; + } */ + +/* .marketo-form:after, + .contact-form:after { + content: " "; + display: table; + clear: both; + } */ + +/* .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, + .contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 231px !important; + } */ + +.marketo-form.email-only.side-by-side .form-html-version .mktoFormRow input, +.contact-form.email-only.side-by-side .form-html-version .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + line-height: 2; +} + +.marketo-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"], +.contact-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"] { + border-color: #d4d4d4; + background: #f6f6f9; + border-radius: 6px !important; +} + +@media (max-width: 767px) { + .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, + .contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 100% !important; + } +} + +@media (min-width: 48rem) { + .marketo-form .form-html-version .md-pr2, + .contact-form .form-html-version .md-pr2 { + padding-right: 16px; + } +} + +.marketo-form .form-html-version .mb2, +.contact-form .form-html-version .mb2 { + margin-bottom: 16px; +} + +.marketo-form .form-html-version .block, +.contact-form .form-html-version .block { + width: 100%; + display: block; +} + +.marketo-form .form-html-version input, +.contact-form .form-html-version input { + width: 100%; +} + +.marketo-form .form-html-version input[type="email"], +.contact-form .form-html-version input[type="email"] { + font-size: 1rem; + min-height: 2.75em; + padding: 1px 1rem 0; + vertical-align: middle; + width: 100%; +} + +.marketo-form .form-html-version input, +.marketo-form .form-html-version button, +.contact-form .form-html-version input, +.contact-form .form-html-version button { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form .form-html-version button, +.contact-form .form-html-version button { + display: inline-block; + cursor: pointer; + border-radius: 4px; + background-color: #fb4338; + color: #fff; + font-size: 1rem; + font-weight: 600; + box-shadow: none; + line-height: 2.5rem; + padding: 1px 1.5rem 0; + height: auto; + min-width: 92px; + border: 1px solid transparent; +} + +.marketo-form.landing-page-form input[type="text"], +.marketo-form.landing-page-form input[type="url"], +.marketo-form.landing-page-form input[type="email"], +.marketo-form.landing-page-form input[type="tel"], +.marketo-form.landing-page-form input[type="number"], +.marketo-form.landing-page-form input[type="date"], +.contact-form.landing-page-form input[type="text"], +.contact-form.landing-page-form input[type="url"], +.contact-form.landing-page-form input[type="email"], +.contact-form.landing-page-form input[type="tel"], +.contact-form.landing-page-form input[type="number"], +.contact-form.landing-page-form input[type="date"] { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form.landing-page-form textarea, +.marketo-form.landing-page-form select, +.marketo-form.landing-page-form textarea.mktoField, +.marketo-form.landing-page-form select.mktoField, +.contact-form.landing-page-form textarea, +.contact-form.landing-page-form select, +.contact-form.landing-page-form textarea.mktoField, +.contact-form.landing-page-form select.mktoField { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + background-color: #f6f6f9; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form.landing-page-form select.mktoField, +.contact-form.landing-page-form select.mktoField { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + background-image: url(/images/icons/common/icons-100_carbon40-f-12_down-carat.svg); + background-position: center right 12px; + background-size: 12px 12px; + background-repeat: no-repeat; +} + +.marketo-form.landing-page-form input, +.contact-form.landing-page-form input { + background: #f6f6f9 !important; +} + +.marketo-form.landing-page-form .mktoLabel, +.contact-form.landing-page-form .mktoLabel { + display: inline-block; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-size: 1rem; + font-weight: 400 !important; + color: #3f4450 !important; + float: none !important; + width: auto !important; +} + +.marketo-form.landing-page-form .mktoAsterix, +.contact-form.landing-page-form .mktoAsterix { + display: none; +} + +.marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, +.contact-form.landing-page-form .mktoRequriedField .mktoAsterix { + align-items: center; + background: #ef3732; + border-radius: 50%; + color: #ef3732 !important; + display: flex; + justify-content: center; + left: 5px; + padding-left: 0 !important; + position: relative; + top: 6px; + height: 7px; + width: 7px; +} + +@media screen and (max-width: 480px) { + .marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, + .contact-form.landing-page-form .mktoRequriedField .mktoAsterix { + float: right !important; + } +} + +.marketo-form.landing-page-form .mktoButtonRow, +.contact-form.landing-page-form .mktoButtonRow { + text-align: left; +} + +.marketo-form.right-aligned, +.contact-form.right-aligned { + float: right; + width: auto !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow, +.contact-form.email-only.side-by-side .mktoFormRow { + width: 264px !important; + max-width: 100%; + display: block; + float: left; + clear: none; + margin-right: 20px !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow:not(.contains-email), +.contact-form.email-only.side-by-side .mktoFormRow:not(.contains-email) { + display: none; +} + +.marketo-form.email-only.side-by-side .mktoFormRow .mktoLabel, +.marketo-form.email-only.side-by-side .mktoFormRow .mktoOffset, +.contact-form.email-only.side-by-side .mktoFormRow .mktoLabel, +.contact-form.email-only.side-by-side .mktoFormRow .mktoOffset { + display: none !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow .mktoFieldDescriptor, +.contact-form.email-only.side-by-side .mktoFormRow .mktoFieldDescriptor { + margin-bottom: 0 !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow input, +.contact-form.email-only.side-by-side .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-weight: 400; + -webkit-font-smoothing: antialiased; + border: 2px solid #e9eaf2 !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow, +.contact-form.email-only.side-by-side .mktoButtonRow { + display: block; + float: left; + width: auto !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow .mktoButton, +.contact-form.email-only.side-by-side .mktoButtonRow .mktoButton { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + margin-top: 0 !important; + font-size: 1rem !important; + background-color: #f9423d !important; +} + +.marketo-form.email-only.side-by-side .mktoButtonRow .mktoButton:hover, +.contact-form.email-only.side-by-side .mktoButtonRow .mktoButton:hover { + background-color: #e23c32 !important; +} + +.marketo-form.flex.email-only .mktoFormRow, +.contact-form.flex.email-only .mktoFormRow { + flex: 1 1 auto; + margin-right: 16px !important; +} + +.marketo-form.slate-button .mktoButtonRow button.mktoButton, +.contact-form.slate-button .mktoButtonRow button.mktoButton { + background-color: #282c36 !important; +} + +.marketo-form.white-fields input, +.marketo-form.white-fields select, +.marketo-form.white-fields textarea, +.contact-form.white-fields input, +.contact-form.white-fields select, +.contact-form.white-fields textarea { + background: #fff !important; +} + +.marketo-form .input-tooltip i, +.contact-form .input-tooltip i { + padding: 0 !important; +} + +.marketo-form .policy-link, +.contact-form .policy-link { + padding: 0; +} + +@media only screen and (max-width: 480px) { + .marketo-form .mktoFormRow .mktoRequiredField .mktoAsterix, + .contact-form .mktoFormRow .mktoRequiredField .mktoAsterix { + float: right !important; + } +} + +@media (min-width: 768px) { + .marketo-form.email-only.side-by-side.input-calc-183 .mktoFormRow { + width: calc(100% - 183px) !important; + } +} + +@media (max-width: 767px) { + .marketo-form.email-only.side-by-side, + .marketo-form.landing-page-form { + display: block !important; + padding: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + .marketo-form.email-only.side-by-side .mktoFormRow, + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.email-only.side-by-side .mktoButton, + .marketo-form.landing-page-form .mktoFormRow, + .marketo-form.landing-page-form .mktoButtonRow, + .marketo-form.landing-page-form .mktoButton { + float: none; + width: 100% !important; + text-align: center; + } + + .marketo-form.email-only.side-by-side .mktoFormRow input, + .marketo-form.landing-page-form .mktoFormRow input { + text-align: center; + } + + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.landing-page-form .mktoButtonRow { + margin-top: 8px !important; + } +} + +.mktoForm .mktoFormRow .mktoError { + bottom: -54px !important; +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorArrow { + background: #282c36; + border: none; +} + +.mktoForm .mktoFormRow .mktoError .mktoErrorMsg { + background: #282c36; + background: rgba(40, 44, 54, 0.93); + font-weight: 500; + border: none; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + color: #fff; + text-shadow: none; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + padding: 10px 14px; +} + +.marketo-form .email-form-terms { + max-width: 400px; + padding-top: 1rem; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + clear: both; +} + +.marketo-form.slate-button .email-form-terms { + color: #fff !important; +} + +.marketo-form.slate-button .email-form-terms a { + color: #282c36; +} + +.marketo-form .terms-text, +.marketo-form .terms-text a { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.input-tooltip { + position: relative; +} + +.input-tooltip .top { + width: 215px; + text-align: center; + top: -20px; + left: 50%; + transform: translate(-50%, -100%); + padding: 12px; + color: #fff; + background-color: #3a3c47; + font-weight: 400; + border-radius: 4px; + position: absolute; + z-index: 99999999; + box-sizing: border-box; + visibility: hidden; + opacity: 0; + transition: opacity 0.8s; +} + +.input-tooltip-content { + font-size: 12px; + line-height: 1.5; +} + +.input-tooltip.visible .top { + visibility: visible; + opacity: 1; +} + +.input-tooltip .top i { + position: absolute; + top: 100%; + left: 50%; + margin-left: -12px; + width: 24px; + height: 12px; + overflow: hidden; +} + +.input-tooltip .top i::after { + content: ""; + position: absolute; + width: 12px; + height: 12px; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + background-color: #3a3c47; +} + +@media screen and (max-width: 767px) { + .marketo-form .email-form-terms { + max-width: 100%; + } +} + +.marketo-form.mktoForm { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form.mktoForm input[type="email"] { + background: #f6f6f9; + border-radius: 6px !important; +} + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { + border-radius: 4px !important; + background-color: #fb4338 !important; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-weight: 600 !important; + box-shadow: none !important; +} + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:after { + display: none; +} + +.marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover { + background-color: #e23c33 !important; +} + +.marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { + width: 231px !important; +} + +.marketo-form.mktoForm.email-only.side-by-side .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + line-height: 2; +} + +.marketo-form.mktoForm.email-only.side-by-side + .mktoFormRow + input[type="email"] { + border-color: #d4d4d4; +} + +@media (max-width: 767px) { + .marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { + width: 100% !important; + } +} + +.bg-gray .marketo-form.mktoForm input[type="email"], +.bg-carbon-5 .marketo-form.mktoForm input[type="email"] { + background: #fff; +} + +.marketo-form.mktoForm.white-inputs input[type="email"] { + background: #fff !important; +} + +.bg-gem .marketo-form.mktoForm input[type="email"], +.bg-gem-55 .marketo-form.mktoForm input[type="email"], +.bg-gem-60 .marketo-form.mktoForm input[type="email"], +.bg-gem-70 .marketo-form.mktoForm input[type="email"] { + background-color: #31317c; + color: #bdccff; + border-color: #6f83ff !important; + transition: border-color 0.3s ease-in-out; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]::-moz-placeholder, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]::-moz-placeholder { + color: #bdcdff; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]::placeholder, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]::placeholder { + color: #bdcdff; +} + +.bg-gem .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-55 .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-60 .marketo-form.mktoForm input[type="email"]:focus, +.bg-gem-70 .marketo-form.mktoForm input[type="email"]:focus { + outline: none; + border-color: #bdcdff !important; +} + +.bg-gem .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-55 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-60 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton, +.bg-gem-70 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { + background-color: #d3d236 !important; + color: #4141a2 !important; +} + +.bg-gem .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-55 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-60 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover, +.bg-gem-70 .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover { + background-color: #b8be05 !important; +} + +.input[type="tel"], +.input[type="text"], +.input[type="number"] { + border: 2px solid #e9eaf2; + min-height: 44px; +} diff --git a/src/utils/styles.css b/src/utils/styles.css index 351f24b..07d6c59 100644 --- a/src/utils/styles.css +++ b/src/utils/styles.css @@ -1,139 +1,4 @@ -/* .marketo-form:before, -.contact-form:before { - content: " "; - display: table; -} - -.marketo-form:after, -.contact-form:after { - content: " "; - display: table; - clear: both; -} */ - -.marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, -.contact-form.email-only.side-by-side .form-html-version .mktoFormRow { - width: 231px !important; -} - -.marketo-form.email-only.side-by-side .form-html-version .mktoFormRow input, -.contact-form.email-only.side-by-side .form-html-version .mktoFormRow input { - font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; - line-height: 2; -} - -.marketo-form.email-only.side-by-side - .form-html-version - .mktoFormRow - input[type="email"], -.contact-form.email-only.side-by-side - .form-html-version - .mktoFormRow - input[type="email"] { - border-color: #d4d4d4; - background: #f6f6f9; - border-radius: 6px !important; -} - -@media (max-width: 767px) { - .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, - .contact-form.email-only.side-by-side .form-html-version .mktoFormRow { - width: 100% !important; - } -} - -@media (min-width: 48rem) { - .marketo-form .form-html-version .md-pr2, - .contact-form .form-html-version .md-pr2 { - padding-right: 16px; - } -} - -.marketo-form .form-html-version .mb2, -.contact-form .form-html-version .mb2 { - margin-bottom: 16px; -} - -.marketo-form .form-html-version .block, -.contact-form .form-html-version .block { - width: 100%; - display: block; -} - -.marketo-form .form-html-version input, -.contact-form .form-html-version input { - width: 100%; -} - -.marketo-form .form-html-version input[type="email"], -.contact-form .form-html-version input[type="email"] { - font-size: 1rem; - min-height: 2.75em; - padding: 1px 1rem 0; - vertical-align: middle; - width: 100%; -} - -.marketo-form .form-html-version input, -.marketo-form .form-html-version button, -.contact-form .form-html-version input, -.contact-form .form-html-version button { - font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; -} - -.marketo-form .form-html-version button, -.contact-form .form-html-version button { - display: inline-block; - cursor: pointer; - border-radius: 4px; - background-color: #fb4338; - color: #fff; - font-size: 1rem; - font-weight: 600; - box-shadow: none; - line-height: 2.5rem; - padding: 1px 1.5rem 0; - height: auto; - min-width: 92px; - border: 1px solid transparent; -} - -.marketo-form.landing-page-form input[type="text"], -.marketo-form.landing-page-form input[type="url"], -.marketo-form.landing-page-form input[type="email"], -.marketo-form.landing-page-form input[type="tel"], -.marketo-form.landing-page-form input[type="number"], -.marketo-form.landing-page-form input[type="date"], -.contact-form.landing-page-form input[type="text"], -.contact-form.landing-page-form input[type="url"], -.contact-form.landing-page-form input[type="email"], -.contact-form.landing-page-form input[type="tel"], -.contact-form.landing-page-form input[type="number"], -.contact-form.landing-page-form input[type="date"] { - border: 1px solid #eee; - border-radius: 5px; - padding: 12px !important; - width: 100% !important; - font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; -} - -.marketo-form.landing-page-form textarea, -.marketo-form.landing-page-form select, -.marketo-form.landing-page-form textarea.mktoField, -.marketo-form.landing-page-form select.mktoField, -.contact-form.landing-page-form textarea, -.contact-form.landing-page-form select, -.contact-form.landing-page-form textarea.mktoField, -.contact-form.landing-page-form select.mktoField { - border: 1px solid #eee; - border-radius: 5px; - padding: 12px !important; - width: 100% !important; - background-color: #f6f6f9; - font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; -} - -.marketo-form.landing-page-form select.mktoField, +/* .marketo-form.landing-page-form select.mktoField, .contact-form.landing-page-form select.mktoField { -webkit-appearance: none; -moz-appearance: none; @@ -145,11 +10,6 @@ background-repeat: no-repeat; } -.marketo-form.landing-page-form input, -.contact-form.landing-page-form input { - background: #f6f6f9 !important; -} - .marketo-form.landing-page-form .mktoLabel, .contact-form.landing-page-form .mktoLabel { display: inline-block; @@ -182,18 +42,6 @@ width: 7px; } -@media screen and (max-width: 480px) { - .marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, - .contact-form.landing-page-form .mktoRequriedField .mktoAsterix { - float: right !important; - } -} - -.marketo-form.landing-page-form .mktoButtonRow, -.contact-form.landing-page-form .mktoButtonRow { - text-align: left; -} - .marketo-form.right-aligned, .contact-form.right-aligned { float: right; @@ -285,50 +133,6 @@ padding: 0; } -@media only screen and (max-width: 480px) { - .marketo-form .mktoFormRow .mktoRequiredField .mktoAsterix, - .contact-form .mktoFormRow .mktoRequiredField .mktoAsterix { - float: right !important; - } -} - -@media (min-width: 768px) { - .marketo-form.email-only.side-by-side.input-calc-183 .mktoFormRow { - width: calc(100% - 183px) !important; - } -} - -@media (max-width: 767px) { - .marketo-form.email-only.side-by-side, - .marketo-form.landing-page-form { - display: block !important; - padding: 0 !important; - width: 100% !important; - max-width: 100% !important; - } - - .marketo-form.email-only.side-by-side .mktoFormRow, - .marketo-form.email-only.side-by-side .mktoButtonRow, - .marketo-form.email-only.side-by-side .mktoButton, - .marketo-form.landing-page-form .mktoFormRow, - .marketo-form.landing-page-form .mktoButtonRow, - .marketo-form.landing-page-form .mktoButton { - float: none; - width: 100% !important; - text-align: center; - } - - .marketo-form.email-only.side-by-side .mktoFormRow input, - .marketo-form.landing-page-form .mktoFormRow input { - text-align: center; - } - - .marketo-form.email-only.side-by-side .mktoButtonRow, - .marketo-form.landing-page-form .mktoButtonRow { - margin-top: 8px !important; - } -} - .mktoForm .mktoFormRow .mktoError { bottom: -54px !important; } @@ -423,21 +227,10 @@ background-color: #3a3c47; } -@media screen and (max-width: 767px) { - .marketo-form .email-form-terms { - max-width: 100%; - } -} - .marketo-form.mktoForm { font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; } -.marketo-form.mktoForm input[type="email"] { - background: #f6f6f9; - border-radius: 6px !important; -} - .marketo-form.mktoForm .mktoButtonWrap.mktoSimple .mktoButton { border-radius: 4px !important; background-color: #fb4338 !important; @@ -469,21 +262,227 @@ border-color: #d4d4d4; } -@media (max-width: 767px) { - .marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { - width: 100% !important; - } -} - .bg-gray .marketo-form.mktoForm input[type="email"], .bg-carbon-5 .marketo-form.mktoForm input[type="email"] { background: #fff; } +.input[type="tel"], +.input[type="text"], +.input[type="number"] { + border: 2px solid #e9eaf2; + min-height: 44px; +} */ + +/* LEGACY STYLES -- SAVING HERE */ + +/* @media (max-width: 767px) { + .marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { + width: 100% !important; + } +} */ + +/* .marketo-form.mktoForm.white-inputs input[type="email"] { background: #fff !important; +} */ + +/* @media screen and (max-width: 767px) { + .marketo-form .email-form-terms { + max-width: 100%; + } +} */ + +/* +@media only screen and (max-width: 480px) { + .marketo-form .mktoFormRow .mktoRequiredField .mktoAsterix, + .contact-form .mktoFormRow .mktoRequiredField .mktoAsterix { + float: right !important; + } +} + +@media (min-width: 768px) { + .marketo-form.email-only.side-by-side.input-calc-183 .mktoFormRow { + width: calc(100% - 183px) !important; + } +} */ + +/* @media screen and (max-width: 480px) { + .marketo-form.landing-page-form .mktoRequriedField .mktoAsterix, + .contact-form.landing-page-form .mktoRequriedField .mktoAsterix { + float: right !important; + } +} */ + +/* .marketo-form.landing-page-form .mktoButtonRow, +.contact-form.landing-page-form .mktoButtonRow { + text-align: left; +} */ + +/* .marketo-form.landing-page-form input, +.contact-form.landing-page-form input { + background: #f6f6f9 !important; +} */ + +/* @media (max-width: 767px) { + .marketo-form.email-only.side-by-side, + .marketo-form.landing-page-form { + display: block !important; + padding: 0 !important; + width: 100% !important; + max-width: 100% !important; + } + + .marketo-form.email-only.side-by-side .mktoFormRow, + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.email-only.side-by-side .mktoButton, + .marketo-form.landing-page-form .mktoFormRow, + .marketo-form.landing-page-form .mktoButtonRow, + .marketo-form.landing-page-form .mktoButton { + float: none; + width: 100% !important; + text-align: center; + } + + .marketo-form.email-only.side-by-side .mktoFormRow input, + .marketo-form.landing-page-form .mktoFormRow input { + text-align: center; + } + + .marketo-form.email-only.side-by-side .mktoButtonRow, + .marketo-form.landing-page-form .mktoButtonRow { + margin-top: 8px !important; + } +} */ + +/* .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, +.contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 231px !important; +} */ + +.marketo-form.email-only.side-by-side .form-html-version .mktoFormRow input, +.contact-form.email-only.side-by-side .form-html-version .mktoFormRow input { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + line-height: 2; +} + +/* @media (max-width: 767px) { + .marketo-form.email-only.side-by-side .form-html-version .mktoFormRow, + .contact-form.email-only.side-by-side .form-html-version .mktoFormRow { + width: 100% !important; + } +} + +@media (min-width: 48rem) { + .marketo-form .form-html-version .md-pr2, + .contact-form .form-html-version .md-pr2 { + padding-right: 16px; + } +} */ + +/* .marketo-form .form-html-version .mb2, +.contact-form .form-html-version .mb2 { + margin-bottom: 16px; } +.marketo-form .form-html-version .block, +.contact-form .form-html-version .block { + width: 100%; + display: block; +} */ + +/* +.marketo-form .form-html-version input, +.contact-form .form-html-version input { + width: 100%; +} + +.marketo-form .form-html-version input[type="email"], +.contact-form .form-html-version input[type="email"] { + font-size: 1rem; + min-height: 2.75em; + padding: 1px 1rem 0; + vertical-align: middle; + width: 100%; +} + +.marketo-form .form-html-version input, +.marketo-form .form-html-version button, +.contact-form .form-html-version input, +.contact-form .form-html-version button { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} + +.marketo-form .form-html-version button, +.contact-form .form-html-version button { + display: inline-block; + cursor: pointer; + border-radius: 4px; + background-color: #fb4338; + color: #fff; + font-size: 1rem; + font-weight: 600; + box-shadow: none; + line-height: 2.5rem; + padding: 1px 1.5rem 0; + height: auto; + min-width: 92px; + border: 1px solid transparent; +} */ + +/* .marketo-form.landing-page-form input[type="text"], +.marketo-form.landing-page-form input[type="url"], +.marketo-form.landing-page-form input[type="email"], +.marketo-form.landing-page-form input[type="tel"], +.marketo-form.landing-page-form input[type="number"], +.marketo-form.landing-page-form input[type="date"], +.contact-form.landing-page-form input[type="text"], +.contact-form.landing-page-form input[type="url"], +.contact-form.landing-page-form input[type="email"], +.contact-form.landing-page-form input[type="tel"], +.contact-form.landing-page-form input[type="number"], +.contact-form.landing-page-form input[type="date"] { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} */ + +/* .marketo-form.landing-page-form textarea, +.marketo-form.landing-page-form select, +.marketo-form.landing-page-form textarea.mktoField, +.marketo-form.landing-page-form select.mktoField, +.contact-form.landing-page-form textarea, +.contact-form.landing-page-form select, +.contact-form.landing-page-form textarea.mktoField, +.contact-form.landing-page-form select.mktoField { + border: 1px solid #eee; + border-radius: 5px; + padding: 12px !important; + width: 100% !important; + background-color: #f6f6f9; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; +} */ + +/* .marketo-form:before, +.contact-form:before { + content: " "; + display: table; +} + +.marketo-form:after, +.contact-form:after { + content: " "; + display: table; + clear: both; +} */ + +/* .marketo-form.mktoForm input[type="email"] { + background: #f6f6f9; + border-radius: 6px !important; +} */ + /* .bg-gem .marketo-form.mktoForm input[type="email"], .bg-gem-55 .marketo-form.mktoForm input[type="email"], .bg-gem-60 .marketo-form.mktoForm input[type="email"], @@ -531,9 +530,15 @@ background-color: #b8be05 !important; } */ -.input[type="tel"], -.input[type="text"], -.input[type="number"] { - border: 2px solid #e9eaf2; - min-height: 44px; -} +/* .marketo-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"], +.contact-form.email-only.side-by-side + .form-html-version + .mktoFormRow + input[type="email"] { + border-color: #d4d4d4; + background: #f6f6f9; + border-radius: 6px !important; +} */