azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

acg-website: Phase 3B - radio show promotion, funnel, enhanced CTAs, layout density

Browse Source 
Radio Show Promotion:
- Add LIVE badge to header phone with subtle pulse animation
- Add radio promo bar under hero (show name, time, call-in number)
- Radio ticker at bottom remains from Phase 3A

3-Step Visual Funnel:
- New funnel-steps section after Trust
- Progression: 1. Build estimate → 2. Talk it through → 3. Month-to-month start
- Interactive number badges with hover lift + color fill
- Mobile responsive (stacks vertically on small screens)

Strengthen Calculator CTAs:
- Pricing teaser: Make 'Build your exact price' primary button (was more-link)
- All 6 service cards: Add inline 'See what this costs →' calculator links
- Guides prospect directly to calculator from any service mention

Increase Vertical Rhythm:
- Section padding: clamp(2.75rem, 5.5vw, 4.25rem) for breathing room
- Service list: +1.5x base margin-bottom after dense grid
- Dispatch grid: +1.5x base margin-bottom after blog cards

All changes deployed to ww9.azcomputerguru.com and verified live.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-06-17 07:15:41 -07:00
parent 4b631f681c
commit 29b33c686a
2 changed files with 152 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
projects/acg-website-showcase/multipage/css/styles.css
View File

