From f2d3edd20841cbe7ff881dcf36eca5b693d06fc4 Mon Sep 17 00:00:00 2001 From: Keegan Leary <35752455+learyjk@users.noreply.github.com> Date: Tue, 6 Aug 2024 10:30:17 -0700 Subject: [PATCH] stylesheet initial --- src/utils/styles.css | 539 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 539 insertions(+) create mode 100644 src/utils/styles.css diff --git a/src/utils/styles.css b/src/utils/styles.css new file mode 100644 index 0000000..351f24b --- /dev/null +++ b/src/utils/styles.css @@ -0,0 +1,539 @@ +/* .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; +}