/** * Contact Form 7 – theme-level styling. * * Applies the MAIS visual identity to CF7 forms. * Uses a form-specific token map (--mais-form-*) that references global design * tokens. Adjust form spacing, typography, and colors here without affecting * other components. * * Depends on design tokens (--mais-font-*, --mais-color-*, --mais-spacing-*, * --mais-radius-*, --mais-font-size-*, --mais-line-height-*) rendered in . */ /* ---------------------------------------------------------------- Form Token Map (scoped to .wpcf7) Single point of adjustment for form-specific overrides. ---------------------------------------------------------------- */ .wpcf7 { /* Spacing */ --mais-form-spacing-gap-x: var(--mais-spacing-md); --mais-form-spacing-gap-y: 0; --mais-form-spacing-pad-x: var(--mais-spacing-sm); --mais-form-spacing-pad-y: var(--mais-spacing-sm); --mais-form-spacing-label: var(--mais-spacing-2xs); --mais-form-spacing-field-height: var(--mais-spacing-2xl); --mais-form-spacing-textarea-min: var(--mais-spacing-4xl); --mais-form-spacing-radio-block: var(--mais-spacing-md); --mais-form-spacing-radio-title: var(--mais-spacing-xs); --mais-form-spacing-radio-gap-y: var(--mais-spacing-sm); --mais-form-spacing-radio-gap-x: var(--mais-spacing-lg); --mais-form-spacing-radio-option: var(--mais-spacing-xs); --mais-form-spacing-checkbox-h: var(--mais-spacing-md); --mais-form-spacing-checkbox-v: var(--mais-spacing-2xs); --mais-form-spacing-checkbox-input: 0.35em; --mais-form-spacing-btn-y: 0.375em; --mais-form-spacing-btn-x: var(--mais-spacing-2xl); /* Radius */ --mais-form-radius-field: var(--mais-radius-sm); --mais-form-radius-btn: var(--mais-radius-pill); /* Typography */ --mais-form-font-size-text: var(--mais-font-size-sm); --mais-form-font-size-title: var(--mais-font-size-md); --mais-form-font-size-option: var(--mais-font-size-sm); --mais-form-line-height-text: var(--mais-line-height-normal); --mais-form-line-height-title: var(--mais-line-height-snug); --mais-form-line-height-option: var(--mais-line-height-normal); --mais-form-text-transform: none; /* Colors */ --mais-form-color-text: #fff; --mais-form-color-btn: #fff; --mais-form-color-btn-hover: var(--mais-color-pink); /* Focus (fine-tuning) */ --mais-form-focus-w: 2px; --mais-form-focus-offset: 2px; --mais-form-btn-border: 0.125em; font-family: var(--mais-font-body-family) !important; color: var(--mais-form-color-text); text-transform: var(--mais-form-text-transform); font-size: var(--mais-form-font-size-text); font-weight: var(--mais-font-body-weight); line-height: var(--mais-form-line-height-text); } .wpcf7 br { display: none !important; } .wpcf7 :where(.wpcf7-text, .wpcf7-textarea, .wpcf7-select) { min-height: var(--mais-form-spacing-field-height); padding: 0.5em; box-sizing: border-box; } /* ---------------------------------------------------------------- Labels ---------------------------------------------------------------- */ .wpcf7 label { display: flex; flex-direction: column; gap: var(--mais-form-spacing-label); } .wpcf7 .wpcf7-radio label { display: flex; flex-direction: row; gap: var(--mais-form-spacing-label); } .wpcf7 .wpcf7-radio label input { margin: 0; } .wpcf7 .mais-form-radio-inline label input { margin-top: -0.1875em; } .wpcf7 .mais-form-radio-vertical label input { margin-top: 0.1875em; } /* ---------------------------------------------------------------- Layout – Section & Flex Grid ---------------------------------------------------------------- */ .wpcf7 :where(.mais-form-section *, .mais-form-section *::before, .mais-form-section *::after) { box-sizing: border-box; } .wpcf7 .mais-form-section { margin-bottom: 0; } .wpcf7 .mais-form-flex { display: flex; flex-wrap: wrap; gap: var(--mais-form-spacing-gap-y) var(--mais-form-spacing-gap-x); } .wpcf7 .mais-form-field { flex: 1 1 100%; } .wpcf7 .mais-form-field.full { flex-basis: 100%; } .wpcf7 .mais-form-field.half { flex: 1 1 calc(50% - var(--mais-form-spacing-gap-x)); min-width: clamp(240px, 45%, 520px); } /* Field labels */ .wpcf7 :where(.mais-form-field > label) { display: flex; flex-direction: column; gap: var(--mais-form-spacing-label); } /* Field titles (use ... inside label/legend) */ .wpcf7 :where(.mais-form-title) { font-size: var(--mais-form-font-size-title); font-weight: 600; line-height: var(--mais-form-line-height-title); opacity: 0.92; text-transform: var(--mais-form-text-transform); } /* ---------------------------------------------------------------- Inputs & Selects ---------------------------------------------------------------- */ .wpcf7 :where(.mais-form-section input, .mais-form-section select, .mais-form-section textarea) { border-radius: var(--mais-form-radius-field); font: inherit; font-size: var(--mais-form-font-size-text); font-weight: inherit; line-height: inherit; text-transform: none; } .wpcf7 :where( .mais-form-section input[type="text"], .mais-form-section input[type="email"], .mais-form-section input[type="tel"], .mais-form-section input[type="date"], .mais-form-section input[type="number"], .mais-form-section select ) { height: var(--mais-form-spacing-field-height); padding: 0 var(--mais-form-spacing-pad-x); } .wpcf7 :where(.mais-form-section textarea) { min-height: var(--mais-form-spacing-textarea-min); padding: var(--mais-form-spacing-pad-y); } /* CF7 list items */ .wpcf7 :where(.wpcf7-list-item) { margin: 0; } /* ---------------------------------------------------------------- Checkboxes ---------------------------------------------------------------- */ .wpcf7 :where(.mais-form-checkbox-horizontal .wpcf7-list-item) { display: inline-flex; align-items: center; margin-right: var(--mais-form-spacing-checkbox-h); } .wpcf7 :where(.mais-form-checkbox-vertical .wpcf7-list-item) { display: flex; align-items: center; margin-bottom: var(--mais-form-spacing-checkbox-v); } .wpcf7 :where(.mais-form-checkbox .wpcf7-list-item input[type="checkbox"]) { margin-right: var(--mais-form-spacing-checkbox-input); } /* ---------------------------------------------------------------- Radio Groups (fieldset/legend) ---------------------------------------------------------------- */ .wpcf7 :where(.mais-form-radio-group) { border: 0; padding: 0; margin: var(--mais-form-spacing-radio-block) 0; min-inline-size: 0; } .wpcf7 :where(.mais-form-radio-group > legend) { padding: 0; margin: 0 0 var(--mais-form-spacing-radio-title) 0; border: 0; } /* Radio inline layout */ .wpcf7 :where(.mais-form-radio-inline .wpcf7-form-control.wpcf7-radio) { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--mais-form-spacing-radio-gap-y) var(--mais-form-spacing-radio-gap-x); } .wpcf7 :where(.mais-form-radio-vertical .wpcf7-form-control.wpcf7-radio) { display: flex; flex-direction: column; gap: var(--mais-form-spacing-radio-gap-y); } .wpcf7 :where(.mais-form-radio-inline .wpcf7-list-item) { display: inline-flex; align-items: center; } .wpcf7 :where(.mais-form-radio-vertical .wpcf7-list-item) { display: flex; align-items: flex-start; } .wpcf7 :where(.mais-form-radio-vertical .wpcf7-list-item > label) { display: flex; flex-direction: row; align-items: flex-start; gap: var(--mais-form-spacing-radio-option); } .wpcf7 :where( .mais-form-radio-inline .wpcf7-list-item input[type="radio"], .mais-form-radio-vertical .wpcf7-list-item input[type="radio"] ) { margin-right: 0; } .wpcf7 :where(.wpcf7-list-item-label) { font-size: var(--mais-form-font-size-option); font-weight: inherit; line-height: inherit; text-transform: var(--mais-form-text-transform); } /* ---------------------------------------------------------------- Focus ---------------------------------------------------------------- */ .wpcf7 :where(.mais-form-section input, .mais-form-section select, .mais-form-section textarea):focus { outline: var(--mais-form-focus-w) solid currentColor; outline-offset: var(--mais-form-focus-offset); } /* ---------------------------------------------------------------- Submit Button ---------------------------------------------------------------- */ .wpcf7 .wpcf7-submit { font-family: var(--mais-font-body-family) !important; color: var(--mais-form-color-btn) !important; padding: var(--mais-form-spacing-btn-y) var(--mais-form-spacing-btn-x) !important; border-radius: var(--mais-form-radius-btn) !important; border: var(--mais-form-btn-border) solid var(--mais-form-color-btn) !important; background: transparent !important; text-transform: var(--mais-form-text-transform); } .wpcf7 .wpcf7-submit:hover { color: var(--mais-form-color-btn-hover) !important; border-color: var(--mais-form-color-btn-hover) !important; } /* ---------------------------------------------------------------- Modal parity Matches the modal styling that used to live inside Cornerstone. ---------------------------------------------------------------- */ .mais-modal__content { background-color: #020202; color: #eeebd8; font-family: 'Spline Sans Mono', sans-serif; } .mais-modal__title { color: #f10090; } .mais-modal__button--primary { background-color: #f10090; color: #eeebd8; } .mais-modal__button--secondary { background-color: #eeebd8; color: #020202; }