/* * Langston form design, re-asserted over Gravity Forms' own stylesheet. * * Background: Gravity Forms' CSS output was disabled on this site for years * (rg_gforms_disable_css) and the theme styled forms bespoke instead. That * stopped working when Gravity Forms 3.0 replaced the jQuery UI datepicker * with its own widget, whose styling lives in the framework layer behind ~267 * CSS custom properties -- impractical to reproduce by hand. GF's CSS is now * enabled again (Forms -> Settings -> Output Default CSS), which fixes the * calendar but also applies GF's orbital look to every field. * * Nothing here is new design. Every value below is lifted from the theme's own * rules in assets/css/custom.css and foundation.css, which still exist but now * lose on load order: * * button, .button background-color: #f2682b; color: #fff; * font-family: "Gotham-Black", sans-serif * .gfield input border: 1px solid #f2682b; background: transparent * .gform_footer button padding: .875rem 2.9375rem; font-size: 1.125rem; * text-transform: uppercase * * LOAD ORDER MATTERS. Gravity Forms enqueues its four stylesheets after the * theme's custom.css and style.css, so overrides placed there lose at equal * specificity. This file is enqueued with an explicit dependency on * gravity_forms_theme_framework (see functions.php) so it always lands after. */ /* --- Field spacing ------------------------------------------------------ */ /* Gravity Forms' foundation lays .gform_fields out as a 12-column grid and sets --gf-form-gap-y: 40px, which is far looser than this site's forms have ever been and reads as excessive padding between rows. Overriding the token rather than the rule keeps GF's grid intact -- including its column support, which is what would let fields sit side by side if the form layout is ever revisited. Tune this single value to taste. */ .gform_wrapper.gform-theme--framework { --gf-form-gap-y: 12px; } /* --- Text inputs, selects and textareas --------------------------------- */ /* Live renders these full width with a thin orange outline on a transparent fill. GF's framework replaces that with a gray hairline and its own radius. */ .gform_wrapper.gform-theme--framework .gfield input[type="text"], .gform_wrapper.gform-theme--framework .gfield input[type="email"], .gform_wrapper.gform-theme--framework .gfield input[type="tel"], .gform_wrapper.gform-theme--framework .gfield input[type="number"], .gform_wrapper.gform-theme--framework .gfield input[type="url"], .gform_wrapper.gform-theme--framework .gfield input[type="password"], .gform_wrapper.gform-theme--framework .gfield textarea, .gform_wrapper.gform-theme--framework .gfield select { width: 100%; border: 1px solid #f2682b; border-radius: 0; background: transparent; } /* Date fields filled their container before GF 3.x, which sets width:auto on the datepicker input and visibly shrinks it. */ .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date input { width: 100%; } /* --- Radio and checkbox choices ----------------------------------------- */ /* Live lays choices out inline on a single row; GF's framework stacks them vertically, which turns five options into five lines. */ .gform_wrapper.gform-theme--framework .gfield_radio, .gform_wrapper.gform-theme--framework .gfield_checkbox { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; } .gform_wrapper.gform-theme--framework .gfield_radio .gchoice, .gform_wrapper.gform-theme--framework .gfield_checkbox .gchoice { display: flex; flex: 0 0 auto; align-items: center; gap: 0.375rem; } /* --- Submit button ------------------------------------------------------ */ /* Gravity Forms never paints the button directly. It declares `background-color: var(--gf-local-bg-color)` and friends, then sets those tokens in a separate rule at (0,4,1). An override that restates background-color at the same specificity loses the tie; interestingly, width/padding/border DID apply, because GF expresses those as logical properties (inline-size, padding-block, border-block-start) which never collide with the physical ones. So this sets GF's own tokens instead -- their documented extension point -- at (0,5,1) by adding the button's own .button class, which beats GF's (0,4,1). Values are the theme's, from custom.css and foundation.css. */ .gform-theme.gform-theme--framework.gform_wrapper .gform_footer button.button, .gform-theme.gform-theme--framework.gform_wrapper .gform-footer button.button { --gf-local-bg-color: #f2682b; --gf-local-color: #fff; --gf-local-font-family: "Gotham-Black", sans-serif; --gf-local-font-size: 1.125rem; --gf-local-text-transform: uppercase; --gf-local-padding-x: 2.9375rem; --gf-local-padding-y: 0.875rem; --gf-local-radius: 0; --gf-local-border-color: transparent; --gf-local-border-width: 1px; --gf-local-width: auto; --gf-local-min-width: auto; --gf-local-letter-spacing: normal; } .gform-theme.gform-theme--framework.gform_wrapper .gform_footer button.button:hover, .gform-theme.gform-theme--framework.gform_wrapper .gform_footer button.button:focus, .gform-theme.gform-theme--framework.gform_wrapper .gform-footer button.button:hover, .gform-theme.gform-theme--framework.gform_wrapper .gform-footer button.button:focus { --gf-local-bg-color: #152b51; --gf-local-color: #fff; } /* --- Select2 selects ---------------------------------------------------- */ /* These selects are Select2 widgets, injected by JavaScript -- which is why they are invisible to a server-side fetch of the page. The theme hides Select2's default triangle and draws a Font Awesome chevron on ::after instead. Gravity Forms' reset applies `all: unset` to descendants of .gform-theme--framework, which strips the positioning those rules depend on, so the chevron has nothing to sit on and disappears. Values below mirror the theme's own rules in custom.css; the reset is written with :where() and so carries zero specificity, but Select2's base stylesheet still needs its positioning restated because `all: unset` discarded it. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single { position: relative; height: var(--input-height); } .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single .select2-selection__arrow { position: absolute; top: 50%; right: 0.625rem; width: auto; height: auto; font-size: 0.75rem; line-height: 1; transform: translateY(-50%); } /* The theme's chevron, not Select2's triangle. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single .select2-selection__arrow::after { content: '\f078'; color: #152b51; font-family: "Font Awesome 6 Free"; font-weight: 900; } /* Flip to chevron-up while the dropdown is open. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container--open .select2-selection__arrow::after { content: '\f077'; } /* Keep Select2's own triangle hidden, as the theme does. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single .select2-selection__arrow b { display: none; } .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; color: #152b51; line-height: 1.5; } /* --- Select2 dropdown inside the GF grid -------------------------------- */ /* The theme attaches each Select2 dropdown to its own .gfield (dropdownParent in global.js initSelect2), rather than to

ÐÔÊӽ紫ý

. That was harmless until Gravity Forms' CSS was enabled, because GF's foundation lays .gform_fields out as a CSS grid: every .gfield becomes a grid item, so an open dropdown is painted beneath the following field and sizes itself against the grid item instead of the control. Raising the open container lets it paint above later fields, and the width override beats the inline px width Select2 computes from the grid item. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield .select2-container--open { /* No position override here. Select2 already positions this container absolutely with an inline top; forcing position:relative made that offset apply from the normal flow position instead, pushing the dropdown ~28px below the control. z-index alone gives the stacking. */ z-index: 50; } .gform-theme.gform-theme--framework.gform_wrapper .gfield .select2-container--open .select2-dropdown { z-index: 51; inline-size: 100% !important; min-inline-size: 100%; } /* Keep the dropdown aligned to the control rather than the grid cell. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield .select2-container .select2-dropdown { inset-inline-start: 0; } /* --- Select focus state ------------------------------------------------- */ /* Pre-existing bug, visible on live too: custom.css declares the same selector twice -- body .select2-container--default.select2-container--focus .select2-selection first with `border: 1px solid #8a8a8a`, then again with `border: none`. The later one wins, so focusing a select removes its orange border, and `outline: none` strips the browser's fallback as well. The focused control therefore has LESS visible state than the unfocused one, which fails WCAG 2.4.7 Focus Visible on a public university form. Keeps the orange border on focus and adds a navy ring, so focus is clearly indicated and the open dropdown stays visually anchored to its control. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container--default.select2-container--focus .select2-selection, .gform-theme.gform-theme--framework.gform_wrapper .select2-container--default.select2-container--open .select2-selection { border: 1px solid #f2682b; background-color: transparent; outline: 2px solid #152b51; outline-offset: 1px; } /* No border on the dropdown: it rendered as a stray vertical rule on the left edge only. With the gap closed, the list reads as attached to the control without one, which is how live behaves. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container--default .select2-dropdown { border: 0; border-radius: 0; margin-block-start: 0; } /* --- Focus ring color -------------------------------------------------- */ /* Gravity Forms' default focus ring is its own brand cornflower: --gf-ctrl-outline-color-focus resolves to rgba(--gf-color-primary-rgb) = #2d7ffb. Retuned to the Langston navy so text inputs match the ring on the selects, and so focus styling reads as part of the LU palette rather than Gravity Forms'. Set as a token, which is GF's extension point. */ .gform-theme.gform-theme--framework.gform_wrapper { --gf-ctrl-outline-color-focus: #152b51; --gf-ctrl-outline-width: 2px; /* GF puts 12px between a radio/checkbox control and its text label (--gf-label-space-x-secondary becomes margin-inline on the inline label). That stacked on top of the flex gap set on .gchoice below, leaving the text ~18px from the circle. Zeroed here so a single mechanism -- the .gchoice gap -- controls that spacing. */ --gf-label-space-x-secondary: 0; /* Typography. GF defaults labels to 500 weight, which rendered them bold against live where they are normal weight. Control text is bound to the LABEL size token rather than a literal, so input values, placeholders and the Select2 value all match the field labels and cannot drift apart if either is retuned later. (An earlier pass set this to 1.125rem to match live; Matt judged that too large once the selects stopped shouting.) */ /* 1.125rem = 18px, matching live, where .gfield sets font-size: 1.125rem and labels and controls both inherit it. Deliberately NOT smaller: iOS Safari zooms the viewport when an input with font-size under 16px receives focus, which would make the page jump on every field tap. Most people complete this form on a phone. Both tokens are set together so labels and controls stay equal. */ --gf-font-size-secondary: 1.125rem; --gf-ctrl-font-size: var(--gf-font-size-secondary); --gf-font-weight-secondary: 400; --gf-ctrl-label-font-size-req: 0.875rem; /* Primary buttons. GF resolves these from --gf-color-primary (#204ce5), so the file uploader's "Select files" button rendered in Gravity Forms blue on a Langston page, exactly as the submit button did. Setting the BUTTON-specific tokens rather than --gf-color-primary itself covers every primary button -- submit, Select files, and anything GF adds later -- without disturbing focus rings, which also derive from the primary color and are deliberately navy. */ --gf-ctrl-btn-bg-color-primary: #f2682b; --gf-ctrl-btn-color-primary: #fff; --gf-ctrl-btn-border-color-primary: transparent; /* The file uploader's "Select files" button is NOT a primary button: its classes are gform-theme-button gform-theme-button--control, so it draws from the ctrl variant tokens, which resolve to GF blue independently of the primary ones above. Live renders it orange via the theme's generic .button rule, so this restores parity. */ --gf-ctrl-btn-bg-color-ctrl: #f2682b; --gf-ctrl-btn-color-ctrl: #fff; --gf-ctrl-btn-border-color-ctrl: transparent; } /* --- Radio group spacing ------------------------------------------------ */ /* Source: templates/_request.scss:91 (the compiled source map points at _events.scss, which is wrong -- the rule is in _request.scss). .gfield { margin-bottom: 12px } .gfield.gfield--type-radio { margin: 25px 0 25px 15px } Those margins used to supply all the spacing. Now that GF lays .gform_fields out as a grid with a 12px row gap -- and margins do not collapse in grid -- radio rows get 12 + 25 + 25 while ordinary fields get 12 + 12, so the groups float. Letting the grid gap do the work and keeping only the left indent. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield.gfield--type-radio { margin: 0.1rem 0 0.1rem 0.8rem; } /* --- Radio label to options --------------------------------------------- */ /* The theme gives field labels margin-bottom: .3125rem but zeroes it for radio groups (templates/_request.scss), so the options sit flush against the label text. Restores a small gap. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield.gfield--type-radio .gfield_label, .gform-theme.gform-theme--framework.gform_wrapper .gfield.gfield--type-checkbox .gfield_label { margin-bottom: 0.25rem; } /* --- Select text matches the other controls ----------------------------- */ /* The theme sets the Select2 value to 1.125rem/500 while every other control is lighter and smaller, so the selects shout. That is true on live too, and reads as untidy. Binding both the closed value and the dropdown options to GF's control tokens means they track the inputs rather than drifting. */ .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-selection--single .select2-selection__rendered, .gform-theme.gform-theme--framework.gform_wrapper .select2-container .select2-results__option, body.page-template-template-request-information .select2-container .select2-selection--single .select2-selection__rendered, body.page-template-template-request-information .select2-container--default .select2-results__option { font-size: var(--gf-ctrl-font-size, 1.125rem); font-weight: var(--gf-ctrl-font-weight, 400); } /* --- Visible field labels ----------------------------------------------- */ /* Only a few fields show a label (8 of them are set to hidden_label), and those carried GF's label spacing on top of the theme's own .3125rem, leaving a gap above and below. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield .gfield_label { margin-block: 0 0.3125rem; } /* --- "margin-25" section-break fields ----------------------------------- */ /* templates/_request.scss gives selected fields a .margin-25 class: .gfield { margin-bottom: 12px } .gfield.margin-25 { margin-bottom: 25px } intended as a deliberate break between sections. With GF's 12px grid row gap now added on top, those fields take 37px against an ordinary field's 24, which reads as a hole in the form. Value is Matt's, chosen in place. */ .gform-theme.gform-theme--framework.gform_wrapper .gfield.margin-25 { margin-bottom: 0.3rem; }