/* Sticky "Book a Chat" CTA (03-11, Figma 10355:3911 in-situ + component set
10411:4621; icon-roll hover measured off primary.studio .framer-JZTno).
Architecture (Ben's revision, supersedes the plan's hardcoded markup): Ben
authors the anchor in the ACF theme-options WYSIWYG field
`sticky_cta_content`; footer.php renders it in .tb-sticky-cta-slot just
before wp_footer(). The theme ships two INDEPENDENT, COMPOSABLE classes he
assigns to that anchor:
.tb-book-a-chat — the pill styling (works on any , anywhere)
.tb-sticky-cta — fixed bottom-center positioning + past-the-fold reveal
(body.sticky-cta-visible, toggled by sticky-cta.js)
e.g. Book a Chat
Token-only CSS. Exemption note: the ::after icon is the inline-encoded
sticky-cta-icon-default.svg (base64 data URI); ITS INTERNAL FILLS (white
circle / black calendar glyph) live inside the encoded SVG, not as CSS
hex values. */
/* ---------------------------------------------------------------------------
Pill (.tb-book-a-chat) — Figma 10411:4621 Default state:
black pill, label left (18/25.2 white), 42.877px icon circle right,
gap 13.87px, padding 6.3 / 6.3 / 6.3 / 25, radius 63px, intrinsic width
(comp's 183px ≈ intrinsic at "Book a Chat"; label is WYSIWYG-editable). */
.tb-book-a-chat {
position: relative;
display: inline-flex;
align-items: center;
gap: 13.87px;
padding: 6.3px 6.3px 6.3px 25px;
border: 1px solid transparent;
border-radius: 63px;
background-color: var(--Neutral-100);
color: var(--Neutral-0);
font-family: var(--header-font);
font-size: 18px;
line-height: 25.2px;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
/* Icon — white circle + black calendar glyph, injected as a masked-off
::after so the WYSIWYG anchor needs no inner markup. The SVG's fills
ship inside the data URI (var(--fill-0, white/black) fallbacks resolve
since CSS custom properties don't reach background-image SVGs). */
&::after {
content: '';
flex: 0 0 auto;
width: 42.877px;
height: 42.877px;
border-radius: 50%;
background-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgdmlld0JveD0iMCAwIDQyLjg3NjggNDIuODc2OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikdyb3VwIDE5Ij4KPGNpcmNsZSBpZD0iRWxsaXBzZSA0MTg4IiBjeD0iMjEuNDM4NSIgY3k9IjIxLjQzODUiIHI9IjIxLjQzODQiIGZpbGw9InZhcigtLWZpbGwtMCwgd2hpdGUpIi8+CjxnIGlkPSJHcm91cCAxOCI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik0xNy4yMjczIDI5LjUyNzVDMTYuMTcwOSAyOS41Mjc1IDE1LjI5OTggMjkuNTI2MiAxNC40ODU3IDI5LjUyMzVDMTMuNzI1OSAyOS41MjA4IDEzLjA3OTcgMjkuMjcxNiAxMi42MTY5IDI4LjgwMjlDMTIuMTU0NyAyOC4zMzQ1IDExLjkxIDI3LjY4MTkgMTEuOTA5IDI2LjkxNTZDMTEuOTA0NyAyMi45MDQ0IDExLjkwNTEgMTkuMzA4NyAxMS45MDk0IDE1LjkyNDJDMTEuOTEwNCAxNS4xNDE4IDEyLjExMzMgMTQuNTM0OSAxMi41MTI2IDE0LjEyMUMxMi45MTI4IDEzLjcwNTcgMTMuNTAwNSAxMy40OTUyIDE0LjI1OSAxMy40OTUyQzE0LjI3NjggMTMuNDk1MiAxNC4yOTQ0IDEzLjQ5NTIgMTQuMzEyNiAxMy40OTU2QzE0LjMyNzIgMTMuNDk1NiAxNC4zNDE0IDEzLjQ5NTYgMTQuMzU1NiAxMy40OTU2QzE0LjU3NTggMTMuNDk1NiAxNC44MjA1IDEzLjQ3NDcgMTQuOTY2NSAxMy4zMjAxQzE1LjA4IDEzLjE5OTcgMTUuMTI3NCAxMy4wMTA0IDE1LjExNTEgMTIuNzI0NkMxNS4wODYgMTIuMDUyMSAxNS40MzgyIDExLjYyOTIgMTYuMDU3IDExLjU5NDJDMTYuMDg3MSAxMS41OTI1IDE2LjExNzIgMTEuNTkxNSAxNi4xNDY0IDExLjU5MTVDMTYuNzM1NyAxMS41OTE1IDE3LjA3MjcgMTEuOTQyNSAxNy4xNDc1IDEyLjYzNTJDMTcuMjM2MiAxMy40NTc2IDE3LjI2MjQgMTMuNDgxMSAxOC4wNzk1IDEzLjQ4MTVIMTguMTExOUMxOC43MTE4IDEzLjQ4MTUgMTkuMzExNCAxMy40ODA0IDE5LjkxMDkgMTMuNDc5NEMyMC41MTA1IDEzLjQ3ODQgMjEuMTEwMSAxMy40Nzc0IDIxLjcwOTYgMTMuNDc3NEMyMi45OTA1IDEzLjQ3NzQgMjMuOTc3OCAxMy40ODI1IDI0LjkxMSAxMy40OTM2QzI0LjkyMzMgMTMuNDkzNiAyNC45MzU1IDEzLjQ5MzYgMjQuOTQ3OCAxMy40OTM2QzI1LjI1NzcgMTMuNDkzNiAyNS40Mzk4IDEzLjQ0MDggMjUuNTU1NiAxMy4zMTc0QzI1LjY3MDUgMTMuMTk1MyAyNS43MTU5IDEzLjAwOTQgMjUuNzAyNiAxMi43MTUyQzI1LjY4NTQgMTIuMzM0NiAyNS43NjQ5IDEyLjA0NTcgMjUuOTM4MyAxMS44NTcxQzI2LjA5OTIgMTEuNjgyNiAyNi4zNDM5IDExLjU5MDUgMjYuNjY2IDExLjU4MzhDMjYuNjc3IDExLjU4MzggMjYuNjg3OSAxMS41ODM0IDI2LjY5ODggMTEuNTgzNEMyNy4wMjgyIDExLjU4MzQgMjcuMzAwNCAxMS42ODg3IDI3LjQ4NjQgMTEuODg3NEMyNy42Njk1IDEyLjA4MzEgMjcuNzU3MiAxMi4zNjI1IDI3Ljc0IDEyLjY5NUMyNy43MjM4IDEzLjAxMTQgMjcuNzY4MiAxMy4yMDc0IDI3Ljg4MzcgMTMuMzMxMkMyOC4wMjM0IDEzLjQ4MDQgMjguMjU4MSAxMy41MDEzIDI4LjQ5MTIgMTMuNTAxM0MyOC41MTc3IDEzLjUwMTMgMjguNTQ0NSAxMy41MDEzIDI4LjU3MjYgMTMuNTAwM0MyOC41ODk1IDEzLjUwMDMgMjguNjA2NyAxMy41IDI4LjYyMzMgMTMuNUMyOS45MjIxIDEzLjUgMzAuODY4MyAxNC40ODcxIDMwLjg3MzIgMTUuODQ3NUMzMC44ODE1IDE4LjA2NDYgMzAuODgxMiAyMC4zMTg4IDMwLjg4MTIgMjIuNDk4NkMzMC44ODEyIDIzLjU5MzcgMzAuODgxMiAyNC42ODg4IDMwLjg4MTggMjUuNzg0MkMzMC44ODE4IDI1Ljk0MjIgMzAuODg4MSAyNi4xMDMgMzAuODk0MSAyNi4yNTgzQzMwLjkwNDcgMjYuNTM4MSAzMC45MTU2IDI2LjgyNzIgMzAuODkxNCAyNy4xMDY2QzMwLjc1MzQgMjguNzA4MSAyOS44NjgxIDI5LjUyMTQgMjguMjYwNSAyOS41MjQxQzI3LjQzNzcgMjkuNTI1NSAyNi41NDI5IDI5LjUyNjIgMjUuNDQzNCAyOS41MjYyQzI0LjgyNTMgMjkuNTI2MiAyNC4yMDc1IDI5LjUyNjIgMjMuNTg5NCAyOS41MjU4QzIyLjk3MTMgMjkuNTI1NSAyMi4zNTM2IDI5LjUyNTUgMjEuNzM1NSAyOS41MjU1SDIxLjM3MzNDMjAuNzA5NSAyOS41MjU1IDIwLjA0NTQgMjkuNTI2MiAxOS4zODEyIDI5LjUyNjhDMTguNjYzMSAyOS41Mjc1IDE3Ljk0NTQgMjkuNTI4MiAxNy4yMjc2IDI5LjUyODJMMTcuMjI3MyAyOS41Mjc1Wk0yMS4zODgyIDI4LjI1ODlDMjIuMDE0OSAyOC4yNTg5IDIyLjY0MTYgMjguMjU5NiAyMy4yNjgzIDI4LjI1OTlDMjMuODk1IDI4LjI2MDYgMjQuNTIxNyAyOC4yNjA5IDI1LjE0ODQgMjguMjYwOUMyNi4yMTY4IDI4LjI2MDkgMjcuMDg5MSAyOC4yNTkyIDI3Ljg5NCAyOC4yNTU1QzI4LjM5NDIgMjguMjUzMiAyOC43ODUyIDI4LjEzMjggMjkuMDU2MyAyNy44OTc4QzI5LjMzNjggMjcuNjU0MyAyOS40ODI4IDI3LjI5NDYgMjkuNDkwNCAyNi44MjgyQzI5LjUxODIgMjUuMTA2NCAyOS41MTU1IDIzLjM1NTYgMjkuNTEyOSAyMS42NjIzQzI5LjUxMTkgMjAuOTcxNCAyOS41MTA2IDIwLjI1NjkgMjkuNTExNiAxOS41NTQyQzI5LjUxMTYgMTkuMzg4MSAyOS40Nzc1IDE5LjI3NTggMjkuNDAzNiAxOS4yMDA0QzI5LjMzNTQgMTkuMTMxMiAyOS4yMzgxIDE5LjA5NzYgMjkuMTA1NyAxOS4wOTc2QzI4LjkzODUgMTkuMDk3OSAyOC43NzM2IDE5LjA5ODIgMjguNjA4NyAxOS4wOTgyQzI4LjIzNDYgMTkuMDk4MiAyNy44NjA1IDE5LjA5NzIgMjcuNDg2NCAxOS4wOTYyQzI3LjExMjMgMTkuMDk1MiAyNi43MzgyIDE5LjA5NDIgMjYuMzY0MSAxOS4wOTQyQzI2LjExMjggMTkuMDk0MiAyNS44NjE1IDE5LjA5NDUgMjUuNjEwMyAxOS4wOTU5QzI0LjkwNTcgMTkuMDk5MiAyNC4xODk3IDE5LjEwODMgMjMuNDk3MSAxOS4xMTc0QzIyLjYzMSAxOS4xMjg1IDIxLjczNTEgMTkuMTM5OSAyMC44NTQ1IDE5LjEzOTlDMjAuMjQyNyAxOS4xMzk5IDE5LjY5MjQgMTkuMTM0NSAxOS4xNzIzIDE5LjEyMzFDMTguODg5OSAxOS4xMTcxIDE4LjU5MjYgMTkuMTE0IDE4LjI2MzIgMTkuMTE0QzE3Ljc1OCAxOS4xMTQgMTcuMjQ1MiAxOS4xMjExIDE2Ljc0ODkgMTkuMTI4MkMxNi4yNTM2IDE5LjEzNDkgMTUuNzQxMSAxOS4xNDIzIDE1LjIzNzYgMTkuMTQyM0MxNC43NzYxIDE5LjE0MjMgMTQuMzY3NiAxOS4xMzYyIDEzLjk4ODEgMTkuMTI0MUMxMy45NjU2IDE5LjEyMzQgMTMuOTQ0MSAxOS4xMjMxIDEzLjkyMjkgMTkuMTIzMUMxMy43MDI4IDE5LjEyMzEgMTMuNTYzNyAxOS4xNjU1IDEzLjQ3MSAxOS4yNjA2QzEzLjM3MjQgMTkuMzYxOCAxMy4zMjk3IDE5LjUyMTkgMTMuMzMyNiAxOS43NzkxQzEzLjM1MDUgMjEuMzIwMSAxMy4zNDkyIDIyLjg4NzIgMTMuMzQ3NSAyNC40MDNDMTMuMzQ2OSAyNS4wNTI5IDEzLjM0NjIgMjUuNzI0NyAxMy4zNDcyIDI2LjM4NTdDMTMuMzQ4MiAyNy4xMzgyIDEzLjQ2MTggMjcuNTc3IDEzLjcyNjkgMjcuODUyN0MxMy45OTQxIDI4LjEzMDUgMTQuNDIxMiAyOC4yNTA4IDE1LjE1NDggMjguMjU0OUMxNS45MSAyOC4yNTg5IDE2Ljc0MDMgMjguMjYwOSAxNy43NjczIDI4LjI2MDlDMTguMjg0MSAyOC4yNjA5IDE4LjgwMTIgMjguMjYwNiAxOS4zMTgzIDI4LjI1OTlDMTkuODM1MSAyOC4yNTk2IDIwLjM1MjMgMjguMjU4OSAyMC44NjkgMjguMjU4OUMyMS4wNDIyIDI4LjI1ODkgMjEuMjE1IDI4LjI1ODkgMjEuMzg3OCAyOC4yNTg5SDIxLjM4ODJaTTI4LjE1MDkgMTcuNzE0M0MyOC4zNzUgMTcuNzE0MyAyOC41NjM3IDE3LjcyMTQgMjguNzE1NyAxNy43Mjc0QzI4LjgyNTYgMTcuNzMxNCAyOC45MjAzIDE3LjczNTEgMjkuMDAxNyAxNy43MzUxQzI5LjE4NjggMTcuNzM1MSAyOS4zMTg1IDE3LjcxNyAyOS40MDQ2IDE3LjYyNzVDMjkuNTMxMSAxNy40OTU0IDI5LjUyNDggMTcuMjQ3NiAyOS41MTA2IDE2LjcwMzlDMjkuNTA1OSAxNi41Mjk0IDI5LjUwMSAxNi4zMzE0IDI5LjQ5ODYgMTYuMDk1N0MyOS40OTMzIDE1LjUzOTIgMjkuMjQ0NyAxNS4xNDgyIDI4LjgxNTcgMTUuMDIyMUMyOC42MzY5IDE0Ljk2OTYgMjguNDgyOSAxNC45NDQxIDI4LjM0NDkgMTQuOTQ0MUMyOC4wMDU1IDE0Ljk0NDEgMjcuNzMwMSAxNS4wOTg3IDI3LjUwMjYgMTUuNDE2NUMyNy4yOTM0IDE1LjcwOSAyNi45OTE4IDE1Ljg3MDEgMjYuNjUzOCAxNS44NzAxQzI2LjI1OTUgMTUuODcwMSAyNS44OTAzIDE1LjY0ODggMjUuNjY1OSAxNS4yNzgzQzI1LjQ5MDEgMTQuOTg3NCAyNS4yNDU0IDE0Ljk2MzIgMjUuMDA5NyAxNC45NjMyTDIzLjcxNTkgMTQuOTYzOUMyMi45Njg3IDE0Ljk2MzkgMjIuMjIxNSAxNC45NjQ2IDIxLjQ3NDYgMTQuOTY0NkMyMC4wMDg2IDE0Ljk2NDYgMTguODIzMSAxNC45NjMyIDE3Ljc0MjQgMTQuOTYwMkgxNy43Mzg4QzE3LjQyODkgMTQuOTYwMiAxNy4yNDI5IDE1LjA2NzggMTcuMDc1MyAxNS4zNDQ1QzE2Ljg2ODggMTUuNjg1NSAxNi41MDk5IDE1Ljg4OTIgMTYuMTE0OSAxNS44ODkyQzE1LjcyIDE1Ljg4OTIgMTUuMzYwOCAxNS42ODQ1IDE1LjE2MDggMTUuMzQxMkMxNS4wMDUyIDE1LjA3NDIgMTQuODI4NCAxNC45NjIyIDE0LjU0OTYgMTQuOTU0MkMxNC41MjU1IDE0Ljk1MzUgMTQuNTAxNiAxNC45NTMxIDE0LjQ3ODEgMTQuOTUzMUMxMy43MjYzIDE0Ljk1MzEgMTMuMzgwMyAxNS4zMDcyIDEzLjM1NTggMTYuMTAxN0MxMy4zNTI1IDE2LjIxMDMgMTMuMzU0OCAxNi4zMjAzIDEzLjM1NzEgMTYuNDI2NUMxMy4zNjA4IDE2LjU5MjMgMTMuMzY0NCAxNi43NjM4IDEzLjM0NTkgMTYuOTI3OEMxMy4zMTMxIDE3LjIxNDcgMTMuMzUwOCAxNy40MDgzIDEzLjQ2NDEgMTcuNTM3NEMxMy41ODIzIDE3LjY3MjMgMTMuNzc0OSAxNy43MzIxIDE0LjA4ODUgMTcuNzMyMUgxNC4xMTc2QzE1LjA5MjkgMTcuNzIwNyAxNi4xNjcyIDE3LjcxNTYgMTcuNDk4MSAxNy43MTU2QzE4LjE1NCAxNy43MTU2IDE4LjgwOTUgMTcuNzE3IDE5LjQ2NTMgMTcuNzE4QzIwLjEwNDYgMTcuNzE5IDIwLjc0MzkgMTcuNzIwMyAyMS4zODMyIDE3LjcyMDNDMjIuMDQ5NiAxNy43MjAzIDIyLjcxNjQgMTcuNzIxNyAyMy4zODI4IDE3LjcyMzRDMjQuMDQ5NiAxNy43MjQ3IDI0LjcxNjQgMTcuNzI2NCAyNS4zODI4IDE3LjcyNjRDMjYuNDEzNCAxNy43MjY0IDI3LjI2MSAxNy43MjI3IDI4LjA0ODkgMTcuNzE1M0MyOC4wODMzIDE3LjcxNTMgMjguMTE3NCAxNy43MTUgMjguMTUwMiAxNy43MTVMMjguMTUwOSAxNy43MTQzWiIgZmlsbD0idmFyKC0tZmlsbC0wLCBibGFjaykiLz4KPHBhdGggaWQ9IlZlY3Rvcl8yIiBkPSJNMjMuMzEzMSAyMi43MjI2QzIzLjA5OTIgMjIuNzIyNiAyMi44OTM5IDIyLjY5NDMgMjIuNzAyNiAyMi42Mzg4QzIyLjI5OSAyMi41MjE4IDIyLjExMzMgMjIuMDI4MiAyMi4yMTc5IDIxLjM1MTFDMjIuMjg2MSAyMC45MDg5IDIyLjUxMTUgMjAuNzAzMSAyMi45Mjc3IDIwLjcwMzFDMjIuOTQwMyAyMC43MDMxIDIyLjk1MjkgMjAuNzAzMSAyMi45NjU4IDIwLjcwMzhDMjMuMDEzOCAyMC43MDUyIDIzLjA2MTggMjAuNzA1OCAyMy4xMDk4IDIwLjcwNThDMjMuMTQ5MiAyMC43MDU4IDIzLjE4ODMgMjAuNzA1OCAyMy4yMjc2IDIwLjcwNTJDMjMuMjY2NCAyMC43MDUyIDIzLjMwNTQgMjAuNzA0NSAyMy4zNDQ1IDIwLjcwNDVIMjMuMzUzNUwyMy4zNTc0IDIwLjcwMzhDMjMuNDU2NCAyMC42OTE0IDIzLjU0OTQgMjAuNjg1IDIzLjYzMzkgMjAuNjg1QzIzLjkyODggMjAuNjg1IDI0LjEzNDEgMjAuNzU5IDI0LjI2MDkgMjAuOTExNkMyNC40OTU2IDIxLjE5MzcgMjQuNDQ2IDIxLjcyNTYgMjQuMzU3NiAyMi4yNTgyQzI0LjMyNTUgMjIuNDUxNiAyNC4xNzUyIDIyLjYwMDUgMjMuOTY1MyAyMi42NDY2QzIzLjczNjUgMjIuNjk3IDIzLjUxNzMgMjIuNzIyNiAyMy4zMTM3IDIyLjcyMjZIMjMuMzEzMVoiIGZpbGw9InZhcigtLWZpbGwtMCwgYmxhY2spIi8+CjxwYXRoIGlkPSJWZWN0b3JfMyIgZD0iTTI2Ljg0MzggMjIuNzA3M0MyNi44MjM2IDIyLjcwNzMgMjYuODAzNCAyMi43MDczIDI2Ljc4MzIgMjIuNzA2NkMyNi4zMjQ3IDIyLjY5NzIgMjUuOTY5MSAyMi41MjA2IDI1Ljc4MTcgMjIuMjA5NkMyNS41OTE3IDIxLjg5MzYgMjUuNjAwMyAyMS40ODM0IDI1LjgwNjIgMjEuMDU0QzI1Ljk2MjUgMjAuNzI4MiAyNi4yMTMxIDIwLjcwMTYgMjYuNTAwNSAyMC43MDE2QzI2LjUzNjYgMjAuNzAxNiAyNi41NzI2IDIwLjcwMiAyNi42MDk0IDIwLjcwMjZDMjYuNjQ3MSAyMC43MDMgMjYuNjg0OSAyMC43MDM2IDI2LjcyMyAyMC43MDM2QzI2Ljc4OTIgMjAuNzAzNiAyNi44NDM1IDIwLjcwMiAyNi44OTM1IDIwLjY5ODZIMjYuODk3NEMyNi45ODk1IDIwLjY4NjIgMjcuMDc2MiAyMC42ODAxIDI3LjE1NTcgMjAuNjgwMUMyNy40Mzg0IDIwLjY4MDEgMjcuNjM2NCAyMC43NTQ3IDI3Ljc2MTIgMjAuOTA4MUMyOC4wMTAxIDIxLjIxNDcgMjcuOTM0MyAyMS44MjEzIDI3Ljg0MDMgMjIuMzE1OUMyNy44MDQyIDIyLjUwNTIgMjcuNjQ4NiAyMi42MzU2IDI3LjQyNDIgMjIuNjY0MkMyNy4xOTQ3IDIyLjY5MzUgMjcuMDEgMjIuNzA3MyAyNi44NDM1IDIyLjcwNzNIMjYuODQzOFoiIGZpbGw9InZhcigtLWZpbGwtMCwgYmxhY2spIi8+CjxwYXRoIGlkPSJWZWN0b3JfNCIgZD0iTTE5LjY2MDYgMjIuNzA5OEMxOC44ODM2IDIyLjcwODUgMTguNjgyMyAyMi40OTQgMTguNjgyMyAyMS42NjU4QzE4LjY4MjMgMjAuODM4NCAxOC44Mzk5IDIwLjcwMzUgMTkuODA0NyAyMC43MDM1SDE5LjgyMTVDMjAuMzAwOSAyMC43MDQ1IDIwLjU1NDkgMjAuNzY0NyAyMC42OTc2IDIwLjkxMkMyMC44MzEzIDIxLjA0OTkgMjAuODgzNiAyMS4yNzc1IDIwLjg3ODMgMjEuNjk3MUMyMC44NjgxIDIyLjQ4MjUgMjAuNTk2OSAyMi43MDk4IDE5LjY2OTYgMjIuNzA5OEgxOS42NjA2WiIgZmlsbD0idmFyKC0tZmlsbC0wLCBibGFjaykiLz4KPHBhdGggaWQ9IlZlY3Rvcl81IiBkPSJNMTYuMjE1NCAyMi43MDk3QzE1LjMwNDcgMjIuNzA2NyAxNS4wODI4IDIyLjQ5NTkgMTUuMDg1NSAyMS42MzU1QzE1LjA4NzggMjAuODI2MiAxNS4yMjc1IDIwLjcwNDEgMTYuMTUyMiAyMC43MDQxSDE2LjE3OTNDMTcuMTI5NSAyMC43MDY4IDE3LjI4NTEgMjAuODQ0NyAxNy4yODg3IDIxLjY4NjJDMTcuMjkwNCAyMi4wODEzIDE3LjIyNDUgMjIuMzI1OCAxNy4wNzQ1IDIyLjQ3ODRDMTYuOTE4IDIyLjYzODEgMTYuNjU3MSAyMi43MDk0IDE2LjIyODcgMjIuNzA5NEgxNi4yMTU0VjIyLjcwOTdaIiBmaWxsPSJ2YXIoLS1maWxsLTAsIGJsYWNrKSIvPgo8cGF0aCBpZD0iVmVjdG9yXzYiIGQ9Ik0yMC4xNjE3IDI2LjI5NjVDMjAuMTQxMiAyNi4yOTY1IDIwLjEyMDMgMjYuMjk1OCAyMC4wOTg4IDI2LjI5NDhDMjAuMDYwMSAyNi4yOTI4IDIwLjAxODQgMjYuMjkxOCAxOS45NzE0IDI2LjI5MThDMTkuOTIxNCAyNi4yOTE4IDE5Ljg3MSAyNi4yOTI4IDE5LjgyMSAyNi4yOTQxQzE5Ljc3MiAyNi4yOTUxIDE5LjcyMjcgMjYuMjk2NSAxOS42NzM3IDI2LjI5NjVIMTkuNjU4NUMxOS4yNDggMjYuMjk0NSAxOC45MjIyIDI2LjE0NDggMTguNzQxOCAyNS44NzUyQzE4LjU1NiAyNS41OTc4IDE4LjUzOTggMjUuMjIxMiAxOC42OTU3IDI0LjgxNDdDMTguODU1MyAyNC4zOTg4IDE5LjE1MjYgMjQuMzY1MiAxOS40OTYzIDI0LjM2NTJDMTkuNTM1NyAyNC4zNjUyIDE5LjU3NTEgMjQuMzY1OCAxOS42MTQ1IDI0LjM2NjJDMTkuNjU0NSAyNC4zNjY4IDE5LjY5NDYgMjQuMzY3MiAxOS43MzQ2IDI0LjM2NzJDMTkuNzUzOCAyNC4zNjcyIDE5Ljc3MjcgMjQuMzY3MiAxOS43OTE5IDI0LjM2NjhDMjAuMjg3MiAyNC4zNjc5IDIwLjU5MzggMjQuNDYxMyAyMC43NTU2IDI0LjY2MUMyMC45MTQ2IDI0Ljg1NzEgMjAuOTQ2MyAyNS4xNzA4IDIwLjg1NTMgMjUuNjQ3NkMyMC43NzA1IDI2LjA5MDcgMjAuNTUwNCAyNi4yOTcyIDIwLjE2MjQgMjYuMjk3MkwyMC4xNjE3IDI2LjI5NjVaIiBmaWxsPSJ2YXIoLS1maWxsLTAsIGJsYWNrKSIvPgo8cGF0aCBpZD0iVmVjdG9yXzciIGQ9Ik0yNy4xNzA4IDI2LjMwNTNDMjcuMTE3MiAyNi4zMDUzIDI3LjA2NTIgMjYuMzAzMyAyNy4wMTQ5IDI2LjMwMTNDMjYuOTkzNyAyNi4zMDAzIDI2Ljk3MzIgMjYuMjk5NiAyNi45NTMzIDI2LjI5OUMyNi4zNzkyIDI2LjI5NzMgMjYuMDQ0MiAyNi4yMDQ4IDI1Ljg2NDggMjUuOTk5NEMyNS43MDY4IDI1LjgxODUgMjUuNjU5NSAyNS41MzgxIDI1LjcxMTEgMjUuMDkwOUMyNS43NzE3IDI0LjU2OCAyNS45NzI0IDI0LjM4NTggMjYuNTA1NyAyNC4zNjg2QzI2LjU1MDEgMjQuMzY3MyAyNi41OTcxIDI0LjM2NjYgMjYuNjU4MyAyNC4zNjY2QzI2LjY4NjggMjQuMzY2NiAyNi44MDIgMjQuMzY3MyAyNi44MzA4IDI0LjM2NzNDMjcuMzE3OCAyNC4zNjczIDI3LjYzNzMgMjQuNDczNSAyNy44MDc4IDI0LjY5MjFDMjcuOTgwMyAyNC45MTMgMjguMDA5MSAyNS4yNiAyNy44OTU5IDI1Ljc1MjJDMjcuNzg0IDI2LjIzODQgMjcuNDgxIDI2LjMwNTcgMjcuMTcwNSAyNi4zMDU3TDI3LjE3MDggMjYuMzA1M1oiIGZpbGw9InZhcigtLWZpbGwtMCwgYmxhY2spIi8+CjxwYXRoIGlkPSJWZWN0b3JfOCIgZD0iTTIzLjY0MDYgMjYuMzE2QzIzLjU0MzkgMjYuMzE2IDIzLjQ0MiAyNi4zMDczIDIzLjM0MzYgMjYuMjk4OUMyMy4yNDMgMjYuMjkwMiAyMy4xMzg3IDI2LjI4MTQgMjMuMDM3MSAyNi4yODE0QzIyLjk5MjEgMjYuMjgxNCAyMi45NTA3IDI2LjI4MzEgMjIuOTEwOSAyNi4yODY1QzIyLjg5MDEgMjYuMjg4MSAyMi44Njk2IDI2LjI4OTEgMjIuODQ5NCAyNi4yODkxQzIyLjU4MTUgMjYuMjg5MSAyMi4zODM2IDI2LjEyMjcgMjIuMjkyNSAyNS44MjA4QzIyLjEyNjYgMjUuMjcxIDIyLjE2NTEgMjQuODg0NyAyMi40MTcgMjQuNTY4M0MyMi41NTcgMjQuMzkyOCAyMi43NDE0IDI0LjM2ODYgMjIuOTE5NiAyNC4zNjg2QzIyLjk2MjkgMjQuMzY4NiAyMy4wMDYgMjQuMzY5OSAyMy4wNDggMjQuMzcxNkMyMy4wODk3IDI0LjM3MyAyMy4xMzA4IDI0LjM3NDMgMjMuMTcwMiAyNC4zNzQzQzIzLjIwOTYgMjQuMzc0MyAyMy4yNDUzIDI0LjM3MyAyMy4yNzY0IDI0LjM2OTlDMjMuODAwMiAyNC4zNzA2IDI0LjEzOTUgMjQuNDc4NSAyNC4zMTQgMjQuNzAwMUMyNC40ODMyIDI0LjkxNTMgMjQuNTEyNiAyNS4yNTgzIDI0LjQwMzQgMjUuNzQ4MUMyNC4zODI5IDI1Ljg0MDkgMjQuMzUxMSAyNS45MjEgMjQuMzEyNCAyNS45Nzk4QzI0LjExNiAyNi4yNzYgMjMuODYyNCAyNi4zMTU3IDIzLjY0MDMgMjYuMzE1N0wyMy42NDA2IDI2LjMxNloiIGZpbGw9InZhcigtLWZpbGwtMCwgYmxhY2spIi8+CjxwYXRoIGlkPSJWZWN0b3JfOSIgZD0iTTE2LjM0ODUgMjYuMjk5NkMxNi4zMTQ3IDI2LjI5OTYgMTYuMjgwNiAyNi4yOTk2IDE2LjI0NjggMjYuMjk5MkMxNi4yMTY0IDI2LjI5OTIgMTYuMTg1NiAyNi4yOTg5IDE2LjE1NTEgMjYuMjk4OUMxNS43MTYxIDI2LjI5ODIgMTUuMzczNSAyNi4xNDk5IDE1LjE5MTEgMjUuODgxNkMxNS4wMDQzIDI1LjYwNjkgMTQuOTkwMSAyNS4yMTc2IDE1LjE1MSAyNC43ODQ1QzE1LjI5MjcgMjQuNDAzMiAxNS41NjI1IDI0LjM3MTYgMTUuODUwMiAyNC4zNzE2QzE1Ljg4IDI0LjM3MTYgMTUuOTA5OCAyNC4zNzE5IDE1LjkzOTYgMjQuMzcyM0MxNS45Njk0IDI0LjM3MjYgMTUuOTk4OSAyNC4zNzI5IDE2LjAyNzcgMjQuMzcyOUMxNi4wNzQgMjQuMzcyOSAxNi4xMTE0IDI0LjM3MTkgMTYuMTQ1OSAyNC4zNzAzQzE2LjY4MTUgMjQuMzcwOSAxNi45Nzc4IDI0LjQ0NjYgMTcuMTM2MSAyNC42MjMxQzE3LjI4NTEgMjQuNzg4OSAxNy4zMzA0IDI1LjA2MjIgMTcuMjg3NyAyNS41MzY2QzE3LjIzOCAyNi4wOTA0IDE3LjAzMzggMjYuMjgyNCAxNi40Nzg5IDI2LjI5ODVDMTYuNDM1MiAyNi4yOTk5IDE2LjM5MTUgMjYuMzAwMiAxNi4zNDgxIDI2LjMwMDJMMTYuMzQ4NSAyNi4yOTk2WiIgZmlsbD0idmFyKC0tZmlsbC0wLCBibGFjaykiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
&:hover {
background-color: var(--Primary-Alt-50-Base);
color: var(--Neutral-0);
}
/* Focus state (comp: 1px --Primary-Alt-50-Base border on the default
pill) — the transparent base border reserves the pixel so no layout
shift. */
&:focus-visible {
outline: none;
border-color: var(--Primary-Alt-50-Base);
}
}
/* Icon-slide hover (Ben QA round 4 — ROTATION REMOVED; supersedes the
measured primary.studio wheel-roll): on hover the icon travels straight
across the pill to the LEFT side (translateX only) and the label slides
right into the vacated space; both mirror on unhover.
OVERSHOOT (round 4): the icon travels ~1px PAST its end position and
settles back — in BOTH directions, achieved purely through the
overshooting transition timing function (which applies symmetrically on
reverse): cubic-bezier(0.25, 1.17, 0.35, 1), curve max ≈ 1.0065–1.008 =
~0.9–1px past on the ~127px travel. The roll DISTANCE is untouched — the
resting inset stays Ben's 7px; the overshoot momentarily kisses ~6px then
settles. The label rides the SAME duration + easing so the two move as
one system (its 38px travel overshoots a proportionate ~0.3px — correct,
not compensated), and the background-color shares them too (channel
overshoot on color is sub-1-unit, imperceptible). All three transitions
read --tb-chat-duration / --tb-chat-ease so they can't drift.
TRANSFORMS ONLY (Ben QA round 1): hover must not change layout — the pill
width stays constant between states and padding NEVER changes on hover
(the comp's pl/pr swap is fully expressed by the two transforms). The
earlier text-indent label slide participated in the anchor's intrinsic
inline size and stretched the pill ~40px on hover — replaced by a
transform on .tb-book-a-chat__label (span injected by sticky-cta.js,
since a bare anchor's text node can't take a transform).
Roll distance: --tb-chat-roll — travel from the icon's DEFAULT left edge
(pillWidth − right border − right pad − icon width, all live-computed by
sticky-cta.js) to its HOVER left edge (7px, Ben's tuned inset), measured
per instance (WYSIWYG label length changes intrinsic width) and
re-measured on resize; the 128px fallback covers the default label.
Label shift: 62.75 hover label start (6 + 42.877 + 13.87) − 25 default
left pad = 37.75px (--tb-chat-label-shift).
No-JS fallback (span absent): the motion rules are scoped to
:has(.tb-book-a-chat__label), so until sticky-cta.js wraps the label the
hover is bg-only — no icon slide can overlap an unshiftable label.
All motion is gated behind prefers-reduced-motion: no-preference —
reduced motion gets the bg-only hover change (no slide). */
@media (prefers-reduced-motion: no-preference) {
.tb-book-a-chat {
--tb-chat-duration: 600ms;
--tb-chat-ease: cubic-bezier(0.4, 0.63, 0, 1.15);;
transition: background-color var(--tb-chat-duration) var(--tb-chat-ease), transform 400ms var(--ease-out-cubic);
& .tb-book-a-chat__label {
display: inline-block;
transition: transform var(--tb-chat-duration) var(--tb-chat-ease);
}
&::after {
transition: transform var(--tb-chat-duration) var(--tb-chat-ease);
}
&:has(.tb-book-a-chat__label):hover {
& .tb-book-a-chat__label {
transform: translateX(var(--tb-chat-label-shift, 37.75px));
}
&::after {
transform: translateX(calc(-1 * var(--tb-chat-roll, 128px)));
}
}
}
}
/* ---------------------------------------------------------------------------
Sticky positioning + reveal (.tb-sticky-cta) — fixed bottom-CENTER
(in-situ node 10355:3911), hidden by default, revealed under
body.sticky-cta-visible (sticky-cta.js: IntersectionObserver on the Hero
[data-fold-marker], threshold 0, skipped in the BB editor).
Reveal is a pure SLIDE, no fade (Ben, QA round 3): the pill stays at full
opacity and enters from fully OFF the viewport's bottom edge, exiting the
same way. Hidden transform = translateY(100% + the bottom offset) —
translateY(100%) alone would leave the pill peeking, since it sits
--tb-sticky-bottom above the edge. The offset var is shared with the
`bottom` property so the two can never drift. The transform states live
OUTSIDE the motion gate (they ARE the hiding mechanism now that there's
no opacity); only the transition is motion-gated — reduced motion gets an
instant jump instead of the slide. */
.tb-sticky-cta {
--tb-sticky-bottom: 40px;
position: fixed;
bottom: var(--tb-sticky-bottom);
left: 50%;
translate: -50% 0;
z-index: 900;
/* Hidden default — no-JS / above-the-fold / editor state: fully below
the viewport edge at full opacity. */
transform: translateY(calc(100% + var(--tb-sticky-bottom, 40px)));
pointer-events: none;
}
/* Revealed past the fold — UNLESS the footer is in view (body.footer-in-view,
toggled by sticky-cta.js): near the footer the pill slides back off-screen so
it never overlaps the footer's own contact CTA (Ben QA round 2). The
:not() gate makes footer-hide win regardless of source order. */
body.sticky-cta-visible:not(.footer-in-view) .tb-sticky-cta {
transform: none;
pointer-events: auto;
}
/* Mobile ≤767 (D-12): tighter bottom inset, same centering — the pill
scales fine intrinsically. (The var feeds both `bottom` and the hidden
transform's off-viewport offset.) */
@media (max-width:767px) {
.tb-sticky-cta {
--tb-sticky-bottom: 20px;
}
}