/* * Contact page — the contact-details strip and the Gravity Forms skin. * * Loaded ONLY on page-template/contact.php, via lawncareknox_contact_styles() at * wp_enqueue_scripts priority 999. No other page downloads this file, and none can be * affected by it. * * Three deliberate constraints: * * 1. Every colour, space, radius, transition and button metric resolves through a * global token. The only literal lengths are hairline borders/outlines (1px, 2px) * and relative em/% values, which are ratios rather than fixed sizes. * * 2. Type sizes are `inherit` / `em` rather than px. The form therefore rides the * responsive type ladder that global.css and inner-page.css already define, so it * steps at every breakpoint without this file restating a single size. * * 3. Nothing here targets .inner-banner, .page-right, .pra or .widget. The banner and * the sidebar render exactly as they do on every other inner page, untouched. * * Why plain selectors are enough: Gravity Forms prints its four stylesheets in , * and the priority-999 enqueue makes this file print after them. Later sheet wins at * equal specificity — so there is no !important here, no specificity inflation, and * nothing dequeued from Gravity Forms. Selectors are prefixed `.page-detail .page-left` * only where they compete with inner-page.css, whose `.page-detail .page-left a` (0,2,1) * would otherwise win. */ /* ------------------------------------------------------------------ details strip */ .page-detail .page-left .contact-details { display: flex; flex-wrap: wrap; gap: var(--sp-24) var(--sp-40); margin: var(--sp-40) 0; padding: var(--sp-32); background-color: var(--color-bg-light); border-left: var(--sp-4) solid var(--color-primary); border-radius: var(--radius); } .page-detail .page-left .contact-details__item { display: flex; align-items: center; gap: var(--sp-16); flex: 1 1 auto; } .page-detail .page-left .contact-details__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--sp-40); height: var(--sp-40); border-radius: 50%; background-color: var(--color-secondary); color: var(--color-white); } /* Font Awesome is already loaded site-wide in header.php, so the glyph needs no size of its own — it inherits the strip's body copy and stays in step with the type ladder. */ .page-detail .page-left .contact-details__icon i { line-height: 1; } .page-detail .page-left .contact-details__value { margin: 0; font-family: var(--font-primary); font-weight: 500; color: var(--color-text); text-decoration: none; } /* Only the click-to-call and mailto values are links, so only they take link colour. */ .page-detail .page-left a.contact-details__value { color: var(--color-secondary); font-weight: 700; transition: var(--transition); } .page-detail .page-left a.contact-details__value:hover, .page-detail .page-left a.contact-details__value:focus-visible { color: var(--color-primary); text-decoration: underline; } /* ------------------------------------------------------------------ form: rhythm */ .page-detail .page-left .contact-form { margin-top: var(--sp-40); } /* * Gravity Forms' own 12-column grid stays in charge of the layout — Phone and Email are * set to span 6 in the form itself, not forced into columns from here. This only retunes * the gaps onto the project spacing scale. */ .contact-form .gform_wrapper .gform_fields { row-gap: var(--sp-32); column-gap: var(--sp-24); } /* ------------------------------------------------------------------ form: labels */ .contact-form .gform_wrapper .gfield_label { font-family: var(--font-primary); font-size: inherit; font-weight: 700; color: var(--color-text); margin-bottom: var(--sp-8); } /* First / Last / City / State / ZIP sit under their inputs and are secondary. */ .contact-form .gform_wrapper .gform-field-label--type-sub { font-size: 0.875em; font-weight: 400; color: var(--color-text-muted); } .contact-form .gform_wrapper .gfield_required { color: #de6262; } .contact-form .gform_wrapper .gform_fields select { display: flex; align-items: center; } /* ------------------------------------------------------------------ form: controls */ /* * Control heights step down with the viewport, on the theme's own breakpoints * (1200 / 999 / 767 / 479 — the same stops global.css and inner-page.css use). * * The scale lives in three custom properties declared once here and stepped in the * media queries at the foot of this file, so each control rule below names a variable * rather than a number and no size is written twice. It is page-local rather than in * global.css for two reasons: only this template has form controls, so a global token * would be dead weight on every other page; and global.css is shared with the * signed-off homepage, which this work must not touch. * * --btn-min-height (62px) is the base height and does not itself step anywhere in * global.css, which is why the ladder is new information here rather than a duplicate * of an existing scale. */ .contact-form { --contact-field-height: var(--btn-min-height); --contact-field-pad-x: var(--sp-16); --contact-textarea-height: var(--sp-240); } .contact-form .gform_wrapper .gform_fields input[type="text"], .contact-form .gform_wrapper .gform_fields input[type="email"], .contact-form .gform_wrapper .gform_fields input[type="tel"], .contact-form .gform_wrapper .gform_fields input[type="number"], .contact-form .gform_wrapper .gform_fields select, .contact-form .gform_wrapper .gform_fields textarea { box-sizing: border-box; width: 100%; min-height: var(--contact-field-height); padding: var(--btn-pad-block) var(--contact-field-pad-x); font: inherit; color: var(--color-text); background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: var(--radius); transition: var(--transition); } .contact-form .gform_wrapper .gform_fields textarea { min-height: var(--contact-textarea-height); padding: var(--contact-field-pad-x); resize: vertical; line-height:1.4; } .contact-form .gform_wrapper .gform_fields input:hover, .contact-form .gform_wrapper .gform_fields select:hover, .contact-form .gform_wrapper .gform_fields textarea:hover { border-color: var(--color-border); } .contact-form .gform_wrapper .gform_fields input:focus, .contact-form .gform_wrapper .gform_fields select:focus, .contact-form .gform_wrapper .gform_fields textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-secondary); outline-offset: 2px; } /* ------------------------------------------------------------------ form: submit */ /* * Matched to .btn-primary in global.css: same green, same square corners, same 62px * height, same 700-weight 20px label, same hover swap to --color-secondary. * * Done by remapping Gravity Forms' OWN control variables onto the project's --btn-* * scale rather than by out-declaring GF's rules. That distinction matters: GF's theme * framework guards its selectors with :where(:not(…):not(…)…) chains that out-specify * anything reasonable a theme can write, and an earlier attempt to set background and * size directly here lost silently — the button kept rendering GF's blue. Because GF's * own rules read these variables, this needs no !important, no specificity inflation, * and nothing dequeued from the plugin. * * Measured, not assumed: the button sits on GF's "md" tier — * --gf-ctrl-btn-font-size-md is 14px and --gf-ctrl-btn-padding-x-md is 16px in * gravity-forms-theme-framework.css, which is exactly what rendered before this block. */ /* * The long selector is load-bearing. Gravity Forms declares --gf-color-primary on * `.gform-theme--framework`, and re-declares several control variables on its own * theme classes; a shorter `.contact-form .gform_wrapper` (0,2,0) block won some of * these variables and silently lost --gf-color-primary and --gf-ctrl-btn-font-weight, * so the button kept rendering blue at 500 weight. Matching GF's own classes plus its * data attribute out-specifies every declaration site. * * Proven, not assumed: setting these variables on the wrapper repaints the button, * while a plain `background-color` rule on the button does nothing even with * !important — GF's framework wins the property, but it reads these variables. * That is why this file contains no !important at all. * * Maintenance note: this couples to GF's theme class names. If a future Gravity Forms * release renames .gform-theme--orbital, the button reverts to GF blue rather than * breaking the layout — a visible, safe failure. */ .contact-form .gform_wrapper.gform-theme--framework.gform-theme--orbital[data-form-theme] { /* * These four are the ONLY !important declarations in this file, and they are not a * shortcut. Gravity Forms prints a per-form inline