/* ===================================================================== sticky-cta.css — Docokids mobile sticky CTA bar (.sticky-cta). A bottom-fixed conversion bar shown ONLY on mobile (≤767.98px), where 80%+ of campaign traffic lives. Keeps the primary CTA thumb-reachable at all times as the visitor scrolls the landing. Pure CSS — no JS. Hidden by default (desktop) and revealed at the mobile breakpoint, so it never affects desktop and never appears on pages that don't include the partial. Every value is a var(--token); the shadow is a layout constant. The landing template adds bottom padding to its last section on mobile so the bar never covers content (.has-sticky-cta, set on ). ===================================================================== */ .sticky-cta { display: none; /* desktop: hidden */ } @media (max-width: 767.98px) { .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background-color: var(--paper-pure); border-top: 1px solid var(--hairline); padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); /* lift the bar off the content */ } .sticky-cta .btn { display: block; width: 100%; text-align: center; padding-top: var(--space-3); padding-bottom: var(--space-3); } /* Reserve room so the fixed bar never covers the footer/last section. The bar is ~64px tall; pad the body bottom on mobile when it is present. */ body.has-sticky-cta { padding-bottom: 5rem; } }