/* ============================================================ Modern Gravity Forms Styler -------------------------------------------------------------- Override colours per site under Settings → Modern GF, or directly in Customise → Additional CSS: .modern-gf { --mgf-accent: #1e88e5; --mgf-accent-dark: #1565c0; } ============================================================ */ /* Variables on :root so the datepicker popup (rendered outside .modern-gf as #ui-datepicker-div appended to ) can also pick them up. */ :root { --mgf-accent: #cfb14e; --mgf-accent-dark: #b89636; --mgf-ink: #2a2a2a; --mgf-line: #e5ddd2; --mgf-cream: #faf6f0; --mgf-white: #ffffff; --mgf-radius: 12px; --mgf-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.18); } /* ---------- Card wrapper ---------- */ .modern-gf .gform_wrapper { max-width: 780px; margin: 2.5rem auto; padding: 2.5rem 2.25rem; background: var(--mgf-card-bg, var(--mgf-white)); border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.04); border-top: 3px solid var(--mgf-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -6px rgba(0, 0, 0, 0.08), 0 24px 56px -12px rgba(0, 0, 0, 0.12); font-family: inherit; color: var(--mgf-ink); counter-reset: mgf-section; /* Anchor the form to a fixed 16px base so children sized in `em` render at the intended pixel size regardless of the host theme. Many restaurant themes set `html { font-size: 13-14px }`, which would otherwise shrink every `rem`-sized label and input below readable sizes. Pairing this anchor with `em` units (see below) keeps the form's internal typography stable across themes. */ font-size: 16px; line-height: 1.5; } /* ---------- Title ---------- */ .modern-gf .gform_title { font-size: 1.75em; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.6rem; color: var(--mgf-ink); text-align: center; } .modern-gf .gform_title::after { content: ""; display: block; width: 40px; height: 2px; background: var(--mgf-accent); margin: 0.9rem auto 0; border-radius: 2px; } .modern-gf .gform_description, .modern-gf .gform_required_legend { text-align: center; font-size: 0.78em; color: rgba(0, 0, 0, 0.5); letter-spacing: 0.02em; margin: 0 0 1.5rem; } /* ---------- Section headings ---------- */ .modern-gf .gsection { counter-increment: mgf-section; border: none !important; padding: 1.2rem 0 0 !important; margin: 1.1rem 0 0.1rem !important; } .modern-gf h1.gsection_title, .modern-gf h2.gsection_title, .modern-gf h3.gsection_title, .modern-gf h4.gsection_title, .modern-gf .gsection .gsection_title { font-size: 0.92em !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--mgf-heading, var(--mgf-accent-dark)) !important; line-height: 1.4 !important; margin: 0 0 0.25rem !important; padding: 0 !important; border: none !important; text-align: left !important; display: flex !important; align-items: center !important; gap: 0.7em !important; } /* Numbered prefix (01., 02., …) before each section heading. Subtle editorial touch — only renders when the form has section breaks. */ .modern-gf h1.gsection_title::before, .modern-gf h2.gsection_title::before, .modern-gf h3.gsection_title::before, .modern-gf h4.gsection_title::before, .modern-gf .gsection .gsection_title::before { content: counter(mgf-section, decimal-leading-zero); color: var(--mgf-accent); font-weight: 800; font-feature-settings: "tnum"; letter-spacing: 0; opacity: 0.7; } /* ---------- Field grid ---------- Gravity Forms emits `gfield--width-half`, `gfield--width-third`, etc. on each field based on the field's width setting in the form editor. GF's default stylesheet would normally provide a 12-column grid to make these work — but we suppress that stylesheet, so the grid has to be redefined here. Without this, half-width fields render full-width because their class does nothing. */ .modern-gf .gform_fields { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 0.95rem 1.1rem; list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .modern-gf .gform_fields > .gfield { grid-column: span 12; min-width: 0; /* allow inputs to shrink within the grid cell */ } .modern-gf .gfield--width-half { grid-column: span 6 !important; } .modern-gf .gfield--width-third { grid-column: span 4 !important; } .modern-gf .gfield--width-two-thirds { grid-column: span 8 !important; } .modern-gf .gfield--width-quarter { grid-column: span 3 !important; } .modern-gf .gfield--width-three-quarter { grid-column: span 9 !important; } .modern-gf .gfield--width-full { grid-column: span 12 !important; } /* Section breaks and validation summaries always span the full row. */ .modern-gf .gfield--type-section, .modern-gf .gform_validation_errors { grid-column: 1 / -1 !important; } .modern-gf .gfield { padding: 0 !important; } /* The advanced Name (and other multi-input) field is wrapped in a

, which carries a default browser border + padding — this is the stray grey box around First/Last. Strip it so the field matches the plain inputs. */ .modern-gf fieldset.gfield, .modern-gf .gfield--type-name, .modern-gf .gfield--type-address, .modern-gf .gfield fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; min-width: 0; } /* ---------- Advanced "Name" field (First / Last complex) ---------- GF's advanced Name field wraps its sub-inputs in .ginput_complex with its own markup, which our grid doesn't reach. Because we also suppress GF's default CSS, the sub-fields stack and a stray container box can show. Lay them out side by side (stacking on mobile) and strip any container background/border so the field matches the plain text inputs. */ .modern-gf .ginput_complex, .modern-gf .ginput_container--name { display: flex !important; flex-wrap: wrap; gap: 0.95rem 1.1rem; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; width: 100%; } .modern-gf .ginput_complex > span { flex: 1 1 calc(50% - 0.6rem); min-width: 0; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Sub-labels (First / Last) — small and muted, like a field hint. */ .modern-gf .ginput_complex label { font-size: 0.72em; font-weight: 500; letter-spacing: 0.01em; color: rgba(0, 0, 0, 0.45); margin: 0.3rem 0 0; display: block; } @media (max-width: 640px) { .modern-gf .ginput_complex > span { flex-basis: 100%; } } /* Defensive: themes (Astra, Spectra, etc.) sometimes apply list-style bullets to UL/LI inside content areas, which makes Gravity Forms field rows render with stray • dots before each label. Kill bullets from every possible angle (list-style, pseudo-elements, background image) so the form is bullet-free regardless of what the theme does. */ .modern-gf .gform_fields > li, .modern-gf .gform_fields > .gfield { list-style: none !important; background-image: none !important; } .modern-gf .gform_fields > li::before, .modern-gf .gform_fields > .gfield::before, .modern-gf .gform_fields > li::marker, .modern-gf .gform_fields > .gfield::marker { content: none !important; display: none !important; } /* ---------- Anti-spam honeypot (kept in DOM, invisible to humans) ---------- GF's built-in anti-spam Honeypot relies on a "decoy" field that bots fill in but humans don't see. Default GF CSS positions this off-screen — but we suppress GF's default CSS, so we have to recreate the hiding rule ourselves. Position absolute / -9000px is the standard pattern; we intentionally do NOT use display:none because some bots skip fields that are display:none (which would defeat the honeypot). */ .modern-gf .gform_validation_container, .modern-gf .gfield--type-honeypot, .modern-gf .gform_fields .gfield--type-honeypot { position: absolute !important; left: -9000px !important; top: -9000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } /* ---------- Labels ---------- */ .modern-gf .gfield_label { font-size: 0.82em; font-weight: 600; letter-spacing: 0.01em; color: var(--mgf-ink); margin-bottom: 0.35rem; display: block; } .modern-gf .gfield_required { color: var(--mgf-accent-dark); margin-left: 0.25rem; font-weight: 500; opacity: 0.7; } .modern-gf .gfield_required_asterisk { font-style: normal; } /* ---------- Inputs ---------- */ .modern-gf input[type="text"], .modern-gf input[type="email"], .modern-gf input[type="tel"], .modern-gf input[type="number"], .modern-gf input[type="date"], .modern-gf input[type="time"], .modern-gf input[type="url"], .modern-gf input[type="password"], .modern-gf select, .modern-gf textarea { width: 100%; padding: 0.7rem 0.95rem; font-size: 0.95em; font-family: inherit; color: var(--mgf-ink); background: var(--mgf-cream); border: 1.5px solid transparent; border-radius: var(--mgf-radius); box-shadow: none; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; appearance: none; -webkit-appearance: none; } .modern-gf textarea { min-height: 130px; resize: vertical; line-height: 1.55; } .modern-gf input::placeholder, .modern-gf textarea::placeholder { color: #a7a097; } .modern-gf input:focus, .modern-gf select:focus, .modern-gf textarea:focus { outline: none; background: var(--mgf-white); border-color: var(--mgf-accent); box-shadow: none; } /* ---------- Custom select chevron (URL-encoded SVG) ---------- */ .modern-gf select, .modern-gf select.gfield_select, .modern-gf select.large { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233a3a3a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.75rem; cursor: pointer; /* Force a readable colour even when the host theme tries to dim form controls or when the browser inherits a faded colour from the gf_placeholder option. We use BOTH `color` AND `-webkit-text-fill-color` because Chrome/Safari render