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); }
|
||||
|
||||
@@ -97,6 +97,15 @@
|
||||
</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/form.js" defer></script>
|
||||
<script src="/assets/js/promo-popup.js" defer></script>
|
||||
|
||||
Reference in New Issue
Block a user