@@ -213,7 +213,7 @@ a:hover { color: var(--ink); }
.wrap { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 3rem, 760px); margin-inline: auto; }
section { padding-block: calc(var(--base) * 3.5); }
section { padding-block: clamp(2.75rem, 5.5vw, 4.25rem); }
.section-tag {
font-family: var(--f-mono);
font-size: 0.72rem;
@@ -315,7 +315,20 @@ h3 { font-size: 1.5rem; font-weight: 600; }
.nav__link--cta { color: var(--accent-ink) !important; font-weight: 600; }
.nav__link--cta:hover { color: var(--accent) !important; }
.nav__link--cta::after { background: var(--accent); }
.nav__phone { font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500; }
.nav__phone {
font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500;
display: flex; align-items: center; gap: 0.5rem;
}
.radio-badge {
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
background: var(--accent); color: var(--on-accent);
padding: 1px 5px; border-radius: 2px;
animation: pulse-subtle 2s ease-in-out infinite;
}
@keyframes pulse-subtle {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}
.theme-toggle, .nav__toggle {
background: transparent; border: 1px solid var(--rule); border-radius: 2px;
width: 44px; height: 44px; cursor: pointer; color: var(--ink);
@@ -402,7 +415,11 @@ h3 { font-size: 1.5rem; font-weight: 600; }
}
/* ---- Services (continuous ledger list, not cards) ----------------------- */
.svc-list { border-top: 1px solid var(--rule); margin-top: var(--base); }
.svc-list {
border-top: 1px solid var(--rule);
margin-top: var(--base);
margin-bottom: calc(var(--base) * 1.5);
}
.svc {
display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1.25rem;
align-items: baseline; padding-block: calc(var(--base) * 0.9);
@@ -420,6 +437,18 @@ h3 { font-size: 1.5rem; font-weight: 600; }
.svc__no { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-3); }
.svc__name { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; }
.svc__desc { color: var(--ink-2); font-size: 0.98rem; margin-top: 0.25rem; max-width: 60ch; }
.svc__calc-link {
font-family: var(--f-mono);
font-size: 0.85rem;
color: var(--accent-ink);
text-decoration: none;
white-space: nowrap;
transition: color var(--t-fast);
}
.svc__calc-link:hover {
color: var(--accent);
text-decoration: underline;
}
.svc__meta { font-family: var(--f-mono); font-size: 0.82rem; color: var(--accent-ink);
text-align: right; white-space: nowrap; }
@media (max-width: 680px) {
@@ -790,6 +819,7 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen
background: var(--rule);
border: 1px solid var(--rule);
margin-top: var(--base);
margin-bottom: calc(var(--base) * 1.5);
}
.dispatch-card {
@@ -892,6 +922,82 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen
font-weight: 700;
}
/* ---- 3-Step Funnel ---------------------------------------------------- */
.funnel-steps {
padding-block: calc(var(--base) * 1.25);
background: var(--surface);
border-block: 1px solid var(--rule);
}
.funnel-track {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 3vw, 2rem);
flex-wrap: wrap;
}
.funnel-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
min-width: 140px;
}
.funnel-step__num {
font-family: var(--f-display);
font-size: 2rem;
font-weight: 700;
color: var(--accent-ink);
width: 48px;
height: 48px;
border: 2px solid var(--accent);
border-radius: 2px;
display: grid;
place-items: center;
transition: background var(--t-med), color var(--t-med), transform var(--t-fast);
}
.funnel-step:hover .funnel-step__num {
background: var(--accent);
color: var(--on-accent);
transform: translateY(-2px);
}
.funnel-step__label {
font-family: var(--f-display);
font-size: 0.95rem;
font-weight: 600;
color: var(--ink);
}
.funnel-step__link {
font-family: var(--f-mono);
font-size: 0.8rem;
color: var(--accent-ink);
text-decoration: none;
transition: color var(--t-fast);
}
.funnel-step__link:hover {
color: var(--accent);
text-decoration: underline;
}
.funnel-step__note {
font-family: var(--f-mono);
font-size: 0.75rem;
color: var(--ink-2);
}
.funnel-connector {
font-family: var(--f-mono);
font-size: 1.5rem;
color: var(--rule);
}
@media (max-width: 640px) {
.funnel-connector {
display: none;
}
.funnel-track {
flex-direction: column;
gap: 1.5rem;
}
}
/* ---- Radio Ticker Marquee (Pauseable on Hover) ------------------------- */
.radio-ticker {
position: fixed;

52
projects/acg-website-showcase/multipage/index.html
View File

@@ -43,7 +43,7 @@
<a class="nav__link" href="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
</div>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300 <span class="radio-badge" title="The Computer Guru Show - Saturdays 9AM KVOI 1030AM">&#9654; LIVE</span></a>
<button class="skin-toggle" id="skinToggle" type="button" aria-label="Switch visual skin (Bold, Midnight, or Verdigris)" title="Switch skin: Bold / Midnight / Verdigris"><span class="sw" aria-hidden="true"></span></button>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme" title="Toggle light / dark"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">&#8801;</button>
@@ -72,6 +72,15 @@
</div>
</section>
<!-- RADIO PROMO BAR -->
<aside class="radio-promo" aria-label="Radio show information">
<div class="wrap" style="display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
<strong>The Computer Guru Show</strong>
<span>Saturdays <span class="time">9AM</span> on KVOI 1030AM</span>
<span style="margin-left:auto;">Call in: <strong>520-790-2020</strong></span>
</div>
</aside>
<!-- TRUST -->
<section class="trust" aria-label="Why businesses stay with us" style="padding-block:0;">
<div class="wrap">
@@ -82,6 +91,31 @@
</div>
</section>
<!-- 3-STEP FUNNEL -->
<section class="funnel-steps" aria-label="How to get started">
<div class="wrap">
<div class="funnel-track">
<div class="funnel-step reveal">
<div class="funnel-step__num">1</div>
<div class="funnel-step__label">Build your estimate</div>
<a class="funnel-step__link" href="calculator.html">Calculator <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
<div class="funnel-connector" aria-hidden="true">&rarr;</div>
<div class="funnel-step reveal">
<div class="funnel-step__num">2</div>
<div class="funnel-step__label">Talk it through</div>
<a class="funnel-step__link" href="contact.html">Contact <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
<div class="funnel-connector" aria-hidden="true">&rarr;</div>
<div class="funnel-step reveal">
<div class="funnel-step__num">3</div>
<div class="funnel-step__label">Month-to-month start</div>
<span class="funnel-step__note">No lock-in</span>
</div>
</div>
</div>
</section>
<!-- CONCIERGE TEASER -->
<section class="story" aria-labelledby="story-h">
<div class="wrap">
@@ -103,12 +137,12 @@
<p class="section-tag">Everything you need <span>/ one local partner</span></p>
<h2 id="hsvc-h">What we do</h2>
<div class="svc-list">
<article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name.</p></div><div class="svc__meta">from&nbsp;$19&nbsp;/endpoint</div></article>
<article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses.</p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
<article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Backup &amp; Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback.</p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
<article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Microsoft 365 &amp; Email</h3><p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported.</p></div><div class="svc__meta">from&nbsp;$2&nbsp;/mailbox</div></article>
<article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Business Phones</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises.</p></div><div class="svc__meta">from&nbsp;$22&nbsp;/user</div></article>
<article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Web &amp; Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support.</p></div><div class="svc__meta">from&nbsp;$15&nbsp;/mo</div></article>
<article class="svc reveal"><div class="svc__no">01</div><div><h3 class="svc__name">Managed IT (GPS)</h3><p class="svc__desc">24/7 monitoring, automated patching, and a help desk that knows your name. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$19&nbsp;/endpoint</div></article>
<article class="svc reveal"><div class="svc__no">02</div><div><h3 class="svc__name">Cybersecurity</h3><p class="svc__desc">EDR, email security, dark-web monitoring, and training that catch what antivirus misses. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
<article class="svc reveal"><div class="svc__no">03</div><div><h3 class="svc__name">Backup &amp; Recovery</h3><p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">in GPS-Pro &amp; up</div></article>
<article class="svc reveal"><div class="svc__no">04</div><div><h3 class="svc__name">Microsoft 365 &amp; Email</h3><p class="svc__desc">Migrations, licensing, and email that is configured, secured, and supported. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$2&nbsp;/mailbox</div></article>
<article class="svc reveal"><div class="svc__no">05</div><div><h3 class="svc__name">Business Phones</h3><p class="svc__desc">Cloud phone systems with mobile and desktop apps, porting, and no usage surprises. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$22&nbsp;/user</div></article>
<article class="svc reveal"><div class="svc__no">06</div><div><h3 class="svc__name">Web &amp; Email Hosting</h3><p class="svc__desc">Managed hosting with free SSL, daily backups, and real humans on support. <a class="svc__calc-link" href="calculator.html">See what this costs &rarr;</a></p></div><div class="svc__meta">from&nbsp;$15&nbsp;/mo</div></article>
</div>
<a class="more-link" href="services.html">See all services <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
@@ -126,8 +160,8 @@
<div class="tier" role="listitem"><h3 class="tier__name">GPS-Advanced</h3><div class="tier__price">$39 <span class="per">/ endpoint / mo</span></div><p class="tier__blurb" style="border-bottom:0;">Enterprise-grade security and compliance.</p></div>
</div>
<div class="inline-actions">
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="calculator.html">Build an estimate <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">See full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>