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:
@@ -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); }
|
||||
|
||||
Reference in New Issue
Block a user