4.2.1 polish

2026-05-06 08:27:24 +12:00
parent 55217f59bd
commit b8b9d12a82
16 changed files with 700 additions and 25 deletions
@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { afterNavigate } from '$app/navigation';
+  import { page } from '$app/stores';
+  import Icon from '$lib/components/Icon.svelte';
+
+  /*
+   * Sticky bottom CTA shown on mobile only.
+   *
+   * Pattern is the Airbnb-style "soft container, scroll-triggered" —
+   *   - white card sits flush against the bottom edge with a thin top
+   *     hairline and a soft shadow so it reads as a tray, not a banner;
+   *   - the brand-yellow pill CTA lives inside the card so the action
+   *     is unmistakable but the surrounding chrome stays calm;
+   *   - the bar only appears after the user has scrolled roughly one
+   *     viewport (~hero out of view), so it doesn't compete with the
+   *     in-page hero CTA.
+   *
+   * Hidden on the contact / booking flows (no point reminding someone
+   * to book while they're already on the form).
+   */
+
+  $: pathname = $page.url.pathname;
+  $: hidden = pathname === '/contact-us' || pathname === '/booking';
+
+  const SHOW_AFTER_PX = 480; // close to one mobile viewport
+  const HIDE_BELOW_PX = 120; // generous so the bar doesn't flicker near the top
+
+  let visible = false;
+
+  function evaluateVisibility() {
+    const y = window.scrollY;
+    if (y > SHOW_AFTER_PX) {
+      visible = true;
+    } else if (y < HIDE_BELOW_PX) {
+      visible = false;
+    }
+  }
+
+  afterNavigate(() => {
+    visible = false;
+  });
+
+  onMount(() => {
+    evaluateVisibility();
+    window.addEventListener('scroll', evaluateVisibility, { passive: true });
+    window.addEventListener('resize', evaluateVisibility, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', evaluateVisibility);
+      window.removeEventListener('resize', evaluateVisibility);
+    };
+  });
+</script>
+
+{#if !hidden}
+  <div
+    class="mobile-book-bar"
+    class:mobile-book-bar-visible={visible}
+    aria-hidden={!visible}
+  >
+    <a class="mobile-book-bar-cta" href="/contact-us" tabindex={visible ? 0 : -1}>
+      <Icon name="fas fa-paw" />
+      <span>Book a free Meet &amp; Greet</span>
+      <Icon name="fas fa-arrow-right" className="mobile-book-bar-arrow" />
+    </a>
+  </div>
+{/if}
+
+<style>
+  .mobile-book-bar {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .mobile-book-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 50;
+      display: flex;
+      justify-content: center;
+      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
+      background: rgba(255, 255, 255, 0.96);
+      backdrop-filter: blur(10px);
+      border-top: 1px solid rgba(17, 20, 24, 0.08);
+      box-shadow: 0 -10px 28px rgba(17, 20, 24, 0.1);
+
+      opacity: 0;
+      transform: translateY(110%);
+      pointer-events: none;
+      transition:
+        opacity 0.22s ease,
+        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .mobile-book-bar-visible {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    .mobile-book-bar-cta {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      max-width: 460px;
+      padding: 13px 22px;
+      border-radius: 999px;
+      background: var(--yellow);
+      color: #000;
+      font-family: var(--font-head);
+      font-size: 15px;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+      text-decoration: none;
+      box-shadow: 0 8px 18px rgba(255, 209, 0, 0.4);
+      transition:
+        background 0.18s ease,
+        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .mobile-book-bar-cta:active {
+      transform: translateY(1px) scale(0.995);
+      background: #e6bb00;
+    }
+
+    :global(.mobile-book-bar-cta .icon) {
+      font-size: 13px;
+    }
+
+    :global(.mobile-book-bar-cta .mobile-book-bar-arrow) {
+      font-size: 12px;
+      opacity: 0.75;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .mobile-book-bar {
+        transition: opacity 0.22s ease;
+        transform: none;
+      }
+    }
+  }
+</style>