/* ===========================================================================
brand.css — the customer header, and "Personalise this demo"
Loaded after the four style sheets, so it sets the STRUCTURE of the header
while each theme keeps its own colours, type and button treatment through
the --ui-* tokens it already publishes.
DESKTOP
┌──────────────────────────────────────────────────────────────┐
│ Personalise this demo Style [·][·][·][·] Text [A A A]│ utility row
├──────────────────────────────────────────────────────────────┤
│ [LOGO] Business name Log in · Admin console · My bookings │ main row
└──────────────────────────────────────────────────────────────┘
(space)
① Services ───────── ② Staff & time ───────── ③ Confirm progress
WHY THE LOGO IS IN THE FLOW NOW
Before 2026-09-15 the logo was .siteLogoLink, an empty anchor with a
background image positioned absolutely outside .container, and the toolbar
reserved padding-left to clear it. In Futuristic that reservation did not
account for the plate drawn round the logo, and the logo covered "Log in"
and "Show me the admin console" at 1440px. A real ![]()
as the first flex
item cannot overlap its neighbours by construction.
=========================================================================== */
/* ---------------------------------------------------------------------------
0. Hide the legacy logo on pages that carry the new brand block.
ui-core sets .siteLogoLink { display:block !important } below 1100px, so this
needs a heavier selector, not just !important.
--------------------------------------------------------------------------- */
html[data-ui] body .siteLogoLink { display: none !important; }
/* ---------------------------------------------------------------------------
1. The utility row — compact, secondary, above everything
--------------------------------------------------------------------------- */
html[data-ui] .uiUtility {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 20px;
padding-block: 10px;
border-bottom: 1px solid var(--ui-line, rgba(15, 23, 42, .10));
}
html[data-ui] .uiUtility__left,
html[data-ui] .uiUtility__right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
min-width: 0;
}
html[data-ui] .uiUtility__right { margin-left: auto; justify-content: flex-end; }
/* The controls are the same element in a quieter setting: smaller type and a
shorter hit area than on the old toolbar, still well above 24px. Three
classes of specificity so each theme's own .uiStyleBtn sizing yields to the
utility context without its colours, borders or selected state changing. */
html[data-ui] .uiUtility .uiControls { gap: 8px 18px; justify-content: flex-end; }
html[data-ui] .uiUtility .uiStyleBar__label { font-size: .75rem; }
html[data-ui] .uiUtility .uiStyleBtn {
min-height: 1.875rem;
padding: .3125rem .6875rem;
font-size: .75rem;
}
html[data-ui] .uiUtility .uiTextBtn { min-width: 1.875rem; justify-content: center; }
html[data-ui] .uiUtility .uiTextBtn[data-text-id="std"] .abbr { font-size: .75rem; }
html[data-ui] .uiUtility .uiTextBtn[data-text-id="lg"] .abbr { font-size: .875rem; }
html[data-ui] .uiUtility .uiTextBtn[data-text-id="xl"] .abbr { font-size: 1rem; }
/* "Personalise this demo" — obvious, but clearly optional: an outlined pill in
the theme accent, never a filled primary that competes with booking. */
html[data-ui] .uiPersonaliseBtn {
appearance: none;
display: inline-flex;
align-items: center;
gap: .4375rem;
min-height: 2rem;
padding: .3125rem .875rem;
border-radius: 999px;
border: 1.5px solid var(--ui-accent, #2563eb);
background: transparent;
color: var(--ui-accent, #2563eb);
font-family: var(--ui-font, inherit);
font-size: .8125rem;
font-weight: 700;
line-height: 1.1;
cursor: pointer;
white-space: nowrap;
transition: background var(--ui-speed, 160ms), color var(--ui-speed, 160ms), border-color var(--ui-speed, 160ms);
}
html[data-ui] .uiPersonaliseBtn::before {
content: "";
width: .875rem; height: .875rem;
flex: none;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
html[data-ui] .uiPersonaliseBtn:hover { background: color-mix(in srgb, var(--ui-accent, #2563eb) 12%, transparent); }
html[data-ui] .uiPersonaliseBtn:focus-visible { outline: none; box-shadow: var(--ui-ring, 0 0 0 3px rgba(37, 99, 235, .35)); }
html[data-ui] .uiPersonaliseBtn[aria-expanded="true"] { background: color-mix(in srgb, var(--ui-accent, #2563eb) 14%, transparent); }
/* The live personalisation badge — shows the preview is local, with a quick reset. */
html[data-ui] .uiPzBadge {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .75rem;
font-weight: 600;
color: var(--ui-ink-soft, #5b6b7b);
}
html[data-ui] .uiPzBadge[hidden] { display: none; }
html[data-ui] .uiPzBadge__reset {
appearance: none; border: 0; background: none; padding: .25rem .125rem;
font: inherit; font-weight: 700; color: var(--ui-accent, #2563eb);
text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
html[data-ui] .uiPzBadge__reset:focus-visible { outline: 2px solid var(--ui-accent, #2563eb); outline-offset: 2px; border-radius: 4px; }
/* ---------------------------------------------------------------------------
2. The main row — brand left, actions right, together
--------------------------------------------------------------------------- */
html[data-ui] .topbar,
html[data-ui] .container > .nav {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 14px 28px !important;
min-height: 0 !important;
padding-left: 0 !important;
padding-block: 18px !important;
margin-bottom: 18px;
}
/* my-bookings.html's header is a card (baseline .nav: 999px radius, 16px
padding). That pill shape suited one thin row; with a 76px logo, and wrapping
on a phone, a 999px radius curves in over the content. Keep the card, give it
room, and use a radius that suits a taller block. */
html[data-ui] .container > .nav { padding-inline: 22px !important; }
html[data-ui]:not([data-ui="futuristic"]) .container > .nav { border-radius: 24px !important; }
@media (max-width: 760px) {
html[data-ui] .container > .nav { padding-inline: 16px !important; }
html[data-ui]:not([data-ui="futuristic"]) .container > .nav { border-radius: 18px !important; }
}
/* The baseline stacks the phone .nav as a centred column; keep the brand and
the page label left-aligned, as on the booking page. */
@media (max-width: 560px) {
html[data-ui] .container > .nav { flex-direction: row !important; align-items: center !important; }
html[data-ui] .container > .nav .brand { flex: 1 1 100%; }
}
/* Futuristic draws the row as a panel, so it keeps horizontal padding. */
html[data-ui="futuristic"] .topbar,
html[data-ui="futuristic"] .container > .nav {
padding-inline: 1.25rem !important;
margin-top: 14px;
}
html[data-ui] .topbar .actions,
html[data-ui] .container > .nav .navlinks {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 10px;
margin-left: auto !important;
width: auto !important;
min-width: 0;
}
html[data-ui] .topbar .actions .btn,
html[data-ui] .container > .nav .navlinks .btn { flex: 0 0 auto !important; white-space: nowrap; }
/* my-bookings.html keeps its page label chip next to the business brand. */
html[data-ui] .container > .nav .brand { display: inline-flex; align-items: center; gap: 8px; }
/* The brand block */
:root {
--ui-brand-h: 76px;
--ui-brand-max-w: 320px;
}
html[data-ui] .uiBrand {
display: inline-flex;
align-items: center;
gap: 16px;
min-width: 0;
max-width: 100%;
color: var(--ui-ink, #0f172a);
text-decoration: none;
border-radius: 12px;
flex: 0 1 auto;
}
html[data-ui] a.uiBrand[href]:focus-visible { outline: none; box-shadow: var(--ui-ring, 0 0 0 3px rgba(37, 99, 235, .35)); }
html[data-ui] .uiBrand__mark { display: inline-flex; align-items: center; flex: none; }
html[data-ui] .uiBrand__logo {
display: block;
height: var(--ui-brand-h);
width: auto;
max-width: var(--ui-brand-max-w);
object-fit: contain;
object-position: left center;
}
html[data-ui] .uiBrand__logo[hidden],
html[data-ui] .uiBrand__monogram[hidden] { display: none; }
html[data-ui] .uiBrand__monogram {
display: inline-grid;
place-items: center;
width: calc(var(--ui-brand-h) * .82);
height: calc(var(--ui-brand-h) * .82);
border-radius: 18px;
background: var(--ui-accent, #2563eb);
color: var(--ui-accent-ink, #fff);
font-family: var(--ui-font, inherit);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: .02em;
box-shadow: var(--ui-shadow, 0 10px 26px rgba(15, 23, 42, .08));
}
html[data-ui] .uiBrand__name {
font-family: var(--ui-font, inherit);
font-weight: 800;
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: -.015em;
overflow-wrap: anywhere;
min-width: 0;
}
/* The default demo logo already IS a wordmark; its placeholder name is kept
for assistive technology but not printed beside it. A visitor's own name is
always shown. */
html[data-ui] .uiBrand:not(.has-name) .uiBrand__name {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* No flash of the default logo for a visitor who personalised: the pre-paint
bootstrap marks the page, and brand.js clears it once their logo is in. */
html[data-brand="custom"]:not([data-brand-ready]) .uiBrand,
html[data-brand="custom"]:not([data-brand-ready]) #uiWelcome { visibility: hidden; }
/* Futuristic: logos are usually dark artwork, which vanishes on its ground. */
html[data-ui="futuristic"] .uiBrand__logo {
background: rgba(255, 255, 255, .94);
border: 1px solid var(--edge, rgba(148, 197, 232, .16));
border-radius: 12px;
padding: 6px 10px;
box-sizing: content-box;
height: calc(var(--ui-brand-h) - 12px);
box-shadow: var(--hi, inset 0 1px 0 rgba(255, 255, 255, .06)), 0 6px 18px rgba(0, 0, 0, .35);
}
/* Signature: the header used to be sticky with the progress bar tucked under
it at a fixed 82px offset. The taller brand row makes that offset wrong at
every text size, so the progress bar alone keeps the sticky slot - which is
what Signature already did below 1100px and what the other styles do. */
html[data-ui="signature"] .topbar {
position: static !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent;
}
html[data-ui="signature"] .ab-progress { top: 0 !important; }
/* Welcome line, shown only for a personalised demo. */
html[data-ui] .uiWelcome {
margin: 0 0 6px;
font-family: var(--ui-font, inherit);
font-size: 1.375rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--ui-ink, #0f172a);
overflow-wrap: anywhere;
}
html[data-ui] .uiWelcome[hidden] { display: none; }
/* Comfortable space between the header and the progress indicator. */
html[data-ui] .topbar + .ab-progress { margin-top: 6px; }
/* ---------------------------------------------------------------------------
3. Narrower screens and larger text — deliberate wrapping
--------------------------------------------------------------------------- */
@media (max-width: 1100px) {
:root { --ui-brand-h: 68px; }
}
/* The actions stay together as one group; when the row cannot hold brand and
group side by side, the whole group moves to its own line, right-aligned. */
@media (max-width: 900px) {
:root { --ui-brand-h: 62px; --ui-brand-max-w: 260px; }
html[data-ui] .uiBrand__name { font-size: 1.3rem; }
}
@media (max-width: 760px) {
html[data-ui] .uiUtility { padding-block: 8px; }
html[data-ui] .uiUtility__right { margin-left: 0; width: 100%; justify-content: flex-start; }
html[data-ui] .uiUtility .uiControls { justify-content: flex-start; }
html[data-ui] .topbar,
html[data-ui] .container > .nav { padding-block: 14px !important; gap: 12px !important; }
html[data-ui] .uiBrand { flex: 1 1 100%; }
html[data-ui] .topbar .actions,
html[data-ui] .container > .nav .navlinks {
flex-wrap: wrap;
width: 100% !important;
margin-left: 0 !important;
justify-content: flex-start;
}
html[data-ui] .topbar .actions .btn,
html[data-ui] .container > .nav .navlinks .btn { flex: 1 1 auto !important; justify-content: center; }
html[data-ui] .topbar .actions .userPill { flex: 1 1 100%; }
}
@media (max-width: 560px) {
:root { --ui-brand-h: 54px; --ui-brand-max-w: 220px; }
/* On a phone at Large or Extra large, "Show me the admin console" is wider
than the screen. Let a label wrap inside its own button - two lines in a
full-width button beat a button that runs off the edge. */
html[data-ui] .topbar .actions .btn,
html[data-ui] .container > .nav .navlinks .btn {
white-space: normal !important;
text-align: center;
max-width: 100%;
min-width: 0;
}
html[data-ui] .uiBrand { gap: 12px; }
html[data-ui] .uiBrand__name { font-size: 1.15rem; }
html[data-ui] .uiWelcome { font-size: 1.15rem; }
}
/* At Extra large the three action buttons are ~25% wider; let the group wrap
internally a little earlier rather than squeeze. */
@media (max-width: 1024px) {
html[data-text="xl"] .topbar .actions,
html[data-text="xl"] .container > .nav .navlinks { flex-wrap: wrap; justify-content: flex-end; }
}
/* ---------------------------------------------------------------------------
4. The "Personalise this demo" dialog
--------------------------------------------------------------------------- */
.uiPzBackdrop {
position: fixed;
inset: 0;
z-index: 2147483000;
display: grid;
place-items: center;
padding: 16px;
background: rgba(8, 15, 28, .55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.uiPzBackdrop[hidden] { display: none; }
body.uiPzOpen { overflow: hidden; }
.uiPzDialog {
position: relative;
width: min(560px, 100%);
max-height: calc(100vh - 32px);
overflow: auto;
background: var(--ui-surface, #fff);
color: var(--ui-ink, #0f172a);
border: 1px solid var(--ui-line, rgba(15, 23, 42, .12));
border-radius: 20px;
box-shadow: 0 30px 80px rgba(8, 15, 28, .35);
padding: 26px 26px 22px;
font-family: var(--ui-font, system-ui, sans-serif);
font-size: 1rem;
line-height: 1.5;
text-align: left;
}
html[data-ui="futuristic"] .uiPzDialog {
background: var(--l2, #152a44);
border-color: var(--edge, rgba(148, 197, 232, .16));
color: var(--ink, #e6f0fa);
}
.uiPzDialog h2 {
margin: 0 36px 6px 0;
font-size: 1.375rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
color: inherit;
}
.uiPzLead { margin: 0 0 16px; color: var(--ui-ink-soft, #5b6b7b); font-size: .9375rem; }
html[data-ui="futuristic"] .uiPzLead,
html[data-ui="futuristic"] .uiPzHint { color: var(--ink-2, #9fb3c8); }
.uiPzClose {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px;
display: grid; place-items: center;
appearance: none; border: 0; border-radius: 12px;
background: transparent; color: inherit;
font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.uiPzClose:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.uiPzClose:focus-visible { outline: none; box-shadow: var(--ui-ring, 0 0 0 3px rgba(37, 99, 235, .35)); }
.uiPzPreview {
display: flex;
align-items: center;
gap: 14px;
min-height: 84px;
padding: 12px 16px;
margin: 0 0 18px;
border: 1px dashed var(--ui-line, rgba(15, 23, 42, .18));
border-radius: 14px;
background: color-mix(in srgb, var(--ui-accent, #2563eb) 5%, transparent);
}
.uiPzPreview__label {
display: block; margin: 0 0 6px;
font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--ui-ink-soft, #5b6b7b);
}
.uiPzPreview img { display: block; height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.uiPzPreview img[hidden], .uiPzPreview .uiBrand__monogram[hidden] { display: none; }
.uiPzPreview .uiBrand__monogram { width: 52px; height: 52px; border-radius: 14px; font-size: 1.2rem; }
.uiPzPreview__name { font-weight: 800; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.uiPzPreview__name.is-placeholder { font-weight: 600; color: var(--ui-ink-soft, #5b6b7b); }
.uiPzField { margin: 0 0 14px; }
.uiPzField label { display: block; margin: 0 0 6px; font-weight: 700; font-size: .9375rem; }
.uiPzField .uiPzOptional { font-weight: 500; color: var(--ui-ink-soft, #5b6b7b); }
.uiPzField input[type="text"] {
box-sizing: border-box;
width: 100%;
min-height: 44px;
padding: 10px 12px;
border-radius: 10px;
border: 1.5px solid var(--ui-line, rgba(15, 23, 42, .18));
background: var(--ui-surface, #fff);
color: inherit;
font: inherit;
}
html[data-ui="futuristic"] .uiPzField input[type="text"] { background: var(--l1, #0f1e33); border-color: var(--edge, rgba(148, 197, 232, .22)); }
.uiPzField input[type="text"]:focus-visible { outline: none; border-color: var(--ui-accent, #2563eb); box-shadow: var(--ui-ring, 0 0 0 3px rgba(37, 99, 235, .35)); }
.uiPzField input[type="text"][aria-invalid="true"] { border-color: var(--danger, #e11d48); }
.uiPzFileRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.uiPzFile {
position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.uiPzBtn {
appearance: none;
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px;
padding: 10px 16px;
border-radius: 999px;
border: 1.5px solid var(--ui-line, rgba(15, 23, 42, .18));
background: var(--ui-surface, #fff);
color: inherit;
font: inherit; font-weight: 700; font-size: .9375rem;
cursor: pointer;
white-space: nowrap;
}
html[data-ui="futuristic"] .uiPzBtn { background: var(--l3, #1c3553); border-color: var(--edge, rgba(148, 197, 232, .22)); }
.uiPzBtn:hover { border-color: var(--ui-accent, #2563eb); }
.uiPzBtn:focus-visible,
.uiPzFile:focus-visible + .uiPzBtn { outline: none; box-shadow: var(--ui-ring, 0 0 0 3px rgba(37, 99, 235, .35)); }
.uiPzBtn[disabled] { opacity: .55; cursor: not-allowed; }
.uiPzBtn--primary {
background: var(--ui-accent, #2563eb);
border-color: var(--ui-accent, #2563eb);
color: var(--ui-accent-ink, #fff);
}
html[data-ui="futuristic"] .uiPzBtn--primary { background: var(--cyan, #22d3ee); border-color: var(--cyan, #22d3ee); color: #04121c; }
.uiPzBtn--primary:hover { filter: brightness(1.06); }
.uiPzBtn--quiet { border-color: transparent; background: transparent; color: var(--ui-accent, #2563eb); padding-inline: 8px; }
html[data-ui="futuristic"] .uiPzBtn--quiet { background: transparent; border-color: transparent; color: var(--cyan-2, #67e8f9); }
.uiPzFileName { font-size: .875rem; color: var(--ui-ink-soft, #5b6b7b); overflow-wrap: anywhere; min-width: 0; }
.uiPzHint { margin: 6px 0 0; font-size: .8125rem; color: var(--ui-ink-soft, #5b6b7b); }
.uiPzError {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 10px;
border-left: 4px solid var(--danger, #e11d48);
background: color-mix(in srgb, var(--danger, #e11d48) 9%, transparent);
font-size: .875rem; font-weight: 600;
}
.uiPzError[hidden] { display: none; }
.uiPzNote {
margin: 4px 0 18px;
padding: 10px 12px;
border-radius: 10px;
background: color-mix(in srgb, var(--ui-accent, #2563eb) 7%, transparent);
font-size: .8125rem;
}
.uiPzActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.uiPzActions__spacer { flex: 1 1 auto; }
@media (max-width: 480px) {
.uiPzDialog { padding: 22px 18px 18px; border-radius: 16px; }
.uiPzActions { flex-direction: column-reverse; align-items: stretch; }
.uiPzActions__spacer { display: none; }
.uiPzActions .uiPzBtn { width: 100%; }
}
/* ---------------------------------------------------------------------------
Demo admin console (demo-admin.html). The console is not themed, so these
rules are not under html[data-ui]. The slot is hidden until the visitor
has personalised; then their logo (or monogram) and name sit before
"Admin Portal".
--------------------------------------------------------------------------- */
.uiConsoleBrand[hidden], .uiConsoleBrand [hidden] { display: none !important; }
.uiConsoleBrand {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
padding-right: 12px;
margin-right: 2px;
border-right: 1px solid rgba(15, 23, 42, .14);
}
.uiConsoleBrand__logo {
display: block;
height: 40px;
width: auto;
max-width: 160px;
object-fit: contain;
}
.uiConsoleBrand__mono {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: #2563eb;
color: #fff;
font-weight: 800;
font-size: .95rem;
}
.uiConsoleBrand__name { font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 560px) {
.uiConsoleBrand { border-right: 0; padding-right: 0; flex: 1 1 100%; justify-content: center; }
}
/* ---------------------------------------------------------------------------
The welcome composition (2026-09-17, revised round 5)
---------------------------------------------------------------------------
The welcome now sits ABOVE the progress bar, in the document itself, so what
a screen reader hears and what the eye sees are the same order: header, then
welcome, then the 1-2-3 bar, then the booking panels.
Each style gets its own composition rather than three copies of "picture on
the right":
Classic picture LEFT, copy right - familiar, balanced, compact
Signature one panoramic photograph across the content width, the copy in
a solid panel over the calm left side of the frame
Showcase centred copy with a centred editorial picture beneath it, at a
different crop and proportion from Signature
Futuristic no photograph at all, its approved layout untouched
Two rules hold everywhere: photographs are never stretched (every one is
object-fit: cover inside a box with a declared aspect-ratio), and text is
never laid over a busy part of a picture - Signature's copy sits on an opaque
panel over the deliberately empty half of its frame, and drops below the
picture entirely on a phone.
--------------------------------------------------------------------------- */
html[data-ui] .welcomeNote {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
align-items: center;
gap: clamp(14px, 2.6vw, 30px);
}
html[data-ui] .welcomeCopy { min-width: 0; }
html[data-ui] .welcomeNote .welcomeSub { margin: 0; }
html[data-ui] .welcomeShot {
margin: 0;
min-width: 0;
}
html[data-ui] .welcomeShot[hidden] { display: none; }
html[data-ui] .welcomeShot img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
/* The cap is what keeps the picture from pushing the services down: the box
gets shorter and object-fit crops, rather than the column growing. */
max-height: 228px;
object-fit: cover;
border-radius: 14px;
background: color-mix(in srgb, currentColor 8%, transparent);
}
html[data-ui] .welcomeShotNote {
margin: 6px 2px 0;
font-size: .68rem;
line-height: 1.35;
opacity: .72;
color: var(--ui-muted, var(--ink-2, inherit));
}
/* --- Classic: picture on the left ---------------------------------------- */
html[data-ui="classic"] .welcomeNote {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
padding: 12px 14px !important;
}
html[data-ui="classic"] .welcomeShot { order: -1; }
html[data-ui="classic"] .welcomeShot img {
aspect-ratio: 4 / 3;
max-height: 196px;
border-radius: 12px;
}
/* --- Signature: one panoramic frame across the content width -------------- */
html[data-ui="signature"] .welcomeNote {
display: block;
position: relative;
padding: 0 !important;
margin-block: 14px 18px;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
}
html[data-ui="signature"] .welcomeShot img {
/* The asset is prepared at exactly this shape, so the browser never crops it
again and no face meets an edge. */
aspect-ratio: 3.25 / 1;
max-height: none;
border-radius: 18px;
}
/* An opaque panel, not a wash over the photograph: the copy keeps full contrast
against a flat surface, and it sits over the half of the frame that was
generated empty for exactly this. */
html[data-ui="signature"] .welcomeCopy {
position: absolute;
left: clamp(18px, 3.4%, 40px);
top: 50%;
transform: translateY(-50%);
width: min(46%, 30rem);
padding: 18px 22px;
border-radius: 14px;
background: color-mix(in srgb, var(--surface, #ffffff) 94%, transparent);
box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}
html[data-ui="signature"] .welcomeShotNote {
position: absolute;
right: 10px;
bottom: 9px;
margin: 0;
padding: 3px 10px;
border-radius: 999px;
background: rgba(8, 20, 32, .55);
color: #fff;
opacity: 1;
}
/* --- Showcase: centred copy, centred editorial picture beneath ------------- */
html[data-ui="showcase"] .welcomeNote {
display: block;
text-align: center;
padding-top: .75rem !important;
padding-bottom: 0 !important;
}
html[data-ui="showcase"] .welcomeCopy {
max-width: 58ch;
margin-inline: auto;
}
html[data-ui="showcase"] .welcomeShot {
max-width: 47rem;
margin: 10px auto 0;
}
html[data-ui="showcase"] .welcomeShot img {
aspect-ratio: 16 / 9;
max-height: 230px;
border-radius: 16px;
}
html[data-ui="showcase"] .welcomeShotNote { text-align: center; margin-inline: auto; }
/* --- Futuristic: approved as it stands ------------------------------------ */
html[data-ui="futuristic"] .welcomeNote { display: block; }
html[data-ui="futuristic"] .welcomeShot { display: none !important; }
/* Steps 2 and 3: the copy stays, the large picture does not. The welcome now
comes BEFORE the progress bar, so this asks the container whether it contains
a bar that is past step 1 rather than looking forwards from a sibling. */
html[data-ui] .container:has(.ab-progress:not([data-step="1"])) .welcomeShot { display: none; }
html[data-ui="signature"] .container:has(.ab-progress:not([data-step="1"])) .welcomeNote {
padding: 1rem 0 0 !important;
border-radius: 0;
overflow: visible;
box-shadow: none;
}
html[data-ui="signature"] .container:has(.ab-progress:not([data-step="1"])) .welcomeCopy {
position: static;
transform: none;
width: auto;
padding: 0;
background: none;
box-shadow: none;
}
/* Tighter than the styles' own welcome padding: the picture already gives the
block presence, so the empty space above it is waste. */
html[data-ui="signature"] .welcomeNote { padding-top: 0 !important; }
@media (max-width: 860px) {
/* Deliberate stacking everywhere: the personalised name stays first, then a
wide, short crop, so services are still close to the top. Signature's panel
comes out of the frame and sits under the picture, so no text is over a
photograph at phone size at all. */
html[data-ui] .welcomeNote {
grid-template-columns: 1fr;
gap: 12px;
}
html[data-ui] .welcomeShot img {
aspect-ratio: 16 / 7;
max-height: 190px;
border-radius: 12px;
}
html[data-ui="classic"] .welcomeShot { order: 0; }
html[data-ui="classic"] .welcomeShot img { aspect-ratio: 16 / 7; max-height: 190px; }
html[data-ui="signature"] .welcomeNote {
display: flex;
flex-direction: column-reverse; /* picture first, copy under it */
gap: 12px;
padding: 0 !important;
border-radius: 0;
overflow: visible;
}
html[data-ui="signature"] .welcomeCopy {
position: static;
transform: none;
width: auto;
padding: 0;
background: none;
box-shadow: none;
}
html[data-ui="signature"] .welcomeShot img { aspect-ratio: 16 / 8; max-height: 186px; border-radius: 12px; }
html[data-ui="signature"] .welcomeShotNote {
position: static;
background: none;
color: inherit;
opacity: .72;
padding: 0;
margin: 6px 2px 0;
}
html[data-ui="showcase"] .welcomeShot { max-width: none; }
html[data-ui="showcase"] .welcomeShot img { aspect-ratio: 16 / 8; max-height: 190px; }
html[data-ui="showcase"] .welcomeNote { padding-top: .75rem !important; }
}
/* Larger text sizes: the copy needs the room more than the picture does.
Desktop only - these are about sharing a ROW with the picture, and below 860px
nothing shares a row. Left unscoped, the Signature panel width squeezed the
phone copy into a 178px column and made the block half as tall again. */
@media (min-width: 861px) {
html[data-text="lg"][data-ui="classic"] .welcomeNote { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); }
html[data-text="xl"][data-ui="classic"] .welcomeNote { grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr); }
html[data-text="lg"][data-ui="signature"] .welcomeCopy,
html[data-text="xl"][data-ui="signature"] .welcomeCopy { width: min(52%, 34rem); }
}
@media (max-width: 860px) {
html[data-text="lg"][data-ui] .welcomeNote,
html[data-text="xl"][data-ui] .welcomeNote { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
The 1-2-3 progress bar (2026-09-17, round 5)
---------------------------------------------------------------------------
It was a 28px circle with a 13px label, and the label disappeared entirely on
a phone - so on the device most people book from, the bar said "1 2 3" and
nothing else. It is now the size of a real wayfinder, and the labels stay.
These rules deliberately set SIZE and STATE only, never colour: each style
sheet already colours its own active and completed steps (signature blue,
showcase gradient, futuristic cyan), and this sheet loads after all four, so
overriding colour here would flatten four designs into one.
The three states are told apart without relying on colour alone:
upcoming outlined circle, muted label
current larger circle, heavier label, an underline beneath the step
completed a tick in place of the number
The number a completed step no longer shows is still in its accessible name,
which booking.wizard.js keeps in step.
--------------------------------------------------------------------------- */
html[data-ui] .ab-progress-inner {
padding-block: 15px;
gap: 14px;
}
html[data-ui] .ab-step {
gap: 12px;
min-width: 0;
position: relative;
}
html[data-ui] .ab-dot {
width: 38px;
height: 38px;
flex: 0 0 38px;
font-size: 1.0625rem; /* 17px at standard text */
font-weight: 800;
border-width: 2px;
transition: transform .12s ease;
}
html[data-ui] .ab-label {
font-size: 1.0625rem;
font-weight: 700;
white-space: nowrap;
}
html[data-ui] .ab-line {
height: 3px;
min-width: 12px;
border-radius: 999px;
}
/* current */
html[data-ui] .ab-step.active .ab-dot { transform: scale(1.06); }
html[data-ui] .ab-step.active .ab-label { font-weight: 800; }
html[data-ui] .ab-step.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -11px;
height: 3px;
border-radius: 999px;
background: currentColor;
opacity: .5;
}
/* completed: a tick instead of the digit */
html[data-ui] .ab-step.done .ab-dot { font-size: 0; }
html[data-ui] .ab-step.done .ab-dot::before {
content: "✓";
font-size: 1.25rem;
line-height: 1;
font-weight: 700;
}
/* Larger text settings: the bar grows with everything else, but the labels are
allowed to shrink relative to body text so three of them still fit a phone. */
html[data-text="lg"][data-ui] .ab-dot { width: 42px; height: 42px; flex-basis: 42px; }
html[data-text="xl"][data-ui] .ab-dot { width: 46px; height: 46px; flex-basis: 46px; }
@media (max-width: 760px) {
/* The labels used to be display:none here. Three short words are exactly the
information someone needs mid-booking, so they stay and the circles give up
the space instead. */
html[data-ui] .ab-label {
display: block;
font-size: .8125rem;
font-weight: 700;
}
html[data-ui] .ab-progress-inner { gap: 6px; padding-block: 11px; }
html[data-ui] .ab-step { gap: 7px; }
html[data-ui] .ab-dot {
width: 30px; height: 30px; flex-basis: 30px;
font-size: .875rem; border-width: 2px;
}
html[data-ui] .ab-step.done .ab-dot::before { font-size: 1rem; }
html[data-ui] .ab-line { min-width: 6px; height: 2px; }
html[data-ui] .ab-step.active::after { bottom: -7px; height: 2px; }
html[data-text="lg"][data-ui] .ab-dot,
html[data-text="xl"][data-ui] .ab-dot { width: 32px; height: 32px; flex-basis: 32px; }
html[data-text="lg"][data-ui] .ab-label,
html[data-text="xl"][data-ui] .ab-label { font-size: .8125rem; }
}
@media (max-width: 420px) {
html[data-ui] .ab-label { font-size: .75rem; }
html[data-ui] .ab-step { gap: 6px; }
html[data-ui] .ab-dot { width: 28px; height: 28px; flex-basis: 28px; font-size: .8125rem; }
}