/* =========================================================================== style.signature.css — Signature SOURCE OF TRUTH Refined 2026-09-11 against the ACTUAL marketing template, not against computed styles: https://instantbookingpro.com/wp-content/themes/ instantbookingpro-theme/style.css?ver=1.6.0 (53,714 bytes) A read-only copy sits in ../../../reference-marketing/theme-style.css. The template is NOT in the InstantBookingPro repository — `README.md` open item 9 records "No WordPress source", `Apps\Instantbookingpro - Website` is empty, and a disk-wide search for *.php / wp-config* / functions.php finds nothing belonging to this site. The server copy above is the only source. Selectors, values and structure below are taken from that file. Where a rule is copied, the template's own class is named in a comment so the two can be diffed later. WHAT THE TEMPLATE GAVE US The marketing site is not just a palette — it contains a complete booking design language, because its hero runs a live booking widget (.widget) and its middle section runs a four-role product demo (.demo-app) with a real customer booking flow (.dc-*). Those are the closest thing to a specification for this page, so Signature maps our engine's DOM onto them: template ours .svc .svcPill service row .dc-opt / .av #employeeList staff row + initials avatar .slot / .dc-chip .slotgrid time slot .dstat .summary totals .widget / .w-top .card step card + gradient header .btn / .btn-primary .btn buttons .wrap .container content rail LAYOUT The container is NOT defined here. All four styles share one rail from ui-core.css — 84% of the viewport capped at 1480px, full width with 24px gutters below 1100px, 16px on phones — so the logo, toolbar, progress bar and cards line up identically whichever style is active. The template's own rail is --maxw:1160px; this page is an application rather than a landing page, so it is given more room, and everything else follows the template. TEXT SIZE Font sizes here are in rem. ui-core.css scales the root font size by 1 / 1.125 / 1.25, so Signature grows with the text-size control without needing a single rule of its own. =========================================================================== */ html[data-ui="signature"] { /* ---- template :root, copied verbatim --------------------------------- */ --blue-700: #075985; --blue-600: #0284C7; --blue-500: #0EA5E9; --blue-100: #E0F2FE; --blue-50: #F0F9FF; --green-600: #059669; --green-500: #10B981; --green-100: #D1FAE5; --ink: #0B1F33; --ink-2: #3F5A72; --line: #DCEAF3; --surface: #FFFFFF; --amber: #F59E0B; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 30px; --sh-1: 0 1px 2px rgba(11,31,51,.05), 0 4px 14px rgba(11,31,51,.05); --sh-2: 0 12px 30px rgba(11,31,51,.10); --sh-3: 0 30px 70px rgba(7,89,133,.22); --ring: 0 0 0 4px rgba(2,132,199,.16); --ease: cubic-bezier(.22, 1, .36, 1); --t1: 160ms var(--ease); --t2: 280ms var(--ease); --t3: 520ms var(--ease); --sig-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* The deeper end of the template's blue ramp. See "Contrast" at the foot. */ --grad: linear-gradient(135deg, var(--blue-700), #0369A1); --grad-brand: linear-gradient(135deg, var(--blue-600), var(--blue-500)); /* ---- remap the baseline's tokens ------------------------------------- booking.css and styles.css read :root variables throughout, and common-fb.js applyTheme() writes --bg/--text/--accent as INLINE custom properties on from the saved Firestore theme. Inline beats any stylesheet rule at any specificity, so these must be !important or the owner's saved theme silently undoes Signature on the live site while looking correct locally. Classic deliberately does not do this — it should keep following the saved theme. */ --bg: #F4FAFE !important; --card: #FFFFFF !important; --card-strong: #FFFFFF !important; --text: #0B1F33 !important; --muted: #3F5A72 !important; --accent: #0284C7 !important; --accent2: #0284C7 !important; --accent-soft: #E0F2FE !important; --ok: #059669 !important; --ok-soft: #D1FAE5 !important; --danger: #E11D48 !important; --warn: #F59E0B !important; --border: #DCEAF3 !important; --border-2: #E8F2F9 !important; --shadow: 0 30px 70px rgba(7,89,133,.22) !important; --shadow-2: 0 1px 2px rgba(11,31,51,.05), 0 4px 14px rgba(11,31,51,.05) !important; --radius: 30px !important; --theme-bg: #F4FAFE !important; --theme-card: 255, 255, 255 !important; --theme-text: #0B1F33 !important; --theme-muted: #3F5A72 !important; --theme-primary: #0284C7 !important; --theme-outline: #0284C7 !important; --panel-alpha: 1 !important; /* Contract for the shared switcher chrome */ --ui-font: var(--sig-font); --ui-ink: var(--ink); --ui-ink-soft: var(--ink-2); --ui-surface: var(--surface); --ui-bg: #F4FAFE; --ui-line: var(--line); --ui-accent: var(--blue-600); --ui-accent-ink: #fff; --ui-accent-soft: var(--blue-50); --ui-radius: var(--r); --ui-shadow: var(--sh-1); --ui-ring: var(--ring); } /* ---- ground (template body) -------------------------------------------- booking.css:827 hard-codes `html, body { background:#F6F7FB !important }`, so this one declaration has to match its weight. */ html[data-ui="signature"], html[data-ui="signature"] body { background: #F4FAFE !important; background-image: none !important; color: var(--ink); font-family: var(--sig-font); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* template: body::before — the dotted calendar-grid backdrop. The single most recognisable texture on the marketing site, and it costs one pseudo-element. */ /* beats: booking.css:833 `body::before, .bg::before, .pageBg::before{ background-image:none !important }`, which the baseline uses to strip an old background image. Without matching that weight the texture never paints. */ html[data-ui="signature"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(2,132,199,.06) 1px, transparent 1px) !important; background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); } /* template: h1,h2,h3,h4 — line-height 1.08, -.02em, weight 800 */ html[data-ui="signature"] h1, html[data-ui="signature"] h2, html[data-ui="signature"] h3, html[data-ui="signature"] h4 { line-height: 1.08; letter-spacing: -.02em; font-weight: 800; color: var(--ink); } /* template .head h2 — clamp(2rem, 4.4vw, 3rem). This is the single biggest difference between "uses the same colours" and "is the same design language". The marketing site sets section headings at 32-48px; the booking page was setting them at 21px, which made it read as a different product wearing the same palette. Signature now uses the site's own display scale, one step down because a step heading sits inside a card rather than centred on a full-width section. */ html[data-ui="signature"] .cardheader h2 { font-size: clamp(1.65rem, 2.6vw, 2.25rem); margin: .625rem 0 .5rem; } /* template: :focus-visible — adopted exactly, so keyboard focus looks the same on both properties. */ html[data-ui="signature"] :focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: 8px; } /* template header.nav — sticky, translucent, saturating blur. Sits on the shared rail rather than bleeding full width, so its edges line up with the cards below it. */ html[data-ui="signature"] .topbar { position: sticky; top: 0; z-index: 60; background: rgba(244,250,254,.88); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } html[data-ui="signature"] .ab-progress { position: sticky; top: var(--ui-nav-h); z-index: 55; background: rgba(244,250,254,.9); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); border-top: 0; border-radius: 0; box-shadow: none; } html[data-ui="signature"] .ab-progress-inner { padding-block: .875rem; } /* Below 1100px the logo is in the flow, so the toolbar joins it there and the progress bar takes the sticky slot on its own — two sticky bars cannot both sit at top:0. */ @media (max-width: 1100px) { html[data-ui="signature"] .topbar { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } html[data-ui="signature"] .ab-progress { top: 0; } } /* template .w-step-label .n — the numbered circle */ html[data-ui="signature"] .ab-dot { background: var(--blue-100); border: 0; color: var(--blue-700); font-weight: 800; font-family: var(--sig-font); } html[data-ui="signature"] .ab-label { font-family: var(--sig-font); font-weight: 700; color: var(--ink-2); } html[data-ui="signature"] .ab-step.active .ab-dot, html[data-ui="signature"] .ab-step.done .ab-dot { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 16px rgba(2,132,199,.32); } html[data-ui="signature"] .ab-step.active .ab-label, html[data-ui="signature"] .ab-step.done .ab-label { color: var(--blue-700) !important; } html[data-ui="signature"] .ab-line { background: var(--line); } /* ========================================================================= BUTTONS — template .btn / .btn-primary / .btn-ghost ========================================================================= */ html[data-ui="signature"] .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sig-font); font-weight: 700; font-size: 1rem; padding: 14px 24px; border-radius: 999px; cursor: pointer; border: 2px solid var(--line); background: #fff; color: var(--blue-700); box-shadow: none; white-space: nowrap; transition: transform var(--t1), box-shadow var(--t1), background var(--t1), color var(--t1); } html[data-ui="signature"] .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--blue-100); } html[data-ui="signature"] .btn.primary, html[data-ui="signature"] #finalConfirmBtn { background: var(--green-600); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(5,150,105,.28); } html[data-ui="signature"] .btn.primary:hover:not(:disabled), html[data-ui="signature"] #finalConfirmBtn:hover:not(:disabled) { background: var(--green-500); border-color: transparent; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(5,150,105,.34); } html[data-ui="signature"] .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } html[data-ui="signature"] .btnGhost { background: #fff; color: var(--ink-2); border-color: var(--line); } /* ========================================================================= STEP CARDS — template .widget / .w-top / .w-body ========================================================================= */ html[data-ui="signature"] .card { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--r-xl) !important; box-shadow: var(--sh-3); overflow: hidden; color: var(--ink); margin-top: 18px; } /* template .step-pane.active — the flow's one piece of orchestrated motion */ html[data-ui="signature"] .card.stepCard.active { animation: sigFade .35s var(--ease); } @keyframes sigFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* template .w-top */ html[data-ui="signature"] .cardheader { background: var(--grad); color: #fff; padding: 20px 24px; border-bottom: 0; display: block; } /* Superseded: the header is a pale .head now, not a saturated band, so its text is ink. Kept as one rule so there is a single place that owns it. */ html[data-ui="signature"] .cardheader h2, html[data-ui="signature"] .cardheader .sub, html[data-ui="signature"] .cardheader .small, html[data-ui="signature"] .cardheader b, html[data-ui="signature"] .cardheader label { color: var(--ink); } html[data-ui="signature"] .cardheader .sub { opacity: .92; font-weight: 600; font-size: .88rem; margin-top: 6px; max-width: 78ch; } html[data-ui="signature"] .cardbody { padding: 24px; } /* Date control sits on the gradient, so it takes the template's glass treatment (.w-live uses rgba(255,255,255,.16) the same way). */ html[data-ui="signature"] .apptDateLabel { color: #fff; opacity: .9; font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } html[data-ui="signature"] #date { background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.38) !important; color: #fff !important; border-radius: var(--r-sm); font-family: var(--sig-font); font-weight: 700; padding: 10px 13px; } html[data-ui="signature"] #date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .9; } html[data-ui="signature"] #datePretty { color: #fff !important; opacity: .92; font-weight: 700; } /* ========================================================================= SERVICES — template .svc ========================================================================= */ html[data-ui="signature"] .svcPanel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-ui="signature"] .svcTitle { font-family: var(--sig-font); font-weight: 800; letter-spacing: -.02em; font-size: 1.1rem; color: var(--ink); } html[data-ui="signature"] .svcSub { color: var(--ink-2); font-weight: 600; font-size: .8rem; } /* template .svc-tab, reused for the search field's pill geometry */ html[data-ui="signature"] .svcSearch { font-family: var(--sig-font); border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; padding: 10px 16px; } html[data-ui="signature"] .svcSearch::placeholder { color: var(--ink-2); opacity: .8; } html[data-ui="signature"] .svcSearch:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring); } /* Category groups — the template's .svc-tabs strip has no direct analogue, so these use the .demo-role tab treatment: soft blue head, white body. */ html[data-ui="signature"] .svcGroup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; margin-bottom: 12px; } html[data-ui="signature"] .svcGroup > summary { padding: 14px 18px; background: #f8fbfe; border-bottom: 1px solid transparent; transition: background var(--t1); } html[data-ui="signature"] .svcGroup[open] > summary { border-bottom-color: var(--line); } html[data-ui="signature"] .svcGroup > summary:hover { background: var(--blue-50); } html[data-ui="signature"] .svcGroupName { font-family: var(--sig-font); font-weight: 800; letter-spacing: -.01em; color: var(--ink); font-size: 1rem; } html[data-ui="signature"] .svcGroupMeta { color: var(--ink-2); font-size: .78rem; font-weight: 600; } /* template .pill-soft */ html[data-ui="signature"] .svcGroupCount { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); font-size: .72rem; font-weight: 800; letter-spacing: .04em; } html[data-ui="signature"] .svcGroupHint { color: var(--ink-2); font-size: .82rem; font-weight: 600; } html[data-ui="signature"] .svcGroupBody { padding: 14px 18px 18px; } /* template .svc-list */ html[data-ui="signature"] .svcGrid, html[data-ui="signature"] .pills { display: grid; gap: 9px; } /* template .svc — flex row, icon tile, meta column, price right. Our engine emits button > span.svcName + span.svcMeta > (dur, price), so .svcMeta is dissolved with display:contents and the three children are placed on a grid. Same result, no markup change. */ html[data-ui="signature"] .svcPill { display: grid; grid-template-columns: 36px 1fr auto; grid-template-areas: "ic name price" "ic meta price"; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; text-align: left; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; font-family: var(--sig-font); color: var(--ink); box-shadow: none; transition: border-color var(--t1), background var(--t1), transform var(--t1); } html[data-ui="signature"] .svcPill:hover { border-color: var(--blue-500); transform: translateX(2px); } /* template .svc .ic — 36px tile, blue-100 on blue-700. Here it also carries selection state, because services are multi-select and the template's border-only cue is easy to miss when several rows are chosen. */ html[data-ui="signature"] .svcPill::before { content: ""; grid-area: ic; width: 36px; height: 36px; border-radius: 9px; background: var(--blue-100) url("data:image/svg+xml;utf8,") center / 19px 19px no-repeat; transition: background var(--t1); } html[data-ui="signature"] .svcPill[aria-pressed="true"]::before { background: var(--blue-600) url("data:image/svg+xml;utf8,") center / 19px 19px no-repeat; } /* template .svc .meta .nm / .du / .pr */ html[data-ui="signature"] .svcName { grid-area: name; font-weight: 700; font-size: .95rem; line-height: 1.2; color: var(--ink); } html[data-ui="signature"] .svcMeta { display: contents; } html[data-ui="signature"] .svcMeta > .svcDur { grid-area: meta; font-size: .78rem; font-weight: 600; color: var(--ink-2); line-height: 1.2; } html[data-ui="signature"] .svcMeta > .svcPrice { grid-area: price; font-size: 1rem; font-weight: 800; color: var(--ink); justify-self: end; padding-left: 8px; white-space: nowrap; text-align: right; } /* Selected chips — template .pill-soft */ html[data-ui="signature"] .svcSelectedBar { background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; } html[data-ui="signature"] .svcSelectedTitle { font-weight: 800; color: var(--ink); font-size: .9rem; } html[data-ui="signature"] .svcChip { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .8rem; padding: 6px 11px; box-shadow: none; } /* ========================================================================= TOTALS — template .dv-stats / .dstat ========================================================================= */ html[data-ui="signature"] .summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: transparent; border: 0; padding: 0; } html[data-ui="signature"] .summary > div { background: var(--blue-50); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } html[data-ui="signature"] .summary .small { font-size: .78rem; color: var(--ink-2); font-weight: 600; margin-top: 4px; order: 2; } html[data-ui="signature"] #totalDuration, html[data-ui="signature"] #totalPrice { font-family: var(--sig-font); font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--blue-700); } html[data-ui="signature"] #totalPrice { color: var(--green-600); } /* ========================================================================= STAFF — template .dc-opt with .av avatar ========================================================================= */ html[data-ui="signature"] .timeHeader { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; } html[data-ui="signature"] #employeeList > * + * { margin-top: 9px; } html[data-ui="signature"] #employeeList .empCard, html[data-ui="signature"] #employeeList button, html[data-ui="signature"] #employeeList > div[role="button"] { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; font-family: var(--sig-font); color: var(--ink); box-shadow: none; transition: border-color var(--t1), background var(--t1), transform var(--t1); } html[data-ui="signature"] #employeeList .empCard:hover, html[data-ui="signature"] #employeeList button:hover { border-color: var(--blue-500); transform: translateX(2px); } html[data-ui="signature"] #employeeList .empCard.on, html[data-ui="signature"] #employeeList button.on, html[data-ui="signature"] #employeeList button[aria-pressed="true"] { border-color: var(--blue-600); background: var(--blue-50); box-shadow: var(--ring); } /* template .dc-opt .av — solid blue tile, white initials */ html[data-ui="signature"] #employeeList .empAvatar, html[data-ui="signature"] #employeeList .avatar, html[data-ui="signature"] #employeeList .initials { width: 36px; height: 36px; border-radius: 9px; background: var(--blue-600); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; } /* ========================================================================= TIME SLOTS — template .slot / .dc-chip ========================================================================= */ html[data-ui="signature"] .slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } html[data-ui="signature"] .slotgrid button { font-family: var(--sig-font); font-weight: 700; font-size: .9rem; padding: 11px 10px; text-align: center; white-space: nowrap; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); box-shadow: none; transition: border-color var(--t1), background var(--t1), color var(--t1), transform var(--t1); } html[data-ui="signature"] .slotgrid button:hover:not(:disabled) { border-color: var(--green-500); color: var(--green-600); transform: translateY(-2px); } html[data-ui="signature"] .slotgrid button.on, html[data-ui="signature"] .slotgrid button[aria-pressed="true"] { background: var(--green-600); border-color: var(--green-600); color: #fff; transform: none; } /* template .slot.taken */ html[data-ui="signature"] .slotgrid button:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; background: #f1f5f9; transform: none; } /* ========================================================================= REVIEW & CONFIRM — template .dc-emailcard / .recap ========================================================================= */ html[data-ui="signature"] .reviewBox { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 16px 18px; color: var(--ink); } html[data-ui="signature"] #loginNote, html[data-ui="signature"] #custDetailsBox { background: var(--blue-50); border-color: var(--line); } html[data-ui="signature"] .reviewBox label { font-weight: 700; font-size: .78rem; color: var(--ink-2); } html[data-ui="signature"] #custName, html[data-ui="signature"] #custPhone, html[data-ui="signature"] #custNotes { font-family: var(--sig-font); width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; color: var(--ink); background: #fff; font-weight: 600; } html[data-ui="signature"] #custName:focus, html[data-ui="signature"] #custPhone:focus, html[data-ui="signature"] #custNotes:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--ring); } html[data-ui="signature"] .termsRowInline { color: var(--ink-2); } html[data-ui="signature"] .termsRowInline a { color: var(--blue-600); font-weight: 700; } /* ========================================================================= STICKY BAR — on the rail, template surface treatment ========================================================================= */ html[data-ui="signature"] #stickyCta { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,31,51,.06); } html[data-ui="signature"] #stickyServices, html[data-ui="signature"] #stickyDate { font-family: var(--sig-font); color: var(--ink); font-weight: 700; } /* Welcome note — template .hero .lead */ html[data-ui="signature"] .welcomeNote { background: transparent; border: 0; padding: 20px 0 0; } html[data-ui="signature"] .welcomeSub { color: var(--ink-2); font-size: 1.02rem; max-width: 62ch; } /* Style selector — template .svc-tab (the business-type pill strip above the hero widget): 1.5px line, white, 700/.8rem, pill radius; selected turns solid blue-600 with a matching shadow. */ /* Sentence case, not the template's uppercase micro-label: those sit above a section as an eyebrow, whereas this is an inline control label sitting beside "Log in" and "My bookings", where caps would shout. */ html[data-ui="signature"] .uiStyleBar__label { font-family: var(--sig-font); font-weight: 600; font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); } html[data-ui="signature"] .uiStyleSeg { background: transparent; border: 0; padding: 0; gap: 7px; } html[data-ui="signature"] .uiStyleBtn { flex: none; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); font-family: var(--sig-font); font-weight: 700; font-size: .8rem; padding: 8px 14px; border-radius: 999px; box-shadow: none; transition: border-color var(--t1), background var(--t1), color var(--t1); } html[data-ui="signature"] .uiStyleBtn:hover { border-color: var(--blue-500); color: var(--blue-700); } /* The template's .svc-tab.sel fills with blue-600, which gives white text only 4.10:1 — fine for its 12.8px/700 label as decoration, short of the 4.5:1 this control needs as a real form input. blue-700 is the same ramp at 7.56:1. */ html[data-ui="signature"] .uiStyleBtn[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; box-shadow: 0 4px 12px rgba(2,132,199,.28); } /* Signed-in pill — template .pill-soft */ html[data-ui="signature"] .userPill { background: var(--blue-50); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--blue-700); font-weight: 700; } /* Modals — template .widget surface */ /* The engine has three dialog surfaces, not one: .modalCard.modalCardPro (login), .msgCard (messages and errors) and .thankCard (booking confirmed). Styling only the first left the other two on the baseline's white 18px card. */ html[data-ui="signature"] .modalCard, html[data-ui="signature"] .modalCardPro, html[data-ui="signature"] .msgCard, html[data-ui="signature"] .thankCard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-3); font-family: var(--sig-font); color: var(--ink); } html[data-ui="signature"] .notifBanner { background: var(--blue-700); color: #fff; font-family: var(--sig-font); } html[data-ui="signature"] .notifBtn { background: var(--green-600); color: #fff; border: 0; border-radius: 999px; font-weight: 700; } /* ========================================================================= RESPONSIVE — template breakpoints 1024 / 860 / 480 ========================================================================= */ @media (max-width: 1024px) { html[data-ui="signature"] .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { /* Two sticky bars cannot both sit at top:0. On desktop the nav is 70px and the progress bar tucks under it; on mobile the nav wraps to two rows of unpredictable height, so the nav goes back into the flow and the progress bar keeps the sticky slot — which is the baseline's own behaviour and the one that matters while scrolling a long service list. */ html[data-ui="signature"] .topbar { position: static; justify-content: flex-start; min-height: 0; padding-block: 10px; border-bottom: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-ui="signature"] .topbar .actions { margin-left: auto; } html[data-ui="signature"] .ab-progress { top: 0; } } @media (max-width: 480px) { html[data-ui="signature"] .cardheader { padding: 16px 16px; } html[data-ui="signature"] .cardbody { padding: 16px; } html[data-ui="signature"] h2 { font-size: 1.14rem; } html[data-ui="signature"] .svcGroupBody { padding: 12px 12px 14px; } html[data-ui="signature"] .svcGroup > summary { padding: 12px 14px; } html[data-ui="signature"] .summary { grid-template-columns: 1fr; } html[data-ui="signature"] .slotgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } html[data-ui="signature"] .svcPill { padding: 14px; } html[data-ui="signature"] .slotgrid button { padding: 13px 10px; } html[data-ui="signature"] #totalDuration, html[data-ui="signature"] #totalPrice { font-size: 1.45rem; } } /* template @media (prefers-reduced-motion:reduce) */ @media (prefers-reduced-motion: reduce) { html[data-ui="signature"] *, html[data-ui="signature"] *::before, html[data-ui="signature"] *::after { animation: none !important; transition: none !important; } html[data-ui="signature"] .btn:hover:not(:disabled), html[data-ui="signature"] .svcPill:hover, html[data-ui="signature"] .slotgrid button:hover:not(:disabled) { transform: none !important; } } /* =========================================================================== SPECIFICITY OVERRIDES assets/booking.css carries 112 `!important` declarations and several id-scoped selectors. A plain html[data-ui="signature"] .class rule loses to both, so these rules have to match that weight. Each names the baseline rule it exists to beat. Nothing here is a blanket override, and all of it applies only under html[data-ui="signature"], so Classic is untouched. =========================================================================== */ /* beats: .svcGroupBody .svcGrid{ grid-template-columns: repeat(3,…) !important } at >=1100px, repeat(2,…) 760–1099px, 1fr below. Rows need width: production names run to "Foils 👉Full head foils + based color change". Two columns is the most that keeps a full name on one line at the wider rail. */ html[data-ui="signature"] .svcGroupBody .svcGrid, html[data-ui="signature"] #serviceList .svcGrid, html[data-ui="signature"] .pills.svcGrid { grid-template-columns: 1fr !important; } @media (min-width: 1000px) { html[data-ui="signature"] .svcGroupBody .svcGrid, html[data-ui="signature"] #serviceList .svcGrid, html[data-ui="signature"] .pills.svcGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1500px) { html[data-ui="signature"] .svcGroupBody .svcGrid, html[data-ui="signature"] #serviceList .svcGrid, html[data-ui="signature"] .pills.svcGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* beats: .svcGrid .pill.svcPill.on{ …rgba(245,158,11,…) !important } — amber. The template selects a service in BLUE (.svc.sel → blue-600 border, blue-50 background, --ring) and reserves green for time slots and the primary action. Signature follows that split exactly. */ html[data-ui="signature"] .svcGrid .pill.svcPill.on, html[data-ui="signature"] .pill.svcPill.on { border-color: var(--blue-600) !important; background: var(--blue-50) !important; box-shadow: var(--ring) !important; } /* beats: .svcGrid .pill.svcPill.on:hover{ transform: scale(1.035) } — the template nudges a row sideways, it does not scale it. */ html[data-ui="signature"] .svcGrid .pill.svcPill:hover, html[data-ui="signature"] .svcGrid .pill.svcPill.on:hover { transform: translateX(2px) !important; } /* beats: .svcGrid .svcPill.durShort / .durLong — Classic tints rows green and blue by duration. The template uses one calm surface. */ html[data-ui="signature"] .svcPill.durShort, html[data-ui="signature"] .svcPill.durLong { background: #fff !important; } html[data-ui="signature"] .svcPill.durShort.on, html[data-ui="signature"] .svcPill.durLong.on { background: var(--blue-50) !important; } /* beats: .pill .svcName / .pill .svcMeta flex rules, and their white-space/flex-wrap !important under 760px. */ html[data-ui="signature"] .pill .svcName { grid-area: name !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } html[data-ui="signature"] .pill .svcMeta { display: contents !important; flex-wrap: nowrap !important; } /* beats: #serviceList .svcGrid .svcPill{ height:100% !important } */ html[data-ui="signature"] #serviceList .svcGrid .svcPill { height: auto !important; } /* beats: #loginBtn, #myBookingsBtn, #logoutBtn{ amber background, border, colour, radius, shadow — all !important }. These become template .btn-ghost. */ html[data-ui="signature"] #loginBtn, html[data-ui="signature"] #myBookingsBtn, html[data-ui="signature"] #logoutBtn { background: #fff !important; border: 2px solid var(--line) !important; color: var(--blue-700) !important; border-radius: 999px !important; font-weight: 700 !important; font-size: .92rem !important; padding: 11px 20px !important; box-shadow: none !important; } html[data-ui="signature"] #loginBtn:hover, html[data-ui="signature"] #myBookingsBtn:hover, html[data-ui="signature"] #logoutBtn:hover { background: #fff !important; border-color: var(--blue-100) !important; box-shadow: var(--sh-1) !important; transform: translateY(-2px); } /* beats: .card, .cardbody, .svcPanel, .welcomeNote{ … !important } */ html[data-ui="signature"] .welcomeNote { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* beats: .container{ padding-bottom:96px } plus the mobile padding-top that reserves room for the old floating logo. */ /* =========================================================================== CONTRAST — the one place Signature deviates from the template's values The template's --grad is blue-600 -> blue-500 (#0284C7 -> #0EA5E9). Measured against white text that is 4.10:1 and 2.77:1. Both are below the 4.5:1 AA needs for the sub-heading, and #0EA5E9 misses even the 3:1 for large text. On the marketing site that is fine: .w-top is a decorative mock-up carrying one short label. Here the same band carries the step heading and the appointment date, which people must read in order to book. So --grad is anchored one stop deeper, blue-700 -> #0369A1: the same blue ramp, 7.56:1 to 5.93:1, visually the marketing header, AA at every point. The template's exact gradient is kept as --grad-brand and still used where nothing small sits on it — the logo glyph and the progress dots. =========================================================================== */ /* =========================================================================== COMPOSITION — added 2026-09-13 from the theme source itself C:\00 -Projects\Apps\instantbookingpro-theme-v1.6.0\instantbookingpro-theme (front-page.php + style.css v1.6.0, style.css byte-identical to the server) The palette was already right. What was missing was the site's COMPOSITION, and the theme's own front-page.php names it precisely. Every section on the marketing site is built from one device:
Interactive sample green, 800, .12em, caps

See how it works for your business type

clamp(2rem,4.4vw,3rem)

Longer explanatory sentence.

1.1rem, --ink-2
and its booking widget breaks the flow into numbered steps:
1 Choose a service
Signature now uses both. No markup is added: the eyebrow is generated from the step card's own id, so the engine's DOM is untouched. =========================================================================== */ /* template .head — a pale section head, not a saturated band. The gradient is kept as a 4px brand edge on the card, which is where the template puts its strongest colour (.w-top) without letting it sit under body copy. */ html[data-ui="signature"] .cardheader { background: var(--blue-50); border-bottom: 1px solid var(--line); padding: 2.25rem 2rem 1.75rem; } html[data-ui="signature"] .cardheader h2, html[data-ui="signature"] .cardheader .sub, html[data-ui="signature"] .cardheader b { color: var(--ink); } /* template .head .k — the eyebrow. Green, because on the marketing site the eyebrow is --green-600 while headings are --ink; that green/navy pairing is as recognisable as the blue. Generated per step from the card's id. */ html[data-ui="signature"] .cardheader::before { display: block; color: var(--green-600); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; line-height: 1; margin-bottom: .25rem; } html[data-ui="signature"] #step1Card .cardheader::before { content: "Step 1 of 3 — Services"; } html[data-ui="signature"] #step2Card .cardheader::before { content: "Step 2 of 3 — Staff & time"; } html[data-ui="signature"] #step3Card .cardheader::before { content: "Step 3 of 3 — Review & confirm"; } /* template .head p — the lead. 1.1rem, --ink-2, a real measure. */ html[data-ui="signature"] .cardheader .sub { font-size: 1.05rem; font-weight: 500; color: var(--ink-2); opacity: 1; max-width: 62ch; margin-top: .5rem; line-height: 1.55; } /* The date control returns to a normal field now that the header is pale. */ html[data-ui="signature"] .apptDateLabel { color: var(--ink-2); opacity: 1; font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } html[data-ui="signature"] #date { background: #fff !important; border: 1.5px solid var(--line) !important; color: var(--ink) !important; } html[data-ui="signature"] #datePretty { color: var(--ink) !important; opacity: 1; font-weight: 700; } /* template .w-step-label — the numbered sub-heading used inside the widget. Applied to the two panel titles the engine already renders. */ html[data-ui="signature"] .svcTitle, html[data-ui="signature"] .timeHeader .small.muted { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); display: flex; align-items: center; gap: .5rem; } html[data-ui="signature"] .svcTitle::before, html[data-ui="signature"] .timeHeader .small.muted::before { content: "1"; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--blue-100); color: var(--blue-700); display: grid; place-items: center; font-size: .72rem; flex: none; } html[data-ui="signature"] .timeHeader .small.muted::before { content: "2"; } /* template .recap .rr — the confirmation summary's label/value rows. The review box is the same information, so it gets the same treatment. */ html[data-ui="signature"] #reviewBox { background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--r); padding: 1.125rem 1.25rem; } html[data-ui="signature"] #reviewBox .row2 > div, html[data-ui="signature"] #reviewBox > div:not(.small) { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } html[data-ui="signature"] #reviewBox .small { color: var(--ink-2); } html[data-ui="signature"] #reviewBox b { color: var(--ink); font-weight: 800; } /* template .check-circle — the success mark, 74px green-100 disc. */ html[data-ui="signature"] .thankCard .thankIcon, html[data-ui="signature"] #thankConfetti { width: 4.625rem; height: 4.625rem; border-radius: 50%; background: var(--green-100); color: var(--green-600); display: grid; place-items: center; margin: 0 auto 1rem; font-size: 2rem; } html[data-ui="signature"] .thankTitle { font-size: 1.3rem; } /* template .eyebrow + .live-dot — the signed-in pill borrows it. */ html[data-ui="signature"] .userPill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green-500); display: inline-block; margin-right: .375rem; } /* template section.block padding:78px 0 — the page's vertical rhythm. Halved between cards because a booking flow is denser than a landing page. */ html[data-ui="signature"] .card { margin-top: 2.5rem; } html[data-ui="signature"] .welcomeNote { padding-top: 2.25rem; } @media (max-width: 560px) { html[data-ui="signature"] .cardheader { padding: 1.5rem 1.125rem 1.25rem; } html[data-ui="signature"] .cardheader .sub { font-size: .95rem; } } /* --- Sign-in hand-off (auth.html) ---------------------------------------- auth.html now expresses its own styling through --auth-* custom properties instead of hard-coded hexes, so each style can retheme the sign-in step and the visitor does not see a different-looking page mid-flow. */ html[data-ui="signature"] { --auth-bg: #F4FAFE; --auth-surface: #FFFFFF; --auth-ink: #0B1F33; --auth-ink-2: #3F5A72; --auth-muted: #3F5A72; --auth-line: #DCEAF3; --auth-radius: 30px; --auth-shadow: 0 30px 70px rgba(7,89,133,.22); --auth-accent: #059669; --auth-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --auth-h1: 1.5rem; } /* --- My Bookings action buttons ------------------------------------------ beats: styles.css:470 #signoutBtn, #saveProfileBtn, #myBookingsMakeBtn — the same amber treatment as the booking page's nav buttons, and equally !important. Without these three ids the My Bookings page keeps Classic's amber while everything around it changes. */ html[data-ui="signature"] #signoutBtn, html[data-ui="signature"] #saveProfileBtn, html[data-ui="signature"] #myBookingsMakeBtn { background: #fff !important; border: 2px solid #DCEAF3 !important; color: #075985 !important; border-radius: 999px !important; font-weight: 700 !important; font-size: .92rem !important; padding: 11px 20px !important; box-shadow: none !important; } html[data-ui="signature"] #signoutBtn:hover, html[data-ui="signature"] #saveProfileBtn:hover, html[data-ui="signature"] #myBookingsMakeBtn:hover { background: #fff !important; border-color: #E0F2FE !important; }