.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================================
Panda Roofing — skin for Elementor Pro's native multi-step Form widget.
Submissions land in Elementor > Submissions.
---------------------------------------------------------------------------
1. FORM WIDGET SETUP
---------------------------------------------------------------------------
Drop a Form widget into the right column of the hero. Add the fields below
in this exact order. NOTE: a Step field's Label only shows in the indicator,
so each on-card heading is an "HTML" field placed just after its Step field.
STEP 1 (Step field, label "Company")
HTML -> Get a Free Quotation!
Text -> Label "Whats your company name?" Placeholder "Company Name" required
STEP 2 (Step field, label "Size")
Radio -> Label "How many Square Meters m2 is your building?" required
Options (one per line):
under 250m2
250m2 to 500m2
500m2+
STEP 3 (Step field, label "Location")
HTML -> Almost done
Where is your property located?
Text -> Label "Address" Placeholder "Search address" width 100%
Text -> Label "Street Address" Placeholder "Address" required
Text -> Label "City" Placeholder "City" width 50%
Text -> Label "Postal code" Placeholder "Postal Code" width 50%
STEP 4 (Step field, label "Name")
HTML -> What's Your Name?
Text -> Label "Full Name" Placeholder "Full Name" required
STEP 5 (Step field, label "Contact")
HTML -> Lastly, What's the best number
and email to reach you on?
Tel -> Label "Phone" Placeholder "Phone" required
Email -> Label "Email" Placeholder "Email" required
---------------------------------------------------------------------------
2. WIDGET SETTINGS
---------------------------------------------------------------------------
Content > Form Fields : Show Label = Yes, Required Mark = Yes
Content > Step Settings: Type = Progress Bar
Each Step field : Next button "CONTINUE", Previous button "Back"
Content > Submit Button: Text "SUBMIT", Alignment Justified
Actions After Submit : Collect Submissions + Email
Advanced > CSS Classes : panda-form
---------------------------------------------------------------------------
3. INSTALL THIS CSS
---------------------------------------------------------------------------
Elementor > Site Settings > Custom CSS (or the section's Advanced > Custom CSS).
Also load Outfit: Site Settings > Typography, or Elementor > Custom Fonts.
========================================================================== */
.panda-form {
--panda-green-light: #ABE512;
--panda-green-dark: #82C525;
--panda-ink: #0d0f0b;
--panda-muted: #6b6f66;
--panda-border: #d5d8cf;
font-family: "Outfit", sans-serif;
background: #FBFBF9;
border-radius: 18px;
padding: 34px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .14);
position: relative;
overflow: hidden;
}
/* green gradient cap across the top of the card */
.panda-form::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--panda-green-light) 0%, var(--panda-green-dark) 70%);
}
/* ------------------------------------------------------------- progress bar */
.panda-form .e-form__indicators__indicator--progress-bar,
.panda-form .e-form__indicators__indicator__progress {
background-color: #E6E7E1;
border-radius: 999px;
height: 5px;
overflow: hidden;
}
.panda-form .e-form__indicators__indicator__progress__meter {
background: linear-gradient(90deg, var(--panda-green-light), var(--panda-green-dark));
border-radius: 999px;
color: transparent;
font-size: 0;
transition: width .35s ease;
}
.panda-form .e-form__indicators {
margin-bottom: 26px;
}
/* ------------------------------------------------------------------- labels */
.panda-form .elementor-field-group > label.elementor-field-label {
font-size: 15px;
font-weight: 400;
color: #1a1c17;
margin-bottom: 8px;
}
.panda-form .elementor-field-group .elementor-field-required .elementor-field-label:after {
color: #7aba1f;
}
/* headings supplied by the HTML fields */
.panda-form .panda-h2 {
margin: 0 0 22px;
font-size: 30px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -.01em;
color: var(--panda-ink);
}
.panda-form .panda-h2--center {
text-align: center;
}
.panda-form .panda-h2--tight {
font-size: 26px;
line-height: 1.2;
}
.panda-form .panda-kicker {
margin: 0 0 6px;
text-align: center;
font-size: 15px;
color: var(--panda-muted);
}
/* the radio question reads as a heading */
.panda-form .elementor-field-type-radio > .elementor-field-label {
font-size: 20px;
line-height: 1.35;
font-weight: 500;
margin-bottom: 20px;
}
/* hide step labels — the progress bar carries the indicator */
.panda-form .e-form__indicators__indicator__label {
display: none;
}
/* ------------------------------------------------------------------- inputs */
.panda-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.panda-form textarea,
.panda-form select {
font-family: "Outfit", sans-serif !important;
font-size: 16px !important;
color: var(--panda-ink) !important;
background: #fff !important;
border: 1px solid var(--panda-border) !important;
border-radius: 8px !important;
padding: 15px 16px !important;
min-height: 0 !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.panda-form input::placeholder,
.panda-form textarea::placeholder {
color: #9aa0a6 !important;
opacity: 1;
}
.panda-form input:focus,
.panda-form textarea:focus,
.panda-form select:focus {
outline: none !important;
border-color: var(--panda-green-dark) !important;
box-shadow: 0 0 0 3px rgba(130, 197, 37, .18) !important;
}
/* --------------------------------------------- radios styled as big buttons */
.panda-form .elementor-field-subgroup {
display: flex;
flex-direction: column;
gap: 14px;
}
.panda-form .elementor-field-subgroup .elementor-field-option {
position: relative;
}
.panda-form .elementor-field-subgroup input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.panda-form .elementor-field-subgroup input[type="radio"] + label {
display: block;
text-align: center;
font-size: 18px;
font-weight: 600;
color: #1a1c17;
background: #fff;
border: 2px solid var(--panda-border);
border-radius: 8px;
padding: 18px 20px;
margin: 0;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.panda-form .elementor-field-subgroup input[type="radio"]:hover + label {
transform: translateY(-1px);
}
.panda-form .elementor-field-subgroup input[type="radio"]:checked + label {
background: linear-gradient(90deg, var(--panda-green-light) 0%, var(--panda-green-dark) 85%);
border-color: var(--panda-green-dark);
color: #000;
}
/* ------------------------------------------------------------------ buttons */
.panda-form .elementor-button,
.panda-form .e-form__buttons__wrapper__button-next,
.panda-form button[type="submit"] {
width: 100%;
font-family: "Outfit", sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: .06em;
color: #000 !important;
background: linear-gradient(90deg, var(--panda-green-light) 0%, var(--panda-green-dark) 85%) !important;
border: 0;
border-radius: 8px;
padding: 19px 22px;
transition: filter .15s ease;
}
.panda-form .elementor-button:hover {
filter: brightness(1.06);
}
.panda-form .elementor-button-content-wrapper {
justify-content: space-between;
width: 100%;
}
/* "Back" as a quiet text link under the primary button */
.panda-form .e-form__buttons__wrapper__button-previous {
background: transparent !important;
color: var(--panda-muted) !important;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
padding: 6px;
order: 2;
}
.panda-form .e-form__buttons__wrapper__button-previous:hover {
color: var(--panda-ink) !important;
filter: none;
}
.panda-form .e-form__buttons__wrapper {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 20px;
}
/* --------------------------------------------------------------- messages */
.panda-form .elementor-message.elementor-message-success {
font-size: 16px;
line-height: 1.5;
color: #55594f;
text-align: center;
}
.panda-form .elementor-message.elementor-message-danger {
font-size: 14px;
color: #c0392b;
}
/* ------------------------------------------------------------------ mobile */
@media (max-width: 600px) {
.panda-form {
padding: 24px 20px 28px;
}
.panda-form .panda-h2 {
font-size: 24px;
}
.panda-form .panda-h2--tight {
font-size: 22px;
}
}/* End custom CSS */