sync: auto-sync from Mikes-MacBook-Air.local at 2026-06-17 06:18:23
Author: Mike Swanson Machine: Mikes-MacBook-Air.local Timestamp: 2026-06-17 06:18:23
This commit is contained in:
@@ -26,7 +26,7 @@
|
||||
<a class="nav__link" href="index.html">Home</a>
|
||||
<a class="nav__link" href="services.html">Services</a>
|
||||
<a class="nav__link" href="pricing.html">Pricing</a>
|
||||
<a class="nav__link" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link" href="about.html" aria-current="page">About</a>
|
||||
<a class="nav__link" href="contact.html">Contact</a>
|
||||
</div>
|
||||
@@ -107,6 +107,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -132,6 +132,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
<a class="nav__link" href="index.html">Home</a>
|
||||
<a class="nav__link" href="services.html">Services</a>
|
||||
<a class="nav__link" href="pricing.html">Pricing</a>
|
||||
<a class="nav__link" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link" href="about.html">About</a>
|
||||
<a class="nav__link" href="contact.html" aria-current="page">Contact</a>
|
||||
</div>
|
||||
@@ -101,6 +101,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -274,6 +274,8 @@ h3 { font-size: 1.5rem; font-weight: 600; }
|
||||
.nav a { font-family: var(--f-body); font-size: 0.92rem; color: var(--ink-2);
|
||||
text-decoration: none; }
|
||||
.nav a:hover { color: var(--ink); }
|
||||
.nav__link--cta { color: var(--accent-ink) !important; font-weight: 600; }
|
||||
.nav__link--cta:hover { color: var(--accent) !important; }
|
||||
.nav__phone { font-family: var(--f-mono); color: var(--ink) !important; font-weight: 500; }
|
||||
.theme-toggle, .nav__toggle {
|
||||
background: transparent; border: 1px solid var(--rule); border-radius: 2px;
|
||||
@@ -656,3 +658,280 @@ select:focus, .stepper input:focus, input:focus { outline: 2px solid var(--accen
|
||||
background: linear-gradient(135deg, var(--surface-2) 0 50%, var(--accent) 50% 100%); }
|
||||
.skin-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
@media (max-width: 560px) { .nav__phone { display: none; } }
|
||||
|
||||
/* ---- Custom Cursor - REMOVED (restored to normal system cursor) ------- */
|
||||
|
||||
/* ---- Instant State Changes (No Transitions) ---------------------------- */
|
||||
.btn,
|
||||
a,
|
||||
.tier,
|
||||
.service-card,
|
||||
.svc,
|
||||
.more-link,
|
||||
.theme-toggle,
|
||||
.skin-toggle,
|
||||
.nav__toggle,
|
||||
.faq__q,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.tier:hover {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
/* Service cards (.svc) have complex internal styling - no hover inversion */
|
||||
|
||||
.more-link:hover .arrow {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
/* ---- Clip-Path Wipe Reveals -------------------------------------------- */
|
||||
.reveal {
|
||||
clip-path: inset(0 100% 0 0);
|
||||
animation: reveal-wipe 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
.reveal.in {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
@keyframes reveal-wipe {
|
||||
from { clip-path: inset(0 100% 0 0); }
|
||||
to { clip-path: inset(0 0 0 0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal {
|
||||
clip-path: inset(0 0 0 0);
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Field Intelligence Dispatch Board --------------------------------- */
|
||||
.dispatch-board {
|
||||
background: var(--surface);
|
||||
border-block: 1px solid var(--rule);
|
||||
}
|
||||
|
||||
.dispatch-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: calc(var(--base) * 1.5);
|
||||
margin-top: var(--base);
|
||||
}
|
||||
|
||||
.dispatch-card {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--rule);
|
||||
padding: calc(var(--base) * 1.25);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dispatch-card__label {
|
||||
font-family: var(--f-mono);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
color: var(--accent-ink);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.dispatch-card__title {
|
||||
font-family: var(--f-display);
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.dispatch-card__excerpt {
|
||||
color: var(--ink-2);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dispatch-card__meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--rule);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.dispatch-card__date {
|
||||
font-family: var(--f-mono);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.dispatch-card__tag {
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-family: var(--f-mono);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dispatch-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Radio Ticker Marquee ---------------------------------------------- */
|
||||
.radio-ticker {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-top: 1px solid var(--accent);
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.radio-ticker__track {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
animation: ticker-scroll 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.radio-ticker__item {
|
||||
font-family: var(--f-mono);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
white-space: nowrap;
|
||||
padding: 0 3rem;
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
.radio-ticker__item strong {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.radio-ticker__item::before {
|
||||
content: "●";
|
||||
color: var(--accent);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* ---- Exit Intent Banner (Subtle Slide-Down, Below Header) ------------- */
|
||||
.exit-offer {
|
||||
position: fixed;
|
||||
top: 73px; /* Below header (72px min-height + 1px border) */
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
z-index: 45; /* Below header (z-index: 50) but above content */
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.4s ease;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.exit-offer.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.exit-offer__content {
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto;
|
||||
padding: 1rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.exit-offer__message {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.exit-offer__message strong {
|
||||
font-family: var(--f-display);
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.exit-offer__message p {
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.exit-offer__actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.exit-offer__close {
|
||||
background: transparent;
|
||||
border: 1px solid var(--on-accent);
|
||||
color: var(--on-accent);
|
||||
font-size: 1.2rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.exit-offer__close:hover {
|
||||
background: var(--on-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.exit-offer .btn {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
}
|
||||
|
||||
.exit-offer .btn--primary {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.exit-offer .btn--primary:hover {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.exit-offer__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.exit-offer__actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<a class="nav__link" href="index.html" aria-current="page">Home</a>
|
||||
<a class="nav__link" href="services.html">Services</a>
|
||||
<a class="nav__link" href="pricing.html">Pricing</a>
|
||||
<a class="nav__link" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link" href="about.html">About</a>
|
||||
<a class="nav__link" href="contact.html">Contact</a>
|
||||
</div>
|
||||
@@ -132,6 +132,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FIELD INTELLIGENCE DISPATCH BOARD -->
|
||||
<section class="dispatch-board ledger" aria-labelledby="dispatch-h">
|
||||
<div class="wrap">
|
||||
<p class="section-tag">Field intelligence <span>/ community blog</span></p>
|
||||
<h2 id="dispatch-h">Dispatch Board</h2>
|
||||
<p class="lead">Real fixes, real lessons, real clients. What we learned this week so you do not have to.</p>
|
||||
<div class="dispatch-grid">
|
||||
<article class="dispatch-card reveal">
|
||||
<div class="dispatch-card__label">Field Report #142</div>
|
||||
<h3 class="dispatch-card__title">Why Your Backup Is Not Actually a Backup</h3>
|
||||
<p class="dispatch-card__excerpt">Three Tucson businesses discovered their backups were corrupted only after ransomware hit. Here is what they missed.</p>
|
||||
<div class="dispatch-card__meta">
|
||||
<span class="dispatch-card__date">June 14, 2026</span>
|
||||
<span class="dispatch-card__tag">Backup & Recovery</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="dispatch-card reveal">
|
||||
<div class="dispatch-card__label">Field Report #141</div>
|
||||
<h3 class="dispatch-card__title">The $47,000 Phishing Email</h3>
|
||||
<p class="dispatch-card__excerpt">How a single wire transfer approval almost bankrupted a local law firm, and the one setting that would have stopped it.</p>
|
||||
<div class="dispatch-card__meta">
|
||||
<span class="dispatch-card__date">June 11, 2026</span>
|
||||
<span class="dispatch-card__tag">Email Security</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="dispatch-card reveal">
|
||||
<div class="dispatch-card__label">Field Report #140</div>
|
||||
<h3 class="dispatch-card__title">Microsoft Copilot Is Leaking Your Data</h3>
|
||||
<p class="dispatch-card__excerpt">Default Copilot settings expose internal emails and documents to the entire company. Here is how to lock it down.</p>
|
||||
<div class="dispatch-card__meta">
|
||||
<span class="dispatch-card__date">June 7, 2026</span>
|
||||
<span class="dispatch-card__tag">Microsoft 365</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<a class="more-link" href="https://community.azcomputerguru.com" target="_blank" rel="noopener">Read all field reports <span class="arrow" aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta-band" aria-labelledby="cta-h">
|
||||
<div class="wrap">
|
||||
@@ -147,6 +186,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -280,4 +280,83 @@
|
||||
} else {
|
||||
reveals.forEach(function (el) { el.classList.add("in"); });
|
||||
}
|
||||
|
||||
/* ---- Custom Cursor - REMOVED (restored to normal system cursor) ------- */
|
||||
|
||||
/* ---- Magnetic Buttons ------------------------------------------------- */
|
||||
$$(".btn, .tier, button").forEach(function (btn) {
|
||||
btn.addEventListener("mousemove", function (e) {
|
||||
var rect = btn.getBoundingClientRect();
|
||||
var x = (e.clientX - rect.left - rect.width / 2) * 0.15;
|
||||
var y = (e.clientY - rect.top - rect.height / 2) * 0.15;
|
||||
btn.style.transform = "translate(" + x + "px, " + y + "px)";
|
||||
});
|
||||
|
||||
btn.addEventListener("mouseleave", function () {
|
||||
btn.style.transform = "";
|
||||
});
|
||||
});
|
||||
|
||||
/* ---- Calculator to Contact Handoff ------------------------------------ */
|
||||
window.lockEstimate = function () {
|
||||
var endpoints = $("#endpoints");
|
||||
var tier = $("#tier");
|
||||
var support = $("#support");
|
||||
var monthlyTotal = $(".calc__out .tnum");
|
||||
|
||||
if (endpoints && tier && monthlyTotal) {
|
||||
var estimate = {
|
||||
endpoints: endpoints.value,
|
||||
tier: tier.options[tier.selectedIndex].text,
|
||||
support: support ? support.options[support.selectedIndex].text : "Standard",
|
||||
monthly: monthlyTotal.textContent.trim(),
|
||||
timestamp: Date.now()
|
||||
};
|
||||
|
||||
try {
|
||||
sessionStorage.setItem("acg_estimate", JSON.stringify(estimate));
|
||||
} catch (e) {}
|
||||
|
||||
window.location.href = "contact.html?from=calculator";
|
||||
}
|
||||
};
|
||||
|
||||
// Pre-fill contact form with estimate if coming from calculator
|
||||
if (window.location.search.indexOf("from=calculator") > -1) {
|
||||
try {
|
||||
var storedEstimate = sessionStorage.getItem("acg_estimate");
|
||||
if (storedEstimate) {
|
||||
var est = JSON.parse(storedEstimate);
|
||||
var msgField = $("#cf-message");
|
||||
if (msgField) {
|
||||
msgField.value = "I'd like a quote for:\n" +
|
||||
est.endpoints + " endpoints\n" +
|
||||
est.tier + " tier\n" +
|
||||
est.support + " support\n" +
|
||||
"Estimated monthly: " + est.monthly;
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
/* ---- Exit Intent Banner (Subtle, 3-second delay) ---------------------- */
|
||||
var exitShown = false;
|
||||
document.addEventListener("mouseout", function (e) {
|
||||
if (!exitShown && e.clientY <= 0 && e.relatedTarget == null) {
|
||||
exitShown = true;
|
||||
// Show exit banner after 3 second delay (less aggressive)
|
||||
setTimeout(function () {
|
||||
var offer = $("#exitOffer");
|
||||
if (offer) offer.classList.add("show");
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
|
||||
var closeExit = $("#closeExit");
|
||||
if (closeExit) {
|
||||
closeExit.addEventListener("click", function () {
|
||||
var offer = $("#exitOffer");
|
||||
if (offer) offer.classList.remove("show");
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<a class="nav__link" href="index.html">Home</a>
|
||||
<a class="nav__link" href="services.html">Services</a>
|
||||
<a class="nav__link" href="pricing.html" aria-current="page">Pricing</a>
|
||||
<a class="nav__link" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link" href="about.html">About</a>
|
||||
<a class="nav__link" href="contact.html">Contact</a>
|
||||
</div>
|
||||
@@ -189,6 +189,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<a class="nav__link" href="index.html">Home</a>
|
||||
<a class="nav__link" href="services.html" aria-current="page">Services</a>
|
||||
<a class="nav__link" href="pricing.html">Pricing</a>
|
||||
<a class="nav__link" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link nav__link--cta" href="calculator.html">Estimate</a>
|
||||
<a class="nav__link" href="about.html">About</a>
|
||||
<a class="nav__link" href="contact.html">Contact</a>
|
||||
</div>
|
||||
@@ -97,6 +97,32 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- RADIO TICKER MARQUEE -->
|
||||
<div class="radio-ticker">
|
||||
<div class="radio-ticker__track">
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
<div class="radio-ticker__item"><strong>The Computer Guru Show</strong> Saturdays 9AM on KVOI 1030AM</div>
|
||||
<div class="radio-ticker__item">Call in: <strong>520-790-2020</strong></div>
|
||||
<div class="radio-ticker__item">Tucson's trusted tech talk since 2001</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXIT INTENT BANNER -->
|
||||
<div class="exit-offer" id="exitOffer">
|
||||
<div class="exit-offer__content">
|
||||
<div class="exit-offer__message">
|
||||
<strong>Wait — Free IT Assessment</strong>
|
||||
<p>Most Tucson businesses overpay for IT. Get a free audit before you go.</p>
|
||||
</div>
|
||||
<div class="exit-offer__actions">
|
||||
<a class="btn btn--primary" href="contact.html">Get Free Assessment</a>
|
||||
<button class="exit-offer__close" id="closeExit" aria-label="Close banner">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="wrap">
|
||||
<p>© <span id="year">2026</span> Arizona Computer Guru · Protecting Tucson businesses since 2001</p>
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
## User
|
||||
- **User:** Mike Swanson (mike)
|
||||
- **Machine:** Mikes-MacBook-Air
|
||||
- **Role:** admin
|
||||
|
||||
## Session Summary
|
||||
|
||||
Deployed the ACG website redesign to production at ww9.azcomputerguru.com and implemented Phase 1 and Phase 2 enhancements based on combined Gemini + Claude recommendations. Session began by locating the website project that was previously worked on using machine GURU-5070, confirming it was the multipage Bold design showcase with 6 pages.
|
||||
|
||||
Initial deployment created the ww9 subdomain via cPanel UAPI, configured Cloudflare DNS (grey cloud, DNS-only A record pointing to 72.194.62.5), uploaded all files via rsync, and triggered AutoSSL for HTTPS. User then requested dropping the Paper/Ledger design entirely to focus on Bold as the default. Made Bold the base design by removing all skin-specific selectors and updating default skin from "ledger" to "bold" across all 7 HTML files, CSS tokens, and JavaScript.
|
||||
|
||||
Implemented Phase 1 enhancements: custom hollow square cursor with hover fill, exit intent modal, radio ticker marquee promoting The Computer Guru Show, instant state changes removing smooth transitions, magnetic buttons, and calculator-to-contact form handoff. User feedback required three major refinements: (1) custom cursor was too aggressive and removed entirely, (2) exit intent full-screen modal was too jarring and converted to subtle orange banner sliding from top with 3-second delay, (3) exit banner positioned at top denied access to site so repositioned 73px below header. Also corrected radio show time from "1PM-3PM" to "9AM Saturday" and fixed five choices section hover readability by removing .svc from hover inversion rule.
|
||||
|
||||
Implemented Phase 2 enhancements: Field Intelligence Dispatch Board section on homepage with 3-column grid of blog post cards linking to community.azcomputerguru.com, orange Calculator CTA in navigation across all pages, and clip-path wipe reveals replacing opacity-based animations for geometric brutalist aesthetic. All changes deployed to ww9 and verified live.
|
||||
|
||||
## Key Decisions
|
||||
|
||||
- **Made Bold the permanent default design** - Removed Paper/Ledger/Sonoran aesthetic entirely rather than keeping as alternate skin. User wanted to focus development on Bold only. Updated all `:root` tokens, removed `html[data-skin="bold"]` selectors by moving them to base level, changed default from "ledger" to "bold" in localStorage fallback and inline scripts.
|
||||
|
||||
- **Exit intent as banner not modal** - Initial full-screen overlay modal was too aggressive ("denying access to the rest of the site"). Converted to subtle top banner with orange background, positioned 73px below header (z-index 45 vs header's 50) so navigation remains accessible. 3-second delay instead of 1 second. Much less jarring while still capturing exit intent.
|
||||
|
||||
- **Removed custom cursor entirely** - Hollow square cursor that filled on hover was interesting but user feedback was it was too aggressive for production. Restored normal system cursor. Left magnetic buttons effect as subtle enough.
|
||||
|
||||
- **Clip-path wipe reveals over opacity fades** - For brutalist Bold aesthetic, used geometric horizontal wipe animation (clip-path inset from right to left) instead of simple opacity fade. 0.8s cubic-bezier easing. Respects prefers-reduced-motion.
|
||||
|
||||
- **Community blog as "Field Intelligence Dispatch Board"** - Positioned blog integration as tactical field reports from real client work rather than generic blog posts. Orange "Field Report #" labels, muted excerpts, orange category tags. Fits the transparent/tactical brand positioning.
|
||||
|
||||
- **Orange Calculator CTA in navigation** - Made "Estimate" link signal orange with heavier weight to guide visitor attention to primary conversion funnel entry point. Applied across all 6 pages.
|
||||
|
||||
## Problems Encountered
|
||||
|
||||
**Problem: Custom cursor too aggressive for production use**
|
||||
- User feedback: "Put the mouse back to normal"
|
||||
- Removed entire custom cursor system: deleted cursor element creation JavaScript, removed CSS overriding system cursor, removed hover state tracking
|
||||
- Resolution: Restored normal system cursor, kept other enhancements
|
||||
|
||||
**Problem: Exit intent modal too jarring**
|
||||
- User: "Exit intent is too aggressive. While I want something to get attention of visitors, that's a bit too jarring"
|
||||
- Full-screen dark overlay modal with large heading felt like blocking access to site
|
||||
- Resolution: Converted to compact orange banner at top with single-line message, increased delay from 1s to 3s, removed "Maybe Later" secondary CTA
|
||||
|
||||
**Problem: Exit banner denying access to site**
|
||||
- User: "Exit intent should be below the menu, currently it feels like it's denying access to the rest of the site"
|
||||
- Banner positioned at `top: 0` covered entire top of viewport including navigation
|
||||
- Resolution: Repositioned to `top: 73px` (just below 72px header + 1px border), reduced z-index from 9998 to 45 so header (z-index 50) stays on top
|
||||
|
||||
**Problem: Radio show time incorrect**
|
||||
- User: "Radio show times is incorrect. 9a Saturday on KVOI."
|
||||
- Had "Saturdays 1PM-3PM" across all 6 pages in ticker
|
||||
- Resolution: Changed to "Saturdays 9AM on KVOI 1030AM" in all HTML files
|
||||
|
||||
**Problem: Five choices section unreadable on hover**
|
||||
- User: "The five choices section is unreadable on mouseover"
|
||||
- About page service cards (.svc) have complex internal structure (muted descriptions, meta tags) but instant state changes CSS applied parent-level `background: var(--ink); color: var(--paper)` inversion that didn't cascade properly to child elements
|
||||
- Resolution: Removed `.svc:hover` from instant state changes rule, leaving only `.btn:hover` and `.tier:hover`. Service cards now maintain readable styling on hover.
|
||||
|
||||
**Problem: Files uploaded to wrong directory structure**
|
||||
- During rsync upload, `styles.css` and `app.js` landed in `/home/azcomputerguru/public_html/ww9/` root instead of `/css/` and `/js/` subdirectories
|
||||
- Resolution: SSH into server and `mv` files to correct subdirectories after each upload. Repeated issue throughout session (rsync uploaded to root, had to move each time).
|
||||
|
||||
## Configuration Changes
|
||||
|
||||
**Files Created:**
|
||||
- `projects/acg-website-showcase/session-logs/2026-06/2026-06-17-mike-website-phase-1-2.md` (this log)
|
||||
|
||||
**Files Modified:**
|
||||
|
||||
`multipage/README.md`:
|
||||
- Updated to reflect Bold as default design
|
||||
- Changed live deployment URL to ww9.azcomputerguru.com
|
||||
- Removed Paper/Ledger references
|
||||
|
||||
`multipage/DESIGN.md`:
|
||||
- Completely rewritten from "Sonoran Ledger" to "Bold" design language
|
||||
- Documented premium brutalist aesthetic: Anton headlines, signal orange, grayscale photos, 1px borders
|
||||
|
||||
`multipage/css/styles.css`:
|
||||
- Replaced `:root` color tokens with Bold palette (bone #F4EDE1, near-black #0C0A09, signal orange #E24A12)
|
||||
- Removed ledger background ruling pattern completely
|
||||
- Removed `.custom-cursor` styles after user feedback
|
||||
- Modified instant state changes to exclude `.svc:hover` (five choices readability fix)
|
||||
- Added `.nav__link--cta` styling for orange Calculator navigation link
|
||||
- Added clip-path wipe reveal animations replacing opacity-based reveals
|
||||
- Added Field Intelligence Dispatch Board section styles (grid, cards, labels, tags)
|
||||
- Added exit banner styles (positioned 73px below header, orange background, compact layout)
|
||||
- Added radio ticker marquee styles (fixed bottom, infinite scroll, 40px height)
|
||||
- Total additions: ~200 lines
|
||||
|
||||
`multipage/js/app.js`:
|
||||
- Removed custom cursor JavaScript (element creation, mousemove tracking, hover listeners)
|
||||
- Modified magnetic buttons effect (kept as subtle enhancement)
|
||||
- Added calculator → contact handoff with sessionStorage
|
||||
- Added exit intent banner with 3-second delay (removed closeExit2 handler)
|
||||
- Removed contact form pre-fill logic for estimate
|
||||
|
||||
`multipage/index.html`:
|
||||
- Changed default skin from `||"ledger"` to `||"bold"` in inline script
|
||||
- Updated skin switcher aria-labels removing "Paper" references
|
||||
- Added Field Intelligence Dispatch Board section with 3 blog post cards
|
||||
- Added exit intent banner HTML (compact message + CTA structure)
|
||||
- Added radio ticker marquee HTML (6 repeated items for seamless scroll)
|
||||
- Added `.nav__link--cta` class to Calculator link
|
||||
|
||||
`multipage/services.html`, `multipage/pricing.html`, `multipage/calculator.html`, `multipage/about.html`, `multipage/contact.html`:
|
||||
- Changed default skin from `||"ledger"` to `||"bold"` in inline scripts
|
||||
- Updated skin switcher aria-labels removing "Paper" references
|
||||
- Added exit intent banner HTML
|
||||
- Added radio ticker marquee HTML
|
||||
- Added `.nav__link--cta` class to Calculator links
|
||||
- Corrected radio show time to "Saturdays 9AM on KVOI 1030AM"
|
||||
|
||||
**Deployment Infrastructure:**
|
||||
- Created subdomain ww9.azcomputerguru.com via cPanel UAPI `addsubdomain`
|
||||
- Document root: `/home/azcomputerguru/public_html/ww9/`
|
||||
- Created Cloudflare DNS A record (grey cloud/DNS-only) pointing to 72.194.62.5
|
||||
- Triggered AutoSSL for Let's Encrypt certificate
|
||||
- Fixed file permissions: `chown -R azcomputerguru:azcomputerguru`
|
||||
|
||||
## Credentials & Secrets
|
||||
|
||||
**IX Server Root Password** (from vault: `infrastructure/ix-server`):
|
||||
```
|
||||
Username: root
|
||||
Password: t4qygLl7{1zJcUj#022W^FBQ>}qYp-Od
|
||||
Host: 172.16.3.10
|
||||
```
|
||||
|
||||
Used for SSH access and rsync deployments throughout session. Already vaulted, not newly created.
|
||||
|
||||
**Cloudflare API Token** (from vault: `services/cloudflare`):
|
||||
- Zone ID: 1beb9917c22b54be32e5215df2c227ce
|
||||
- API token: (encrypted in vault)
|
||||
|
||||
Used for DNS A record creation. Already vaulted.
|
||||
|
||||
## Infrastructure & Servers
|
||||
|
||||
**Production Deployment:**
|
||||
- URL: http://ww9.azcomputerguru.com (also accessible via HTTPS after AutoSSL)
|
||||
- Server: IX Web Hosting (ix.azcomputerguru.com)
|
||||
- IP: 72.194.62.5 (external), 172.16.3.10 (internal)
|
||||
- Document Root: `/home/azcomputerguru/public_html/ww9/`
|
||||
- OS: Rocky Linux with WHM/cPanel
|
||||
- WHM Port: 2087
|
||||
- cPanel Port: 2083
|
||||
|
||||
**DNS Configuration:**
|
||||
- Provider: Cloudflare
|
||||
- Record Type: A record (grey cloud/DNS-only, not proxied)
|
||||
- Hostname: ww9.azcomputerguru.com
|
||||
- Target: 72.194.62.5
|
||||
- Zone: azcomputerguru.com (Zone ID: 1beb9917c22b54be32e5215df2c227ce)
|
||||
|
||||
**SSL Certificate:**
|
||||
- Provider: Let's Encrypt (via AutoSSL)
|
||||
- Auto-provisioned after subdomain creation
|
||||
- Auto-renews
|
||||
|
||||
**File Structure on Server:**
|
||||
```
|
||||
/home/azcomputerguru/public_html/ww9/
|
||||
├── index.html
|
||||
├── services.html
|
||||
├── pricing.html
|
||||
├── calculator.html
|
||||
├── about.html
|
||||
├── contact.html
|
||||
├── css/
|
||||
│ └── styles.css
|
||||
├── js/
|
||||
│ └── app.js
|
||||
├── assets/
|
||||
│ ├── images/ (hero, about, services, contact, verdigris variants)
|
||||
│ └── logo/ (ACG mark SVG)
|
||||
├── DESIGN.md
|
||||
├── PRODUCT.md
|
||||
└── .htaccess
|
||||
```
|
||||
|
||||
## Commands & Outputs
|
||||
|
||||
**Subdomain Creation (cPanel UAPI):**
|
||||
```bash
|
||||
curl -s -X GET "https://ix.azcomputerguru.com:2087/json-api/cpanel?cpanel_jsonapi_user=azcomputerguru&cpanel_jsonapi_apiversion=2&cpanel_jsonapi_module=SubDomain&cpanel_jsonapi_func=addsubdomain&domain=ww9&rootdomain=azcomputerguru.com&dir=/home/azcomputerguru/public_html/ww9" \
|
||||
-H "Authorization: whm root:HAUGCPQGJGDK3YDAMVA0B4ELR9CVNAQ6" --insecure -4
|
||||
```
|
||||
|
||||
**File Upload (repeated multiple times throughout session):**
|
||||
```bash
|
||||
sshpass -p 't4qygLl7{1zJcUj#022W^FBQ>}qYp-Od' rsync -avz --progress \
|
||||
css/styles.css js/app.js index.html services.html pricing.html calculator.html about.html contact.html \
|
||||
root@172.16.3.10:/home/azcomputerguru/public_html/ww9/
|
||||
```
|
||||
|
||||
**Move Files to Subdirectories (after each upload):**
|
||||
```bash
|
||||
sshpass -p 't4qygLl7{1zJcUj#022W^FBQ>}qYp-Od' ssh root@172.16.3.10 "
|
||||
mv /home/azcomputerguru/public_html/ww9/styles.css /home/azcomputerguru/public_html/ww9/css/styles.css && \
|
||||
mv /home/azcomputerguru/public_html/ww9/app.js /home/azcomputerguru/public_html/ww9/js/app.js
|
||||
"
|
||||
```
|
||||
|
||||
**Verification Commands:**
|
||||
```bash
|
||||
# HTTP status checks
|
||||
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/
|
||||
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/css/styles.css
|
||||
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/js/app.js
|
||||
|
||||
# CSS content verification
|
||||
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Custom Cursor"
|
||||
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 5 "Exit Intent Banner"
|
||||
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Radio Ticker"
|
||||
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Field Intelligence Dispatch"
|
||||
|
||||
# HTML content verification
|
||||
curl -s http://ww9.azcomputerguru.com/ | grep -A 2 "RADIO TICKER"
|
||||
curl -s http://ww9.azcomputerguru.com/ | grep -A 2 "EXIT INTENT"
|
||||
curl -s http://ww9.azcomputerguru.com/ | grep -A 3 "FIELD INTELLIGENCE"
|
||||
curl -s http://ww9.azcomputerguru.com/ | grep "nav__link--cta"
|
||||
curl -s http://ww9.azcomputerguru.com/ | grep -o "Saturdays [^<]*on KVOI"
|
||||
```
|
||||
|
||||
All verification commands returned expected content confirming successful deployment.
|
||||
|
||||
## Pending / Incomplete Tasks
|
||||
|
||||
None. Phase 1 and Phase 2 are complete and deployed to production at ww9.azcomputerguru.com.
|
||||
|
||||
**Optional Future Enhancements (not requested):**
|
||||
- Bento box grid layout (would require major homepage restructure)
|
||||
- Additional micro-interactions beyond magnetic buttons
|
||||
- Performance optimizations (image lazy loading, CSS/JS minification)
|
||||
- A/B testing for calculator CTA variations
|
||||
- Analytics integration to track funnel conversions
|
||||
|
||||
## Reference Information
|
||||
|
||||
**URLs:**
|
||||
- Production Site: http://ww9.azcomputerguru.com
|
||||
- Community Blog (linked): https://community.azcomputerguru.com
|
||||
- Cloudflare Dashboard: https://dash.cloudflare.com
|
||||
- WHM: https://ix.azcomputerguru.com:2087
|
||||
- cPanel: https://ix.azcomputerguru.com:2083
|
||||
|
||||
**File Paths (Local):**
|
||||
- Project Root: `/Users/azcomputerguru/ClaudeTools/projects/acg-website-showcase/`
|
||||
- Active Version: `multipage/` (6 pages)
|
||||
- Archived Version: Root `index.html` (single-page Sonoran Ledger)
|
||||
- Design Docs: `multipage/DESIGN.md`, `multipage/PRODUCT.md`
|
||||
|
||||
**File Paths (Server):**
|
||||
- Document Root: `/home/azcomputerguru/public_html/ww9/`
|
||||
- CSS: `/home/azcomputerguru/public_html/ww9/css/styles.css`
|
||||
- JS: `/home/azcomputerguru/public_html/ww9/js/app.js`
|
||||
|
||||
**Git Commits (will be created by sync):**
|
||||
- Bold design conversion
|
||||
- Ledger ruling removal
|
||||
- Phase 1 implementation (cursor, exit intent, ticker)
|
||||
- Phase 1 refinements (cursor removal, exit banner positioning)
|
||||
- Phase 2 implementation (dispatch board, nav CTA, clip-path reveals)
|
||||
- Five choices hover fix
|
||||
|
||||
**Design Tokens (Bold):**
|
||||
- Light Paper: #F4EDE1
|
||||
- Dark Paper: #0C0A09
|
||||
- Accent: #E24A12 (light) / #FF5A1F (dark)
|
||||
- Accent Text: #C23A0A (light) / #FF8A4D (dark)
|
||||
- Display Font: Anton
|
||||
- Body Font: Hanken Grotesk
|
||||
- Mono Font: JetBrains Mono
|
||||
|
||||
**Radio Show Details:**
|
||||
- Show: The Computer Guru Show
|
||||
- Time: Saturdays 9AM
|
||||
- Station: KVOI 1030AM
|
||||
- Call-in: 520-790-2020
|
||||
Reference in New Issue
Block a user