/* ============================================================================ Event / video pages and form pages (body.sd-ef; .sd-ef--event, .sd-ef--form). inc/events-forms.php. 51 short pages in block markup: masterclass invitations and replays, sneak peeks (Vimeo, YouTube, Prezi, Acuity booking frames), Contact, Free Trial, the Formidable forms and their success pages. Loaded on those pages only, after site.css. The content is styled, never edited: its own alignment is kept (centered where the live page centers it), and colors written into it that would not read on the dark ground are redrawn. Forms are styled by CSS only: Formidable's markup, validation and scripts are its own. ========================================================================= */ .sd-ef .sd-entry { --ef-col: 60rem; padding-bottom: 96px; } .sd-ef--form .sd-entry { --ef-col: 46rem; } /* a form page whose form sits beside a column of its own (Contact, Business Inquiries) gets the event width */ .sd-ef--form .sd-entry:has(.wp-block-columns > .wp-block-column:not(:empty) + .wp-block-column:not(:empty) .frm_forms) { --ef-col: 60rem; } /* every row is one centered column; the reading width is the column's, not the screen's */ .sd-ef .sd-entry > .wp-block-group { max-width: calc(var(--ef-col) + 2 * var(--sd-gutter)); margin-inline: auto; padding-inline: var(--sd-gutter); } .sd-ef .sd-entry > .wp-block-group + .wp-block-group { margin-top: 40px; } /* ---------------------------------------------------------------- the title band (the first row): the hero on the blueprint grid */ .sd-ef .sd-entry > .wp-block-group:first-child { max-width: none; margin-bottom: 64px; padding-block: 88px 64px; border-top: 1px solid var(--band); border-bottom: 1px solid var(--line); background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; background-position: center bottom; } .sd-ef .sd-entry > .wp-block-group:first-child > .wp-block-group__inner-container { max-width: var(--sd-max); margin-inline: auto; } .sd-ef .sd-entry > .wp-block-group:first-child h1 { margin: 0 auto; max-width: 22ch; font: 600 var(--t-h1)/1.04 var(--f-display); letter-spacing: -.02em; color: var(--text); text-align: center !important; text-wrap: balance; } .sd-ef .sd-entry > .wp-block-group:first-child + .wp-block-group { margin-top: 0; } /* rows inside a row (the converter's .sd-row-inner) are sections of their own */ .sd-ef .sd-entry .sd-row-inner + .sd-row-inner { margin-top: 40px; } /* long text keeps a reading measure inside the wide column (videos, forms and column sets use the full width) */ .sd-ef .sd-entry > .wp-block-group:not(:first-child) .wp-block-group__inner-container > :is(p, h2, h3, h4, h5, h6, ul, ol, .sd-fnt-07) { max-width: 44rem; margin-inline: auto; } /* Bridge-era spacing written inline (negative top margins pulled headings under the row above) */ .sd-ef .sd-entry [style*="margin-top: -"] { margin-top: 0 !important; } /* ---------------------------------------------------------------- type in the column */ .sd-ef .sd-entry > .wp-block-group:not(:first-child) h1 { margin: 0 0 .5em; font: 600 clamp(1.625rem, 1.15rem + 1.6vw, 2.5rem)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; } .sd-ef .sd-entry h1 :is(b, strong) { font-weight: inherit; color: var(--accent); } .sd-ef .sd-entry h2 { margin: 1.4em 0 .6em; } .sd-ef .sd-entry h3 { margin: 1.6em 0 .5em; } .sd-ef .sd-entry h4 { margin: 1.5em 0 .5em; color: var(--text); } .sd-ef .sd-entry h6 { margin: .25em 0 1em; } .sd-ef .sd-entry :is(p, li) { color: var(--c-copy); } .sd-ef .sd-entry ul.wp-block-list { text-align: left; } .sd-ef .sd-entry .sd-fnt-06 { margin: 0 auto .4em; max-width: 26ch; font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.18 var(--f-display); letter-spacing: -.01em; color: var(--text); text-align: center; } .sd-ef .sd-entry .sd-fnt-07 { margin: 0 auto 1.1em; color: var(--mute); } .sd-ef .sd-entry .wp-block-column .sd-fnt-07 { margin-bottom: .2em; font-size: 1.0625rem; color: var(--text); } .sd-ef .sd-entry .sd-fnt-07 :is(b, strong) { font-weight: 500; } /* the 2022 "Hosted By" eyebrow and the live pages' gray sub-headings: written in #444 for a white page */ .sd-ef .sd-entry [style*="color: #444"] { color: var(--mute) !important; } .sd-ef .sd-entry h3[style*="text-transform: uppercase"] { font: 500 12px/1.4 var(--f-num) !important; letter-spacing: .04em; color: var(--faint) !important; margin-top: 0; } /* "THIS VIDEO IS PART 1 OF 3": maroon on white live, unreadable on the dark ground; the accent keeps it a signal */ .sd-ef .sd-entry [style*="color: #800000"] { color: var(--accent) !important; } .sd-ef .sd-entry hr.wp-block-separator { margin: 2.5em 0; } /* the event tags ("FREE LIVE Event", "Limited Seats", "Next Up!", dates): mono readouts */ .sd-ef .sd-indev-tag { display: inline-flex; align-items: center; margin: 0 4px 8px; padding: 4px 10px; font: 500 12px/1.3 var(--f-num); letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 0; white-space: nowrap; } /* the host's portrait (a 150px cut-out on a light disc): kept round and small */ .sd-ef .sd-entry .mike-masterclass-avatar { margin: 0 auto 12px; } .sd-ef .sd-entry .mike-masterclass-avatar img { display: block; width: 112px; height: 112px; margin-inline: auto; border-radius: 50%; border: 1px solid var(--line-2); object-fit: cover; } /* illustrations: live sets them in a one-third column; here the empty side columns go, so a cap keeps their size */ .sd-ef .sd-entry .wp-block-image:not(.mike-masterclass-avatar) img { display: block; margin-inline: auto; max-width: min(100%, 30rem); } .sd-ef .sd-entry .wp-block-image { margin: 0 0 1.5em; } /* Contact and Business Inquiries: each contact line's Bridge icon (the theme's stand-in) sits left of its heading */ .sd-ef .sd-entry .wp-block-column > .sd-icon { float: left; clear: left; margin: 2px 16px 28px 0; border-radius: 50%; color: var(--accent); border-color: var(--line-2); } .sd-ef .sd-entry .wp-block-column > .sd-icon ~ :is(h3, div) h3, .sd-ef .sd-entry .wp-block-column > .sd-icon + :is(h3, div), .sd-ef .sd-entry .wp-block-column > .sd-icon + h3 { margin-top: 0 !important; } .sd-ef .sd-entry .wp-block-column > .sd-icon ~ h3, .sd-ef .sd-entry .wp-block-column > .sd-icon ~ div h3 { margin: 0 0 .2em; padding: 0 !important; font: 600 1.0625rem/1.4 var(--f-text) !important; } .sd-ef .sd-entry .wp-block-column > .sd-icon ~ :is(p, div) { margin-bottom: 26px !important; overflow-wrap: anywhere; } /* check and cross marks written as Font Awesome icons */ .sd-ef .sd-entry .sdiconcheck { margin-right: 8px; color: var(--accent); } .sd-ef .sd-entry .sdiconcheck.fa-times { color: #FF6B6B !important; } /* ---------------------------------------------------------------- links that are buttons */ .sd-ef .sd-entry :is(.sd-21btn-primary-r, .sd-btn-01, .sd-report-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; margin: 4px 6px 4px 0; font: 600 15px/1.2 var(--f-text); text-transform: none; text-decoration: none; white-space: normal; text-align: center; border-radius: 0; background: transparent; color: var(--text) !important; border: 1px solid var(--line-2); transition: border-color .15s, color .15s; } .sd-ef .sd-entry .sd-btn-01 { background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink) !important; } .sd-ef .sd-entry :is(.sd-21btn-primary-r, .sd-report-btn):hover { border-color: var(--accent); color: var(--accent) !important; } .sd-ef .sd-entry .sd-btn-01:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink) !important; } .sd-ef .sd-entry .sd-21btn-primary-l { margin: 4px 6px 4px 0; white-space: normal; text-align: center; padding-block: 12px; line-height: 1.2; } .sd-ef .sd-entry :is(.sd-21btn-primary-r, .sd-btn-01) i { display: none; } /* a host's website: a quiet mono link */ .sd-ef .sd-entry .agencybtn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; font: 400 12.5px/1.4 var(--f-num); color: var(--mute); text-decoration: none; } .sd-ef .sd-entry .agencybtn:hover { color: var(--accent); } /* Acuity's "Click to LOCK in your Spot!" keeps its own color (inline, !important); the theme's type and size */ .sd-ef .sd-entry .acuity-embed-button { min-height: 46px; padding: 13px 22px !important; font: 600 15px/1.2 var(--f-text); border-radius: 0 !important; box-shadow: none !important; } /* a notice box written light into the feedback pages (.sd-alert): the dark panel with the warm rule */ .sd-ef .sd-entry .sd-alert { max-width: 36rem; margin: 0 auto 2em !important; padding: 16px 20px !important; background: var(--panel); border: 1px solid var(--line); border-left: 2px solid #FF6B6B; color: var(--c-copy); font: 400 15px/1.55 var(--f-text); letter-spacing: 0; } /* ---------------------------------------------------------------- video: 16:9, the frame reserved before the player loads (no layout shift) */ .sd-ef .sd-entry .wp-block-embed { margin: 0 0 2em; } .sd-ef .sd-entry .wp-block-embed.is-type-video .wp-block-embed__wrapper:has(> iframe) { position: relative; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line); } .sd-ef .sd-entry .wp-block-embed.is-type-video .wp-block-embed__wrapper > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* the Prezi walkthrough (its own responsive wrapper, styled by a dropped legacy snippet) */ .sd-ef .sd-entry .sd-resp-container { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line); } .sd-ef .sd-entry .sd-resp-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Acuity's booking frame: a light page of its own; its script sets the height after load, the frame keeps room for it */ .sd-ef .sd-entry iframe[src*="acuityscheduling.com"] { display: block; width: 100%; min-height: 640px; background: var(--panel); border: 1px solid var(--line); } /* ---------------------------------------------------------------- Formidable forms on the dark ground (CSS only) Selectors outrank Formidable's generated ones (.frm_style_X.with_frm_style input[type=text]: 0,3,1) and its few !important rules; the labels Formidable hides (label position "none" or "hidden") stay hidden. */ .sd-ef .frm_forms.with_frm_style { margin: 0 0 2em; text-align: left; color: var(--c-copy); font-family: var(--f-text); } .sd-ef .frm_forms.with_frm_style .frm_form_field.form-field { margin-bottom: 18px; } .sd-ef .frm_forms.with_frm_style .frm_primary_label { margin: 0 0 6px; padding: 0; font: 600 14.5px/1.45 var(--f-text) !important; color: var(--text) !important; } .sd-ef .frm_forms.with_frm_style .frm_required { color: var(--accent) !important; font-weight: 500; } /* labels Formidable hides with its "hidden" position keep no empty row (stacked First / Last Name on a phone); still read aloud */ .sd-ef .frm_forms.with_frm_style .frm_hidden_container > .frm_primary_label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; visibility: visible; } .sd-ef .frm_forms.with_frm_style .frm_description, .sd-ef .frm_forms.with_frm_style .frm_form_title + p { font: 400 13px/1.5 var(--f-text) !important; color: var(--mute) !important; } .sd-ef .frm_forms.with_frm_style :is(input:not([type=hidden], [type=submit], [type=button], [type=checkbox], [type=radio], [type=file], [type=range]), select, textarea) { display: block; width: 100% !important; max-width: 100%; min-height: 46px; margin: 0; padding: 11px 14px !important; font: 400 16px/1.4 var(--f-text) !important; color: var(--text) !important; background: var(--panel) !important; border: 1px solid var(--line-2) !important; border-radius: 0 !important; box-shadow: none !important; outline: 0; transition: border-color .15s, background-color .15s, box-shadow .15s; } .sd-ef .frm_forms.with_frm_style textarea { min-height: 132px; resize: vertical; } .sd-ef .frm_forms.with_frm_style select { appearance: none; padding-right: 40px !important; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%) !important; background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50% !important; background-size: 5px 5px !important; background-repeat: no-repeat !important; } .sd-ef .frm_forms.with_frm_style :is(input, select, textarea)::placeholder { color: var(--faint); opacity: 1; } .sd-ef .frm_forms.with_frm_style :is(input, select, textarea):hover { border-color: var(--faint) !important; } .sd-ef .frm_forms.with_frm_style :is(input, select, textarea):focus, .sd-ef .frm_forms.with_frm_style :is(input, select, textarea):focus-visible { border-color: var(--accent) !important; background-color: var(--raise) !important; box-shadow: 0 0 0 1px var(--accent) !important; outline: 0; } /* choices: one per line, the input drawn in the theme's accent */ .sd-ef .frm_forms.with_frm_style .frm_opt_container { display: grid; gap: 2px; } .sd-ef .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) { display: block; margin: 0; } .sd-ef .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label { display: flex !important; align-items: flex-start; gap: 10px; padding: 8px 10px; font: 400 15px/1.45 var(--f-text) !important; color: var(--c-copy) !important; border: 1px solid transparent; cursor: pointer; } .sd-ef .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label:hover { background: var(--panel); border-color: var(--line); } .sd-ef .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label:has(input:checked) { color: var(--text) !important; border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .sd-ef .frm_forms.with_frm_style :is(input[type=radio], input[type=checkbox]) { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); } /* errors: Formidable adds .frm_blank_field to the field and prints .frm_error under it (and .frm_error_style on top) */ .sd-ef .frm_forms.with_frm_style .frm_blank_field :is(input, select, textarea) { border-color: #FF6B6B !important; box-shadow: 0 0 0 1px #FF6B6B !important; } .sd-ef .frm_forms.with_frm_style .frm_blank_field .frm_primary_label { color: #FF9C9C !important; } .sd-ef .frm_forms.with_frm_style :is(.frm_error, .frm_limit_error) { margin-top: 6px; padding: 0; font: 500 13px/1.45 var(--f-text) !important; color: #FF9C9C !important; background: none !important; } .sd-ef .frm_forms.with_frm_style .frm_error_style { margin: 0 0 20px; padding: 14px 16px; font: 500 14.5px/1.5 var(--f-text) !important; color: var(--text) !important; background: color-mix(in srgb, #FF6B6B 12%, var(--panel)) !important; border: 1px solid color-mix(in srgb, #FF6B6B 55%, transparent) !important; border-left-width: 2px !important; border-radius: 0 !important; } .sd-ef .frm_forms.with_frm_style .frm_message, .sd-ef .frm_message { margin: 0 0 20px; padding: 18px 20px !important; font: 500 16px/1.55 var(--f-text) !important; color: var(--text) !important; background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent) !important; border-radius: 0 !important; text-align: left; } /* the submit button: the theme's primary button */ .sd-ef .frm_forms.with_frm_style .frm_submit { margin-top: 6px; } .sd-ef .frm_forms.with_frm_style :is(input[type=submit], .frm_submit input[type=button], .frm_submit button, .frm_button_submit) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 48px; margin: 0; padding: 0 28px !important; font: 600 15px/1 var(--f-text) !important; letter-spacing: .01em; text-transform: none; cursor: pointer; color: var(--btn-ink) !important; background: var(--btn-fill) !important; border: 1px solid var(--btn-fill) !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } .sd-ef .frm_forms.with_frm_style :is(input[type=submit], .frm_submit button, .frm_button_submit):is(:hover, :focus-visible) { background: var(--btn-hover) !important; border-color: var(--btn-hover) !important; color: var(--btn-ink) !important; } .sd-ef .frm_forms.with_frm_style :is(input[type=submit], .frm_submit button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sd-ef .frm_forms.with_frm_style .frm_ajax_loading { vertical-align: middle; margin-left: 10px; } /* file uploads (Formidable's dropzone), section headings, page progress */ .sd-ef .frm_forms.with_frm_style .frm_dropzone { background: var(--panel) !important; border: 1px dashed var(--line-2) !important; border-radius: 0 !important; color: var(--mute) !important; } .sd-ef .frm_forms.with_frm_style .frm_dropzone .dz-message { background: transparent !important; color: var(--text) !important; border-color: var(--line-2) !important; border-radius: 0 !important; } .sd-ef .frm_forms.with_frm_style .frm_section_heading h3 { color: var(--text) !important; border-color: var(--line) !important; font: 600 1.125rem/1.35 var(--f-text) !important; } .sd-ef .frm_forms.with_frm_style :is(.frm_rootline_single input, .frm_page_bar input) { background: var(--panel) !important; color: var(--text) !important; border-color: var(--line-2) !important; } /* the security check (reCAPTCHA v2) is Google's own white frame: it sits on the form like a card */ .sd-ef .frm_forms.with_frm_style .g-recaptcha { max-width: 100%; overflow: hidden; } @media (max-width: 600px) { .sd-ef .frm_forms .frm_fields_container > :is(.frm_half, .frm_third, .frm_fourth, .frm_two_thirds, .frm_three_fourths) { grid-column: span 12 / span 12 !important; } .sd-ef .frm_forms.with_frm_style .frm_submit :is(input, button) { width: 100%; } } /* ---------------------------------------------------------------- the Free Trial form (/free-trial/: plain HTML; snippet 36159 runs it) Its look came from Bridge's options CSS, which leaves with Bridge: the fields and the button, the full-screen loader the snippet adds while it signs the visitor up, and the error bar it slides in from the top. */ .sd-ef .free_trial_form_section { padding-inline: 0; } .sd-ef .sd-entry > .wp-block-group .free_trial_form_section h1.sd-fnt-01 { max-width: 24ch; margin: 0 auto 28px; font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.2 var(--f-display); letter-spacing: -.01em; text-align: center; } .sd-ef .front_signup_form { display: flex; gap: 10px; width: 100%; max-width: 46rem; margin: 0 auto; padding: 14px; background: var(--panel); border: 1px solid var(--line-2); border-top: 1px solid var(--accent); } .sd-ef .front_signup_form .front_signup_field { flex: 1 1 0; min-width: 0; height: 52px; margin: 0; padding: 0 16px; font: 400 16px/1 var(--f-text); text-align: left; color: var(--text); background: var(--bg); border: 1px solid var(--line-2); border-radius: 0; box-shadow: none; outline: 0; transition: border-color .15s, box-shadow .15s; } .sd-ef .front_signup_form .front_signup_field::placeholder { color: var(--faint); opacity: 1; } .sd-ef .front_signup_form .front_signup_field:hover { border-color: var(--faint); } .sd-ef .front_signup_form .front_signup_field:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .sd-ef .front_signup_form .butnhomesd { flex: none; height: 52px; margin: 0; padding: 0 26px; font: 600 16px/1 var(--f-text); letter-spacing: .01em; color: var(--btn-ink); background: var(--btn-fill); border: 1px solid var(--btn-fill); border-radius: 0; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .sd-ef .front_signup_form .butnhomesd:is(:hover, :focus-visible) { color: var(--btn-ink); background: var(--btn-hover); border-color: var(--btn-hover); } .sd-ef .front_signup_form .butnhomesd:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sd-ef .front_signup_form .butnhomesd[disabled] { opacity: .6; cursor: progress; } @media (max-width: 700px) { .sd-ef .front_signup_form { flex-direction: column; } .sd-ef .front_signup_form .front_signup_field, .sd-ef .front_signup_form .butnhomesd { flex: none; width: 100%; } } .sd-ef .sd-entry .free_trial_no_cc { margin: 22px 0 0; font: 500 13px/1.4 var(--f-num); letter-spacing: .02em; color: var(--accent); } .sd-ef .sd-entry .free_trial_fullyfunctional { margin: 6px 0 0 !important; font: 500 13px/1.4 var(--f-num); letter-spacing: .02em; color: var(--mute); } .sd-ef .sd-entry .free_trial_details { color: var(--mute); } .sd-ef .sd-entry .free_trial_details[style*="font-size: 10px"] { font-size: 12.5px !important; color: var(--faint); } /* the Turnstile check the "sd-shield" script adds under the form keeps its own (light) frame */ .sd-ef .sd-shield-widget { margin: 18px auto 0; } /* added to by snippet 36159, outside the content: the loader and the error bar */ .sd_loader_background { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(11, 14, 16, .86); } .sd_loader_background .qode-lazy-preloader svg { display: block; width: 64px; height: 64px; animation: sd-ef-spin 1s linear infinite; } .sd_loader_background .qode-lazy-preloader svg circle { fill: none; stroke: var(--accent) !important; stroke-dasharray: 160 60; } @keyframes sd-ef-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sd_loader_background .qode-lazy-preloader svg { animation-duration: 3s; } } .wpsdr_error_message { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 2147483001; padding: 14px var(--sd-gutter); font: 600 15px/1.4 var(--f-text); text-align: center; color: #fff; background: #B3261E; border-bottom: 1px solid #FF6B6B; cursor: pointer; } /* ---------------------------------------------------------------- the other hand-written forms /newsletter/ (Sendy subscribe form; its snippet's CSS is dropped with the rest) and /high-capacity-send/ (a form with its own