/** * Focusline Prep. Forms: WPForms markup inside the form card (Group courses, Apply, Contact). * Hand-written. WPForms' own styling is off (WPForms > Settings > General > Include Form Styling: No Styling), * so everything here matches the approved design without fighting WPForms. No !important. */ /* The form sits in the card at the approved width */ .fl-form-card .wpforms-container{margin:0;max-width:var(--fl-size-620, 620px)} .fl-form-card .wpforms-form{margin:0} .fl-form-card .wpforms-field-container{margin:0;padding:0} /* Fields */ .fl-form-card .wpforms-field{margin:0 0 var(--fl-sp-22, 22px);padding:0;border:0;min-width:0} .fl-form-card .wpforms-field fieldset{margin:0;padding:0;border:0;min-width:0} .fl-form-apply .wpforms-field{margin-bottom:var(--fl-sp-24, 24px)} .fl-form-card .wpforms-field-label{display:block;margin:0 0 var(--fl-sp-8, 8px);padding:0;color:var(--fl-c-text, #14231F);font-family:var(--fl-f-body, "Source Sans 3", system-ui, sans-serif);font-size:var(--fl-fs-17, 17px);font-weight:600;line-height:1.6} .fl-form-card .wpforms-required-label{display:none} .fl-form-card .wpforms-field-description{margin:var(--fl-sp-8, 8px) 0 0;color:var(--fl-c-muted, #4A5752);font-size:var(--fl-fs-15, 15px);line-height:1.6} .fl-form-card .wpforms-field input[type="text"],.fl-form-card .wpforms-field input[type="email"], .fl-form-card .wpforms-field select,.fl-form-card .wpforms-field textarea{display:block;width:100%;max-width:none;min-height:var(--fl-size-50, 50px);margin:0;padding:var(--fl-sp-10, 10px) var(--fl-sp-14, 14px);border:var(--fl-bw-1, 1px) solid var(--fl-input-border, #737C77);border-radius:var(--fl-r-4, 4px);background:var(--fl-paper, #FAF8F4);color:var(--fl-c-text, #14231F);font-family:var(--fl-f-body, "Source Sans 3", system-ui, sans-serif);font-size:var(--fl-fs-17, 17px);line-height:1.6;box-shadow:none} /* Text boxes: as tall as the approved design (Group 4 lines, Apply 5 lines, Contact 6 lines), plus the box's padding and border */ .fl-form-card .wpforms-field textarea{min-height:calc(1.6em * 4 + var(--fl-sp-10, 10px) * 2 + var(--fl-bw-1, 1px) * 2);resize:vertical} .fl-form-apply .wpforms-field textarea{min-height:calc(1.6em * 5 + var(--fl-sp-10, 10px) * 2 + var(--fl-bw-1, 1px) * 2)} .fl-form-contact .wpforms-field textarea{min-height:calc(1.6em * 6 + var(--fl-sp-10, 10px) * 2 + var(--fl-bw-1, 1px) * 2)} .fl-form-card .wpforms-field select{height:var(--fl-size-52, 52px);padding-top:0;padding-bottom:0;cursor:pointer} .fl-form-card .wpforms-field input[type="text"]:focus-visible,.fl-form-card .wpforms-field input[type="email"]:focus-visible, .fl-form-card .wpforms-field select:focus-visible,.fl-form-card .wpforms-field textarea:focus-visible{outline:var(--fl-bw-3, 3px) solid var(--fl-c-focus, #0F6B5C);outline-offset:var(--fl-sp-2, 2px)} /* Choice lists (WPForms prints them as a list) */ .fl-form-card .wpforms-field ul{margin:0;padding:0;list-style:none} .fl-form-card .wpforms-field li{margin:0;padding:0} /* Checkboxes: the consent boxes */ .fl-form-card .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:var(--fl-sp-12, 12px)} .fl-form-card .wpforms-field-checkbox input[type="checkbox"]{flex:none;width:var(--fl-size-22, 22px);height:var(--fl-size-22, 22px);margin:var(--fl-sp-3, 3px) 0 0;accent-color:var(--fl-teal, #0F6B5C)} .fl-form-card .wpforms-field-checkbox input[type="checkbox"]:focus-visible{outline:var(--fl-bw-3, 3px) solid var(--fl-c-focus, #0F6B5C);outline-offset:var(--fl-sp-2, 2px)} .fl-form-card .wpforms-field-label-inline{color:var(--fl-c-text, #14231F);font-size:var(--fl-fs-17, 17px);line-height:1.5;cursor:pointer} /* Links inside a choice label (the privacy policy link) are underlined, so they never rely on color alone */ .fl-form-card .wpforms-field-label-inline a{color:var(--fl-c-accent, #0F6B5C);text-decoration:underline;text-underline-offset:var(--fl-sp-3, 3px)} .fl-form-card .wpforms-field-label-inline a:focus-visible{outline:var(--fl-bw-3, 3px) solid var(--fl-c-focus, #0F6B5C);outline-offset:var(--fl-sp-2, 2px)} /* Radio buttons shown as boxes (the student's grade on Group courses) */ .fl-form-card .wpforms-field-radio ul{display:flex;flex-wrap:wrap;gap:var(--fl-sp-10, 10px)} .fl-form-card .wpforms-field-radio li{position:relative} .fl-form-card .wpforms-field-radio input[type="radio"]{position:absolute;opacity:0;width:var(--fl-size-1, 1px);height:var(--fl-size-1, 1px);margin:0} .fl-form-card .wpforms-field-radio .wpforms-field-label-inline{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fl-size-76, 76px);min-height:var(--fl-size-50, 50px);padding:var(--fl-sp-10, 10px) var(--fl-sp-16, 16px);border:var(--fl-bw-1, 1px) solid var(--fl-input-border, #737C77);border-radius:var(--fl-r-4, 4px);background:var(--fl-paper, #FAF8F4);font-size:var(--fl-body, 18px);font-weight:600;line-height:1.6} .fl-form-card .wpforms-field-radio input[type="radio"]:checked + .wpforms-field-label-inline{border-color:var(--fl-teal, #0F6B5C);background:var(--fl-teal, #0F6B5C);color:var(--fl-paper, #FAF8F4)} .fl-form-card .wpforms-field-radio input[type="radio"]:focus-visible + .wpforms-field-label-inline{outline:var(--fl-bw-3, 3px) solid var(--fl-c-focus, #0F6B5C);outline-offset:var(--fl-sp-2, 2px)} /* Messages: each field's own message, and the message above the form */ .fl-form-card .wpforms-error{display:block;margin:var(--fl-sp-8, 8px) 0 0;color:var(--fl-error, #8E1B1B);font-size:var(--fl-fs-16, 16px);font-style:normal;font-weight:600} .fl-form-card input.wpforms-error,.fl-form-card select.wpforms-error,.fl-form-card textarea.wpforms-error{margin:0;border:var(--fl-bw-2, 2px) solid var(--fl-error, #8E1B1B)} .fl-form-card .wpforms-error-container,.fl-form-card .wpforms-error-noscript{margin:0 0 var(--fl-sp-16, 16px);padding:var(--fl-sp-12, 12px) var(--fl-sp-14, 14px);border-left:var(--fl-bw-4, 4px) solid var(--fl-error-line, #B3261E);background:var(--fl-error-bg, #FBEAE8);color:var(--fl-error-text, #7A1B14);font-weight:600} .fl-form-card .wpforms-error-container p{margin:0} /* The no-JavaScript notice keeps the browser's own rule: shown only when JavaScript is off */ /* The message after sending (Contact; Apply and Group go to their thank-you pages) */ .fl-form-card .wpforms-confirmation-container-full{margin:0;padding:var(--fl-sp-20, 20px) var(--fl-sp-22, 22px);border:var(--fl-bw-1, 1px) solid var(--fl-teal, #0F6B5C);border-radius:var(--fl-r-4, 4px);background:var(--fl-stone, #F1EEE6);color:var(--fl-c-text, #14231F);font-size:var(--fl-fs-19, 19px);font-weight:600} .fl-form-card .wpforms-confirmation-container-full p{margin:0} /* Send button: the same as the theme's primary button (full width on phones) */ .fl-form-card .wpforms-submit-container{margin:0;padding:0} .fl-form-card .wpforms-submit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--fl-size-52, 52px);padding:var(--fl-sp-14, 14px) var(--fl-sp-26, 26px);border:var(--fl-bw-1, 1px) solid transparent;border-radius:var(--fl-r-btn, 4px);background:var(--fl-c-btn-bg, #0F6B5C);color:var(--fl-c-btn-fg, #FAF8F4);font-family:var(--fl-f-body, "Source Sans 3", system-ui, sans-serif);font-size:var(--fl-fs-17, 17px);font-weight:600;line-height:1.2;cursor:pointer} .fl-form-card .wpforms-submit:hover{background:var(--fl-c-btn-hover, #0B5248)} .fl-form-card .wpforms-submit:focus-visible{outline:var(--fl-bw-3, 3px) solid var(--fl-c-focus, #0F6B5C);outline-offset:var(--fl-sp-3, 3px)} .fl-form-card .wpforms-submit-spinner{display:block;width:var(--fl-size-26, 26px);height:var(--fl-size-26, 26px);margin:var(--fl-sp-12, 12px) auto 0} /* Hidden parts: the spam trap, hidden labels and WPForms' hidden items */ .fl-form-card .wpforms-field-hp{position:absolute;left:calc(var(--fl-size-9999, 9999px) * -1);width:var(--fl-size-1, 1px);height:var(--fl-size-1, 1px);overflow:hidden} .fl-form-card .wpforms-label-hide,.fl-form-card .wpforms-screen-reader-element{position:absolute;width:var(--fl-size-1, 1px);height:var(--fl-size-1, 1px);margin:calc(var(--fl-sp-1, 1px) * -1);padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .fl-form-card .wpforms-hidden,.fl-form-card .wpforms-conditional-hide{display:none} /* Apply form on computers: the short fields in two columns (WPForms field numbers from the import files: 2 Your name, 3 Student's name, 4 Email, 5 Country, 7 Score, 8 SAT date). A field added later can join them with the CSS class fl-half (WPForms: the field, Advanced, CSS Classes). Your name takes the full width when Student's name is hidden (shown only when Parent is chosen). */ @media (min-width:922px){ .fl-apply-card .wpforms-container{max-width:none} .fl-form-apply .wpforms-field-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--fl-sp-28, 28px)} .fl-form-apply .wpforms-field-container > .wpforms-field{grid-column:1/-1} .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="2"],.fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="3"], .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="4"],.fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="5"], .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="7"],.fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="8"], .fl-form-apply .wpforms-field-container > .wpforms-field.fl-half{grid-column:auto} .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="2"]:has(+ .wpforms-conditional-hide), .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="2"]:has(+ [style*="display:none"]), .fl-form-apply .wpforms-field-container > .wpforms-field[data-field-id="2"]:has(+ [style*="display: none"]){grid-column:1/-1} } /* The privacy line under the form (in the template, after the form) */ .fl-form-card .fl-form-small{max-width:var(--fl-size-620, 620px)} /* Only logged-in editors see these reminders */ .fl-admin-note{display:block;margin:0;padding:var(--fl-sp-10, 10px) var(--fl-sp-14, 14px);border:var(--fl-bw-2, 2px) dashed var(--fl-amber, #E0A100);background:var(--fl-paper, #FAF8F4);color:var(--fl-c-text, #14231F);font-size:var(--fl-fs-16, 16px);font-weight:600} @media (max-width:544px){ .fl-form-card .wpforms-field input[type="text"],.fl-form-card .wpforms-field input[type="email"], .fl-form-card .wpforms-field select,.fl-form-card .wpforms-field textarea{font-size:var(--fl-fs-16, 16px)} .fl-form-card .wpforms-submit{width:100%} }