/* * Contact form. * * The markup belongs to Contact Form 7 and is generated from the form config in the database, so it * cannot be edited from the theme. contact-form.js moves the real fields into the grid below - the * inputs themselves are never replaced, only relocated, so every field name, validation rule and * reCAPTCHA hook keeps working. * * Every field arrives carrying the ORIGINAL theme's Bootstrap 4 utility classes (px-4, py-2, * border-0, w-100, height-control) and Bootstrap writes those with !important. That is the only * reason !important appears here. * * Scoped under .contact-form throughout, so none of it reaches the header, hero or footer. * * Colours are literals rather than tokens: the design system's custom properties live on .bs-chrome * now (see tools/scope-chrome-css.php) and do not inherit into the legacy body. * * @package BrainStream */ /* * The palette sits on :root, not on .contact-form. The confirmation dialog is attached to * so that it can cover the page, which puts it outside the section - tokens declared on * the section would not reach it, and every var() in it would silently resolve to nothing. * That is not hypothetical: it is exactly how the Got it button first shipped white on white. */ :root { --bsf-ink: #0a1a24; --bsf-ink-500: #3c545d; --bsf-ink-400: #5f7780; --bsf-ink-300: #9aafb7; --bsf-line: #dde4e6; /* * --bsf-line is for hairlines INSIDE a control - the divider in the phone field, the rule * under the country filter. Those are meant to be barely there. * * A field's own boundary is a different job: it is the only thing telling you where to * type, so WCAG 1.4.11 asks for 3:1 against the ground behind it. The fields used to * borrow --bsf-line, which is 1.29:1 on white - that is why the boxes read as almost not * there. Both values below are measured against #fff, not picked by eye. */ --bsf-edge: #82969d; /* resting boundary - 3.09:1 on white */ --bsf-edge-hi: #5f7780; /* hover - 4.73:1, the same value as --bsf-ink-400 */ --bsf-brand: #00abbd; --bsf-brand-400: #22c4d6; --bsf-brand-600: #0291a1; --bsf-brand-50: #ecfeff; --bsf-deepteal: #0a3338; --bsf-danger: #b04830; --bsf-radius: 12px; --bsf-h: 56px; } /* ============================================================ centre it all */ /* * The original layout is a Bootstrap split - a 7-column form beside a 5-column panel. With the * office blocks gone that panel holds one line, so the whole section is stacked and centred * instead, and the form is given a reading width of its own. */ .contact-form .row { display: flex; flex-direction: column; align-items: center; margin-left: 0; margin-right: 0; } .contact-form .col-lg-7, .contact-form .col-md-7, .contact-form .col-lg-5, .contact-form .col-md-5 { flex: 0 0 auto !important; width: 100% !important; max-width: 780px !important; padding-left: 0; padding-right: 0; } .contact-form .contact-content { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; } .contact-form .contact-content > p { margin-bottom: 8px !important; } /* The Email Us line, moved under the intro by contact-form.js. */ .contact-form .bsf-alt { text-align: center; margin: 0 0 30px; font-size: 14.5px; color: var(--bsf-ink-400); } .contact-form .bsf-alt a { color: var(--bsf-deepteal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .contact-form .bsf-alt a:hover { color: var(--bsf-brand-600); } .contact-form .form-element { max-width: 780px; margin-left: auto; margin-right: auto; } /* ================================================================== the grid */ .contact-form .bsf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .contact-form .bsf-cell { position: relative; min-width: 0; } .contact-form .bsf-cell--wide { grid-column: 1 / -1; } @media (max-width: 640px) { .contact-form .bsf-grid { grid-template-columns: 1fr; } } /* * Required is marked with a small asterisk in the corner of the field rather than a word above it. * That is what lets the labels go and the placeholders carry the naming. */ .contact-form .bsf-cell[data-required="1"]::after { content: "*"; position: absolute; top: 7px; right: 11px; font-size: 15px; line-height: 1; color: var(--bsf-ink-300); pointer-events: none; z-index: 2; } /* ================================================================ the fields */ .contact-form .bsf-grid input[type="text"], .contact-form .bsf-grid input[type="email"], .contact-form .bsf-grid input[type="tel"], .contact-form .bsf-grid textarea, .contact-form .bsf-phone, .contact-form .bsf-grid .bsf-trigger { width: 100%; background-color: #fff !important; border: 1px solid var(--bsf-edge) !important; border-radius: var(--bsf-radius) !important; padding: 0 18px !important; height: var(--bsf-h) !important; margin: 0 !important; font-family: inherit; font-size: 15.5px; font-weight: 400; color: var(--bsf-ink); box-shadow: none; transition: border-color 140ms ease, box-shadow 140ms ease; } .contact-form .bsf-grid textarea { height: 196px !important; padding: 17px 18px !important; line-height: 1.55; resize: vertical; } .contact-form .bsf-grid input::placeholder, .contact-form .bsf-grid textarea::placeholder { color: var(--bsf-ink-300) !important; opacity: 1; } .contact-form .bsf-grid input:hover, .contact-form .bsf-grid textarea:hover, .contact-form .bsf-phone:hover, .contact-form .bsf-grid .bsf-trigger:hover { border-color: var(--bsf-edge-hi) !important; } .contact-form .bsf-grid input:focus, .contact-form .bsf-grid textarea:focus, .contact-form .bsf-phone:focus-within, .contact-form .bsf-grid .bsf-trigger:focus-visible, .contact-form .bsf-field.is-open .bsf-trigger { outline: none; border-color: var(--bsf-brand-400) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bsf-brand) 14%, transparent); } /* ============================================================== phone field */ /* * One bordered field holding three parts: the flag picker, a divider, the dial code, then the * number. The border lives on the wrapper so the whole thing reads as a single control. */ .contact-form .bsf-phone { display: flex; align-items: stretch; padding: 0 !important; overflow: hidden; } .contact-form .bsf-dial { position: relative; flex: 0 0 auto; display: flex; border-right: 1px solid var(--bsf-line); } .contact-form .bsf-phone .bsf-trigger { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 100% !important; padding: 0 12px !important; width: auto; gap: 7px; background: transparent !important; } .contact-form .bsf-prefix { display: flex; align-items: center; padding-left: 14px; font-size: 15.5px; font-weight: 500; color: var(--bsf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .contact-form .bsf-phone .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; display: flex; } /* Beaten on specificity by .bsf-grid input[type="tel"] above unless it matches at least as tightly - both carry !important, so weight is what decides. */ .contact-form .bsf-grid .bsf-phone input[type="tel"] { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 16px 0 7px !important; height: 100% !important; } .contact-form .bsf-flag { font-size: 19px; line-height: 1; } /* ====================================================== trigger and stepper */ .contact-form .bsf-field { position: relative; } .contact-form .bsf-grid .bsf-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; text-align: left; appearance: none; } .contact-form .bsf-trigger[data-placeholder="1"] .bsf-value { color: var(--bsf-ink-300); } .contact-form .bsf-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The paired chevrons read as "this opens a list", the way a stepper does. */ .contact-form .bsf-caret { flex: 0 0 auto; width: 15px; height: 15px; color: var(--bsf-ink-400); } .contact-form .bsf-dial .bsf-caret { width: 13px; height: 13px; } /* ================================================================= the panel */ .contact-form .bsf-panel { position: absolute; z-index: 60; top: calc(100% + 7px); left: 0; min-width: 268px; width: max-content; max-width: 340px; background: #fff; border: 1px solid var(--bsf-line); border-radius: var(--bsf-radius); box-shadow: 0 24px 50px -20px rgb(10 26 36 / 30%), 0 2px 6px -2px rgb(10 26 36 / 8%); overflow: hidden; display: none; } .contact-form .bsf-cell--service .bsf-panel { left: 0; right: 0; width: auto; max-width: none; } .contact-form .bsf-field.is-open .bsf-panel { display: block; } .contact-form .bsf-search, .contact-form .bsf-search:focus, .contact-form .bsf-search:hover { width: 100%; border: 0 !important; border-bottom: 1px solid var(--bsf-line) !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 16px !important; margin: 0 !important; height: auto !important; font-family: inherit; font-size: 14px; color: var(--bsf-ink); background: #fff !important; } .contact-form .bsf-list { list-style: none; margin: 0; padding: 5px; max-height: 250px; overflow-y: auto; } .contact-form .bsf-group { padding: 9px 12px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bsf-ink-300); } .contact-form .bsf-option { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--bsf-ink); cursor: pointer; line-height: 1.35; } .contact-form .bsf-option .bsf-code { margin-left: auto; color: var(--bsf-ink-400); font-size: 13px; font-variant-numeric: tabular-nums; } .contact-form .bsf-option.is-active, .contact-form .bsf-option:hover { background: var(--bsf-brand-50); color: var(--bsf-deepteal); } .contact-form .bsf-option[aria-selected="true"] { font-weight: 600; } .contact-form .bsf-empty { padding: 14px 12px; font-size: 14px; color: var(--bsf-ink-400); } /* ================================================================== actions */ .contact-form .bsf-actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 12px; } .contact-form input[type="submit"], .contact-form .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; background-color: var(--bsf-brand) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 0 40px !important; height: 54px !important; margin: 0 !important; font-family: inherit; font-size: 16px !important; font-weight: 700; letter-spacing: 0.01em; text-transform: none !important; cursor: pointer; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--bsf-brand) 65%, transparent); transition: background-color 160ms ease, transform 160ms ease; } .contact-form input[type="submit"]:hover, .contact-form .wpcf7-submit:hover { background-color: var(--bsf-brand-600) !important; transform: translateY(-2px); } .contact-form input[type="submit"]:focus-visible { outline: 3px solid var(--bsf-brand-400); outline-offset: 3px; } .contact-form .bsf-legal { max-width: 420px; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--bsf-ink-400); margin: 0; } .contact-form .bsf-legal a { color: var(--bsf-ink-500); text-decoration: underline; text-underline-offset: 2px; } .contact-form .bsf-legal a:hover { color: var(--bsf-brand-600); } .contact-form .wpcf7-spinner { margin: 0 0 0 12px; } /* ============================================================== validation */ .contact-form .wpcf7-not-valid { border-color: var(--bsf-danger) !important; } .contact-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--bsf-danger); } .contact-form .wpcf7-response-output[aria-hidden="true"] { display: none !important; } .contact-form .wpcf7-response-output { margin: 0 0 18px !important; padding: 13px 17px !important; border: 1px solid var(--bsf-line) !important; border-left: 3px solid var(--bsf-brand) !important; border-radius: 10px; font-size: 14.5px; color: var(--bsf-ink-500); background: #fbfdfd; } .contact-form form.invalid .wpcf7-response-output, .contact-form form.failed .wpcf7-response-output { border-left-color: var(--bsf-danger) !important; } /* ================================================================== rhythm */ /* * .py-100 is declared three times in brainstream.css and Bootstrap's .my-md-5 adds 48px of margin * at each end with !important - together 296px of empty space before the first field. Written at * (0,2,0) so it sits above all of them rather than racing the last one. */ .contact-form.py-100 { padding: 56px 0 64px !important; } .contact-form.my-md-5 { margin-top: 0 !important; margin-bottom: 0 !important; } /* The labels are hidden, not removed - the fields carry the names as aria-label instead. */ .contact-form .bsf-grid .frmlabel, .contact-form .bsf-orphan { display: none; } .contact-form .wpcf7-form p { margin: 0; } @media (prefers-reduced-motion: reduce) { .contact-form * { transition: none !important; } } /* ========================================================================= Call to action The real submit control is kept in the form but taken out of sight: Contact Form 7 binds to it and hangs its spinner beside it, so removing it would break both. The visible control is the site's own CTA, built by contact-form.js from the same markup as the landing hero and wrapped in .bs-chrome so build/css/chrome.css can reach it. ========================================================================= */ .contact-form .bsf-native-submit { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .contact-form .bsf-cta { display: flex; justify-content: center; } /* ========================================================================= Dropdown panel A plain list: full-bleed rows, no pills, no icons on the service list. The trigger's own label shrinks and lifts to the top of the field while the panel is open, so the field still says what it is once the list covers it. ========================================================================= */ .contact-form .bsf-panel { border-radius: 14px; box-shadow: 0 18px 44px -16px rgb(10 26 36 / 22%), 0 1px 3px rgb(10 26 36 / 6%); padding: 0; } .contact-form .bsf-list { padding: 7px 0; max-height: 296px; } .contact-form .bsf-option { padding: 10px 20px; border-radius: 0; font-size: 16px; gap: 12px; } .contact-form .bsf-option.is-active, .contact-form .bsf-option:hover { background: #f2f8f9; color: var(--bsf-deepteal); } .contact-form .bsf-group { padding: 12px 20px 4px; } .contact-form .bsf-empty { padding: 14px 20px; } /* The label lifts so the field still reads as "Interested in" with a list over it. */ .contact-form .bsf-cell--service .bsf-field.is-open .bsf-value { position: absolute; top: 9px; left: 19px; font-size: 12px; line-height: 1; color: var(--bsf-ink-400); } .contact-form .bsf-cell--service .bsf-field.is-open .bsf-trigger { align-items: flex-end; padding-bottom: 11px !important; } /* * .bsf-cta is a flex item of a column flex parent, so it shrink-to-fits - which sized the button * to 200px when its content needs 203, and the arrow circle (shrink-0) spilled past the pill's * rounded edge by three pixels. Giving the wrapper the full width lets the button take its natural * size and still centre. */ .contact-form .bsf-cta { width: 100%; } .contact-form .bsf-cta > button { flex: 0 0 auto; } /* With the label lifted out of flow, the stepper is the only child left - keep it right and centred. */ .contact-form .bsf-cell--service .bsf-field.is-open .bsf-trigger { align-items: center; justify-content: flex-end; padding-bottom: 0 !important; } /* * The label is an anonymous flex item, so it shrinks; the arrow circle is shrink-0 and does not. * The result was a pill three pixels narrower than its own contents with the circle hanging out of * the rounded end. Sizing the button to its content settles it. */ .contact-form .bsf-cta > button { width: max-content !important; max-width: 100%; white-space: nowrap; } /* ========================================================================= Website field, and a clipping fix .bsf-phone had overflow:hidden to keep its inner segments inside the rounded corners - but the country panel is absolutely positioned inside it, so the whole list was being clipped to a 56px-tall box and nothing showed. The inner segments have no background of their own, so there was nothing to clip. ========================================================================= */ .contact-form .bsf-phone { overflow: visible; } .contact-form .bsf-grid input[type="url"] { width: 100%; background-color: #fff !important; border: 1px solid var(--bsf-edge) !important; border-radius: var(--bsf-radius) !important; padding: 0 18px !important; height: var(--bsf-h) !important; margin: 0 !important; font-family: inherit; font-size: 15.5px; color: var(--bsf-ink); box-shadow: none; transition: border-color 140ms ease, box-shadow 140ms ease; } .contact-form .bsf-grid input[type="url"]:hover { border-color: var(--bsf-edge-hi) !important; } .contact-form .bsf-grid input[type="url"]:focus { outline: none; border-color: var(--bsf-brand-400) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bsf-brand) 14%, transparent); } .contact-form .bsf-cell.is-invalid input { border-color: var(--bsf-danger) !important; } .contact-form .bsf-cell.is-invalid input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bsf-danger) 14%, transparent); } .contact-form .bsf-error { display: none; margin: 6px 2px 0; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--bsf-danger); } .contact-form .bsf-cell.is-invalid .bsf-error { display: block; } /* ========================================================================= Focus, and the phone field's corners Two fixes that belong together because both are about the phone control. 1. The number input sits inside .bsf-phone and carried its own white background with square corners, so at the right-hand end that square painted straight over the parent's rounded corner - the corner looked cropped. The wrapper already has the white; the input does not need it. 2. Focus was a soft 4px teal halo, which reads as the field swelling. It is now a crisp dark edge in the same deep teal as the Contact Us button: border plus a 1px spread shadow, so it reads as a solid 2px line without the 1px layout shift a real 2px border would cause. ========================================================================= */ .contact-form .bsf-grid .bsf-phone input[type="tel"] { background-color: transparent !important; } .contact-form .bsf-grid input:focus, .contact-form .bsf-grid input[type="url"]:focus, .contact-form .bsf-grid textarea:focus, .contact-form .bsf-phone:focus-within, .contact-form .bsf-grid .bsf-trigger:focus-visible, .contact-form .bsf-field.is-open .bsf-trigger { border-color: var(--bsf-deepteal) !important; box-shadow: 0 0 0 1px var(--bsf-deepteal); } .contact-form .bsf-cell.is-invalid input:focus, .contact-form .bsf-cell.is-invalid .bsf-phone:focus-within { border-color: var(--bsf-danger) !important; box-shadow: 0 0 0 1px var(--bsf-danger); } /* * The divider between the flag and the number stays light on focus. Darkening it to match the * outer edge made the inside of the field as heavy as its outline, and the two competed. */ .contact-form .bsf-phone:focus-within .bsf-dial { border-right-color: var(--bsf-line); } /* ========================================================================= Two columns again: the form, and the contact card beside it Supersedes the stacked layout above. The heading is lifted out of the form column by contact-form.js so it sits over the pair, and the pair is centred as a unit - which is what "the form in the centre" means once something is sitting next to it. ========================================================================= */ .contact-form .container > .contact-content { text-align: center; max-width: 620px; margin: 0 auto 34px; } .contact-form .row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 40px; } .contact-form .col-lg-7, .contact-form .col-md-7 { flex: 1 1 540px !important; width: auto !important; max-width: 620px !important; } .contact-form .col-lg-5, .contact-form .col-md-5 { flex: 0 1 330px !important; width: auto !important; max-width: 330px !important; } @media (max-width: 980px) { .contact-form .col-lg-7, .contact-form .col-md-7, .contact-form .col-lg-5, .contact-form .col-md-5 { flex: 1 1 100% !important; max-width: 620px !important; } } /* ------------------------------------------------------------- the card */ .contact-form .bsf-card { background: #eef6f7; border-radius: 22px; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 22px; } .contact-form .bsf-card-row { display: flex; flex-direction: column; gap: 5px; } .contact-form .bsf-card-label { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--bsf-ink-400); } .contact-form .bsf-card-value { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--bsf-deepteal); text-decoration: none; word-break: break-word; } .contact-form a.bsf-card-value:hover { color: var(--bsf-brand-600); text-decoration: underline; text-underline-offset: 3px; } .contact-form .bsf-card-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; } .contact-form .bsf-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--bsf-deepteal); font-size: 16px; text-decoration: none; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; } .contact-form .bsf-social:hover { background: var(--bsf-deepteal); color: #fff; transform: translateY(-2px); } .contact-form .bsf-social:focus-visible { outline: 2px solid var(--bsf-deepteal); outline-offset: 2px; } /* ========================================================================= TRIAL: heading and intro hidden above the form "We'd Love to talk with you!" and the paragraph under it are hidden so the form starts higher. The text is still in the page - this only hides it, so nothing has to be retyped to bring it back. TO PUT IT BACK: delete this one block. That is the whole change. ========================================================================= */ .contact-form .container > .contact-content, .contact-form .contact-content { display: none; } /* Without a heading to sit under, the section does not need as much lead-in. */ .contact-form.py-100 { padding-top: 40px !important; } /* ================================================================ characters */ /* * Two cut-out figures. Both are decoration, so both are pointer-transparent and neither is ever * in the way of the form. * * The waving figure sits in the page margin to the left of the form. That margin is * (100vw - 990px) / 2, which is 105px at 1200 and 225px at 1440 - so she is only shown from * 1440px up, where there is enough room for her to be worth looking at. Below that she is gone, * and because the rule is display:none from the start, a phone never downloads the file at all. */ .contact-form { position: relative; } .contact-form .bsf-figure { display: none; pointer-events: none; user-select: none; } .contact-form .bsf-figure img { display: block; width: 100%; height: auto; } @media (min-width: 1440px) { .contact-form .bsf-figure--wave { display: block; position: absolute; left: 0; bottom: 0; width: min(290px, calc((100vw - 990px) / 2 - 20px)); } } /* ============================================================== confirmation */ /* * The dialog is attached to , not to the section, so none of the scoping above reaches it * and it lands in the middle of the original theme's Bootstrap. Every element it uses - h2, p, ol, * li, button - therefore has to be reset here rather than assumed, which is why this block sets * more properties than it looks like it should need. */ body.bsf-noscroll { overflow: hidden !important; } /* * The OVERLAY scrolls, never the card. * * A card with its own overflow puts a scrollbar down the inside of the white panel the moment * the screen is a little short, which on a 1366x768 laptop is always. Moving the scrolling out * here means that on a short screen the whole dialog moves, against the dark veil, where a * scrollbar is the browser's own furniture rather than a line through the middle of a design. * * align-items is flex-start rather than center on purpose: with center, a card taller than the * viewport has its top pushed off the edge and no way to scroll back up to it. flex-start plus * margin:auto on the card centres it while there is room and lets it scroll once there is not. */ .bsf-thanks { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overscroll-behavior: contain; padding: 24px; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; } .bsf-thanks[hidden] { display: none !important; } .bsf-thanks-veil { position: fixed; inset: 0; background: rgba(10, 26, 36, 0.58); opacity: 0; transition: opacity 260ms ease; } .bsf-thanks.is-open .bsf-thanks-veil { opacity: 1; } .bsf-thanks-card { position: relative; width: 100%; max-width: 512px; margin: auto; box-sizing: border-box; padding: 34px 36px 28px; background: #fff; border-radius: 28px; text-align: center; box-shadow: 0 44px 90px -34px rgba(10, 26, 36, 0.55); opacity: 0; transform: translateY(22px) scale(0.94); transition: opacity 240ms ease, transform 460ms cubic-bezier(0.22, 1.18, 0.36, 1); } .bsf-thanks.is-open .bsf-thanks-card { opacity: 1; transform: none; } /* ------------------------------------------------------------ the close cross */ .bsf-thanks-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--bsf-ink-400); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .bsf-thanks-x:hover { background: #eef6f7; color: var(--bsf-deepteal); } .bsf-thanks-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* ------------------------------------------------------------------ the badge */ .bsf-thanks-badge { position: relative; width: 84px; margin: 0 auto 16px; opacity: 0; transform: scale(0.5) rotate(-14deg); transition: transform 620ms cubic-bezier(0.22, 1.4, 0.36, 1) 90ms, opacity 260ms ease 90ms; } .bsf-thanks.is-open .bsf-thanks-badge { opacity: 1; transform: none; } /* A soft bloom behind the icon so it reads as lit rather than pasted on. */ .bsf-thanks-badge::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 171, 189, 0.22), rgba(0, 171, 189, 0) 68%); } .bsf-thanks-badge img { position: relative; display: block; width: 100%; height: auto; } /* ------------------------------------------------------------------- the copy */ .bsf-thanks-title { margin: 0 0 9px; font-family: "Montserrat", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; color: var(--bsf-deepteal); } .bsf-thanks-lead { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--bsf-ink-500); } /* -------------------------------------------------------------- what happens next */ .bsf-thanks-steps { margin: 0 0 18px; padding: 0; list-style: none; text-align: left; display: flex; flex-direction: column; gap: 10px; } .bsf-thanks-step { display: flex; align-items: flex-start; gap: 13px; padding: 12px 14px; background: #f7fbfc; border-radius: 16px; opacity: 0; transform: translateY(12px); transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .bsf-thanks.is-open .bsf-thanks-step { opacity: 1; transform: none; } /* Landing one after another reads as a sequence, which is what the list is describing. */ .bsf-thanks.is-open .bsf-thanks-step:nth-child(1) { transition-delay: 250ms; } .bsf-thanks.is-open .bsf-thanks-step:nth-child(2) { transition-delay: 330ms; } .bsf-thanks.is-open .bsf-thanks-step:nth-child(3) { transition-delay: 410ms; } .bsf-thanks-ic { flex: 0 0 36px; width: 36px; } .bsf-thanks-ic img { display: block; width: 100%; height: auto; } .bsf-thanks-tx { display: block; padding-top: 2px; } .bsf-thanks-tx strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--bsf-deepteal); } .bsf-thanks-tx span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--bsf-ink-400); } .bsf-thanks-note { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--bsf-ink-400); } /* ------------------------------------------------------------------ the button */ .bsf-thanks-done { display: inline-flex; align-items: center; justify-content: center; min-width: 160px; height: 48px; padding: 0 30px; background: var(--bsf-deepteal); border: 0; border-radius: 999px; font-family: inherit; font-size: 15.5px; font-weight: 700; color: #fff; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .bsf-thanks-done:hover { background: #0a1a24; transform: translateY(-1px); } .bsf-thanks-done:focus-visible { outline: 3px solid var(--bsf-brand-400); outline-offset: 3px; } /* * A short viewport - a 1366x768 laptop leaves about 640px once the browser has taken its share - * would otherwise scroll the overlay by a few pixels, which is the most irritating amount of * scrolling there is. Give back a little padding and it simply fits. */ @media (max-height: 720px) { .bsf-thanks { padding: 14px; } .bsf-thanks-card { padding: 26px 30px 22px; } .bsf-thanks-badge { width: 68px; margin-bottom: 12px; } } @media (max-width: 560px) { .bsf-thanks-card { padding: 38px 24px 28px; border-radius: 22px; } .bsf-thanks-title { font-size: 23px; } } /* * Everything above animates. For anyone who has asked their system not to, the dialog simply * appears - it still opens, still traps focus, still closes. */ @media (prefers-reduced-motion: reduce) { .bsf-thanks-veil, .bsf-thanks-card, .bsf-thanks-badge, .bsf-thanks-step, .bsf-thanks-done { transition: none !important; transform: none !important; } }