/* ============================================================================= SUREFORMS + ACSS — MASTER FORM STYLESHEET Scope: .srfm--light | .srfm--dark Add either class directly to the SureForms form container, or to a wrapper around the SureForms form. Uses ACSS-native variables: --primary --primary-dark --primary-light --primary-ultra-light --base --base-light --base-dark --base-ultra-light --base-ultra-dark --white --danger --danger-light --text-m --text-s --space-m --radius No per-form IDs required — works on every form sitewide. ============================================================================= */ /* ============================================================================= SHARED FORM BASE ============================================================================= */ .srfm--light, .srfm--dark { /* --- Typography --- */ --srfm-font-size: var(--text-m); --srfm-label-font-weight: 700; --srfm-label-font-size: var(--text-s); --srfm-input-field-font-size: var(--text-m); --srfm-description-font-size: var(--text-s); --srfm-btn-font-size: var(--text-m); --srfm-btn-font-weight: 800; /* --- Spacing & sizing --- */ --srfm-input-field-border-radius: var(--radius); --srfm-btn-border-radius: var(--radius); --srfm-row-gap-between-blocks: var(--space-m); /* --- Paid: per-side borders --- */ --srfm-field-border-width-top: 1px; --srfm-field-border-width-right: 1px; --srfm-field-border-width-bottom: 1px; --srfm-field-border-width-left: 1px; /* --- Paid: advanced button --- */ --srfm-button-background-color-normal: var(--primary); --srfm-button-text-color-normal: var(--white); --srfm-button-text-color-hover: var(--white); --srfm-button-border-style: none; --srfm-button-border-radius-top: var(--radius); --srfm-button-border-radius-right: var(--radius); --srfm-button-border-radius-bottom: var(--radius); --srfm-button-border-radius-left: var(--radius); /* --- Local interaction helpers --- */ --srfm-acss-transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; } /* ============================================================================= LIGHT VARIANT ============================================================================= */ .srfm--light { /* --- Local shadow / ring helpers --- */ --srfm-acss-field-shadow-normal: 0 1px 4px rgb(0 0 0 / 0.06); --srfm-acss-field-shadow-selected: 0 1px 4px rgb(0 0 0 / 0.06), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 14%, transparent); --srfm-acss-field-shadow-hover: 0 1px 4px rgb(0 0 0 / 0.06), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 18%, transparent); --srfm-acss-field-shadow-focus: 0 1px 4px rgb(0 0 0 / 0.06), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 28%, transparent); /* --- Local multi-choice helpers --- */ --srfm-acss-choice-bg: var(--white); --srfm-acss-choice-bg-selected: var(--primary-ultra-light); --srfm-acss-choice-border: var(--base-light); /* --- Brand & button colors --- */ --srfm-color-scheme-primary: var(--primary); --srfm-color-scheme-text: var(--base-dark); --srfm-color-scheme-text-on-primary: var(--white); --srfm-btn-color-hover: var(--primary-dark); --srfm-btn-color-disabled: var(--base-light); /* --- Form background --- */ --srfm-bg-color: var(--white); /* --- Input colors --- */ --srfm-color-input-background: var(--white); --srfm-color-input-background-hover: var(--base-ultra-light); --srfm-color-input-border: var(--base-light); --srfm-color-input-border-hover: var(--primary); --srfm-color-input-border-focus-glow: color-mix(in oklch, var(--primary) 45%, transparent); --srfm-color-input-label: var(--base-dark); --srfm-color-input-description: var(--base); --srfm-color-input-placeholder: var(--base); --srfm-color-input-text: var(--base-dark); --srfm-color-input-selected: var(--primary-ultra-light); /* --- Error colors --- */ --srfm-error-color: var(--danger); --srfm-error-color-border: var(--danger); --srfm-error-color-border-glow: color-mix(in oklch, var(--danger) 45%, transparent); /* --- Paid: shadows --- */ --srfm-field-box-shadow-normal: var(--srfm-acss-field-shadow-normal); --srfm-field-box-shadow-focus: var(--srfm-acss-field-shadow-focus); /* --- Paid: advanced button --- */ --srfm-button-background-color-hover: var(--primary-dark); } /* ============================================================================= DARK VARIANT ============================================================================= */ .srfm--dark { /* --- Local shadow / ring helpers --- */ --srfm-acss-field-shadow-normal: 0 1px 4px rgb(0 0 0 / 0.3); --srfm-acss-field-shadow-selected: 0 1px 4px rgb(0 0 0 / 0.3), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 18%, transparent); --srfm-acss-field-shadow-hover: 0 1px 4px rgb(0 0 0 / 0.3), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 22%, transparent); --srfm-acss-field-shadow-focus: 0 1px 4px rgb(0 0 0 / 0.3), 0 0 0 1px var(--primary), 0 0 0 4px color-mix(in oklch, var(--primary) 32%, transparent); /* --- Local multi-choice helpers --- */ --srfm-acss-choice-bg: var(--base-dark); --srfm-acss-choice-bg-selected: var(--primary-dark); --srfm-acss-choice-border: var(--base); /* --- Brand & button colors --- */ --srfm-color-scheme-primary: var(--primary); --srfm-color-scheme-text: var(--base-ultra-light); --srfm-color-scheme-text-on-primary: var(--white); --srfm-btn-color-hover: var(--primary-light); --srfm-btn-color-disabled: var(--base); /* --- Form background --- */ --srfm-bg-color: var(--base-ultra-dark); /* --- Input colors --- */ --srfm-color-input-background: var(--base-dark); --srfm-color-input-background-hover: var(--base); --srfm-color-input-border: var(--base); --srfm-color-input-border-hover: var(--primary); --srfm-color-input-border-focus-glow: color-mix(in oklch, var(--primary) 45%, transparent); --srfm-color-input-label: var(--base-ultra-light); --srfm-color-input-description: var(--base-light); --srfm-color-input-placeholder: var(--base-light); --srfm-color-input-text: var(--base-ultra-light); --srfm-color-input-selected: var(--primary-dark); /* --- Error colors --- */ --srfm-error-color: var(--danger-light); --srfm-error-color-border: var(--danger-light); --srfm-error-color-border-glow: color-mix(in oklch, var(--danger) 45%, transparent); /* --- Paid: shadows --- */ --srfm-field-box-shadow-normal: var(--srfm-acss-field-shadow-normal); --srfm-field-box-shadow-focus: var(--srfm-acss-field-shadow-focus); /* --- Paid: advanced button --- */ --srfm-button-background-color-hover: var(--primary-light); } /* ============================================================================= SHARED STRUCTURAL OVERRIDES ============================================================================= */ /* Full-width submit button */ .srfm--light .srfm-submit-button, .srfm--dark .srfm-submit-button { display: flex; width: 100%; } .srfm--light .srfm-submit-button button, .srfm--dark .srfm-submit-button button { width: 100% !important; justify-content: center !important; } /* Bold labels */ .srfm--light .srfm-block-label, .srfm--light .srfm-block-legend, .srfm--dark .srfm-block-label, .srfm--dark .srfm-block-legend { font-weight: 700 !important; } /* ============================================================================= STANDARD FIELDS — SHADOWS, HOVER, FOCUS ============================================================================= */ /* Normal field shadow */ .srfm--light .srfm-input-common, .srfm--dark .srfm-input-common { box-shadow: var(--srfm-acss-field-shadow-normal) !important; transition: var(--srfm-acss-transition); } /* Prominent hover border/ring */ .srfm--light .srfm-input-common:hover, .srfm--dark .srfm-input-common:hover { border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-hover) !important; } /* Prominent focus border/ring */ .srfm--light .srfm-input-common:focus, .srfm--light .srfm-input-common:focus-visible, .srfm--dark .srfm-input-common:focus, .srfm--dark .srfm-input-common:focus-visible { border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-focus) !important; outline: none !important; } /* ============================================================================= MULTI CHOICE SINGLE — SHARED STRUCTURE SureForms markup: .srfm-multi-choice-single = outer padded wrapper .srfm-block-content-wrap = visible choice card Do not put hover background on .srfm-multi-choice-single, otherwise the padded wrapper turns white/dark on hover. ============================================================================= */ /* Keep the multi-choice group wrapper transparent */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap, .srfm--light .srfm-multi-choice-block .srfm-block-wrap:hover, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap:hover { background: transparent !important; background-color: transparent !important; } /* Full-width option when SureForms uses 100% choice width */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap.srfm-choice-width-100 > .srfm-multi-choice-single, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap.srfm-choice-width-100 > .srfm-multi-choice-single { width: 100%; } /* Keep the outer padded option wrapper transparent */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single, .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover, .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within { background: transparent !important; background-color: transparent !important; } /* Base visible choice card */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single > .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single > .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg) !important; background-color: var(--srfm-acss-choice-bg) !important; border: 1px solid var(--srfm-acss-choice-border) !important; border-radius: var(--radius) !important; box-shadow: var(--srfm-acss-field-shadow-normal) !important; transition: var(--srfm-acss-transition); } /* Hover visible choice card */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover > .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover > .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg) !important; background-color: var(--srfm-acss-choice-bg) !important; border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-hover) !important; } /* Keyboard focus visible choice card */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within > .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within > .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg) !important; background-color: var(--srfm-acss-choice-bg) !important; border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-focus) !important; } /* Selected visible choice card */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg-selected) !important; background-color: var(--srfm-acss-choice-bg-selected) !important; border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-selected) !important; } /* Selected visible choice card — hover */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:hover > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg-selected) !important; background-color: var(--srfm-acss-choice-bg-selected) !important; border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-hover) !important; } /* Selected visible choice card — keyboard focus */ .srfm--light .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap, .srfm--dark .srfm-multi-choice-block .srfm-block-wrap > .srfm-multi-choice-single:focus-within > .srfm-input-multi-choice-single:checked + .srfm-block-content-wrap { background: var(--srfm-acss-choice-bg-selected) !important; background-color: var(--srfm-acss-choice-bg-selected) !important; border-color: var(--primary) !important; box-shadow: var(--srfm-acss-field-shadow-focus) !important; }