/* ============================================================================ ALLOut Forms — the Gravity Forms design system ALLOut Security · https://alloutsecurity.com ============================================================================ SCOPE: this file styles GRAVITY FORMS. It has nothing to do with the [alert_allout] shortcode — that component lives in `allout-alerts.css` and owns the --aa-* tokens. This file owns the --ao-* tokens. ── WHICH FORM DOES A RULE BELONG TO? ─────────────────────────────────────── Read this before hunting: with two exceptions, EVERY rule below is GLOBAL. It is keyed on `.gform_wrapper` / `.gfield` / `.gform_button`, so it hits the change-request form, the Customer Success form, the webinar forms and any form added tomorrow, identically. That is deliberate — one layout for every form. There is no "front-end form" block versus a "request a change" block, and there never was; that is why they were impossible to tell apart. The ONLY form-specific rules in this file are tagged [FORM 27] inline: · §14 `.aogf-hide-title.gsection` — collapses the section divider when the ALLOut GF 27 PD Fields Hide plugin hides a section heading. · §22 a commented-out conditional-hide block for form 27's fields. Everything else is the shared design system. To restyle ONE form, add a rule at the bottom scoped to `#gform_wrapper_` — never edit a §1–§21 rule to fix a single form. ── WHO ELSE STYLES THESE FORMS (in cascade order) ────────────────────────── 1. Gravity Forms core + the Orbital theme bundle. Orbital is forced on site-wide by the child theme: allout/functions/gravity-forms/ui.php → add_filter('gform_default_theme', 'orbital'). §1 below retints its native --gf-* tokens; if that filter ever changes, §1 goes dead. 2. betheme/css/be.css (~L567-574) — theme-level label/input/validation rules, some !important. 3. THIS FILE. 4. Theme Options → Custom CSS (stored in the database, NOT in this repo). It is printed inline in , so it loads LAST and wins every tie. It currently contains its own `.gform_wrapper`, `.gform_wrapper.gravity-theme input{...}`, `.gfield_checkbox .gchoice` and `#gform_37` rules that contradict this file. Anything here that "doesn't apply" is almost always being overridden there. 5. Per-form plugins: ALLOut GF 27 PD Fields Hide (inline, !important), ALLOut GF Dynamic Relations (Select2 + an injected .gform_button), ALLOut GF Datepicker (CDN jQuery-UI theme). Brand: edit the :root block in §0 — everything derives from it. ============================================================================ */ /* ============================================================================ Gravity Forms — ELEGANT SUITE · ALLOut Security ============================================================================ A full redesign of gravityforms-modern.css. ONE drop-in file, no PHP, no settings. Built for BOTH renderers at once: · Orbital / Framework theme → driven through its native --gf-* design tokens (LAYER 1). Retinting the tokens rebrands EVERY component the theme ships — datepicker, file drag-drop, password meter, multiselect chips, list/repeater, page steps — with almost no !important. · Legacy "GF 2.5" theme → rebuilt + branded in LAYER 3, plus the bespoke flourishes (radio cards, custom checks, step infographic, pill submit) that tokens alone can't express, applied to both. Covers every field type, not just the ones a given form uses: name · address · text/email/phone/url/number/password · textarea · select (custom caret) · multiselect (chips) · radio cards · checkbox · consent · date (picker) · time · file upload (drag-drop, preview, progress) · list/repeater · product/quantity/total · section · HTML · multi-page progress bar + numbered step indicator · validation summary + inline errors · save-and-continue · ajax spinner · honeypot. Apply: enqueued by the ALLOut Alerts plugin on gform_enqueue_scripts. (It used to be pasted into Appearance → Customize → Additional CSS; it is a real file now — do not paste a copy back into the theme.) Brand: edit the :root block — everything derives from it. Scope: global (.gform_wrapper). To pin one form, prefix selectors with #gform_wrapper_27 (or add .gform_wrapper.gf-elegant to the form's CSS-class field and swap .gform_wrapper → .gform_wrapper.gf-elegant). Note: [alert_allout] HTML blocks are owner-controlled — left untouched. ============================================================================ */ /* ============================================================================ 0. DESIGN TOKENS — the single source of truth ============================================================================ */ :root { /* --- Brand ----------------------------------------------------------- */ --ao-navy: #122a4d; /* headings, labels */ --ao-navy-700: #1c3a63; --ao-navy-900: #0d2342; --ao-red: #f03c45; /* primary action / accent */ --ao-red-dk: #c92a22; --ao-red-700: #ad221b; --ao-blue: #1f6fb2; /* focus / informational */ --ao-blue-dk: #185a92; --ao-green: #15915b; /* success */ --ao-amber: #b8770a; /* warning */ --ao-navy-rgb: 18,42,77; --ao-red-rgb: 240,60,69; --ao-blue-rgb: 31,111,178; --ao-green-rgb: 21,145,91; /* --- Ink & neutral ramp ---------------------------------------------- */ --ao-ink: #1c2533; /* body text */ --ao-muted: #5a6675; /* sub-labels, descriptions */ --ao-faint: #8a94a3; /* placeholders, hints */ --ao-line: #dde4ee; /* control borders */ --ao-line-2: #e9eef5; /* hairline dividers */ --ao-soft: #f6f8fb; /* hover fills, inset panels */ --ao-soft-2: #eef2f8; --ao-tint: #fdeeed; /* selected red wash */ --ao-tint-bl: #eef5fb; /* selected blue wash */ --ao-white: #ffffff; --ao-paper: #ffffff; /* form surface */ /* --- Type ------------------------------------------------------------ */ --ao-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif; --ao-fs: clamp(.95rem, .9rem + .25vw, 1rem); /* control text */ --ao-fs-label: .9375rem; --ao-fs-sub: .78rem; --ao-fs-desc: .85rem; --ao-fs-section: clamp(1.05rem, 1rem + .4vw, 1.2rem); --ao-fs-title: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); --ao-lh: 1.5; /* --- Radius ---------------------------------------------------------- */ --ao-r-xs: 4px; /* checks */ --ao-r-sm: 4px; /* inputs, selects, choice cards */ --ao-r: 4px; /* form shell, panels */ --ao-r-lg: 4px; --ao-r-pill: 4px; /* buttons, badges */ /* --- Spacing scale (4px base) ---------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 56px; /* --- Elevation (navy-tinted, layered) -------------------------------- */ --ao-shadow-xs: 0 1px 2px rgba(var(--ao-navy-rgb), .06); --ao-shadow-sm: 0 1px 2px rgba(var(--ao-navy-rgb), .05), 0 2px 6px rgba(var(--ao-navy-rgb), .05); --ao-shadow-md: 0 1px 2px rgba(var(--ao-navy-rgb), .05), 0 14px 34px rgba(var(--ao-navy-rgb), .09); --ao-shadow-lg: 0 2px 4px rgba(var(--ao-navy-rgb), .06), 0 24px 60px rgba(var(--ao-navy-rgb), .14); --ao-shadow-pop: 0 8px 24px rgba(var(--ao-navy-rgb), .16); /* --- Focus ----------------------------------------------------------- */ --ao-focus: 0 0 0 4px rgba(var(--ao-blue-rgb), .22); --ao-focus-err: 0 0 0 4px rgba(var(--ao-red-rgb), .18); /* --- Motion ---------------------------------------------------------- */ --ao-ease: cubic-bezier(.2,.7,.2,1); --ao-spring: cubic-bezier(.34,1.4,.5,1); --ao-t: .18s; --ao-t2: .28s; } .gform_heading { display: none; } /* ============================================================================ 1. ORBITAL / FRAMEWORK BRIDGE Map ALLOut tokens onto the theme's own variables. This single block rebrands the entire Orbital theme — every control, every state — and is harmless on any wrapper that doesn't carry these classes. ============================================================================ */ .gform-theme--framework, .gform-theme--orbital, .gform-theme--api { /* palette */ --gf-color-primary: var(--ao-red); --gf-color-primary-rgb: var(--ao-red-rgb); --gf-color-primary-contrast: #fff; --gf-color-primary-darker: var(--ao-red-dk); --gf-color-primary-lighter: #ef5a51; --gf-color-secondary: #fff; --gf-color-secondary-contrast: var(--ao-navy); --gf-color-secondary-darker: var(--ao-soft-2); --gf-color-secondary-lighter: var(--ao-soft); --gf-color-danger: var(--ao-red); --gf-color-danger-rgb: var(--ao-red-rgb); --gf-color-danger-contrast: #fff; --gf-color-success: var(--ao-green); --gf-color-success-rgb: var(--ao-green-rgb); /* outside-control surfaces (labels, descriptions, borders) */ --gf-color-out-ctrl-dark: var(--ao-ink); --gf-color-out-ctrl-dark-darker: var(--ao-navy); --gf-color-out-ctrl-light: var(--ao-line); --gf-color-out-ctrl-light-darker: #cdd6e3; --gf-color-out-ctrl-light-lighter: var(--ao-soft); /* geometry & motion */ --gf-radius: var(--ao-r-sm); --gf-radius-max-sm: var(--ao-r-xs); --gf-radius-max-md: var(--ao-r-sm); --gf-radius-max-lg: var(--ao-r); --gf-transition-duration: var(--ao-t); /* base type */ --gf-font-family-base: var(--ao-font); --gf-font-family-primary: var(--ao-font); --gf-font-size-secondary: var(--ao-fs); --gf-line-height-secondary: var(--ao-lh); /* form rhythm — feed our spacing scale into the native grid */ --gf-form-gap-x: var(--sp-5); --gf-form-gap-y: var(--sp-5); --gf-field-gap-y: var(--sp-2); --gf-form-footer-margin-y-start: var(--sp-6); /* --- controls (inputs / select / textarea) ----------------------- */ --gf-ctrl-bg-color: #fff; --gf-ctrl-bg-color-hover: #fff; --gf-ctrl-bg-color-focus: #fff; --gf-ctrl-bg-color-error: #fff; --gf-ctrl-bg-color-disabled: var(--ao-soft); --gf-ctrl-color: var(--ao-ink); --gf-ctrl-border-color: var(--ao-line); --gf-ctrl-border-color-hover: #b9c5d7; --gf-ctrl-border-color-focus: var(--ao-blue); --gf-ctrl-border-color-error: var(--ao-red); --gf-ctrl-border-width: 1.5px; --gf-ctrl-radius: var(--ao-r-sm); --gf-ctrl-padding-x: 15px; --gf-ctrl-padding-y: 12px; --gf-ctrl-size: auto; --gf-ctrl-size-md: auto; --gf-ctrl-font-family: var(--ao-font); --gf-ctrl-font-size: var(--ao-fs); --gf-ctrl-line-height: 1.4; --gf-ctrl-transition: var(--ao-t); --gf-ctrl-placeholder-color: var(--ao-faint); --gf-ctrl-placeholder-opacity: 1; --gf-ctrl-accent-color: var(--ao-red); /* focus ring */ --gf-ctrl-shadow-focus: var(--ao-focus); --gf-ctrl-shadow-color-focus: rgba(var(--ao-blue-rgb), .22); --gf-ctrl-shadow-size-focus: 0 0 0 4px; --gf-ctrl-outline: none; --gf-ctrl-outline-offset: 0; /* labels */ --gf-ctrl-label-color-primary: var(--ao-navy); --gf-ctrl-label-font-family-primary: var(--ao-font); --gf-ctrl-label-font-size-primary: var(--ao-fs-label); --gf-ctrl-label-font-weight-primary: 700; --gf-ctrl-label-color-secondary: var(--ao-muted); /* sub-labels */ --gf-ctrl-label-font-size-secondary: var(--ao-fs-sub); --gf-ctrl-label-font-weight-secondary: 500; --gf-ctrl-label-color-req: var(--ao-red); /* descriptions */ --gf-ctrl-desc-color: var(--ao-muted); --gf-ctrl-desc-font-size: var(--ao-fs-desc); --gf-ctrl-desc-line-height: 1.45; /* choices (radio / checkbox sizing + check colour) ⚠️ READ BEFORE EDITING — these three tokens do NOT mean what their names suggest, and getting them wrong is what made checked radios render blank. --gf-ctrl-choice-size = the size of the CONTROL itself (the box / circle you click). GF md: 20px --gf-ctrl-radio-check-size = the size of the INNER DOT only, drawn by GF as a ::before. GF md: 7px --gf-ctrl-checkbox-check-size = the FONT-SIZE of GF's tick glyph, which it renders from the gform-icons-orbital icon font. GF md: initial Setting the dot to 20px inside a 20px control painted a solid white disc over the whole radio, so a selected option looked unselected. §7/§8 below now draw both controls themselves and switch GF's ::before off, but these values must still be sane for any choice control we don't hand-draw. */ --gf-ctrl-choice-size: 20px; --gf-ctrl-choice-check-color: #fff; --gf-ctrl-radio-check-size: 7px; --gf-ctrl-checkbox-check-size: 13px; --gf-ctrl-checkbox-check-radius: var(--ao-r-xs); --gf-field-choice-gap: var(--sp-2); /* textarea */ --gf-ctrl-textarea-height: 150px; --gf-ctrl-textarea-resize: vertical; --gf-ctrl-textarea-radius: var(--ao-r-sm); /* --- buttons ----------------------------------------------------- */ --gf-ctrl-btn-font-family: var(--ao-font); --gf-ctrl-btn-font-weight: 700; --gf-ctrl-btn-radius: var(--ao-r-pill); --gf-ctrl-btn-padding-x: 34px; --gf-ctrl-btn-padding-y: 14px; --gf-ctrl-btn-size: auto; --gf-ctrl-btn-letter-spacing: .01em; --gf-ctrl-btn-transition: var(--ao-t); /* primary */ --gf-ctrl-btn-bg-color-primary: var(--ao-red); --gf-ctrl-btn-bg-color-hover-primary: var(--ao-red-dk); --gf-ctrl-btn-bg-color-focus-primary: var(--ao-red-dk); --gf-ctrl-btn-color-primary: #fff; --gf-ctrl-btn-color-hover-primary: #fff; --gf-ctrl-btn-border-width-primary: 0; --gf-ctrl-btn-shadow: 0 8px 20px rgba(var(--ao-red-rgb), .26); --gf-ctrl-btn-shadow-hover: 0 12px 26px rgba(var(--ao-red-rgb), .32); --gf-ctrl-btn-shadow-focus: var(--ao-focus); /* secondary (Previous / Save) */ --gf-ctrl-btn-bg-color-secondary: #fff; --gf-ctrl-btn-bg-color-hover-secondary: var(--ao-soft); --gf-ctrl-btn-color-secondary: var(--ao-navy); --gf-ctrl-btn-color-hover-secondary: var(--ao-navy); --gf-ctrl-btn-border-color-secondary: var(--ao-line); --gf-ctrl-btn-border-width-secondary: 1.5px; /* --- validation -------------------------------------------------- */ --gf-form-validation-bg-color: rgba(var(--ao-red-rgb), .05); --gf-form-validation-color: var(--ao-red-700); --gf-form-validation-border-color: rgba(var(--ao-red-rgb), .30); --gf-form-validation-border-width: 1px; --gf-form-validation-radius: var(--ao-r-sm); --gf-form-validation-heading-color: var(--ao-red-700); --gf-form-validation-heading-icon-bg-color: var(--ao-red); --gf-form-validation-heading-icon-color: #fff; --gf-form-validation-shadow: none; /* --- multi-page progress bar + step indicator -------------------- */ --gf-field-pg-prog-bar-bg-color: var(--ao-soft-2); --gf-field-pg-prog-bar-bg-gradient-blues: linear-gradient(90deg, var(--ao-red), var(--ao-red-dk)); --gf-field-pg-prog-bar-bg-color-blue: var(--ao-red); --gf-field-pg-prog-bar-bg-color-gray: var(--ao-navy); --gf-field-pg-prog-bar-height: 12px; --gf-field-pg-prog-bar-radius: var(--ao-r-pill); --gf-field-pg-prog-color: var(--ao-navy); --gf-field-pg-prog-font-weight: 700; /* numbered steps */ --gf-field-pg-steps-number-bg-color: #fff; --gf-field-pg-steps-number-border-color: var(--ao-line); --gf-field-pg-steps-number-color: var(--ao-muted); --gf-field-pg-steps-number-bg-color-active: var(--ao-red); --gf-field-pg-steps-number-border-color-active: var(--ao-red); --gf-field-pg-steps-number-color-active: #fff; --gf-field-pg-steps-number-bg-color-complete: var(--ao-navy); --gf-field-pg-steps-number-border-color-complete: var(--ao-navy); --gf-field-pg-steps-number-color-complete: #fff; --gf-field-pg-steps-number-size: 40px; --gf-field-pg-steps-number-radius: var(--ao-r-pill); /* --- file upload / dropzone -------------------------------------- */ --gf-ctrl-file-zone-border-style: dashed; --gf-ctrl-file-zone-radius: var(--ao-r); --gf-ctrl-file-zone-icon-color: var(--ao-red); --gf-ctrl-file-btn-bg-color: var(--ao-navy); --gf-ctrl-file-btn-color: #fff; --gf-ctrl-file-btn-radius: var(--ao-r-pill); --gf-ctrl-file-prog-bar-bg-color-loading: var(--ao-red); --gf-ctrl-file-prog-bar-radius: var(--ao-r-pill); /* --- multiselect chips ------------------------------------------- */ --gf-ctrl-multiselect-radius: var(--ao-r-sm); --gf-ctrl-multiselect-selected-item-bg-color: var(--ao-navy); --gf-ctrl-multiselect-selected-item-color: #fff; --gf-ctrl-multiselect-selected-item-radius: var(--ao-r-pill); /* --- list / repeater buttons ------------------------------------- */ --gf-field-list-btn-radius: var(--ao-r-pill); --gf-field-list-btn-size: 28px; /* --- password strength meter ------------------------------------- */ --gf-field-pwd-str-ind-bg-color-strong: var(--ao-green); --gf-field-pwd-str-ind-bg-color-good: var(--ao-blue); --gf-field-pwd-str-ind-bg-color-bad: var(--ao-amber); --gf-field-pwd-str-ind-bg-color-short: var(--ao-red); --gf-field-pwd-str-ind-radius: var(--ao-r-pill); /* --- date picker -------------------------------------------------- */ --gf-ctrl-date-picker-radius: var(--ao-r); --gf-ctrl-date-picker-shadow: var(--ao-shadow-pop); --gf-ctrl-date-picker-cell-content-bg-color-selected: var(--ao-red); --gf-ctrl-date-picker-cell-content-color-selected: #fff; --gf-ctrl-date-picker-cell-content-bg-color-hover: var(--ao-tint-bl); --gf-ctrl-date-picker-cell-content-radius: var(--ao-r-pill); /* --- spinner ------------------------------------------------------ */ --gf-form-spinner-fg-color: var(--ao-red); --gf-form-spinner-bg-color: var(--ao-line); } /* ============================================================================ 2. FORM SHELL + TYPOGRAPHY (applies to BOTH themes) ============================================================================ */ .gform_wrapper { color-scheme: light; /* lock to light: blocks Chrome dark / auto-dark mode */ container-type: inline-size; /* enables container queries below */ background: var(--ao-paper); border: 1px solid var(--ao-line-2); border-radius: var(--ao-r); box-shadow: var(--ao-shadow-md); padding: clamp(22px, 1.4rem + 1.6vw, 40px); color: var(--ao-ink); font-family: var(--ao-font); font-size: var(--ao-fs); line-height: var(--ao-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .gform_wrapper .gform_heading { margin-bottom: var(--sp-5); } .gform_wrapper .gform_title { font-size: var(--ao-fs-title); font-weight: 800; letter-spacing: -.01em; color: var(--ao-navy); margin: 0 0 var(--sp-1); line-height: 1.2; } .gform_wrapper .gform_description { display: block; color: var(--ao-muted); font-size: var(--ao-fs-desc); line-height: 1.5; } .gform_wrapper .gform_required_legend { color: var(--ao-faint); font-size: .8rem; margin-top: var(--sp-2); } .gform_wrapper .gfield{ margin: 20px 0 !important; } /* ============================================================================ 3. LAYOUT GRID Orbital ships its own grid, so we only REBUILD it for the legacy theme (everything that is NOT .gform-theme--framework / --orbital). For Orbital we just feed the gap tokens above. ============================================================================ */ .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields { display: grid !important; grid-template-columns: repeat(12, 1fr); column-gap: var(--sp-5); row-gap: var(--sp-5); width: 100%; align-items: start; } .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields > .gfield { grid-column: 1 / -1 !important; float: none; width: auto; max-width: none; margin: 0 !important; } .gform_wrapper .gfield--width-full { grid-column: span 12 !important; } .gform_wrapper .gfield--width-eleven-twelfths { grid-column: span 11 !important; } .gform_wrapper .gfield--width-five-sixths { grid-column: span 10 !important; } .gform_wrapper .gfield--width-three-quarter { grid-column: span 9 !important; } .gform_wrapper .gfield--width-two-thirds { grid-column: span 8 !important; } .gform_wrapper .gfield--width-seven-twelfths { grid-column: span 7 !important; } .gform_wrapper .gfield--width-half { grid-column: span 6 !important; } .gform_wrapper .gfield--width-five-twelfths { grid-column: span 5 !important; } .gform_wrapper .gfield--width-third { grid-column: span 4 !important; } .gform_wrapper .gfield--width-quarter { grid-column: span 3 !important; } .gform_wrapper .gfield--width-one-sixth { grid-column: span 2 !important; } .gform_wrapper .gfield--width-one-twelfth { grid-column: span 1 !important; } /* hidden / conditionally-hidden fields collapse cleanly */ .gform_wrapper .gform_fields > .gfield.hidden, .gform_wrapper .gform_fields > .gfield.gfield_visibility_hidden, .gform_wrapper .gform_fields > .gfield[style*="display:none"], .gform_wrapper .gform_fields > .gfield[style*="display: none"] { display: none !important; } /* multi-input inner rows (Name / Address) on legacy */ .gform_wrapper .gform-grid-row { display: flex; flex-flow: row wrap; margin-inline: -.5rem; row-gap: var(--sp-3); } .gform_wrapper .gform-grid-col { flex: 1 1 0; min-width: 0; padding-inline: .5rem; } .gform_wrapper .gform-grid-col.gform-grid-col--size-auto { flex: 1; } /* responsive: container query (robust inside narrow page columns) + viewport fallback */ @container (max-width: 560px) { .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields { column-gap: 0; } .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields > .gfield { grid-column: 1 / -1 !important; } .gform_wrapper .gform-grid-row { flex-direction: column; } } @media (max-width: 560px) { .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields { column-gap: 0; } .gform_wrapper:not(.gform-theme--framework):not(.gform-theme--orbital) .gform_fields > .gfield { grid-column: 1 / -1 !important; } } /* ============================================================================ 4. LABELS · SUB-LABELS · REQUIRED · DESCRIPTIONS ============================================================================ */ .gform_wrapper .gfield_label { display: block; font-weight: 700; color: var(--ao-navy); font-size: var(--ao-fs-label); line-height: 1.3; margin: 0 0 var(--sp-2); } /* required text "(Required)" → quiet uppercase micro-badge; asterisk → red dot */ .gform_wrapper .gfield_required { color: var(--ao-red); font-style: normal; margin-inline-start: .4rem; } .gform_wrapper .gfield_required.gfield_required_text { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ao-red); background: var(--ao-tint); padding: 2px 7px; border-radius: var(--ao-r-pill); vertical-align: middle; } .gform_wrapper .gfield_required.gfield_required_asterisk { font-size: 1em; } /* sub-labels (First / Last, Street / City …) — muted, tight to their control */ .gform_wrapper .ginput_complex label, .gform_wrapper .gform-field-label--type-sub { font-weight: 500; color: var(--ao-muted); font-size: var(--ao-fs-sub); line-height: 1.3; margin: var(--sp-1) 0 0; /* sub-label-placement: below */ display: block; } /* field descriptions: clear breathing room, never cramped */ .gform_wrapper .gfield_description, .gform_wrapper .gsection_description { color: var(--ao-muted); font-size: var(--ao-fs-desc); line-height: 1.45; margin: var(--sp-1) 0 0; padding: 0; } .gform_wrapper .gfield_description.validation_message { margin-top: var(--sp-2); } .gform_wrapper .ginput_container { margin-top: 0; } /* ============================================================================ 5. TEXT INPUTS · TEXTAREA · SELECT · MULTISELECT ============================================================================ */ .gform_wrapper .gfield input[type=text], .gform_wrapper .gfield input[type=email], .gform_wrapper .gfield input[type=tel], .gform_wrapper .gfield input[type=number], .gform_wrapper .gfield input[type=url], .gform_wrapper .gfield input[type=password], .gform_wrapper .gfield input[type=search], .gform_wrapper .gfield input[type=date], .gform_wrapper .gfield textarea, .gform_wrapper .gfield select { width: 100% !important; box-sizing: border-box !important; background: #fff !important; color: var(--ao-ink) !important; border: 1.5px solid var(--ao-line) !important; border-radius: var(--ao-r-sm) !important; padding: 12px 15px !important; font-family: var(--ao-font) !important; font-size: var(--ao-fs) !important; line-height: 1.4 !important; box-shadow: none !important; transition: border-color var(--ao-t) var(--ao-ease), box-shadow var(--ao-t) var(--ao-ease), background var(--ao-t) var(--ao-ease) !important; } .gform_wrapper .gfield textarea { min-height: 150px; resize: vertical; line-height: 1.55 !important; } .gform_wrapper .gfield input:hover, .gform_wrapper .gfield textarea:hover, .gform_wrapper .gfield select:hover { border-color: #b9c5d7 !important; } .gform_wrapper .gfield input:focus, .gform_wrapper .gfield textarea:focus, .gform_wrapper .gfield input:focus, .gform_wrapper .gfield textarea:focus, .gform_wrapper .gfield select:focus { outline: none !important; border-color: var(--ao-red) !important; box-shadow: none; } .gform_wrapper .gfield input::placeholder, .gform_wrapper .gfield textarea::placeholder { color: var(--ao-faint); opacity: 1; } .gform_wrapper .gfield input:disabled, .gform_wrapper .gfield textarea:disabled, .gform_wrapper .gfield select:disabled { background: var(--ao-soft) !important; color: var(--ao-faint) !important; cursor: not-allowed; } .gform_wrapper .gfield input[readonly] { background: var(--ao-soft) !important; } /* SELECT — strip native chrome, draw our caret */ .gform_wrapper .gfield select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 44px !important; cursor: pointer; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; } .gform_wrapper .gfield select[multiple] { background-image: none !important; padding: 6px !important; min-height: 120px; } .gform_wrapper .gfield select[multiple] option { padding: 8px 12px; border-radius: var(--ao-r-xs); margin-bottom: 2px; } .gform_wrapper .gfield select[multiple] option:checked { background: var(--ao-navy) linear-gradient(0deg, var(--ao-navy), var(--ao-navy)); color: #fff; } /* Enhanced UI (Chosen / select2) — tame to match */ .gform_wrapper .chosen-container, .gform_wrapper .select2-container { width: 100% !important; } .gform_wrapper .chosen-single, .gform_wrapper .select2-selection { border: 1.5px solid var(--ao-line) !important; border-radius: var(--ao-r-sm) !important; height: auto !important; padding: 10px 15px !important; background: #fff !important; box-shadow: none !important; } /* ============================================================================ 6. NUMBER (spinner) · SEARCH · PASSWORD + STRENGTH METER ============================================================================ */ .gform_wrapper .gfield input[type=number] { -moz-appearance: textfield; } .gform_wrapper .gfield input[type=number]::-webkit-outer-spin-button, .gform_wrapper .gfield input[type=number]::-webkit-inner-spin-button { opacity: .55; height: 26px; } /* password strength meter (legacy markup; Orbital handled via tokens) */ .gform_wrapper .gfield_password_strength, .gform_wrapper .gf_password_strength { margin-top: var(--sp-2); padding: 8px 12px; font-size: var(--ao-fs-sub); font-weight: 600; border: 1px solid var(--ao-line); border-radius: var(--ao-r-sm); background: var(--ao-soft); color: var(--ao-muted); } .gform_wrapper .gf_password_strength.strong { color: var(--ao-green); border-color: rgba(var(--ao-green-rgb), .4); } .gform_wrapper .gf_password_strength.good { color: var(--ao-blue); } .gform_wrapper .gf_password_strength.bad, .gform_wrapper .gf_password_strength.short { color: var(--ao-red-700); border-color: rgba(var(--ao-red-rgb), .4); } /* ============================================================================ 7. RADIO → selectable cards with a custom dot ============================================================================ */ /* ── Switch OFF the theme's own dot/tick (applies to §7 AND §8) ────────────── The Orbital/framework theme does NOT paint the selected state onto the input itself — it draws a separate ::before box on top of it: radio → a disc of --gf-ctrl-radio-check-size filled with --gf-ctrl-choice-check-color, revealed by opacity on :checked. checkbox → the glyph "\e900" from the `gform-icons-orbital` ICON FONT, sized by --gf-ctrl-checkbox-check-size. Both sat on top of the dot and tick that §7/§8 draw themselves, so a checked radio was covered by a white disc (it read as unchecked) and a checked box showed two ticks — or a tofu square whenever that icon font failed to load. This file is deliberately isolated from GF's icon font (see §16), so the pseudo-element is removed and our own drawing is the only one left. */ .gform_wrapper input[type=radio]::before, .gform_wrapper input[type=radio]::after, .gform_wrapper input[type=checkbox]::before, .gform_wrapper input[type=checkbox]::after { content: none !important; display: none !important; } .gform_wrapper .gfield_radio { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; margin-top:5px !important; } .gform_wrapper .gfield_radio .gchoice { position: relative; margin: 0; padding: 8px 10px 8px 48px; border: 1.5px solid var(--ao-line); border-radius: var(--ao-r-sm); background: #fff; transition: border-color var(--ao-t) var(--ao-ease), background var(--ao-t) var(--ao-ease), box-shadow var(--ao-t) var(--ao-ease), transform var(--ao-t) var(--ao-ease); } .gform_wrapper .gfield_radio .gchoice:hover { border-color: var(--ao-blue); background: var(--ao-soft); box-shadow: var(--ao-shadow-xs); } .gform_wrapper .gfield_radio .gchoice label { display: block; margin: 0; cursor: pointer; color: var(--ao-ink); font-weight: 500; line-height: 1.45; font-size: 14px; } .gform_wrapper .gfield_radio .gchoice label a { color: var(--ao-red); font-weight: 600; } .gform_wrapper .gfield_radio input[type=radio] { -webkit-appearance: none; appearance: none; position: absolute; left: 17px; top: 9px; width: 20px; height: 20px; margin: 0; border: 2px solid #c2cdde; border-radius: 50%; background: #fff; cursor: pointer; transition: border-color var(--ao-t) var(--ao-ease), box-shadow var(--ao-t) var(--ao-ease); } /* The checked visuals must beat the GF orbital theme's own input:focus background rule — otherwise the fill is suppressed while the control is focused (right after a click) and only shows once focus moves elsewhere. The :checked:focus/-visible/:active combos raise specificity, and the !important guards against the theme declaring its focus background important. */ .gform_wrapper .gfield_radio input[type=radio]:checked, .gform_wrapper .gfield_radio input[type=radio]:checked:focus, .gform_wrapper .gfield_radio input[type=radio]:checked:focus-visible, .gform_wrapper .gfield_radio input[type=radio]:checked:active { border-color: var(--ao-red) !important; background: radial-gradient(circle at center, var(--ao-red) 0 5px, #fff 6px) !important; } .gform_wrapper .gfield_radio .gchoice:has(input:checked) { border-color: var(--ao-red) !important; background: var(--ao-tint) !important; box-shadow: inset 0 0 0 1px var(--ao-red) !important; } /* ============================================================================ 8. CHECKBOX (incl. Consent) → custom box with a tick ============================================================================ */ .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_consent .ginput_container_consent { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; } .gform_wrapper .gfield_checkbox .gchoice, .gform_wrapper .gfield_consent .ginput_container_consent { display: flex; align-items: flex-start; } /* `.gform_wrapper` is repeated on purpose — it is NOT a typo and must not be "tidied" away. The framework theme styles every control through `.gform-theme--framework input[type]:where(…)`, which scores exactly the same specificity as a single `.gform_wrapper input[type=checkbox]`. On a tie the winner is whichever stylesheet happens to print last, so the unchecked box rendered as GF's default rather than ours, at random. Doubling the class raises the score without changing which elements match. The radio in §7 is already scoped through `.gfield_radio`, so it doesn't need this. */ .gform_wrapper.gform_wrapper input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 2px 11px 0 0; flex: none; border: 2px solid #c2cdde; border-radius: var(--ao-r-xs); background: #fff; cursor: pointer; padding: 0; min-height: 0; box-shadow: none; display: inline-block; vertical-align: top; transition: border-color var(--ao-t) var(--ao-ease), background var(--ao-t) var(--ao-ease); } .gform_wrapper.gform_wrapper input[type=checkbox]:hover { border-color: var(--ao-blue); } /* Same fix as the radio: keep the checked fill visible while focused/active, overriding the GF orbital theme's input:focus background. */ .gform_wrapper input[type=checkbox]:checked, .gform_wrapper input[type=checkbox]:checked:focus, .gform_wrapper input[type=checkbox]:checked:focus-visible, .gform_wrapper input[type=checkbox]:checked:active { border-color: var(--ao-red) !important; background-color: var(--ao-red) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; } .gform_wrapper .gfield_checkbox label, .gform_wrapper .gfield_consent label { cursor: pointer; color: var(--ao-ink); margin: 0; line-height: 1.45; } .gform_wrapper input[type=radio]:focus-visible, .gform_wrapper input[type=checkbox]:focus-visible { outline: none; box-shadow: var(--ao-focus); } /* ============================================================================ 9. NAME · ADDRESS (complex multi-input) ============================================================================ */ .gform_wrapper .ginput_complex .ginput_full, .gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right { box-sizing: border-box; } .gform_wrapper .ginput_container_name, .gform_wrapper .ginput_container_address { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .gform_wrapper .ginput_container_address .ginput_full, .gform_wrapper .ginput_container_address .address_line_1, .gform_wrapper .ginput_container_address .address_line_2 { grid-column: 1 / -1; } @container (max-width: 460px) { .gform_wrapper .ginput_container_name, .gform_wrapper .ginput_container_address { grid-template-columns: 1fr; } } /* ============================================================================ 10. DATE (picker) · TIME Orbital uses its own datepicker (tokenised in Layer 1). This styles the legacy jQuery-UI datepicker so both renderers look on-brand. ============================================================================ */ .gform_wrapper .ginput_container_time { display: flex; align-items: center; gap: var(--sp-2); } .gform_wrapper .ginput_container_time input { text-align: center; } .gform_wrapper .ginput_container_date input { background-position: right 14px center; } .ui-datepicker { background: #fff; border: 1px solid var(--ao-line); border-radius: var(--ao-r); box-shadow: var(--ao-shadow-pop); padding: 12px; font-family: var(--ao-font); z-index: 9999; } .ui-datepicker .ui-datepicker-header { background: transparent; border: 0; color: var(--ao-navy); font-weight: 700; padding-bottom: 8px; } .ui-datepicker .ui-datepicker-title { font-weight: 700; color: var(--ao-navy); } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { cursor: pointer; color: var(--ao-muted); } .ui-datepicker td a, .ui-datepicker td span { text-align: center; border-radius: var(--ao-r-pill); padding: 6px; border: 0; color: var(--ao-ink); } .ui-datepicker td a:hover { background: var(--ao-tint-bl); color: var(--ao-navy); } .ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight { background: var(--ao-red) !important; color: #fff !important; } /* ============================================================================ 11. FILE UPLOAD (single + drag-and-drop multi: zone, preview, progress) ============================================================================ */ .gform_wrapper .ginput_container_fileupload input[type=file] { width: 100%; padding: 12px 15px; border: 1.5px solid var(--ao-line); border-radius: var(--ao-r-sm); background: #fff; font-size: var(--ao-fs-sub); cursor: pointer; } .gform_wrapper .ginput_container_fileupload input[type=file]::file-selector-button { margin-inline-end: 14px; padding: 9px 18px; border: 0; border-radius: var(--ao-r-pill); background: var(--ao-navy); color: #fff; font-weight: 600; cursor: pointer; transition: background var(--ao-t) var(--ao-ease); } .gform_wrapper .ginput_container_fileupload input[type=file]::file-selector-button:hover { background: var(--ao-navy-700); } /* drag-and-drop dropzone */ .gform_wrapper .gform_drop_area, .gform_wrapper .gfield--type-fileupload .gform_fileupload_multifile .gform_drop_area { border: 2px dashed var(--ao-line); border-radius: var(--ao-r); background: var(--ao-soft); padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ao-muted); transition: border-color var(--ao-t) var(--ao-ease), background var(--ao-t) var(--ao-ease); } .gform_wrapper .gform_drop_area:hover { border-color: var(--ao-blue); background: var(--ao-tint-bl); } .gform_wrapper .gform_drop_instructions { color: var(--ao-faint); display: block; margin-bottom: var(--sp-2); } .gform_wrapper .gform_button_select_files { display: inline-block; padding: 10px 22px; border: 0; border-radius: var(--ao-r-pill); background: var(--ao-navy) !important; color: #fff !important; font-weight: 600; cursor: pointer; } /* upload preview rows + progress */ .gform_wrapper .ginput_preview { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 14px; margin-top: var(--sp-2); border: 1px solid var(--ao-line); border-radius: var(--ao-r-sm); background: #fff; } .gform_wrapper .gform_delete, .gform_wrapper .gform_delete_file { color: var(--ao-red); cursor: pointer; } .gform_wrapper .gfield_fileupload_filename { color: var(--ao-ink); font-size: var(--ao-fs-sub); font-weight: 600; } .gform_wrapper .gfield_fileupload_progressbar_progress { background: var(--ao-red); height: 100%; border-radius: var(--ao-r-pill); } /* ============================================================================ 12. LIST / REPEATER FIELD (add / remove rows) ============================================================================ */ .gform_wrapper .gfield_list, .gform_wrapper table.gfield_list { width: 100%; border-collapse: separate; border-spacing: 0 var(--sp-2); } .gform_wrapper .gfield_list th { text-align: left; font-size: var(--ao-fs-sub); font-weight: 700; color: var(--ao-navy); padding: 0 var(--sp-2) var(--sp-1); text-transform: uppercase; letter-spacing: .04em; } .gform_wrapper .gfield_list td.gfield_list_cell { padding-right: var(--sp-2); } .gform_wrapper .gfield_list_icons { display: flex; gap: 6px; align-items: center; } .gform_wrapper .add_list_item, .gform_wrapper .delete_list_item { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ao-r-pill); border: 1.5px solid var(--ao-line); background: #fff; cursor: pointer; color: var(--ao-navy); font-weight: 700; line-height: 1; transition: all var(--ao-t) var(--ao-ease); } .gform_wrapper .add_list_item:hover { background: var(--ao-navy); color: #fff; border-color: var(--ao-navy); } .gform_wrapper .delete_list_item:hover { background: var(--ao-red); color: #fff; border-color: var(--ao-red); } /* ============================================================================ 13. PRODUCT · QUANTITY · TOTAL (pricing fields) ============================================================================ */ .gform_wrapper .ginput_container_product_price, .gform_wrapper .ginput_product_price, .gform_wrapper .ginput_total { color: var(--ao-navy); font-weight: 700; } .gform_wrapper .ginput_quantity { width: 90px !important; text-align: center; } .gform_wrapper .gfield--type-total .ginput_container { padding: var(--sp-3) var(--sp-4); background: var(--ao-soft); border-radius: var(--ao-r-sm); border: 1px solid var(--ao-line-2); font-size: 1.1rem; } /* ============================================================================ 14. SECTION HEADERS + HTML PANELS SECTION = a cluster divider. Extra top margin ADDS to the grid row-gap above it → a clear break before each new group. HTML blocks stay neutral — [alert_allout] owns its own look. ============================================================================ */ .gform_wrapper .gsection { border: 0 !important; border-top: 1px solid var(--ao-line-2) !important; margin: var(--sp-4) 0 0 !important; padding-top: var(--sp-5) !important; } /* [FORM 27 — Contact Customer Success] the ONLY form-specific rule in §1–§21. When the GF27 PD-hide plugin hides a section's heading (it toggles .aogf-hide-title on the section), collapse the section's divider chrome too, so it doesn't leave an empty bordered/padded gap above the version fields. ⚠️ NEVER use `display:none` on .aogf-hide-title — that element is the section CONTAINER, and hiding it would also hide every field beneath it (Versions/Comments/Consent). */ .gform_wrapper .aogf-hide-title.gsection { border-top: 0 !important; margin: 0 !important; padding-top: 0 !important; } .gform_wrapper .gsection_title { font-size: var(--ao-fs-section); font-weight: 800; color: var(--ao-navy); margin: 0 0 var(--sp-1); letter-spacing: -.01em; text-transform: none; } .gform_wrapper .gfield--type-html { font-size: .95rem; } .gform_wrapper .gfield--type-html > .ginput_container, .gform_wrapper .gfield_html { margin: 0; padding: 0; } /* don't box the owner's alert markup */ /* ============================================================================ 15. MULTI-PAGE · progress bar + numbered step infographic + page nav ============================================================================ */ /* --- percentage progress bar --- */ .gform_wrapper .gf_progressbar_wrapper { margin-bottom: var(--sp-6); } .gform_wrapper .gf_progressbar_title { color: var(--ao-navy); font-weight: 700; font-size: var(--ao-fs-sub); letter-spacing: .03em; text-transform: uppercase; margin-bottom: var(--sp-2); } .gform_wrapper .gf_progressbar { background: var(--ao-soft-2); border-radius: var(--ao-r-pill); height: 12px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(var(--ao-navy-rgb), .08); } .gform_wrapper .gf_progressbar_percentage { height: 100%; border-radius: var(--ao-r-pill); color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; background: linear-gradient(90deg, var(--ao-red), var(--ao-red-dk)) !important; transition: width var(--ao-t2) var(--ao-ease); } .gform_wrapper .gf_progressbar_percentage span { color: #fff; } /* --- numbered step indicator (infographic) --- */ .gform_wrapper .gf_page_steps { display: flex; align-items: flex-start; gap: var(--sp-1); margin-bottom: var(--sp-6); border: 0; padding: 0; counter-reset: gf-step; } .gform_wrapper .gf_step { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--ao-fs-sub); color: var(--ao-muted); font-weight: 600; opacity: 1; margin: 0; padding: 0; } /* connector line between steps */ .gform_wrapper .gf_step::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px; background: var(--ao-line); z-index: 0; } .gform_wrapper .gf_step:first-child::before { display: none; } .gform_wrapper .gf_step_number { position: relative; z-index: 1; width: 40px; height: 40px; margin-bottom: var(--sp-2); display: flex; align-items: center; justify-content: center; border-radius: var(--ao-r-pill); background: #fff; border: 2px solid var(--ao-line); color: var(--ao-muted); font-weight: 700; font-size: .95rem; transition: all var(--ao-t) var(--ao-ease); } .gform_wrapper .gf_step_label { display: block; line-height: 1.3; max-width: 14ch; } /* active */ .gform_wrapper .gf_step_active { color: var(--ao-navy); } .gform_wrapper .gf_step_active .gf_step_number { background: var(--ao-red); border-color: var(--ao-red); color: #fff; box-shadow: 0 0 0 5px rgba(var(--ao-red-rgb), .14); } /* completed → navy, with a tick replacing the number */ .gform_wrapper .gf_step_completed { color: var(--ao-navy); } .gform_wrapper .gf_step_completed::before { background: var(--ao-navy); } .gform_wrapper .gf_step_completed .gf_step_number { background: var(--ao-navy); border-color: var(--ao-navy); color: #fff; } .gform_wrapper .gf_step_completed .gf_step_number { font-size: 0; } .gform_wrapper .gf_step_completed .gf_step_number::after { content: ""; width: 16px; height: 16px; font-size: 1rem; background: center / contain no-repeat url("data:image/svg+xml;utf8,"); } @container (max-width: 520px) { .gform_wrapper .gf_step_label { display: none; } } /* --- page footer (Previous / Next live here) --- */ .gform_wrapper .gform_page_footer { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--ao-line-2); } .gform_wrapper .gform_page_footer .gform_next_button { margin-inline-start: auto; } /* ============================================================================ 16. VALIDATION · summary box + inline messages + field states ============================================================================ */ .gform_wrapper .gform_validation_errors { border: 1px solid rgba(var(--ao-red-rgb), .30) !important; border-radius: var(--ao-r-sm) !important; box-shadow: none !important; background: rgba(var(--ao-red-rgb), .05) !important; padding: var(--sp-4) var(--sp-4) var(--sp-4) 54px !important; position: relative; margin-bottom: var(--sp-5) !important; } .gform_wrapper .gform_validation_errors::before { content: ""; position: absolute; left: var(--sp-4); top: var(--sp-4); width: 24px; height: 24px; border-radius: var(--ao-r-pill); background: var(--ao-red); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } /* GF prints its own icon inside the H2. Hide it — it clashes with our ::before badge above and renders as a red blob whenever GF's icon font isn't loaded (this stylesheet is intentionally isolated from GF's icon font). */ .gform_wrapper .gform_validation_errors .gform-icon { display: none !important; } .gform_wrapper .gform_validation_errors .gform_submission_error, .gform_wrapper .gform_validation_errors h2 { color: var(--ao-red-700) !important; font-weight: 800; font-size: 1rem; margin: 0 0 var(--sp-2); display: flex; align-items: center; min-height: 24px; } .gform_wrapper .gform_validation_errors .gform_validation_error_link a { color: var(--ao-red-700); } /* inline field errors */ .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error textarea, .gform_wrapper .gfield_error select { border-color: var(--ao-red) !important; box-shadow: var(--ao-focus-err) !important; } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: var(--ao-red-700); font-size: var(--ao-fs-sub); font-weight: 600; border: 0; background: rgba(var(--ao-red-rgb), .07); border-radius: var(--ao-r-xs); padding: 6px 11px; margin-top: var(--sp-2); display: inline-block; } .gform_wrapper .gfield_error .gfield_label { color: var(--ao-red-700); } /* ============================================================================ 17. BUTTONS · submit / next / previous / save-and-continue / spinner ============================================================================ */ .gform_wrapper .gform_footer { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* primary (Submit, Next) — matched by CLASS, not by .gform_footer ancestry, so it works whether or not the button sits in .gform_footer and whether GF renders or