/* ========================================================================== BAR3AM — Floating WhatsApp widget Owns: .wa* — no other section may use this prefix. Markup is the last direct child of , so it is never trapped inside a transformed/clipped ancestor and `position: fixed` stays viewport-anchored. STACKING ORDER (checked against the other section files): .header z-index 100 .wa z-index 150 <-- here: always above the sticky header .hero__modal z-index 200 (css/hero.css line 424 — the video dialog) The widget must sit UNDER the video dialog, so anything from 101..199 works; 150 leaves room on both sides. Do not raise it to or past 200. ========================================================================== */ .wa { position: fixed; z-index: 150; inset-inline-start: clamp(16px, 2vw, 24px); inset-block-end: clamp(16px, 2vw, 24px); display: flex; align-items: center; gap: 12px; /* The flex row is as wide as bubble + tooltip even while the tooltip is hidden. Killing pointer events on the box keeps that dead area from swallowing clicks on the page underneath; the buttons opt back in. */ pointer-events: none; } .wa__btn { pointer-events: auto; } /* ---- Buttons ------------------------------------------------------------ */ .wa__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; inline-size: 60px; block-size: 60px; border-radius: var(--r-pill); color: var(--c-text-on-dark); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .wa__btn--chat { background: var(--c-green-fig); box-shadow: var(--sh-lg); } .wa__btn--chat:hover { background: color-mix(in srgb, var(--c-green-fig) 86%, black); transform: translateY(-3px); } .wa__btn--chat:active { transform: translateY(0); } /* The phone button is a mobile-only affordance — a desktop visitor already has the number in the header and the footer. */ .wa__btn--call { display: none; } .wa__icon { inline-size: 28px; block-size: 28px; flex: none; } /* Visible only in the mobile bar. On desktop the bubble is an icon button and takes its name from aria-label, so the text is clipped rather than removed — `.sr-only` belongs to base.css and must not be re-declared here. */ .wa__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- Attention ring ------------------------------------------------------ */ .wa__pulse { position: absolute; inset: 0; border-radius: var(--r-pill); border: 2px solid var(--c-green-fig); opacity: 0; pointer-events: none; animation: wa-ring 2.6s var(--ease) infinite; } @keyframes wa-ring { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } /* ---- Hover tooltip ------------------------------------------------------- */ /* Sits after the bubble in source order, so the RTL flex row places it on the inline-END side — i.e. toward the middle of the screen, never off-canvas. */ .wa__tip { position: relative; display: inline-flex; align-items: center; block-size: 36px; padding-inline: 14px; border-radius: var(--r-pill); background: var(--c-card); color: var(--c-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; box-shadow: var(--sh-md); pointer-events: none; opacity: 0; visibility: hidden; /* The page is RTL-only and `transform` is physical, so +X slides the label toward the bubble (which is on the physical right in RTL). */ transform: translateX(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); } /* caret, pointing back at the bubble */ .wa__tip::after { content: ""; position: absolute; inset-inline-start: -4px; inset-block-start: 50%; inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--c-card); transform: translateY(-50%) rotate(45deg); } .wa__btn--chat:hover ~ .wa__tip, .wa__btn--chat:focus-visible ~ .wa__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } /* ========================================================================== Mobile — the bubble becomes a full-width sticky action bar. ========================================================================== */ @media (max-width: 768px) { .wa { inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-inline: 12px; padding-block-start: 10px; /* clears the iOS home indicator */ padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--c-card); border-block-start: 1px solid var(--c-line); box-shadow: 0 -8px 24px color-mix(in srgb, var(--c-navy-deep) 12%, transparent); pointer-events: auto; } .wa__tip, .wa__pulse { display: none; } .wa__btn { inline-size: 100%; block-size: 48px; font-size: var(--fs-sm); font-weight: var(--fw-bold); box-shadow: none; } .wa__btn--chat { box-shadow: none; } .wa__btn--chat:hover { transform: none; } .wa__btn--call { display: inline-flex; background: var(--c-primary); } .wa__btn--call:hover { background: var(--c-primary-dark); } .wa__icon { inline-size: 20px; block-size: 20px; } .wa__label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } /* The bar is fixed, so it would otherwise cover the last strip of the page. Reserving the same height at the end of the document keeps the footer copyright reachable; because the bar is pinned to the viewport bottom, the reserved strip is always exactly the area the bar covers — it never shows as an empty band. */ body { padding-block-end: calc(69px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 380px) { .wa__btn { gap: 6px; font-size: var(--fs-xs); } } /* ========================================================================== Reduced motion — base.css already flattens durations globally; the ring is a purely decorative loop, so it is removed outright. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .wa__pulse { display: none; animation: none; } .wa__btn--chat:hover { transform: none; } .wa__tip { transform: none; } }