.elementor-234 .elementor-element.elementor-element-3b7c55c5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:20px 20px 20px 20px;--padding-top:36px;--padding-bottom:36px;--padding-left:36px;--padding-right:36px;}.elementor-234 .elementor-element.elementor-element-3b7c55c5:not(.elementor-motion-effects-element-type-background), .elementor-234 .elementor-element.elementor-element-3b7c55c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-234 .elementor-element.elementor-element-437173bf{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;text-align:start;}.elementor-234 .elementor-element.elementor-element-437173bf .elementor-heading-title{font-family:"Fraunces", Sans-serif;font-size:26px;font-weight:700;line-height:1.2em;color:#1A1A1A;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-234 .elementor-element.elementor-element-2fe25a40{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;font-family:"Figtree", Sans-serif;font-size:14px;font-weight:400;line-height:1.6em;color:#6B6B6B;}.elementor-234 .elementor-element.elementor-element-4a5e8e07{text-align:center;font-family:"Figtree", Sans-serif;font-size:11px;font-weight:400;line-height:1.5em;color:#6B6B6B;}#elementor-popup-modal-234{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-234 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-234 .dialog-close-button{display:flex;}#elementor-popup-modal-234 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}@media(max-width:767px){.elementor-234 .elementor-element.elementor-element-3b7c55c5{--width:100%;--padding-top:28px;--padding-bottom:28px;--padding-left:22px;--padding-right:22px;}.elementor-234 .elementor-element.elementor-element-437173bf .elementor-heading-title{font-size:22px;}}@media(min-width:768px){.elementor-234 .elementor-element.elementor-element-3b7c55c5{--width:880px;}}/* Start custom CSS *//* ============================================================================
Portland Remodel Realtor — Gravity Forms styling
Matches the original HTML "What's Your Home Really Worth?" form.
HOW TO USE
1. Best: in Gravity Forms, open the form → Settings → Form Layout →
"CSS Class Name" and add: pdx-form
(Then this CSS targets only this form and never bleeds into others.)
2. Paste this whole block into Elementor → Home page → Page Settings →
Advanced → Custom CSS (or Appearance → Customize → Additional CSS).
If you did NOT add the pdx-form class, do a find-and-replace in this file:
.pdx-form -> .gform_wrapper
(Page CSS in Elementor is already scoped to this page, so that's safe too.)
Tweak the palette in the :root-style block right below — everything else
references these variables.
============================================================================ */
.pdx-form {
--pdx-forest: #1F3024; /* button + headings */
--pdx-forest-light: #2D4332; /* button hover + focus ring */
--pdx-mint: #A8E0B5; /* pill background */
--pdx-mint-deep: #7AC495; /* pill dot */
--pdx-border: #E5DDC9; /* input borders */
--pdx-text: #1A1A1A; /* input text + title */
--pdx-gray: #6B6B6B; /* labels + description */
--pdx-white: #FFFFFF;
--pdx-field-gap: 16px; /* vertical space between fields */
}
/* ----------------------------------------------------------------------------
Base / typography
---------------------------------------------------------------------------- */
.pdx-form,
.pdx-form input,
.pdx-form select,
.pdx-form textarea,
.pdx-form button {
font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Title — Fraunces serif, matches the original h3 */
.pdx-form .gform_title {
font-family: "Fraunces", Georgia, serif !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1.2 !important;
color: var(--pdx-text) !important;
margin: 0 0 12px !important;
}
/* Description */
.pdx-form .gform_description {
display: block;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--pdx-gray) !important;
margin: 0 0 24px !important;
}
/* ----------------------------------------------------------------------------
Field spacing
---------------------------------------------------------------------------- */
.pdx-form .gform_fields {
display: grid !important;
grid-row-gap: var(--pdx-field-gap) !important;
gap: var(--pdx-field-gap) !important;
}
.pdx-form .gfield {
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------------------------
Labels — small, uppercase, letter-spaced, gray (matches original)
---------------------------------------------------------------------------- */
.pdx-form .gfield_label,
.pdx-form legend.gfield_label {
display: block !important;
font-size: 10px !important;
letter-spacing: .15em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: var(--pdx-gray) !important;
margin: 0 0 6px !important;
line-height: 1.3 !important;
}
/* "(Required)" marker — muted instead of the default red.
To remove it entirely, change to: display: none !important; */
.pdx-form .gfield_required {
color: var(--pdx-gray) !important;
font-weight: 400 !important;
font-size: 10px !important;
letter-spacing: 0 !important;
margin-left: 4px;
}
.pdx-form .gfield_required .gfield_required_text,
.pdx-form .gfield_required_asterisk {
color: var(--pdx-gray) !important;
}
/* Name field sub-labels (First / Last), if shown */
.pdx-form .ginput_complex label,
.pdx-form .gform-field-label--type-sub {
font-size: 10px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
color: var(--pdx-gray) !important;
margin-top: 4px !important;
}
/* ----------------------------------------------------------------------------
Inputs / selects / textareas — clean bordered fields (matches original)
---------------------------------------------------------------------------- */
.pdx-form input[type="text"],
.pdx-form input[type="email"],
.pdx-form input[type="tel"],
.pdx-form input[type="number"],
.pdx-form input[type="url"],
.pdx-form select,
.pdx-form textarea {
width: 100% !important;
padding: 10px 14px !important;
font-size: 14px !important;
line-height: 1.4 !important;
border: 1px solid var(--pdx-border) !important;
border-radius: 6px !important;
background-color: var(--pdx-white) !important;
color: var(--pdx-text) !important;
box-sizing: border-box !important;
box-shadow: none !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
/* Placeholder text — gray, like the original */
.pdx-form input::placeholder,
.pdx-form textarea::placeholder { color: var(--pdx-gray) !important; opacity: 1; }
.pdx-form select:invalid,
.pdx-form select [value=""] { color: var(--pdx-gray) !important; }
/* Focus state — forest border + soft ring */
.pdx-form input:focus,
.pdx-form select:focus,
.pdx-form textarea:focus {
border-color: var(--pdx-forest-light) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(45, 67, 50, .10) !important;
}
/* Native select arrow keeps a tidy look */
.pdx-form select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%236B6B6B'%20d%3D'M6%208L0%200h12z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 36px !important;
}
/* ----------------------------------------------------------------------------
Name field — two columns (First / Last) with a gap
---------------------------------------------------------------------------- */
.pdx-form .ginput_complex.ginput_container_name {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.pdx-form .ginput_complex.ginput_container_name > span {
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 480px) {
.pdx-form .ginput_complex.ginput_container_name {
grid-template-columns: 1fr !important;
}
}
/* ----------------------------------------------------------------------------
Submit button — forest green, full width, rounded (matches original)
---------------------------------------------------------------------------- */
.pdx-form .gform_footer,
.pdx-form .gform_page_footer {
margin: 20px 0 0 !important;
padding: 0 !important;
}
.pdx-form .gform_button,
.pdx-form .gform_footer input[type="submit"],
.pdx-form .gform_footer button {
width: 100% !important;
padding: 14px 28px !important;
background: var(--pdx-forest) !important;
background-color: var(--pdx-forest) !important;
color: var(--pdx-white) !important;
border: none !important;
border-radius: 8px !important;
font-family: "Figtree", sans-serif !important;
font-weight: 600 !important;
font-size: 15px !important;
line-height: 1.2 !important;
cursor: pointer !important;
box-shadow: none !important;
transition: background-color .15s ease, transform .15s ease;
}
.pdx-form .gform_button:hover,
.pdx-form .gform_footer input[type="submit"]:hover {
background: var(--pdx-forest-light) !important;
background-color: var(--pdx-forest-light) !important;
transform: translateY(-1px);
}
/* ----------------------------------------------------------------------------
"FREE · NO OBLIGATION" pill
Works whether the pill is a GF HTML field (wrap it in
FREE · NO OBLIGATION) or already an
Elementor widget above the form.
---------------------------------------------------------------------------- */
.pdx-pill,
.pdx-form .pdx-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: var(--pdx-mint);
color: var(--pdx-forest);
font-family: "Figtree", sans-serif;
font-size: 11px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 20px;
}
.pdx-pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pdx-mint-deep);
}
/* ----------------------------------------------------------------------------
Disclaimer note under the button
If you add it as a GF HTML field, wrap it:
No spam. No sales pressure...
---------------------------------------------------------------------------- */
.pdx-form .pdx-note,
.pdx-form .gform_validation_errors ~ .pdx-note {
text-align: center;
font-size: 11px;
line-height: 1.5;
color: var(--pdx-gray);
margin: 12px 0 0;
}
/* ----------------------------------------------------------------------------
Validation messages — keep them readable but on-brand
---------------------------------------------------------------------------- */
.pdx-form .gfield_error input,
.pdx-form .gfield_error select,
.pdx-form .gfield_error textarea {
border-color: #C0492F !important;
}
.pdx-form .validation_message {
font-size: 12px !important;
color: #C0492F !important;
margin-top: 4px !important;
}
.pdx-form .gform_validation_errors {
border-radius: 8px !important;
border-color: var(--pdx-border) !important;
}
/* Remove GF's default top/bottom chrome that can clash inside the white card */
.pdx-form .gform_heading { margin-bottom: 0 !important; }
.pdx-form { background: transparent !important; }/* End custom CSS */