/* ============================================================ Fourdots — same-page (in-modal) apply → book → confirm flow. Pairs with /apply-book.js. Opt a page in by adding to : class="… apply-book--inline" data-apply-book-vertical="main" (calendar routing key) data-apply-book-confirmation="/confirmation" The page must also carry the two extra step blocks inside .modal__panel but OUTSIDE

— see apply-book.js header for the exact markup. They live outside the form deliberately: script.js builds its step navigation from `form.querySelectorAll('.step:not(.step--success)')`, so anything with .step inside the form becomes a navigable form step. ============================================================ */ /* --- Modal footer + form body hide while an extra step is showing --- */ body.is-cal-step .modal__footer, body.is-booked-step .modal__footer, body.is-cal-step .modal__form, body.is-booked-step .modal__form { display: none; } .modal-extra-step { padding: 24px 28px 28px; } .modal-extra-step[hidden] { display: none; } @media (max-width: 720px) { .modal-extra-step { padding: 20px 20px 24px; } } /* --- Calendar --------------------------------------------------------- */ .ab-cal__legend { font-family: var(--display, 'Inter', sans-serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink, #fff); margin: 0 0 6px 0; } .ab-cal__help { font-size: 13.5px; color: var(--ink-dim, rgba(255,255,255,0.72)); margin: 0 0 18px 0; } /* --- Presenter card + meta row (injected by apply-book.js) ------------ Shows who the visitor is meeting, plus duration / platform / timezone, before they pick a time. */ .ab-cal__host { display: flex; align-items: center; gap: 12px; margin: 0 0 12px 0; } .ab-cal__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line, rgba(255,255,255,0.10)); background: #0d0d10; } .ab-cal__host-text { min-width: 0; } .ab-cal__host-name { font-size: 14.5px; font-weight: 700; color: var(--ink, #fff); margin: 0; } .ab-cal__host-name span { color: var(--accent, #7851ed); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 6px; } .ab-cal__host-sub { font-size: 12.5px; color: var(--ink-dim, rgba(255,255,255,0.72)); margin: 2px 0 0 0; } .ab-cal__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 0 14px 0; margin: 0 0 4px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,0.10)); font-size: 12px; color: var(--ink-dim, rgba(255,255,255,0.72)); } .ab-cal__meta span { display: inline-flex; align-items: center; gap: 5px; } .ab-cal__meta svg { opacity: 0.7; flex: 0 0 auto; } .ab-cal__month { font-family: var(--display, 'Inter', sans-serif); font-size: 15px; font-weight: 700; color: var(--ink, #fff); margin: 14px 0 12px 0; } .ab-cal__days { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin: 0 0 16px 0; } .ab-cal__day { border: 1px solid var(--line, rgba(255,255,255,0.10)); border-radius: 12px; padding: 10px 6px 8px; background: transparent; color: var(--ink, #fff); cursor: pointer; text-align: center; font: inherit; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease; } .ab-cal__day:hover { background: rgba(255,255,255,0.04); border-color: var(--line-strong, rgba(255,255,255,0.18)); } .ab-cal__day.is-selected { background: rgba(120,81,237,0.14); background: color-mix(in srgb, var(--accent, #7851ed) 14%, transparent); border-color: var(--accent, #7851ed); box-shadow: 0 0 0 1px var(--accent, #7851ed); } .ab-cal__day-dow { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim, rgba(255,255,255,0.72)); font-weight: 600; } .ab-cal__day-num { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--ink, #fff); margin: 4px 0 2px 0; } .ab-cal__day-mon { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim, rgba(255,255,255,0.72)); font-weight: 500; } .ab-cal__slots-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 600; color: var(--ink, #fff); margin: 0 0 10px 0; } .ab-cal__tz { font-size: 11.5px; font-weight: 500; color: var(--ink-dim, rgba(255,255,255,0.72)); } .ab-cal__slots { display: grid; /* 116px min so "12:00 PM" never breaks onto a second line. */ grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; /* min-height reserves space so the modal doesn't jump between the loading state and rendered slots. align-content:start keeps the rows their natural height inside that reserved box — without it a single remaining slot stretched to fill all 96px and rendered as a huge button. */ min-height: 96px; align-content: start; } .ab-cal__slot { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line, rgba(255,255,255,0.10)); border-radius: 10px; padding: 9px 10px; background: transparent; color: var(--ink, #fff); cursor: pointer; font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease; } .ab-cal__slot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #7851ed); box-shadow: 0 0 6px color-mix(in srgb, var(--accent, #7851ed) 60%, transparent); } .ab-cal__slot:hover:not([disabled]) { background: color-mix(in srgb, var(--accent, #7851ed) 8%, transparent); border-color: var(--accent, #7851ed); } .ab-cal__slot[disabled] { opacity: 0.45; cursor: default; } .ab-cal__empty { grid-column: 1 / -1; font-size: 13px; text-align: center; padding: 30px 0; color: var(--ink-dim, rgba(255,255,255,0.72)); } /* --- Booking-in-flight state ----------------------------------------- GHL's appointment-create call takes ~3–4s. Without visible progress that reads as a hang, so replace the slot grid with an explicit spinner + reassurance for the duration. */ .ab-booking { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 0 24px; text-align: center; } .ab-booking__spinner { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.14); border-top-color: var(--accent, #7851ed); animation: ab-spin .8s linear infinite; } @keyframes ab-spin { to { transform: rotate(360deg); } } .ab-booking__label { font-size: 14.5px; font-weight: 600; color: var(--ink, #fff); margin: 0; } .ab-booking__sub { font-size: 12.5px; color: var(--ink-dim, rgba(255,255,255,0.72)); margin: 0; max-width: 32ch; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .ab-booking__spinner { animation-duration: 2.4s; } } /* --- Booked state ----------------------------------------------------- */ .ab-booked { text-align: center; padding: 12px 0 8px; } .ab-booked__check { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: rgba(120,81,237,0.14); background: color-mix(in srgb, var(--accent, #7851ed) 14%, transparent); border: 1px solid rgba(120,81,237,0.4); border-color: color-mix(in srgb, var(--accent, #7851ed) 40%, transparent); display: grid; place-items: center; color: var(--accent, #7851ed); } .ab-booked__eyebrow { font-family: var(--display, 'Inter', sans-serif); font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, #7851ed); margin: 0 0 8px 0; } .ab-booked__title { font-family: var(--display, 'Inter', sans-serif); font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink, #fff); margin: 0 0 10px 0; } .ab-booked__when { font-size: 15px; font-weight: 500; color: var(--ink, #fff); margin: 0 0 14px 0; } .ab-booked__note { font-size: 12.5px; color: var(--ink-dim, rgba(255,255,255,0.72)); margin: 0; } /* --- Confirmation page: "what happens next" --------------------------- Rendered by /apply-book-confirmation.js in already-booked mode, in place of the (hidden) GHL booking widget. */ .ab-next { max-width: 640px; margin: 8px auto 0; padding: 28px 26px 26px; background: rgba(255,255,255,0.02); border: 1px solid var(--line, rgba(255,255,255,0.10)); border-radius: 18px; text-align: left; } .ab-next__title { font-family: var(--display, 'Inter', sans-serif); font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; letter-spacing: -0.015em; color: var(--ink, #fff); margin: 0 0 16px 0; } .ab-next__list { margin: 0 0 22px 0; padding: 0 0 0 20px; display: grid; gap: 12px; } .ab-next__list li { font-size: 14.5px; line-height: 1.6; color: var(--ink-dim, rgba(255,255,255,0.72)); } .ab-next__list strong { color: var(--ink, #fff); font-weight: 600; } .ab-next__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px 0; } .ab-next__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--accent, #7851ed); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; transition: transform .15s ease, box-shadow .18s ease, opacity .15s ease; } .ab-next__cta:hover { transform: translateY(-1px); } .ab-next__cta--ghost { background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,0.18)); color: var(--ink, #fff); font-weight: 600; } .ab-next__cta--ghost:hover { background: rgba(255,255,255,0.05); } .ab-next__note { font-size: 12.5px; line-height: 1.55; color: var(--ink-dim, rgba(255,255,255,0.72)); margin: 0; } @media (max-width: 600px) { .ab-next { padding: 22px 18px 20px; border-radius: 14px; } .ab-next__actions .ab-next__cta { flex: 1 1 100%; justify-content: center; } }