/* * assets/css/components/sticky-cta.css * Component layer: the global mobile sticky CTA bar. * * STICKY, NOT FIXED. This bar started as a copy of .ad-fyo__sticky's * `position: fixed; inset: auto 0 0 0` and drifted off screen on real iOS * Safari after a scroll-up-then-down — reproducible on a phone, invisible in * desktop engines and simulator gestures. That is the known WebKit failure * class: a viewport-fixed element loses its anchor while the dynamic browser * toolbar resizes the visual viewport, and `overflow-x: clip` on the body * (site-shell.css, needed for the full-bleed sections) is a documented trigger * for fixed descendants detaching from the viewport mid-scroll. Rather than * chase the trigger we removed the mechanism: `position: sticky; bottom: 0` * pins against the document scroller instead of the visual viewport, so the * toolbar resize cannot strand it. * * The bar MUST stay the last layout element in (rendered after * layout/footer.twig by AD_Timber_Header_Footer::render_footer_markup(), with * only scripts after it). Sticky is bounded by its containing block, so a * bottom-pinned bar only floats above content that precedes it — move it * higher in the DOM and everything below stops being covered. Being last also * means the bar reserves real space at the document end, which is why the * footer needs no bottom-clearance padding. * * Sticky preconditions verified in this theme: body is `overflow-x: clip` with * overflow-y computing to `visible` (clip + visible do NOT force a scroll * container the way hidden would), no ancestor sets a transform/filter/ * containment, and html/body are auto-height — so the document scroller is the * nearest scrollport and the bar sticks to it. * * z-index 60 keeps the bar under the offcanvas menu (999) and header (1000) — * the open menu covers it, which is why no JS is needed here. * * The markup always renders; everything below is inside the mobile band so * desktop output is unchanged. Above 767px the bar is `display: none` and * contributes zero height, so it must never be given in-flow styling outside * the mobile band. */ .ad-sticky-cta { display: none; } @media (max-width: 767px) { .ad-sticky-cta { position: sticky; bottom: 0; z-index: 60; display: block; padding: 1rem var(--gutter, 1.6rem) calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--ad-color-white, #ffffff); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } /* The advance bar's label is an

heading, centered over its button (owner decision, 2026-08-11). Heading role earns the semibold weight and the navy heading color; the size stays at the bar's 1.4rem so a two-line question cannot push the bar taller than the thumb zone it lives in. text-wrap: balance keeps the two lines even rather than leaving one word stranded under a centered first line. / .ad-sticky-cta__label { / auto side margins, not 0: site-shell.css caps headings at --heading-max-width, and a capped box would sit flush left with only its text centered inside it. / margin: 0 auto 0.8rem; color: var(--ad-text-heading); font-family: var(--ad-font-primary); font-size: 1.4rem; font-weight: var(--ad-font-weight-semibold); / Explicit `normal`, not inherited: the theme's heading tracking is -2px, tuned for 40-56px display sizes, and at 14px it swallowed the word gaps entirely ("Wonderingifit'sanairwayissue?"). Turning the element from
to

is what pulled that rule in. / letter-spacing: normal; line-height: 1.4; text-align: center; text-wrap: balance; } / The bar owns the ruled 48px mobile touch target; .ad-locationsbtn's own 40px default is the /locations card sizing, not a sticky-bar sizing. / .ad-sticky-cta .ad-locationsbtn { --ad-button-min-height: var(--ad-button-min-height-mobile, 48px); text-align: center; white-space: nowrap; } / Escalated past hostile link colors that out-specify the button family — `.single-post a { color: var(--ad-blog-link) }` in blog-content.css (0,1,1) beats `.ad-locationsbtn--filled` (0,1,0) and painted the advance button's label blue on teal. The shell prefix restores the button's own colors. / body.ad-timber-site-shell .ad-sticky-cta .ad-locationsbtn--filled { color: var(--ad-action-teal-text); } body.ad-timber-site-shell .ad-sticky-cta .ad-locationsbtn--outlined { color: var(--ad-action-teal-bg); } .ad-sticky-ctaactions { display: flex; gap: 1rem; / Centered so the single-button convert bar (the shipped default — the call button is gated off in sticky_cta_convert_shows_call()) reads as a deliberate centered action rather than a half-empty row. With two buttons the pair still fills the box, so this is inert. / justify-content: center; } / The convert row must survive a 320px viewport. `flex: 1` (basis 0, equal halves) plus the bar's `white-space: nowrap` and the flex default `min-width: auto` gave the call button a hard 186.5px floor at 14px/24px padding, so "Call (346) 266-0880" hung off the right edge below ~370px and had zero slack up to 425px. Basis `auto` sizes each button to its own label, `min-width: 0` lets them shrink if a longer number ever appears, and the fluid size + 1.6rem inline padding bring the pair to 264px at 320px — inside the 288px content box, still nowrap. / .ad-sticky-ctaactions .ad-locationsbtn { --ad-button-padding: 10px 1.6rem; --ad-button-font-size: clamp(1.2rem, 3.8vw, 1.4rem); flex: 1 1 auto; min-width: 0; } / Single-button convert: the lone Book online button takes the full mobile action treatment instead of shrink-wrapping its label — same width rule the advance button already uses, so the two modes look like one system. `:only-child` means this needs no PHP-side class; restoring the call button turns it off automatically. / .ad-sticky-ctaactions .ad-locationsbtn:only-child { width: 100%; max-width: var(--ad-button-max-width-mobile); } / Advance = a centered stack: heading, then one button under it. The button still fills the bar's content box on a phone (the ruled full-width mobile action), but is capped and margin-centered so the "centered below the heading" arrangement holds if the bar is ever seen on a wider screen inside the mobile band. / .ad-sticky-cta--advance { text-align: center; } .ad-sticky-cta--advance .ad-locations__btn { display: flex; width: 100%; max-width: var(--ad-button-max-width-mobile); margin-inline: auto; } / No footer bottom-clearance rules here on purpose. The fixed bar needed them because it overlapped the end of the document; the sticky bar occupies its own slot after the footer, so the footer is always fully readable at the bottom of the page. The body.ad-has-sticky-cta* classes still ship from PHP as hooks — they just drive nothing in this file. */ }