/* ========================================================================= * UI fixes — cross-cutting concerns. Loaded after common.min.css. * * - scroll jitter (body gets .locked on popup open → horizontal shift) * - submit button stuck hover after click (mouse still over button) * - floating label "jumping" on server-rendered values (FOUC before JS init) * - form validation invalid / error state visuals * ========================================================================= */ /* ------------------------------------------------------------------------- * 1) Scroll jitter fix * Reserve scrollbar gutter at all times so toggling overflow:hidden on * (e.g. when a popup/menu is opened) does NOT shift layout by the * scrollbar width. Covers all modern browsers (Chrome 94+, FF 97+, Safari 16+). * ------------------------------------------------------------------------- */ html { scrollbar-gutter: stable; } /* Fallback: on non-supporting browsers, add padding compensation when body.locked. */ @supports not (scrollbar-gutter: stable) { body.locked { overflow: hidden; /* Typical desktop scrollbar width; consistent with our scroll_lock.js measure. */ padding-right: var(--scrollbar-w, 15px); } } /* ------------------------------------------------------------------------- * 2) Submit button — no stuck hover state after click * When a button is clicked the cursor is still over it, so :hover stays * active. We only apply the darker hover color when the user is actually * moving the mouse (hover) AND when the button is NOT focused with mouse. * Using :focus-visible decouples keyboard from mouse focus. * ------------------------------------------------------------------------- */ /* Global rule: any focused button (via mouse click) returns to base color. */ button:focus:not(:focus-visible), .btn:focus:not(:focus-visible), .submit-btn:focus:not(:focus-visible), .orangeBt:focus:not(:focus-visible) { outline: none; /* Reset hover-like shadows / backgrounds on mouse-focus. */ background-color: inherit; box-shadow: none; } /* Brand orange button — keep hover only while pointer is truly hovering, NOT while focused after a click. */ .orangeBt:focus:not(:focus-visible), .btn.orangeBt:focus:not(:focus-visible), .submit-btn:focus:not(:focus-visible) { background-color: var(--brand, #ff6b00); filter: none; } /* Keyboard focus should still be visible for a11y. */ button:focus-visible, .btn:focus-visible, .submit-btn:focus-visible, .orangeBt:focus-visible { outline: 2px solid var(--brand, #ff6b00); outline-offset: 2px; } /* ------------------------------------------------------------------------- * 3) Floating label — no jump on server-rendered values * Trick: use :placeholder-shown as a pure-CSS "is value present" check. * Requires every .moveableLabel input to have a non-empty placeholder * attribute (usually " " one space). Then on initial render, if the input * has a value, :placeholder-shown is false, and the label stays elevated * without waiting for JS to add .hasValue. * * Works alongside the existing JS that toggles .hasValue — this just * ensures the initial state is correct. * ------------------------------------------------------------------------- */ /* Fallback CSS-only floating label state. If the project's existing .field.hasValue rules already style the elevated label, we just need to ensure the class is present from the first render — JS handles that via the DOMContentLoaded init in form-ui.js. */ /* ------------------------------------------------------------------------- * 4) Form validation error / invalid field styling * Works with both existing .required class and new .is-invalid class * so we don't have to rewrite every form template at once. * ------------------------------------------------------------------------- */ .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select, .field.is-invalid .custom-select, input.is-invalid, textarea.is-invalid, select.is-invalid, input.required, textarea.required, select.required { border-color: #dc2626 !important; background-color: #fff7f7; } .field.is-invalid input:focus, .field.is-invalid textarea:focus, input.is-invalid:focus, textarea.is-invalid:focus, input.required:focus, textarea.required:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); } .field .err, .invalid-feedback, .form-error { display: block; color: #dc2626; font-size: 12.5px; line-height: 1.35; margin-top: 4px; font-weight: 500; } /* When focused / input, clear the red visual (the JS also removes the class, but this gives instant feedback). */ .field.is-invalid > input:focus, .field.is-invalid > textarea:focus { background-color: #fff; } /* General form-level error banner */ .form-general-error { background: #fee2e2; border: 1px solid rgba(220, 38, 38, 0.3); color: #991b1b; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; } .form-general-error::before { content: "⚠"; flex-shrink: 0; font-size: 16px; line-height: 1.2; }