/* ========================================================================================================== ELLIS STERLING v2, THE BOOKING FORM. Loaded by /consultation (after consultation.css's siblings, from its ) and, on every other page, by site.js block 5 (the floating button and its dialog). Script: assets/js/booking.js. Spec: _plan/CONSULTATION-SPEC.md sections 17 and 18 (18: the company form only, no switch, since 2026-10-16). Colours are site.css tokens and the grounds' --fg, --fg2, --rule, --mark, with one exception: the stand-in (6) is a picture of iClosed's own widget, so it carries iClosed's neutral greys and white, named once at its top. It is placeholder-only and make_dist.py --launch leaves it out of the deploy copy. Cache key: V in site.js block 5 (every other page) and the ?v= on consultation/index.html, booked.html and not-yet.html; change all of them together (changing V re-keys site.js on every page too: site.js header). Order: 1. the block and its column 2. the switch (only with two branches in CONFIG) 3. the lines around the form 4. the slot and its states 5. iClosed's own markup 6. the stand-in 7. the floating button 8. the dialog 9. print ========================================================================================================== */ /* 1. THE BLOCK (.bk) is a container, so the form follows the width it has, not the window: iClosed's inline widget is one stacked card that fills its frame under 520px and centres itself at 480px from 520 to 899px (a 63px empty band each side at Accelerated), and becomes a two-column card (form beside calendar, 807px, centred) from 900px. So under 900px everything in the block (the column, .bk-col, and the slot) stops at 519px and starts on the block's left edge: the card then fills the slot, and its edges are the switch's and the privacy note's. From 900px (the dialog on a laptop) the slot takes the whole width, iClosed centres its 807px card in it, and the column is that 807px, centred too, so the title, the switch and the note line up with the card. */ .bk{container:bk/inline-size} .bk-col,.bk-slot{max-width:519px} @container bk (min-width:900px){ .bk-col{max-width:807px;margin-inline:auto} .bk-slot{max-width:none} } .bk [hidden]{display:none!important} /* 2. THE SWITCH (.bk-switch), kept for the personal form's return: shown only while CONFIG.branches in booking.js lists two forms (today it lists the company form alone, so no switch is rendered, on the page or in the dialog). Who the call is for, as two text tabs, the Insights hub's topic row (lab-c.css): Source Sans 3 15px in the second tone; the chosen one in full colour at 600 with a 2px bar in the ground's bronze on the row's hairline, under the word, never through it. Each label reserves its 600 width (::before), so choosing never moves the other. 44px tall. With JS off (the page's HTML) they are two links to the hosted booking pages, with neither marked; the inline script in /consultation's head marks the one the address asks for before the first paint (data-bk-first), so nothing changes when booking.js makes them tabs; if booking.js never mounts (blocked or failed), that script takes the mark away again once the page has loaded, and they read as links. The bar moves only once the block is ready (.bk-ready), never on arrival. The one departure from the hub's row: the tab not chosen is in full colour (400), not the second tone, because the small print under the switch is in the second tone at almost its size, and both tabs must read as choices, not as a caption. Each tab has 6px of room inside each side (cancelled by its margin, so the words keep the column's edge and their 32px gap), so the focus ring never touches a letter; the bar stays under the word. The label's span is first in the tab's grid (order), so the tab's baseline is its words' (the dialog's row aligns the "both" line on it, 3), not the zero-height width reserver's. */ .bk-switch{display:flex;gap:32px;border-bottom:1px solid var(--rule)} .bk-tab{position:relative;display:inline-grid;flex-shrink:0;margin:0 -6px;padding:12px 6px 13px;border:0;background:none; font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.3;letter-spacing:.01em;color:var(--fg); white-space:nowrap;cursor:pointer;text-decoration:none;transition:color .16s var(--out),opacity .1s var(--out)} .bk-tab::before{content:attr(data-name);grid-area:1/1;height:0;overflow:hidden;visibility:hidden;font-weight:600} .bk-tab>span{grid-area:1/1;order:-1} .bk-tab::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:2px;background:var(--mark);transform:scaleX(0);transform-origin:left} .bk-ready .bk-tab::after{transition:transform .2s var(--out)} .bk-tab[aria-selected="true"], :root[data-bk-first="business"] .bk-switch:not([role]) .bk-tab[data-event="business"], :root[data-bk-first="personal"] .bk-switch:not([role]) .bk-tab[data-event="personal"]{color:var(--fg);font-weight:600} .bk-tab[aria-selected="true"]::after, :root[data-bk-first="business"] .bk-switch:not([role]) .bk-tab[data-event="business"]::after, :root[data-bk-first="personal"] .bk-switch:not([role]) .bk-tab[data-event="personal"]::after{transform:none} /* with JS off (no data-bk-first: the head script did not run) they are links to the hosted pages, so they look it */ :root:not([data-bk-first]) .bk-switch:not([role]) .bk-tab>span{text-decoration-line:underline;text-decoration-thickness:1px; text-underline-offset:.2em;text-decoration-color:var(--mark);color:var(--fg)} .bk-tab:focus-visible{outline-offset:-2px} .bk-tab:active{opacity:.72} /* hover on the tab not chosen: the site's hover for a text control (the nav's links, Menu, Close), an underline in the text's own colour, since the colour itself no longer changes */ @media (hover:hover) and (pointer:fine){.bk-tab:not([aria-selected="true"]):hover>span{text-decoration-line:underline; text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:currentColor}} /* Windows high contrast: the bar is drawn in the system's selection colour, not forced to the page's */ @media (forced-colors:active){.bk-tab::after{forced-color-adjust:none;background:Highlight}} /* 3. THE LINES AROUND THE FORM. The privacy note (pending counsel; one line since 2026-10-16) sits directly above the form, 8px, with nothing between them (the stand-in's own line is under the card, 6): iClosed saves what is typed before Continue, so the note is read before typing. In the dialog it follows the line about the call, 16px (a new group: what happens to what you type). On /consultation it sits outside the block, on the head grid's own row (consultation.css 2), so the form's card and the panel beside it start level. Under the form, the guest line and the hosted link, 16px. All small text, wrapping as prose. With two branches: under the tabs the one line for "both" (8px, the row's own padding above it), then the note, 8px; from 900px (the dialog on a laptop) the switch and that line share one row (.bk-switchrow), the line at its right end on the tabs' baseline (2: the tab's baseline is its words') and the hairline across the whole row. */ .bk-help{margin-top:8px} @container bk (min-width:900px){ .bk-switchrow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--rule)} .bk-switchrow .bk-switch{border-bottom:0} .bk-switchrow .bk-help{margin-top:0;text-align:right} } .bk-privacy{margin-top:8px} .bk-dlg-line+.bk-privacy{margin-top:16px} .bk-after{margin-top:16px} .bk-help,.bk-after,.bk-fallback .t-small{text-wrap:pretty} .bk-privacy{text-wrap:balance} .bk-nojs{margin-top:12px;text-wrap:pretty} /* The line for visitors without the form (the one hosted link and the email): in the page's HTML (not in