/* ============================================= BOAST COMPONENT — CUSTOM CSS OVERRIDES ============================================= */ /* === BASE FONT === */ .boast-component .collection-form { font-family: Recta, Arial, sans-serif !important; } /* === H1 === */ .boast-component .ck-content h1, .boast-component .ck-content h1 span { font-family: Recta, Arial, sans-serif !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #000 !important; } /* === P (baseline text style) === */ .boast-component .ck-content p, .boast-component .collection-form-field__description { font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; line-height: 1.4 !important; font-weight: 400 !important; color: #000 !important; } /* === Subheader paragraph under H1 — 12px === */ .boast-component .ck-content h1+p { font-size: 12px !important; } /* === Labels (Name, Credentials, Email) === */ .boast-component .collection-form-field__label { font-family: Recta, Arial, sans-serif !important; font-size: 9px !important; line-height: 1.0 !important; font-weight: 400 !important; color: #000 !important; margin-bottom: 8px !important; margin-top: 0 !important; } /* Kill the u-my-2 utility margin on labels */ .boast-component .collection-form-field__label.u-my-2 { margin-top: 0 !important; margin-bottom: 8px !important; } /* Remove dotted underline on required asterisks */ .boast-component .collection-form-field__label abbr { text-decoration: none !important; border-bottom: none !important; } /* === Prominent labels — 12px === */ .boast-component .collection-form-field__label[for="video"], .boast-component .collection-form-field__label[for="feedback"], .boast-component .collection-form-field__label[for="photo"], .boast-component .collection-form-field__label[for="consent_terms_and_conditions"] { font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; margin-bottom: 16px !important; } /* === H2 (same as H1) === */ .boast-component .ck-content h2, .boast-component .ck-content h2 span { font-family: Recta, Arial, sans-serif !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 400 !important; color: #000 !important; } /* === Checkbox / consent text === */ .boast-component .custom-control.custom-checkbox .custom-control-label, .boast-component .custom-control.custom-checkbox .custom-control-label.u-d-inline, .boast-component .custom-control.custom-checkbox .custom-control-label span, .boast-component .custom-control.custom-checkbox .custom-control-label span a { font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; line-height: 14px !important; color: #000 !important; } /* Override the u-d-inline display so line-height takes effect properly */ .boast-component .custom-control.custom-checkbox { line-height: 14px !important; } .boast-component .custom-control-label.u-d-inline { display: inline !important; line-height: 14px !important; } /* === Checkbox size === */ .boast-component .custom-control.custom-checkbox input[type="checkbox"] { width: 8px !important; height: 8px !important; margin-right: 6px !important; } /* === Form inputs === */ .boast-component .collection-form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 20px !important; border-radius: 4px !important; border: none !important; outline: none !important; background-color: #E4EBF3 !important; padding: 0 8px !important; box-shadow: none !important; font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; } /* Kill any top margin on inputs to tighten label-to-input gap */ .boast-component .collection-form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { margin-top: 0 !important; } /* ============================================= SPACING ============================================= */ /* === Kill default padding on all field wrappers === */ .boast-component .collection-form-field.u-py-2 { padding-top: 0 !important; padding-bottom: 0 !important; } /* === H1 to subheader (p): 16px === */ .boast-component .ck-content h1 { margin-bottom: 16px !important; margin-top: 0 !important; } /* === Subheader (p) to first form field: 20px === */ .boast-component .ck-content p { margin-bottom: 0 !important; } .boast-component .ck-content+.collection-form-field { margin-top: 20px !important; } /* === Between each of the 3 form fields: 12px === */ .boast-component .collection-form-field+.collection-form-field { margin-top: 12px !important; } /* === Form fields to video field: 20px === */ .boast-component .collection-form-field:has(> .collection-form-field__label[for="video"]) { margin-top: 20px !important; } /* === Video description to video wrapper: 20px === */ .boast-component .collection-form-field .collection-form-field__description.u-my-2 { margin-bottom: 20px !important; margin-top: 0 !important; } /* ============================================= VIDEO WRAPPER & PHOTO INPUT CONTAINERS ============================================= */ .boast-component .boast-video-wrapper, .boast-component .boast-photo-input { min-height: 140px !important; max-height: 140px !important; height: 140px !important; border-radius: 9px !important; background-color: #32363A !important; } /* Kill the aspect ratio container so height is controlled by parent */ .boast-component .boast-video-wrapper .boast-video-aspect-container { height: 100% !important; padding-top: 0 !important; } /* ============================================= VIDEO / PHOTO BUTTONS — SHARED STYLES ============================================= */ .boast-component .collection-form__button { font-family: Recta, Arial, sans-serif !important; font-size: 8px !important; line-height: 1.0 !important; color: #000 !important; height: 20px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 50rem !important; } /* Icon color */ .boast-component .collection-form__button svg { fill: #000 !important; color: #000 !important; } /* Remove default margin on the span before icons */ .boast-component .collection-form__button span.u-mr-2 { margin-right: 0 !important; } /* === Primary buttons (Record Camera, Record Screen, Use Camera) — light purple === */ .boast-component .collection-form button.u-primary, .boast-component .collection-form a.u-primary { background: #D8E2FA !important; color: #000 !important; } .boast-component .collection-form button.u-primary:hover, .boast-component .collection-form a.u-primary:hover { background: #c5d4f5 !important; color: #000 !important; } /* === Secondary buttons (Choose Video File, Choose File) — light orange === */ .boast-component .collection-form button.u-secondary, .boast-component .collection-form a.u-secondary { background: #F6D5CB !important; color: #000 !important; } .boast-component .collection-form button.u-secondary:hover, .boast-component .collection-form a.u-secondary:hover { background: #f0c4b5 !important; color: #000 !important; } /* === Button vertical spacing: 8px gap === */ /* Reset any existing button margins */ .boast-component .boast-video-wrapper .dashboard button, .boast-component .boast-photo-input .dashboard-buttons button { margin: 0 !important; } .boast-component .boast-video-wrapper .dashboard button+button, .boast-component .boast-photo-input .dashboard-buttons button+button { margin-top: 8px !important; } /* ============================================= STAR RATING SECTION ============================================= */ /* Container card */ .boast-component .collection-form-field:has([data-field-name="overall_how_do_you_rate_your_pearl_experience"]) { background-color: #E4EBF3 !important; border-radius: 8px !important; padding: 16px !important; text-align: center !important; } /* Rating label */ .boast-component .collection-form-field__label[for="overall_how_do_you_rate_your_pearl_experience"] { font-family: Recta, Arial, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: normal !important; text-align: center !important; margin-bottom: 16px !important; /* Match width of stars row: 160px */ max-width: 160px !important; margin-left: auto !important; margin-right: auto !important; } /* Center the rater inline-block */ .boast-component .collection-form-field [data-field-name="overall_how_do_you_rate_your_pearl_experience"] { display: block !important; text-align: center !important; } /* Stars container — centered with gap */ .boast-component .react-rater { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } /* Individual star sizing */ .boast-component .react-rater .svg-inline--fa.fa-star { width: 24px !important; height: 24px !important; font-size: 24px !important; color: #32363A !important; } /* Star SVG path — the path IS the outline shape, fill it grey */ .boast-component .react-rater .svg-inline--fa.fa-star path { fill: #32363A !important; stroke: none !important; } /* White circle behind each star so the center reads as white */ .boast-component .react-rater>div { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Kill any inherited color on the star SVG itself */ .boast-component .react-rater .svg-inline--fa.fa-star { width: 24px !important; height: 24px !important; font-size: 24px !important; overflow: visible !important; } /* Star hover / active states */ .boast-component .react-rater>div:hover .svg-inline--fa.fa-star path, .boast-component .react-rater-star.will-be-active .svg-inline--fa.fa-star path, .boast-component .react-rater-star.is-active .svg-inline--fa.fa-star path { fill: #32363A !important; } /* Poor / Fantastic labels — align with first and last star */ .boast-component .collection-form-field [data-field-name="overall_how_do_you_rate_your_pearl_experience"] .u-d-flex { margin-top: 8px !important; /* 5 stars × 24px + 4 gaps × 10px = 160px */ max-width: 160px !important; margin-left: auto !important; margin-right: auto !important; } .boast-component .collection-form-field [data-field-name="overall_how_do_you_rate_your_pearl_experience"] .u-d-flex.u-mt-2 { margin-top: 8px !important; } .boast-component .collection-form-field [data-field-name="overall_how_do_you_rate_your_pearl_experience"] .u-d-flex span { font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; font-weight: 400 !important; line-height: normal !important; color: #000 !important; } /* ============================================= SECTION SPACING — 24px gaps ============================================= */ /* 24px before the photo upload field */ .boast-component .collection-form-field:has(> .collection-form-field__label[for="photo"]) { margin-top: 24px !important; } /* 24px before the consent field */ .boast-component .collection-form-field:has(> .collection-form-field__label[for="consent_terms_and_conditions"]) { margin-top: 24px !important; } /* 24px before the star rating field */ .boast-component .collection-form-field:has([data-field-name="overall_how_do_you_rate_your_pearl_experience"]) { margin-top: 24px !important; } /* 24px before the written feedback field */ .boast-component .collection-form-field:has(> .collection-form-field__label[for="feedback"]) { margin-top: 24px !important; } /* 24px before the submit button */ .boast-component .collection-form button.u-submit { margin-top: 24px !important; } /* ============================================= SUBMIT BUTTON ============================================= */ /* Center the button */ .boast-component .collection-form form { text-align: center !important; } /* Reset text-align for all children except the button */ .boast-component .collection-form form>*:not(button[type="submit"]) { text-align: left !important; } /* Submit button default state */ .boast-component .collection-form button.u-submit { font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; font-weight: 400 !important; color: #32363a !important; text-align: center !important; background-color: #0000 !important; background-image: linear-gradient(304deg, #ffc2b5, #b2caff) !important; border: none !important; border-style: none !important; border-radius: 2rem !important; padding: .75rem 1.5rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: box-shadow .5s !important; box-shadow: -3px -3px 10px #fffc, 6px 6px 10px #bccddc99 !important; cursor: pointer !important; margin-top: 24px !important; } /* Submit button hover state */ .boast-component .collection-form button.u-submit:hover { background-color: #0000 !important; background-image: linear-gradient(304deg, #ffc2b5, #b2caff) !important; border-color: transparent !important; box-shadow: -4px -4px 10px #fff, 3px 3px 10px #fff !important; } /* ============================================= TEXTAREA ============================================= */ .boast-component .collection-form-field textarea { font-family: Recta, Arial, sans-serif !important; font-size: 10px !important; border: 1px solid #E4EBF3 !important; outline: none !important; } .boast-component .collection-form-field textarea:focus { border-color: #E4EBF3 !important; outline: none !important; box-shadow: none !important; }