/* KCK back to top, blog. The same component as the store and the glossary. Every rule below is byte-identical to the glossary's copy in kck-glossary.css, with one rename: the local token is --kck-totop-bottom rather than --kck-gloss-totop-bottom. Originally ported from .kck-totop in the store's kck-header-2026.css, which uses the --kck-* token set. That set is not on this install, so each value is mapped to its --doc-* equivalent or carries the store's literal as a var() fallback. Checked on the blog: --doc-dur, --doc-ease and --kck-space-24 are all absent here, which is exactly why the fallbacks matter. Behavior comes from kck-totop.js. */ :root { /* The store's --kck-space-24. Measured on the blog: the chat launcher sits at bottom 40px and is 50px tall, so its top edge is at 90px. 96px clears it. */ --kck-totop-bottom: 96px; } .kck-totop { position: fixed; right: var(--doc-space-8); bottom: var(--kck-totop-bottom); z-index: 8900; display: inline-flex; align-items: center; gap: var(--doc-space-2); min-height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--doc-line); box-shadow: var(--doc-shadow-md, 0 4px 14px rgba(56, 52, 46, 0.08)); font-family: var(--doc-font-heading); /* 13px, matched to .kck-totop in the store's kck-header-2026.css. The store is the reference for this component, so all three properties carry the same value. 13px has no named token in the scale, which jumps 12 to 14, but it is on the raw px scale and matching the store matters more here. */ font-size: 13px; font-weight: 700; color: var(--doc-ink); text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--doc-dur, 200ms) var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)), visibility var(--doc-dur, 200ms), border-color 140ms var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)), color 140ms var(--doc-ease, cubic-bezier(0.4, 0, 0.2, 1)); } .kck-totop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .kck-totop:hover, .kck-totop:focus { border-color: var(--doc-red); color: var(--doc-red); text-decoration: none; } .kck-totop:focus-visible { outline: 2px solid var(--doc-red); outline-offset: 3px; } .kck-totop svg { width: 18px; height: 18px; display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* This install puts has-drawer-open on , not the kck-drawer-open on that the store's v2 header uses. Verified: the blog's copy of kck-header-footer.js is byte-identical to the glossary's, same md5, so the class and the element are the same on both. */ html.has-drawer-open .kck-totop { opacity: 0; visibility: hidden; pointer-events: none; } /* Mobile collapses the pill to a 44px circle and drops the label, matching the live site. This whole block was missing from the port. */ @media (max-width: 767px) { .kck-totop { right: var(--doc-space-4); bottom: calc(var(--kck-totop-bottom) + env(safe-area-inset-bottom, 0px)); padding: 0; width: 44px; justify-content: center; } .kck-totop span { display: none; } } @media print { .kck-totop { display: none; } } @media (prefers-reduced-motion: reduce) { .kck-totop { transition: none; transform: none; } }