Add floating call/SMS CTA widget; fix tel: link coverage

- Floating widget (bottom-right, fixed) with two circular icon buttons:
  call (amber, tel:+17166021429) and SMS (green, sms:+17166021429)
- Widget renders on every page via _footer.php global template
- SVG phone and message icons, hover scale transition, ARIA labels
- CSS added to components.css (.float-cta, .float-cta__call, .float-cta__sms)
- Verified all existing tel: links already correct in header, footer, templates
This commit is contained in:
2026-06-09 15:16:36 +02:00
parent 765996e6df
commit 2ecccbae89
2 changed files with 43 additions and 0 deletions
+34
View File
@@ -2089,4 +2089,38 @@ html, body {
margin-top: var(--space-4); margin-top: var(--space-4);
transition: gap var(--transition); transition: gap var(--transition);
} }
/* --- Floating Call / SMS ---------------------------------- */
.float-cta {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 900;
display: flex;
flex-direction: column;
gap: .65rem;
}
.float-cta a {
display: flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(0,0,0,.35);
transition: transform .18s ease, box-shadow .18s ease;
text-decoration: none;
}
.float-cta a:hover,
.float-cta a:focus-visible {
transform: scale(1.1);
box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.float-cta__call { background: var(--amber); }
.float-cta__sms { background: #25a244; }
.float-cta a svg {
width: 1.5rem;
height: 1.5rem;
fill: #fff;
}
.card--service:hover .card-link { gap: var(--space-3); } .card--service:hover .card-link { gap: var(--space-3); }
+9
View File
@@ -97,6 +97,15 @@
</div> </div>
</div> </div>
<div class="float-cta" aria-label="Quick contact">
<a href="tel:+17166021429" class="float-cta__call" aria-label="Call (716) 602-1429" title="Call us">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
</a>
<a href="sms:+17166021429" class="float-cta__sms" aria-label="Text (716) 602-1429" title="Text us">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
</a>
</div>
<script src="/assets/js/main.js" defer></script> <script src="/assets/js/main.js" defer></script>
<script src="/assets/js/form.js" defer></script> <script src="/assets/js/form.js" defer></script>
<script src="/assets/js/promo-popup.js" defer></script> <script src="/assets/js/promo-popup.js" defer></script>