HubSpot base style embed

javascript/HubSpotBase.html

@@ -0,0 +1,292 @@
+<style>
+  :root {
+  	--form-spacing: 1rem;
+    --grid-spacing: 1.5rem;
+
+  	--input-background-color: #ffffff;
+    --input-accent-color: #2a6600;
+  	--input-padding: 0.75rem 1rem 0.75rem 1.5rem;
+    --input-border: 1px solid #f0f0f0;
+    --input-border-hover: 1px solid #f0f0f0;
+    --input-border-focus: 1px solid #58a621;
+    --input-border-radius: 0.5rem;
+
+    --input-font-size: .875rem;
+    --input-line-height: 1.42857143;
+
+    --input-color: #314752;
+    --input-color-hover: #2A6600;
+    --input-color-focus: #000;
+
+    --submit-background-color: #102600;
+    --submit-background-color-hover: #2a6600;
+    --submit-border: #102600;
+    --submit-border-hover: #2a6600;
+    --submit-border-radius: 6.25rem;
+    --submit-text-color: #DAFFBF;
+    --submit-text-color-hover: #DAFFBF;
+    --submit-text-size: 1.125rem;
+    --submit-margin: 2rem 0 0;
+    --submit-padding: 0.375rem 1rem 0.625rem;
+
+    --legal-font-size: .875rem;
+    --legal-font-line-height: 1.5em;
+
+    --error-spacing: 0;
+    --error-color: #FF0000;
+	}
+
+  /*** Standard Hubspot Styles ***/
+  .hbspt-form input:focus, .hbspt-form textarea:focus, .hbspt-form select:focus {
+    outline: none;
+	}
+  .hs-input {
+  	width: 100% !important;
+  }
+
+  /* Columns */
+  .form-columns-2 {
+  	display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+		column-gap: var(--grid-spacing);
+  }
+  .form-columns-2 .hs-form-field {
+  	display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+  }
+  .outline-form fieldset {
+  	max-width: none !important;
+  	margin-top: 0.5rem;
+  }
+
+  .hbspt-form fieldset {
+  	max-width: none !important;
+  }
+  .inputs-list.multi-container {
+  	list-style-type: none;
+  }
+
+  .hbspt-form input, .hbspt-form textarea, .hbspt-form select {
+  	margin: 0!important;
+  	background-color: var(--input-background-color)!important;
+    -webkit-transition: border-color .2s;
+    transition: border-color .2s;
+  	padding: var(--input-padding)!important;
+		border: var(--input-border)!important;
+    border-radius: var(--input-border-radius);
+    font-size: var(--input-font-size);
+    line-height: var(--input-line-height);
+    color: var(--input-color)!important;
+  }
+  .hbspt-form input:hover {
+  	border: var(--input-border-hover)!important;
+    color: var(--input-color-hover)!important;
+  }
+  .hbspt-form input:focus {
+  	border: var(--input-border-focus)!important;
+    color: var(--input-color-focus)!important;
+  }
+
+  .hbspt-form .hs-submit {
+    margin: var(--submit-margin)!important;
+  }
+
+  .hbspt-form input[type="submit"] {
+  	-webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  	width: 100%;
+  	position: relative;
+
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    padding: var(--input-padding)!important;
+    background-color: var(--submit-background-color)!important;
+    border: var(--submit-border)!important;
+    border-radius: var(--submit-border-radius)!important;
+    color: var(--submit-text-color)!important;
+
+    -webkit-transition: color .2s,background-color .2s,border-color .2s;
+    transition: color .2s,background-color .2s,border-color .2s;
+
+    font-size: var(--submit-text-size)!important;
+    text-align: center;
+    cursor: pointer;
+
+    /* Account for 2 column grids */
+    margin-right: 1rem!important;
+  }
+  .hbspt-form input[type="submit"]:hover {
+  	background-color: var(--submit-background-color-hover)!important;
+    color: var(--submit-text-color-hover)!important;
+    border: var(--submit-border-hover)!important;
+  }
+
+  .hbspt-form label {
+  	margin-top: var(--form-spacing)!important;
+  }
+  .hbspt-form label.hs-error-msg {
+  	margin-top: var(--error-spacing)!important;
+  }
+
+  .hbspt-form .no-list {
+    list-style: none;
+    margin-top: var(--form-spacing);
+    padding-left: 0;
+  }
+
+  .hs-form-checkbox, .hs-form-radio {
+  	cursor: pointer;
+  }
+  .hs-form-checkbox-display, .hs-form-radio-display {
+  	display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    margin-bottom: 0;
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 160%;
+    text-transform: initial;
+  }
+
+  .hbspt-form .multi-container {
+  	display: flex;
+    flex-wrap: wrap;
+    margin-top: .5rem;
+  }
+
+  .hbspt-form .inputs-list {
+    padding-left: 0!important;
+    color: var(--input-color)!important;
+  }
+
+    /* Checkbox styles */
+    .hs-form-checkbox {
+        padding-left: 0;
+    }
+    label.hs-form-booleancheckbox-display, label.hs-form-checkbox-display {
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1em auto;
+        gap: var(--grid-spacing);
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 0!important;
+    }
+
+    /* .hs-form-booleancheckbox-display input[type="checkbox"], .hs-form-checkbox-display input[type="checkbox"] {
+        display: grid;
+        place-content: center;
+        -webkit-appearance: none;
+        appearance: none;
+        background-color: var(--input-background-color);
+        margin: 0;
+        font: inherit;
+        color: currentColor;
+        width: 1.15em;
+        height: 1.15em;
+        transform: translateY(-0.075em);
+        border: 2px solid var(--input-accent-color);
+        border-radius: 0;
+        padding: 0!important;
+    }
+
+    .hs-form-booleancheckbox-display input[type="checkbox"]::before, .hs-form-checkbox-display input[type="checkbox"]::before {
+        content: "";
+        width: 0.65em;
+        height: 0.65em;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em var(--input-accent-color);
+    }
+    .hs-form-booleancheckbox-display input[type="checkbox"]:checked::before, .hs-form-checkbox-display input[type="checkbox"]:checked::before {
+        transform: scale(1);
+    } */
+
+    label.hs-form-booleancheckbox-display, label.hs-form-checkbox-display {
+        display: grid;
+        align-items: center;
+        grid-template-columns: 1em auto;
+        gap: .6875rem;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 0!important;
+    }
+
+  /* Legal */
+  .legal-consent-container {
+  	font-size: var(--legal-font-size);
+    line-height: var(--legal-font-line-height);
+  }
+
+
+  /* Error Messaging */
+  .hs-error-msgs {
+  	list-style: none;
+    padding: 0;
+		margin-top: 1rem;
+  }
+
+  .hbspt-form .submitted-message {
+  	background: transparent;
+  }
+
+  .hs-error-msg, .hs-error-msgs label {
+  	color: var(--error-color)!important;
+  }
+  .hs-input.error,
+  .hs-input.invalid {
+  	border-color: var(--error-color)!important;
+  }
+
+
+  /* Mobile Corrections */
+  @media screen and (max-width: 768px) {
+    .form-columns-2 .hs-form-field {
+      width: 100%!important;
+    }
+    .hbspt-form .multi-container {
+    	display: block;
+    }
+  }
+
+  /*** PROJECT STYLES ***/
+  .hbspt-form .multi-container {
+  	column-gap: var(--grid-spacing);
+    padding-left: 0;
+  }
+  .hs-form-booleancheckbox {
+  	list-style-type: none!important;
+  }
+	.hs-form-booleancheckbox-display input[type="checkbox"], .hs-form-checkbox-display input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0px;
+    margin-right: 0.625rem;
+    flex: 0 0 auto;
+    border: 2px solid #2A6600!important;
+  }
+  .hs-form-booleancheckbox-display input[type="checkbox"]:checked, .hs-form-checkbox-display input[type="checkbox"]:checked{
+    border-style: none;
+    background-color: #6dcc29;
+    background-image: url(https://assets.website-files.com/6408f0e…/64136b4…_Form%20Check.svg);
+    background-size: auto;
+  }
+</style>