/* "Match my theme" mode. * * Layout only. No colours, borders, radii, fonts or button styling — those all * come from the theme, which is the point: a form that carries the plugin's * look sits on the page as an obvious bolt-on, however tidy it is. * * What stays here is the handful of things a theme cannot know about: the * two-column rows, the honeypot that has to be off-screen to work, and the * error and success states, which need to read as such even when the theme * has no opinion about them. */ .bfld-form-wrap { margin: 0 0 1.5em; /* Everything inside sizes from `inherit`, so a form dropped into a section the theme has scaled up inherits that scale and renders at twice the size of the site's own controls. One reset here puts the whole form back on the site's base size without touching a single colour or font. */ font-size: 1rem; } .bfld-rows { display: flex; flex-wrap: wrap; gap: 1em; } .bfld-field { flex: 1 1 100%; min-width: 0; } .bfld-field.bfld-half { flex: 1 1 calc(50% - .5em); } @media (max-width: 560px) { .bfld-field.bfld-half { flex: 1 1 100%; } } .bfld-label { display: block; margin-bottom: .35em; } .bfld-labels-placeholder .bfld-label { position: absolute; left: -9999px; } /* Themes style inputs but almost never give them a width, and a 20-character default box inside a flex row looks broken. */ .bfld-form :is(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=url], select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; } .bfld-form textarea { resize: vertical; } .bfld-choices { display: flex; flex-wrap: wrap; gap: .5em 1.2em; } .bfld-choice { display: flex; align-items: flex-start; gap: .45em; } .bfld-choice input { width: auto; margin-top: .25em; } .bfld-help { display: block; margin-top: .3em; opacity: .75; font-size: .85em; } .bfld-error { display: none; margin-top: .3em; color: #d33; font-size: .85em; } .bfld-field.has-error .bfld-error { display: block; } /* reCAPTCHA v2 box, above the buttons. */ .bfld-captcha { margin: .9em 0 .1em; } .bfld-recaptcha { display: inline-block; max-width: 100%; border-radius: 4px; } .bfld-captcha.has-error .bfld-recaptcha { box-shadow: 0 0 0 2px #d33; } /* Slide puzzle. Lines and tints from the theme's text colour. */ .bfld-pz-box { max-width: 340px; padding: .6em; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .8em; } .bfld-pz-stage { position: relative; aspect-ratio: 320 / 150; border-radius: .5em; overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); } .bfld-pz-img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; transition: opacity .2s; } .bfld-pz-img:not([src]) { visibility: hidden; } .bfld-pz-piece { position: absolute; left: 0; top: 30%; width: 13.75%; aspect-ratio: 1; border-radius: 3px; background: currentColor; box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0, 0, 0, .28); } .bfld-pz-done { position: absolute; inset: 0; display: none; place-items: center; background: rgba(22, 163, 74, .22); } .bfld-pz-done span { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #16a34a; color: #fff; font-size: 1.1em; } .bfld-pz-track { position: relative; height: 2.6em; margin-top: .6em; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 1.3em; overflow: hidden; touch-action: none; user-select: none; } .bfld-pz-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, currentColor 10%, transparent); } .bfld-pz-hint { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 2.4em; opacity: .65; font-size: .82em; pointer-events: none; } .bfld-pz.is-moved .bfld-pz-hint { opacity: 0; } .bfld-form .bfld-pz-handle { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 2.8em; height: calc(100% - 6px); margin: 0; padding: 0; min-height: 0; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 1.2em; transform: translateY(-50%); line-height: 1; letter-spacing: normal; text-transform: none; background: #fff; color: inherit; cursor: grab; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); touch-action: none; } .bfld-form .bfld-pz-handle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .bfld-pz.is-dragging .bfld-pz-handle { cursor: grabbing; } .bfld-pz-tick { display: none; } .bfld-pz.is-snap .bfld-pz-handle, .bfld-pz.is-snap .bfld-pz-piece, .bfld-pz.is-snap .bfld-pz-fill { transition: left .25s ease, width .25s ease; } .bfld-pz.is-shake .bfld-pz-piece { animation: bfld-shake .3s; } .bfld-pz[data-state="loading"] .bfld-pz-piece, .bfld-pz[data-state="error"] .bfld-pz-piece, .bfld-pz[data-state="idle"] .bfld-pz-piece { visibility: hidden; } .bfld-pz[data-state="loading"] .bfld-pz-img { opacity: .35; } .bfld-pz[data-state="loading"] .bfld-pz-handle, .bfld-pz[data-state="error"] .bfld-pz-handle, .bfld-pz[data-state="checking"] .bfld-pz-handle { opacity: .55; cursor: default; } .bfld-pz[data-state="solved"] .bfld-pz-done { display: grid; } .bfld-pz[data-state="solved"] .bfld-pz-track { border-color: #86c79a; } .bfld-pz[data-state="solved"] .bfld-pz-fill { background: rgba(22, 163, 74, .14); } .bfld-form .bfld-pz[data-state="solved"] .bfld-pz-handle { background: #16a34a; border-color: #16a34a; color: #fff; cursor: default; } .bfld-pz[data-state="solved"] .bfld-pz-arrow { display: none; } .bfld-pz[data-state="solved"] .bfld-pz-tick { display: inline; } .bfld-pz-bar { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .5em; font-size: .8em; } .bfld-pz-note { opacity: .75; } .bfld-pz-note.is-ok { opacity: 1; color: #15803d; font-weight: 600; } .bfld-pz-note.is-bad { opacity: 1; color: #b3261e; } .bfld-form .bfld-pz-new { margin: 0; padding: 0; min-height: 0; border: 0; background: none; color: inherit; opacity: .7; font: inherit; letter-spacing: normal; text-transform: none; text-decoration: underline; cursor: pointer; box-shadow: none; } .bfld-pz[data-state="solved"] .bfld-pz-new { visibility: hidden; } .bfld-captcha.has-error .bfld-pz-box { border-color: #d33; } @keyframes bfld-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .bfld-field.has-error :is(input, select, textarea) { border-color: #d33; } .bfld-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .bfld-actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.2em; } .bfld-actions.bfld-align-right { justify-content: flex-end; } .bfld-actions.bfld-align-full { flex-direction: column; } /* The theme paints both buttons. The pair reads as primary and secondary because only the first carries the theme's `primary` class — fading the second one here would just make it look disabled. */ .bfld-align-full .bfld-submit { width: 100%; } .bfld-submit[disabled] { opacity: .6; cursor: default; } .bfld-msg { margin-top: .8em; } .bfld-msg.ok, .bfld-msg.err { padding: .7em .9em; border-radius: .3em; } .bfld-msg.ok { background: #e8f5e9; color: #1b5e20; } .bfld-msg.err { background: #fdecea; color: #b3261e; } /* ---- Book a meeting inside the form ---- Shapes and spacing only; lines and tints come from the theme's own text colour (currentColor), so the calendar sits in any palette. */ .bfld-fu { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; } .bfld-fu-opt { position: relative; display: flex; align-items: center; gap: .75em; padding: .75em .9em; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: .6em; cursor: pointer; } .bfld-fu-opt input { position: absolute; opacity: 0; pointer-events: none; } .bfld-fu-opt.is-on { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; } .bfld-fu-opt:focus-within { outline: 2px solid color-mix(in srgb, currentColor 35%, transparent); outline-offset: 2px; } .bfld-fu-ico { flex: 0 0 2.3em; height: 2.3em; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 8%, transparent); } .bfld-fu-ico svg { width: 1.15em; height: 1.15em; } .bfld-fu-txt strong { display: block; } .bfld-fu-txt small { display: block; opacity: .7; font-size: .82em; } /* Missing time: mark the chosen card and the calendar, not both choices. */ .bfld-field.has-error .bfld-fu-opt.is-on { border-color: #d33; box-shadow: inset 0 0 0 1px #d33; } .bfld-followup.has-error .bfld-ic { border-color: #d33; } .bfld-ic { margin-top: .8em; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .7em; overflow: hidden; } .bfld-ic[hidden], .bfld-ic-pick[hidden] { display: none !important; } /* Booking only: no choice cards above, so no gap either. */ .bfld-followup.is-only .bfld-ic { margin-top: 0; } .bfld-ic-head { padding: .7em 1em; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); } .bfld-ic-title { font-weight: 700; margin-right: .6em; } .bfld-ic-meta { opacity: .7; font-size: .85em; } .bfld-ic-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .bfld-ic.is-busy .bfld-ic-body { opacity: .5; pointer-events: none; } .bfld-ic-main { padding: .9em 1em; border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent); } .bfld-ic-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6em; } .bfld-ic-nav { min-width: 0; padding: .1em .6em; line-height: 1.4; background: none; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 50%; color: inherit; cursor: pointer; } .bfld-ic-nav[disabled] { opacity: .3; cursor: default; } .bfld-ic-dow, .bfld-ic-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25em; text-align: center; } .bfld-ic-dow span { font-size: .72em; opacity: .6; } .bfld-ic-day { aspect-ratio: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; font-size: .88em; cursor: pointer; } .bfld-ic-day[disabled] { opacity: .3; cursor: default; } .bfld-ic-day:not([disabled]) { font-weight: 700; background: color-mix(in srgb, currentColor 8%, transparent); } .bfld-ic-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px currentColor; } .bfld-ic-pad { visibility: hidden; } .bfld-ic-side { padding: .9em 1em; min-height: 11em; } .bfld-ic-when { margin: 0; font-weight: 700; } .bfld-ic-note { margin: 0 0 .6em; opacity: .7; font-size: .85em; } .bfld-ic-err { margin: 0; color: #b3261e; } .bfld-ic-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); gap: .45em; max-height: 15em; overflow-y: auto; padding: 2px; } .bfld-ic-slot { min-width: 0; padding: .5em .3em; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: .45em; background: none; color: inherit; font: inherit; font-size: .88em; cursor: pointer; } .bfld-ic-slot.is-on { box-shadow: inset 0 0 0 2px currentColor; font-weight: 700; } .bfld-ic-pick { display: flex; align-items: center; gap: .6em; padding: .6em 1em; font-weight: 700; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); } .bfld-ic-pick-ico { opacity: .8; } .bfld-ic-change { margin-left: auto; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: .85em; text-decoration: underline; cursor: pointer; } .bfld-booked { display: flex; align-items: flex-start; gap: .75em; } .bfld-booked-ico { flex: 0 0 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: #2e7d32; color: #fff; font-weight: 700; } .bfld-booked strong, .bfld-booked span { display: block; } .bfld-booked a { display: inline-block; margin-top: .3em; color: inherit; font-size: .9em; } /* Themes style every