/* Step 2 of the enquiry form: pick a time. * * Every value here is a token already declared on the page (--deep, --linen, * --banana, --hair, --ls-label ...). Nothing is a new color. If this file is * ever loaded without index.html's :root block it will render unstyled rather * than off-brand, which is the failure worth having. */ /* The enquiry panel is normally the narrow right column of a two column grid. A calendar cannot live in that width, so the moment scheduling starts the section goes to one column and the intro stack steps aside; the panel keeps its own outline, so this reads as the panel growing rather than the page changing. Reversed the instant "Edit details" is pressed. */ #contact.is-scheduling .form-wrap{grid-template-columns:1fr} /* .stack is display:flex, and an author rule beats the browser's own [hidden]. Without this the intro column stays on screen, hidden or not. */ .form-intro[hidden]{display:none} #contact.is-scheduling .form-panel{min-height:0} .schedule{display:flex;flex-direction:column;gap:1.4rem} .schedule[hidden]{display:none} .schedule h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:0} .schedule h3{margin:0} .schedule > .lede{max-width:46ch} /* The heading is focused on arrival, so it must show a ring like anything else that takes focus, but only from the keyboard. */ .schedule h2:focus-visible,.sched-done h3:focus-visible{ outline:2px solid var(--banana);outline-offset:6px;border-radius:2px; } /* ── what you told us ───────────────────────────────────────────────── Read back rather than summarised: a person about to give up a half hour of their Saturday should be able to see the address they typed before they commit to it, and fix it without losing the rest. */ .sched-recap{ border:1px solid var(--hair-2);border-radius:3px; padding:clamp(1rem,2.4vw,1.5rem); display:flex;flex-direction:column;gap:1.1rem; } .sched-recap-head{ font-size:.7rem;letter-spacing:var(--ls-label);text-transform:uppercase; color:rgba(239,230,210,.55); } .sched-dl{ margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem; font-size:.95rem;align-items:baseline; } .sched-dl dt{ font-size:.68rem;letter-spacing:var(--ls-label);text-transform:uppercase; color:rgba(239,230,210,.5);white-space:nowrap; } /* min-width:0 + overflow-wrap: a pasted address with no spaces in it must wrap rather than push the grid wider than the phone. */ .sched-dl dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--linen)} /* ── status and the escape hatches ────────────────────────────────── */ .sched-status{font-size:.9rem;color:rgba(239,230,210,.7)} .sched-status:empty{display:none} .sched-status.is-warn{color:var(--coral)} .sched-alt{font-size:.9rem;color:rgba(239,230,210,.7)} .sched-alt[hidden]{display:none} .sched-alt a,.sched-note a{border-bottom:1px solid var(--banana);color:var(--linen)} .sched-alt a:hover,.sched-note a:hover{color:var(--banana)} /* Calendly auto-resizes its container as each booking step changes. */ .sched-embed{ position:relative;width:100%;min-width:0;overflow-x:hidden; min-height:760px;border:1px solid var(--hair-2);border-radius:3px; background:var(--deep); } .sched-embed[hidden]{display:none} .sched-embed iframe{width:100%;border:0;display:block} /* The skeleton sits under the iframe and is simply covered when the widget paints, so there is no flash between "loading" ending and content starting. */ .sched-skeleton{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; gap:.8rem;color:rgba(239,230,210,.5);font-size:.85rem; letter-spacing:var(--ls-label);text-transform:uppercase; } .sched-embed.is-ready .sched-skeleton{display:none} .sched-spinner{ width:14px;height:14px;border-radius:50%; border:2px solid rgba(239,230,210,.25);border-top-color:var(--banana); animation:sched-spin 1s linear infinite; } @keyframes sched-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.sched-spinner{animation:none}} /* ── booked ───────────────────────────────────────────────────────── */ .sched-done{ display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center; padding:clamp(1.5rem,4vw,3rem) 0; } .sched-done[hidden]{display:none} .sched-done .lede{max-width:36ch} .sched-tick{ width:54px;height:54px;border-radius:50%; border:1px solid var(--banana);color:var(--banana); display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1; } .sched-note{font-size:.88rem;color:rgba(239,230,210,.6);max-width:40ch} @media(max-width:620px){ /* Taller, not shorter: Calendly stacks the month and the time list on a narrow viewport, so the mobile widget needs more room than the desktop one, which is the opposite of the usual instinct. */ .sched-embed{min-height:0} .sched-dl{grid-template-columns:1fr;gap:.15rem} .sched-dl dd{margin-bottom:.7rem} .sched-edit{align-self:stretch;justify-content:center} } /* Keep the review and calendar in view together on larger screens. */ #schedule-body{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:1.4rem 2rem;align-items:start} /* Giving this element a display of its own means the browser's own [hidden] rule no longer applies to it, and the booking step stayed on screen behind the confirmation. Every display rule below is scoped by an id, so the guard has to be too. */ #schedule-body[hidden]{display:none} #schedule-body>.eyebrow,#schedule-body>h2,#schedule-body>.lede{grid-column:1/-1;margin:0} #schedule-body>.sched-recap{grid-column:1;grid-row:4 / span 3} #sched-embed,#sched-status,#sched-alt{grid-column:2} /* .btn is only ever put on links elsewhere on this page, so it never had to turn off a