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);
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); }