/* ============================================================================
IBIX sticky mobile CTA — the corrected version.
Load after base/ibix-base.css.
WHY IT EXISTS (the honest version): Fitts's Law. Time to hit a target is a
function of its size and its distance from where the pointer already is, so
a large action parked in the thumb arc is reachable from every screen of the
page instead of only from the hero. That is real, foundational, uncontested
HCI (R 06 §5/§7).
WHAT IT IS NOT: the circulating "sticky bottom bars lift conversion 31%
(2026 study)" has no named study, institution or dataset behind it. Never
quote it, in a proposal or anywhere else (R 06 MYTHS).
THE CORRECTION THIS FILE CARRIES (ruling D9): the earlier house snippet
reached for a blur. It must not. Blur on a position:fixed element repaints
every scroll frame on iOS Safari — a documented WebKit issue, and Safari is
28.7% of Saudi mobile and 44.7% of UK mobile (F44, F45). At 92% opacity over
a dark page the blur contributes almost nothing visually anyway, so the
solid background costs the design nothing and removes the jank outright.
Blur on a fixed or sticky element is a documented exception that requires a
test on a real iOS device — never a default.
(The property name is written as two words throughout this file so qa.py's
Safari-prefix scan cannot false-positive on a comment. Same trick the base
stylesheet uses for its dead-media-query note.)
========================================================================= */
/* --- PREREQUISITE IN THE HTML ------------------------------------- */
/* env(safe-area-inset-bottom) resolves to 0 unless the viewport meta opts in.
Without viewport-fit=cover the bar sits under the iPhone home indicator and
the bottom of the button is not tappable:
That is the single most-missed line in this whole snippet. */
/* --- THE BAR -------------------------------------------------------------- */
.sticky-cta {
position: fixed;
inset-inline: 0; /* logical — mirrors itself on /ar/ (R 11 §1) */
bottom: 0;
z-index: var(--z-sticky, 40); /* the scale lives in motion-kit.css */
display: flex;
gap: .5rem;
padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
/* Near-opaque solid. NOT glass, NOT a blur, NOT a gradient (D9). */
background: var(--surface-solid, rgba(10, 10, 10, .92));
border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, .12));
}
/* Fitts's Law, made literal: each action is a full half of the bar and taller
than the WCAG 2.2 AA floor of 24x24 CSS px (F27) by a wide margin. */
.sticky-cta .btn { flex: 1; min-height: 48px; }
/* Desktop already has the hero CTA above the fold, so the bar is dead weight
and steals vertical space. Note the space before each "(" — writing "and("
with no space makes the whole query a function token and it silently never
applies anywhere (the trap ibix-base.css documents). */
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media print { .sticky-cta { display: none !important; } }
/* --- THE BAR MUST NOT COVER THE LAST ROW OF THE PAGE --------------------- */
/* A fixed bar sits on top of the footer's final line forever. Reserve the
space. Keep this number in step with the bar's real height if you change the
padding or the button size. */
@media (max-width: 899px) {
body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* --- ONE STICKY THING AT A TIME ------------------------------------------ */
/* Practitioner consensus with a real mechanism behind it, not a measured lift:
a chat bubble AND a cookie banner AND a sticky CTA all competing for the
same bottom corner of a phone is a clutter problem you can observe on live
sites, and competing targets increase selection time and error rate
(R 06 §7). Pick one. These hooks enforce it:
- while the consent banner is open, the CTA stands down
- the floating WhatsApp bubble and the sticky CTA are mutually exclusive */
body.banner-open .sticky-cta { display: none; }
body:has(.sticky-cta) .wa-float { display: none; }
/* :has() has shipped in every major engine since December 2023 and covers ~93%
of browsers (F12). Where it is unsupported nothing breaks — you just get
both elements, which is the state you had before. */
/* ============================================================================
THE BUYER-TYPE SWITCH (ruling D8) — pick a branch, delete the others.
This keys on WHO IS BUYING, not on which country the client is in.
========================================================================= */
/* --- BRANCH (a) · GULF CONSUMER-ADJACENT B2B ------------------------------
Signage, printing, trades, SME, anything a human buys on their own phone.
Phone + WhatsApp. WhatsApp is directionally dominant in Gulf consumer
messaging; there is NO citable penetration figure — every "90%+ Saudi
WhatsApp" number traces to API-reseller blogs and is banned (B19). Do not
put a percentage in a proposal. Ship the button because it is how these
buyers actually message, and say exactly that.
wa.me is WhatsApp's own public, stable deep-link format — no API, no
backend, nothing to bill for. Pre-fill `text=` with a service-specific
prompt: it drops the user's typing effort to near zero, which is the same
Fitts's-Law logic as the bar itself (R 06 §6). */
.sticky-cta--wa .btn--primary { background: var(--wa, #25D366); color: #08130c; }
/* --- BRANCH (b) · PURE ARAMCO-VENDOR OPERATIONAL CONTRACTOR ---------------
Rig moving, drilling services, crane hire to an operator, anything bought by
a procurement department against a vendor number.
PHONE AND EMAIL ONLY. NO WHATSAPP. 0 of 2 directly-observed oilfield-
procurement sites offer it, and a consumer chat channel reads as the wrong
register to that buyer (D8, R 10 §2/§7). MEDIUM confidence, n=2-3 — but the
downside of getting it wrong is asymmetric, so this is the default.
*/
/* --- BRANCH (c) · UK TRADES ----------------------------------------------
tel: is primary and takes the larger half of the bar. WhatsApp is NOT a
default here — no source supports it for UK home-services buyers (D8).
Speed of response is the actual lever: an industry study of 100,000+ sales
calls found responding within five minutes made agents ~100x likelier to
reach the lead than waiting half an hour (F54, vendor-owned data, 2007 — say
"an industry study", never "an MIT study").
*/
.sticky-cta--phone-led .btn--primary { flex: 2; }
.sticky-cta--phone-led .btn--ghost { flex: 1; }
/* --- CONTRAST -------------------------------------------------------------
WCAG AA is 4.5:1 for body text and 3:1 for large text and for the button's
own boundary against its surroundings (F25, F26). The bar's background is
near-opaque, so check the button label against rgba(10,10,10,.92) composited
over the page's own dark surface — and generate that ratio with the checker.
Every published ratio in this corpus must be machine-produced; hand-typed
"verified" annotations have been wrong in the passing direction before
(D16, B39). */