diff --git a/src/utils/styles-2.css b/src/utils/styles-2.css index c1537a3..3703855 100644 --- a/src/utils/styles-2.css +++ b/src/utils/styles-2.css @@ -290,13 +290,18 @@ width: auto !important; } +.marketo-form.email-only.side-by-side { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; +} + .marketo-form.email-only.side-by-side .mktoFormRow, .contact-form.email-only.side-by-side .mktoFormRow { - width: 264px !important; - max-width: 100%; + /* width: 264px !important; */ + width: 100%; display: block; - float: left; - clear: none; margin-right: 20px !important; } @@ -327,13 +332,14 @@ .marketo-form.email-only.side-by-side .mktoButtonRow, .contact-form.email-only.side-by-side .mktoButtonRow { - display: block; - float: left; + display: flex; + flex-direction: column; width: auto !important; } .marketo-form.email-only.side-by-side .mktoButtonRow .mktoButton, .contact-form.email-only.side-by-side .mktoButtonRow .mktoButton { + width: 100%; font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; margin-top: 0 !important; font-size: 1rem !important; @@ -546,9 +552,9 @@ background-color: #e23c33 !important; } -.marketo-form.mktoForm.email-only.side-by-side .mktoFormRow { +/* .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; @@ -629,3 +635,18 @@ border: 2px solid #e9eaf2; min-height: 44px; } + +/* Later Styles */ + +.footer-form { + flex-direction: row !important; + gap: 0px !important; +} + +.footer-form .mktoButton { + white-space: nowrap; +} + +.footer-form.marketo-form.email-only.side-by-side .mktoButtonRow { + margin-top: 0px; +} diff --git a/src/utils/styles-3.css b/src/utils/styles-3.css new file mode 100644 index 0000000..761ccad --- /dev/null +++ b/src/utils/styles-3.css @@ -0,0 +1,269 @@ +/*** MARKETO STYLES ***/ +.mktoForm { + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + font-size: 1rem; + + line-height: 2; +} + +.mktoForm .mktoLabel { + display: inline-block; +} +select.mktoField { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eeeeee'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); + background-position: center right 12px; + background-size: 16px 16px; + background-repeat: no-repeat; +} + +.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; +} + +.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: "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; +} + +.mktoFieldDescriptor.mktoFormCol { + margin-bottom: 0 !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; +} + +.marketo-form .email-form-terms { + max-width: 400px; + padding-top: 1rem; + font-family: "Sofia Pro", helvetica neue, Helvetica, Arial, sans-serif !important; + clear: both; +} + +.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; +} + +.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; +} + +input[type="text"], +input[type="url"], +input[type="email"], +input[type="tel"], +input[type="number"], +input[type="date"], +select { + border: 1px solid #eee !important; + border-radius: 4px !important; + padding: 12px !important; + width: 100% !important; + text-align: left !important; +} + +.marketo-form.email-only.side-by-side .mktoFormRow .mktoLabel { + display: none !important; +} + +@media only screen and (max-width: 480px) { + .marketo-form .mktoFormRow .mktoRequiredField .mktoAsterix, + .contact-form .mktoFormRow .mktoRequiredField .mktoAsterix { + float: right !important; + } +} + +/*** CUSTOM STYLES ***/ + +:root { + --form-spacing: 2rem; +} + +.mktoButtonRow { + display: flex !important; +} + +/* 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); +} + +@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; + } + + .side-by-side .mktoButtonWrap { + width: 100% !important; + } +} + +.side-by-side { + display: flex; + justify-content: space-between; + align-items: end; +} + +.side-by-side .contains-email { + margin-right: 1rem; + min-width: 12rem; +} + +.mktoButton { + white-space: nowrap; +} + +.side-by-side .mktoButton { + margin-top: 0px !important; +} + +.mktoForm.side-by-side .mktoFieldWrap { + float: none !important; +}