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

acg-website: full multi-page v2 site — subpages redesigned + polished

Browse Source 
Redesign the five subpages (services, pricing, about, contact, calculator) to
the v2 premium editorial-brutalist system and wire up one cohesive site (Fable).

- Shared byte-identical global header/footer nav across all 6 pages
  (Home/Services/Pricing/About/Contact + Estimate CTA; aria-current via JS).
- services: full 8-service catalog grouped Run/Protect/Connect in a dark band.
- pricing: GPS tiers + support/block-time + hosting/M365/phones, all published.
- about: origin story + the "locally owned, not an out-of-state acquisition"
  independence line + a KVOI radio-authority section.
- contact: info + form + FAQ accordion (two-column editorial layout).
- calculator: functional live estimator with a dark "Monthly Statement" panel
  (calculator.js); math verified.
- Polish pass: contact FAQ two-column split, pricing "everything else" tables as
  full-width editorial rows, about on-air number scaling, and a real mobile
  overflow fix (.price-block min-width:0 — 390px now exactly 390 on all pages).

All real v1 content/prices/copy preserved; contact form remains a demo stub.
Deployed to the ww9 root (v1 pages backed up server-side). Source: v2/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-07-23 05:24:04 -07:00
parent c0a51bd5b8
commit 722cab36de
10 changed files with 1788 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.claude/memory/project_acg_website_redesign.md
View File

@@ -61,8 +61,13 @@ crawlable SERVICE-AREA strip + LocalBusiness `areaServed` JSON-LD for SEO — Mi
css/v2.css+js/v2.js+assets ADDED; v1 css/styles.css+js/app.js KEPT for the still-v1 subpages), rewrote v2's nav
`../page.html`->`page.html` (root-relative), added no-cache `.htaccess` (staging; 1yr max-age default was hiding
updates), backed up v1 home as `index- v1-backup.html`. The `/v2/` subfolder still exists (redundant now).
CAVEAT: only the HOMEPAGE is redesigned — about/pricing/services/contact/calculator are STILL v1 (design mismatch)
until redesigned. Repo v2/ is UNCOMMITTED. **ff.py capture gotcha (bit me twice): persistent ff-profile caches
FULL SITE now redesigned to v2 (2026-07-23, Fable): all 6 pages — home + services/pricing/about/contact/calculator
(v2/*.html) — cohesive premium editorial-brutalist, ONE shared `v2/css/v2.css`, byte-identical global header/footer
nav (Home/Services/Pricing/About/Contact + Estimate CTA, aria-current set by JS). Calculator is functional (live
estimator, "Monthly Statement" panel, verified math). Contact form is a demo stub (not wired to a mailbox — was in
v1 too). Independence line + radio-authority woven into About. Polish pass fixed contact FAQ (2-col split) + pricing
"everything else" tables (full-width rows) + a real mobile overflow bug (`.price-block min-width:0`). Deployed to ww9
root; v1 pages backed up as `{page}-v1-backup.html`. All committed to git. **ff.py capture gotcha (bit me twice): persistent ff-profile caches
old js/css — verify with a FRESH `FF_PROFILE` temp dir, not `?cb=` on the page URL (doesn't bust linked assets).**
**AutoSSL fix (2026-07-22):** ww9 had a self-signed cert (browser warnings) because it was in the account's

237
projects/acg-website/v2/about.html Normal file
View File

@@ -0,0 +1,237 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | Arizona Computer Guru</title>
<meta name="description" content="A Tucson IT company since 2001. We started as a break-fix shop, then built GPS to align our incentives with our clients. Locally owned, on the radio every Saturday, still answering our own phones." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.04 / ABOUT</span>
<span>TUCSON, SINCE 2001</span>
<span class="page-head__meta-wide">LOCALLY OWNED</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">The IT partner that</span>
<span class="accent-word reveal">actually picks up.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">We are not a national chain and we are not venture-backed. We are a local Tucson team that has been here for two decades because we do right by the businesses we serve.</p>
<div class="page-head__aside reveal">
<a class="btn btn--ghost" href="contact.html">Talk to a human</a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/about.png" width="1248" height="832" alt="A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall." />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.004 / CREW</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">EST.2001 / TUCSON AZ</span>
</figure>
</section>
<!-- ============ ORIGIN STORY ============ -->
<section class="sect grid-bg" aria-labelledby="origin-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">Why we work this way / the short version</p>
</div>
<div class="story__grid">
<div class="story__copy">
<h2 id="origin-h" class="sect__title reveal">We used to be the company we now <span class="accent-word">warn you about.</span></h2>
<p class="reveal">We started in 2001 as a break-fix shop. We charged by the hour, showed up when things broke, and quietly made more money when our clients had more problems. That did not sit right.</p>
<p class="reveal">So we built Guru Protection Services: proactive monitoring, transparent published pricing, and month-to-month terms. The point was to put our incentives on the same side of the table as yours. We make more when your systems stay healthy, not when they fail.</p>
<p class="reveal">Today we look after businesses across Tucson, from small offices to busy practices and job sites. We have stopped ransomware before a single file was encrypted, replaced failing drives before anyone noticed, and helped owners meet the cyber-insurance requirements that used to keep them up at night.</p>
<p class="reveal">And we are still locally owned, not an out-of-state acquisition wearing a familiar name. The people who built this company still run it, and we still answer our own phones.</p>
<p class="pull reveal">We built our service the way we'd want to be treated if we were the customer.</p>
</div>
<figure class="story__figure frame frame--duo reveal">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.005 / LIGHT</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">SONORAN DESERT / AZ</span>
</figure>
</div>
</div>
</section>
<!-- ============ DARK BAND: THE PROMISES ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="phil-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">What concierge means, concretely / five choices</p>
</div>
<h2 id="phil-h" class="band-title reveal">The promises<br />behind the work.</h2>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h3 class="svc__name">Transparent pricing</h3>
<p class="svc__desc">Published per-endpoint rates. You know what you pay before you call us. No games, no "call for quote," no fees that appear at the bottom of an invoice.</p>
</div>
<div class="svc__meta mono">$19&ndash;$39<span class="svc__per">/endpoint</span></div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h3 class="svc__name">Local Tucson team</h3>
<p class="svc__desc">A real office at 7437 E. 22nd St since 2001. When your server dies at 3pm you do not want a ticket, you want someone at your door by 3:45. We can usually be onsite within an hour or two.</p>
</div>
<div class="svc__meta mono">onsite 1&ndash;2 hr</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h3 class="svc__name">Proactive, not reactive</h3>
<p class="svc__desc">24/7 monitoring, automated patching, and alerts that reach us before they reach you. The goal is that you never have to call because something broke.</p>
</div>
<div class="svc__meta mono">24/7 monitoring</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h3 class="svc__name">Month-to-month terms</h3>
<p class="svc__desc">No three-year lock-ins, no early-termination fees. If we stop earning your business, you can leave with 30 days' notice. We would rather keep you by choice.</p>
</div>
<div class="svc__meta mono">cancel in 30 days</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h3 class="svc__name">Plain English, always</h3>
<p class="svc__desc">Many IT people are dismissive or condescending. That is never tolerated here. We are kind, direct, and honest, and we will never make you feel small for asking a question.</p>
</div>
<div class="svc__meta mono">no jargon walls</div>
</article>
</div>
</div>
</section>
</div>
<!-- ============ ON THE AIR ============ -->
<section class="sect sect--surface" aria-labelledby="onair-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">On the air / Tucson's tech talk</p>
</div>
<h2 id="onair-h" class="sect__title reveal">Tucson knows<br /><span class="accent-word">the voice.</span></h2>
<p class="lead reveal">Every Saturday morning we host The Computer Guru Show on KVOI 1030AM, taking live calls from anyone in Tucson with a tech question. Two decades of answering questions on the air, with no script and no screening for softballs. That is the same straight talk you get as a client.</p>
<div class="onair-grid reveal">
<div class="onair-cell">
<div class="trust__num">1030<span class="u">AM</span></div>
<div class="trust__label">KVOI, The Computer Guru Show</div>
<span class="trust__tag mono" aria-hidden="true">AIR.01</span>
</div>
<div class="onair-cell">
<div class="trust__num">SAT 9<span class="u">AM</span></div>
<div class="trust__label">Live every Saturday morning</div>
<span class="trust__tag mono" aria-hidden="true">AIR.02</span>
</div>
<div class="onair-cell">
<div class="trust__num trust__num--dial">520-790-2020</div>
<div class="trust__label">Call in live with any tech question</div>
<span class="trust__tag mono" aria-hidden="true">AIR.03</span>
</div>
</div>
</div>
</section>
<!-- ============ BIG QUOTE ============ -->
<section class="sect grid-bg" aria-labelledby="bq-h">
<div class="wrap">
<h2 id="bq-h" class="sr-only">Our standard</h2>
<p class="bigquote reveal">You might not choose us. That's okay. But you'll make a better decision because we told you <span class="accent-word">the truth.</span></p>
<p class="signature reveal">// Arizona Computer Guru, Tucson</p>
</div>
</section>
<!-- ============ CTA BAND (DARK) ============ -->
<div class="band-ink band-ink--cta">
<section class="cta cta--compact" aria-labelledby="cta-h">
<div class="band-wrap">
<p class="kicker mono reveal">The first conversation is free / there is no pitch</p>
<h2 id="cta-h" class="cta__title">
<span class="reveal">Come see</span>
<span class="cta__accent reveal">for yourself.</span>
</h2>
<p class="cta__sub reveal">Stop by the office, or have us out to look at the server closet that runs hot and the printer that jams every Tuesday.</p>
<div class="cta__actions reveal">
<a class="btn btn--primary btn--band" href="contact.html">Talk to a human <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="btn btn--ghost btn--band-ghost mono" href="calculator.html">Estimate your cost</a>
</div>
</div>
</section>
</div>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

192
projects/acg-website/v2/calculator.html Normal file
View File

@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Estimate your IT cost | Arizona Computer Guru</title>
<meta name="description" content="Build a transparent IT estimate in seconds: endpoints, protection tier, support plan, Microsoft 365, phones, and hosting. No email wall, no sales call." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.06 / ESTIMATOR</span>
<span>LIVE MATH / NO EMAIL WALL</span>
<span class="page-head__meta-wide">SAME RATES WE PUBLISH</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Your IT,</span>
<span class="t-hollow reveal">accounted for.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Move the numbers, watch the total. This is the same math we would walk you through in person, with nothing hidden behind a "contact sales" button.</p>
<div class="page-head__aside reveal">
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ CALCULATOR ============ -->
<section class="sect grid-bg" id="calculator" aria-labelledby="calc-h">
<div class="wrap">
<h2 id="calc-h" class="sr-only">IT cost estimator</h2>
<div class="calc-grid">
<form class="calc-inputs reveal" id="calcForm" aria-label="IT cost estimator">
<div class="calc-row">
<label for="endpoints">Computers &amp; servers <span class="hint">Every monitored endpoint</span></label>
<div class="stepper" data-step="endpoints">
<button type="button" data-dir="-1" aria-label="Fewer endpoints">&minus;</button>
<input id="endpoints" name="endpoints" type="number" inputmode="numeric" min="0" max="500" value="22" />
<button type="button" data-dir="1" aria-label="More endpoints">+</button>
</div>
</div>
<div class="calc-row">
<label for="gpsTier">Protection tier <span class="hint">Per-endpoint monitoring level</span></label>
<div class="selectwrap"><select id="gpsTier" name="gpsTier">
<option value="19">GPS-Basic / $19</option>
<option value="26" selected>GPS-Pro / $26</option>
<option value="39">GPS-Advanced / $39</option>
</select></div>
</div>
<div class="calc-row">
<label for="equip">Equipment monitoring <span class="hint">Network gear, printers, NAS. $25/mo</span></label>
<span class="switch">
<input type="checkbox" id="equip" name="equip" />
<span class="track" aria-hidden="true"></span><span class="knob" aria-hidden="true"></span>
</span>
</div>
<div class="calc-row">
<label for="support">Support plan <span class="hint">Bundled labor hours each month</span></label>
<div class="selectwrap"><select id="support" name="support">
<option value="0">None, pay as you go</option>
<option value="200">Essential / $200 (2 hr)</option>
<option value="380" selected>Standard / $380 (4 hr)</option>
<option value="540">Premium / $540 (6 hr)</option>
<option value="850">Priority / $850 (10 hr)</option>
</select></div>
</div>
<div class="calc-row">
<label for="m365">Microsoft 365 users <span class="hint">Business Standard, $14/user</span></label>
<div class="stepper" data-step="m365">
<button type="button" data-dir="-1" aria-label="Fewer Microsoft 365 users">&minus;</button>
<input id="m365" name="m365" type="number" inputmode="numeric" min="0" max="500" value="0" />
<button type="button" data-dir="1" aria-label="More Microsoft 365 users">+</button>
</div>
</div>
<div class="calc-row">
<label for="voip">Business phone users <span class="hint">GPS-Voice Standard, $28/user</span></label>
<div class="stepper" data-step="voip">
<button type="button" data-dir="-1" aria-label="Fewer phone users">&minus;</button>
<input id="voip" name="voip" type="number" inputmode="numeric" min="0" max="500" value="0" />
<button type="button" data-dir="1" aria-label="More phone users">+</button>
</div>
</div>
<div class="calc-row">
<label for="hosting">Web hosting <span class="hint">Managed, with SSL &amp; backups</span></label>
<div class="selectwrap"><select id="hosting" name="hosting">
<option value="0" selected>None</option>
<option value="15">Starter / $15</option>
<option value="35">Business / $35</option>
<option value="65">Commerce / $65</option>
</select></div>
</div>
</form>
<div class="calc-out reveal">
<h3 class="calc-out__title">Monthly statement</h3>
<div class="ledger-lines" id="ledgerLines"></div>
<div class="calc-total" aria-live="polite">
<span class="tlabel">Per month</span>
<span class="tnum mono" id="totalMonthly">$0</span>
</div>
<div class="calc-annual mono" id="totalAnnual">$0 / year</div>
<div class="calc-perep mono" id="perEndpoint">all-in, per endpoint / mo</div>
<a class="btn btn--primary btn--band calc-cta" href="contact.html#contact" id="sendEstimate">Send me this estimate <span class="arrow" aria-hidden="true">&rarr;</span></a>
<p class="calc-foot">Estimate only, your real quote is tailored to your setup. No card, no commitment, and we will tell you if you are buying more than you need.</p>
</div>
</div>
</div>
</section>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
<script src="js/calculator.js"></script>
</body>
</html>

184
projects/acg-website/v2/contact.html Normal file
View File

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact | Arizona Computer Guru</title>
<meta name="description" content="Talk to a human in Tucson. Call 520.304.8300, email info@azcomputerguru.com, or visit 7437 E. 22nd St. No pressure, no pitch." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"LocalBusiness","name":"Arizona Computer Guru","address":{"@type":"PostalAddress","streetAddress":"7437 E. 22nd St","addressLocality":"Tucson","addressRegion":"AZ","postalCode":"85710","addressCountry":"US"},"telephone":"+1-520-304-8300","email":"info@azcomputerguru.com","url":"https://azcomputerguru.com","openingHours":"Mo-Fr 09:00-17:00"}
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.05 / DISPATCH</span>
<span>NO PRESSURE / NO PITCH</span>
<span class="page-head__meta-wide">SAME-DAY REPLY</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Talk to</span>
<span class="accent-word reveal">a human.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">Tell us what is frustrating you, or send over an estimate from the calculator. We will give you honest feedback, even if that is "your current setup is fine, here is one thing to fix."</p>
</div>
</section>
<!-- ============ CONTACT ============ -->
<section class="sect grid-bg" id="contact" aria-labelledby="contact-h">
<div class="wrap">
<h2 id="contact-h" class="sr-only">Contact details and message form</h2>
<div class="contact-grid">
<div class="reveal">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">Where to find us / how to reach us</p>
</div>
<div class="contact-lines">
<div><span class="k">Phone</span><a class="v" href="tel:+15203048300">520.304.8300</a></div>
<div><span class="k">Email</span><a class="v" href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></div>
<div><span class="k">Office</span><span class="v">7437 E. 22nd St, Tucson, AZ 85710</span></div>
<div><span class="k">Hours</span><span class="v">Mon&ndash;Fri 9&ndash;5 / 24/7 emergency for Priority clients</span></div>
<div><span class="k">On the radio</span><span class="v">The Computer Guru Show / Sat 9AM / KVOI 1030AM</span></div>
<div><span class="k">Call the show</span><a class="v" href="tel:+15207902020">520-790-2020</a></div>
</div>
<figure class="story__figure frame frame--duo reveal" style="margin-top:2.4rem;">
<img src="assets/story.png" width="1248" height="832" alt="Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill." loading="lazy" />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.006 / EAST SIDE</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">COME SAY HELLO</span>
</figure>
</div>
<form class="contact-form reveal" id="contactForm" novalidate>
<h3 class="contact-form__title">Send a message</h3>
<div class="form-field">
<label for="cf-name">Your name</label>
<input id="cf-name" name="name" type="text" autocomplete="name" required />
</div>
<div class="form-field">
<label for="cf-biz">Business</label>
<input id="cf-biz" name="business" type="text" autocomplete="organization" />
</div>
<div class="form-field">
<label for="cf-contact">Phone or email</label>
<input id="cf-contact" name="contact" type="text" autocomplete="email" required />
</div>
<div class="form-field">
<label for="cf-msg">What can we help with?</label>
<textarea id="cf-msg" name="message"></textarea>
</div>
<button class="btn btn--primary" type="submit">Send message <span class="arrow" aria-hidden="true">&rarr;</span></button>
<p class="form-note" id="formNote" aria-live="polite">We reply the same business day. (Demo build: this form is not wired to a mailbox.)</p>
</form>
</div>
</div>
</section>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
<!-- ============ FAQ ============ -->
<section class="sect sect--surface" id="faq" aria-labelledby="faq-h">
<div class="wrap">
<div class="faq-layout">
<div class="faq-intro">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">02</span>
<p class="kicker mono">Straight answers / ask us anything</p>
</div>
<h2 id="faq-h" class="sect__title reveal">Questions worth asking<br /><span class="accent-word">any IT company.</span></h2>
</div>
<div class="faq-list reveal" id="faqList">
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Will I get a real person, or an offshore call center?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">A real, local person. Our team works out of our Tucson office at 7437 E. 22nd St. You can visit, and after hours you reach an on-call tech who is also local, not a queue overseas.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What's your contract term?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Month-to-month. Cancel with 30 days' notice, no early-termination fee. We would rather earn your business every month than trap you in a three-year agreement.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What happens if I use more support hours than my plan includes?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Plan hours are used first. After that we draw from any pre-paid block time you have banked ($100 to $150/hr), which never expires. No block time? Overage is billed at $175/hr, and we will always flag it before the meter runs.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>How fast do you respond to an emergency?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">By plan: Standard is 8 hours, Premium 4 hours, Priority 2 hours around the clock. A total outage is escalated immediately regardless of plan, and for local clients we are typically onsite within 1 to 2 hours.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What security is actually included?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">GPS-Pro and above include advanced EDR, email security, dark-web monitoring, and monthly security-awareness training. GPS-Advanced adds compliance tooling and ransomware rollback. Basic antivirus alone is not enough anymore, so we do not pretend it is.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Can you help me meet cyber-insurance requirements?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Yes. GPS-Pro covers most of what insurers ask for: MFA enforcement, EDR, training, and cloud backups, and we will provide documentation for your agent. We work with several Tucson insurance agents regularly.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>What if my team grows or shrinks?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">Billing is per endpoint, so it just follows your headcount. Add three people, add three endpoints; downsize and it drops the next month. No contract amendments, no penalties.</div></div></div>
<div class="faq__item"><button class="faq__q" aria-expanded="false" type="button"><span>Do you really publish your pricing?</span><span class="pm" aria-hidden="true">+</span></button><div class="faq__a"><div class="faq__a-inner">You are looking at it. Our rates are on the pricing page and in the estimator. We think hiding prices is a red flag, in any IT company, including us.</div></div></div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

458
projects/acg-website/v2/css/v2.css
View File

@@ -728,3 +728,461 @@ html:not(.js) .city-word--final .city-word__t::after { transform: scaleX(1); }
transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
/* ===========================================================================
v2.1 - SUBPAGE LAYER (services / pricing / about / contact / calculator)
Same tokens, same idiom. Global nav additions + the components the interior
pages need: page heads, data tables, tier feature lists, the estimator,
the contact form, FAQ accordion, story/on-air furniture.
=========================================================================== */
/* ---- Global nav (multi-page) --------------------------------------------- */
.nav__cta {
font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
background: var(--accent); color: var(--on-accent);
border: var(--border-w) solid var(--ink);
padding: 0.5rem 0.85rem;
transition: background var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.nav__cta:hover { background: var(--ink); color: var(--paper); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { width: 100%; }
.nav__link--mobile { display: none; }
.nav__toggle {
display: none; background: transparent; border: var(--border-w) solid var(--ink);
width: 44px; height: 44px; cursor: pointer; color: var(--ink);
place-items: center; font-size: 1.2rem; line-height: 1;
}
.nav__toggle:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 1120px) {
.nav { gap: 1.05rem; }
.nav__cta { display: none; }
}
@media (max-width: 900px) {
.nav__toggle { display: grid; }
.site-header .nav { display: none; }
.site-header.nav-open .nav {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 100%; left: 0; right: 0;
margin-left: 0;
background: var(--paper);
border-bottom: var(--border-w) solid var(--ink);
padding: 0.4rem clamp(1rem, 4vw, 1.5rem) 1rem;
}
.site-header.nav-open .nav .nav__link {
font-size: 0.95rem; padding-block: 0.85rem;
border-bottom: 1px solid var(--rule-soft);
}
.site-header.nav-open .nav .nav__link--mobile { display: block; color: var(--accent-ink); }
}
@media (max-width: 640px) { .nav__phone { display: none; } }
/* ---- Page head (interior hero) ------------------------------------------- */
.page-head {
position: relative;
padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2.5rem) clamp(2.2rem, 4.5vw, 3.4rem);
border-bottom: var(--border-w) solid var(--ink);
background-image:
repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 120px);
}
.page-head__meta {
display: flex; flex-wrap: wrap; gap: 0.55rem 2.2rem;
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3);
border-bottom: 1px solid var(--rule); padding-bottom: 0.8rem;
margin-bottom: clamp(1.2rem, 3vw, 2.2rem);
}
.page-head__meta-wide { margin-left: auto; color: var(--accent-ink); }
.page-head__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(2.9rem, 9vw, 7.8rem);
line-height: 0.9; letter-spacing: 0.005em;
margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}
.page-head__title span { display: block; }
.t-hollow { color: transparent; -webkit-text-stroke: 3px var(--ink); }
@media (max-width: 700px) { .t-hollow { -webkit-text-stroke-width: 2px; } }
.page-head__deck {
display: grid; grid-template-columns: minmax(0, 56ch) auto;
justify-content: space-between; align-items: start; gap: 1.5rem 4rem;
border-top: 1px solid var(--rule);
padding-top: clamp(1.2rem, 2.2vw, 1.8rem);
}
.page-head__lead { font-size: 1.18rem; color: var(--ink-2); max-width: 52ch; }
.page-head__aside { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) {
.page-head__deck { grid-template-columns: 1fr; }
.page-head__aside { justify-content: flex-start; }
}
.page-head__figure { margin: clamp(1.8rem, 3.5vw, 2.6rem) 12px 0 0; }
.page-head__figure img { aspect-ratio: 21 / 7; object-fit: cover; }
@media (max-width: 700px) { .page-head__figure img { aspect-ratio: 3 / 2; } }
/* ---- Section shells -------------------------------------------------------- */
.sect { padding-block: clamp(3.4rem, 7vw, 6rem); border-bottom: var(--border-w) solid var(--ink); }
.sect--surface { background: var(--surface); }
.band-sect { padding-block: clamp(3.5rem, 7.5vw, 6.5rem); }
.band-title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 0.92;
color: var(--band-ink); margin-bottom: 1.4rem;
}
.band-lead { color: var(--band-muted); font-size: 1.12rem; max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.band-punch {
font-weight: 700; color: var(--band-ink); font-size: 1.18rem;
border-block: 3px solid var(--band-accent);
padding-block: 1rem; max-width: 52ch;
margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.sect__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(2.4rem, 5.6vw, 4.8rem); line-height: 0.92;
margin-bottom: 1.4rem;
}
.note { font-size: 0.88rem; color: var(--ink-3); }
.note .mono { color: var(--accent-ink); font-weight: 700; }
/* ---- Service groups (catalog page, inside the dark band) ------------------ */
.svc-group + .svc-group { margin-top: clamp(2.6rem, 5.5vw, 4.2rem); }
.svc-group__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(1.9rem, 4vw, 3rem); line-height: 0.95;
color: var(--band-ink); margin-bottom: 0.4rem;
}
.svc-group__tag {
font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--band-accent-ink); margin-left: 0.9rem; vertical-align: 0.6em;
}
/* ---- Data tables (brutalist ledger) --------------------------------------- */
.table-slab {
border: var(--border-w) solid var(--ink); background: var(--surface);
box-shadow: 10px 10px 0 var(--shadow-c);
overflow-x: auto; margin-right: 12px;
}
.table-slab + .table-slab { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.data-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.data-table caption {
text-align: left; font-family: var(--f-mono);
font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
background: var(--ink); color: var(--paper);
padding: 0.6rem 1rem;
}
[data-theme="dark"] .data-table caption { background: oklch(0.115 0.006 55); color: var(--ink); }
.data-table th {
font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 500; color: var(--ink-3);
text-align: left; padding: 0.8rem 1rem 0.55rem;
border-bottom: var(--border-w) solid var(--ink);
}
.data-table td { padding: 0.72rem 1rem; border-bottom: 1px solid var(--rule-soft); font-size: 0.97rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num {
text-align: right; font-family: var(--f-mono);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.data-table tr.pop td { background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.data-table tr.pop td:first-child::after {
content: "MOST CHOSEN"; font-family: var(--f-mono); font-size: 0.54rem;
letter-spacing: 0.14em; background: var(--accent); color: var(--on-accent);
padding: 0.16rem 0.4rem; margin-left: 0.6rem; vertical-align: middle; white-space: nowrap;
}
/* band variant: same slab on the charcoal inversion band */
.band-ink .table-slab {
border-color: var(--band-ink);
background: color-mix(in srgb, var(--band-ink) 4%, transparent);
box-shadow: 10px 10px 0 var(--band-accent);
}
.band-ink .data-table caption { background: var(--band-ink); color: var(--band-bg); }
.band-ink .data-table th { color: var(--band-muted); border-bottom-color: var(--band-ink); }
.band-ink .data-table td { color: var(--band-ink); border-bottom-color: var(--band-rule); }
.band-ink .data-table tr.pop td { background: color-mix(in srgb, var(--band-accent) 16%, transparent); }
.band-ink .data-table tr.pop td:first-child::after { background: var(--band-accent); color: #16120F; }
/* ---- Price rows (hosting / 365 / phones) ----------------------------------- */
/* Editorial rows: title rail on the left, full-width ledger on the right, so
the small tables get the same room (and read) as the labor slabs above. */
.price-cols {
display: grid; grid-template-columns: 1fr;
margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.price-block {
display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
min-width: 0; /* grid item: never let table min-content widen the track */
}
.price-block + .price-block {
border-top: 1px solid var(--rule);
margin-top: clamp(2.2rem, 4vw, 3rem);
padding-top: clamp(2.2rem, 4vw, 3rem);
}
.price-block__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: 1.5rem; letter-spacing: 0.015em; margin-bottom: 0.9rem;
grid-column: 1; grid-row: 1;
}
.price-block .table-slab { box-shadow: 8px 8px 0 var(--shadow-c); grid-column: 2; grid-row: 1 / 3; }
.price-block .data-table { min-width: 0; }
.price-block .data-table th { padding: 0.85rem 1.15rem 0.55rem; }
.price-block .data-table td { padding: 0.8rem 1.15rem; }
.price-block .data-table th:first-child { width: 30%; }
.price-block .data-table th.num { width: 15%; }
.price-block .note { margin-top: 0.9rem; font-size: 0.8rem; grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
.price-block { display: block; }
}
/* ---- Tier feature lists (pricing page) -------------------------------------- */
.tier__list { list-style: none; padding: 0; margin-top: 1.2rem; border-top: 1px solid var(--rule); }
.tier__list li {
position: relative; padding: 0.5rem 0 0.5rem 1.5rem;
border-bottom: 1px solid var(--rule-soft);
font-size: 0.92rem; color: var(--ink-2);
}
.tier__list li::before {
content: "+"; position: absolute; left: 0.1rem; top: 0.45rem;
font-family: var(--f-mono); font-weight: 700; color: var(--accent-ink);
}
.tier--pop .tier__list { border-top-color: color-mix(in srgb, #F4EDE1 30%, transparent); }
.tier--pop .tier__list li { color: oklch(0.80 0.018 84); border-bottom-color: color-mix(in srgb, #F4EDE1 14%, transparent); }
.tier--pop .tier__list li::before { color: oklch(0.735 0.155 45); }
/* ---- Story (about) ----------------------------------------------------------- */
.story__grid {
display: grid; grid-template-columns: minmax(0, 60ch) minmax(280px, 430px);
justify-content: space-between; align-items: start;
gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } }
.story__copy p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 1.15rem; max-width: 58ch; }
.pull {
font-weight: 700; color: var(--ink); font-size: 1.2rem;
border-block: 3px solid var(--accent);
padding-block: 1rem; margin-block: 1.7rem 0; max-width: 46ch;
}
.story__figure { margin-right: 12px; }
.story__figure img { aspect-ratio: 4 / 5; object-fit: cover; }
/* ---- On air (about) ----------------------------------------------------------- */
.onair-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
border: var(--border-w) solid var(--ink); background: var(--paper);
box-shadow: 12px 12px 0 var(--shadow-c);
margin-right: 12px;
}
.onair-cell {
position: relative;
padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.1rem, 2.2vw, 1.8rem);
border-right: var(--border-w) solid var(--ink);
}
.onair-cell:last-child { border-right: 0; }
.onair-cell .trust__num { font-size: clamp(1.9rem, 3.8vw, 3.4rem); }
/* the call-in number is 12 glyphs; scale it independently so it never crowds
its cell edge at mid widths */
.onair-cell .trust__num--dial { font-size: clamp(1.5rem, 3vw, 2.9rem); white-space: nowrap; }
@media (max-width: 700px) {
.onair-grid { grid-template-columns: 1fr; }
.onair-cell { border-right: 0; border-bottom: var(--border-w) solid var(--ink); }
.onair-cell:last-child { border-bottom: 0; }
}
/* ---- Big quote (about) --------------------------------------------------------- */
.bigquote {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: clamp(2rem, 5.4vw, 4.2rem); line-height: 1.0;
max-width: 22ch;
}
.signature {
font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-3); margin-top: 1.6rem;
}
/* ---- Contact ------------------------------------------------------------------- */
.contact-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 560px);
gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-lines {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 2rem; margin-top: 2.2rem;
border-top: 1px solid var(--rule); padding-top: 1.8rem;
}
@media (max-width: 520px) { .contact-lines { grid-template-columns: 1fr; } }
.contact-lines .k {
display: block; font-family: var(--f-mono); font-size: 0.62rem;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
margin-bottom: 0.35rem;
}
.contact-lines .v { font-size: 1.02rem; font-weight: 600; color: var(--ink); text-decoration: none; }
a.v:hover { color: var(--accent-ink); }
.contact-form {
border: 4px solid var(--ink); background: var(--surface);
box-shadow: 12px 12px 0 var(--shadow-c);
padding: clamp(1.4rem, 3vw, 2.2rem);
margin-right: 12px;
}
.contact-form__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: 1.45rem; margin-bottom: 1.3rem;
}
.form-field { margin-bottom: 1.2rem; }
.form-field label {
display: block; font-family: var(--f-mono); font-size: 0.66rem;
letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
margin-bottom: 0.45rem;
}
.form-field input, .form-field textarea {
width: 100%; border: var(--border-w) solid var(--ink);
background: var(--paper); color: var(--ink);
font: inherit; padding: 0.75rem 0.9rem;
}
.form-field textarea { min-height: 9.5rem; resize: vertical; }
.form-field input:focus-visible, .form-field textarea:focus-visible {
outline: 3px solid var(--accent); outline-offset: 2px;
}
.form-note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-3); }
.form-note.is-err { color: var(--accent-ink); font-weight: 600; }
.form-note.is-ok { color: var(--ink); font-weight: 600; }
/* ---- FAQ accordion --------------------------------------------------------------- */
/* Two-column editorial split: sticky title rail left, accordion right, so the
section fills the full measure instead of stranding the right half. */
.faq-layout {
display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
gap: 2rem clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
.faq-intro { position: sticky; top: 5.4rem; }
.faq-layout .faq-list { max-width: none; }
@media (max-width: 940px) {
.faq-layout { grid-template-columns: 1fr; gap: 0.5rem; }
.faq-intro { position: static; }
}
.faq-list { border-top: var(--border-w) solid var(--ink); max-width: 76ch; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
width: 100%; display: flex; justify-content: space-between; align-items: center;
gap: 1.5rem; background: none; border: 0; cursor: pointer; text-align: left;
font-family: var(--f-body); font-weight: 700; font-size: 1.05rem; color: var(--ink);
padding: 1.1rem 0.2rem;
}
.faq__q:hover { color: var(--accent-ink); }
.faq__q .pm {
font-family: var(--f-mono); font-size: 1.25rem; color: var(--accent-ink);
flex-shrink: 0; transition: transform var(--t-med) var(--ease-out);
}
.faq__q[aria-expanded="true"] .pm { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height 0.3s var(--ease-out); }
.faq__a-inner { padding: 0.1rem 2.5rem 1.3rem 0.2rem; color: var(--ink-2); max-width: 70ch; }
/* ---- Calculator -------------------------------------------------------------------- */
.calc-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
gap: clamp(2rem, 4vw, 4rem); align-items: start;
}
@media (max-width: 940px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-inputs {
border: var(--border-w) solid var(--ink); background: var(--surface);
box-shadow: 12px 12px 0 var(--shadow-c);
}
.calc-row {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
gap: 0.8rem 2rem; align-items: center;
padding: 1.05rem clamp(1rem, 2.5vw, 1.6rem);
border-bottom: 1px solid var(--rule);
}
.calc-row:last-child { border-bottom: 0; }
.calc-row > label { font-weight: 700; font-size: 1rem; }
.calc-row .hint {
display: block; font-family: var(--f-mono); font-weight: 400;
font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); margin-top: 0.3rem;
}
@media (max-width: 560px) {
.calc-row { grid-template-columns: 1fr; }
}
.stepper { display: flex; border: var(--border-w) solid var(--ink); background: var(--paper); }
.stepper button {
width: 44px; height: 44px; border: 0; cursor: pointer;
background: var(--surface-2); color: var(--ink);
font-family: var(--f-mono); font-size: 1.15rem; line-height: 1;
}
.stepper button:hover { background: var(--ink); color: var(--paper); }
.stepper button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.stepper input {
width: 4.4rem; border: 0; background: var(--paper); color: var(--ink);
text-align: center; font-family: var(--f-mono); font-size: 1.05rem; font-weight: 700;
-moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.selectwrap { position: relative; }
.selectwrap::after {
content: "\25BE"; position: absolute; right: 0.8rem; top: 50%;
transform: translateY(-50%); pointer-events: none;
font-family: var(--f-mono); color: var(--accent-ink);
}
.selectwrap select {
font-family: var(--f-mono); font-size: 0.88rem; font-weight: 700; color: var(--ink);
background: var(--paper); border: var(--border-w) solid var(--ink);
padding: 0.7rem 2.3rem 0.7rem 0.85rem; cursor: pointer;
appearance: none; -webkit-appearance: none; max-width: 100%;
}
.selectwrap select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.switch { position: relative; display: inline-block; width: 66px; height: 34px; }
.switch input {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; margin: 0; cursor: pointer;
}
.switch .track {
position: absolute; inset: 0; pointer-events: none;
border: var(--border-w) solid var(--ink); background: var(--surface-2);
transition: background var(--t-med) var(--ease-out);
}
.switch input:checked ~ .track { background: var(--accent); }
.switch input:focus-visible ~ .track { outline: 3px solid var(--accent); outline-offset: 3px; }
.switch .knob {
position: absolute; top: 7px; left: 7px; width: 20px; height: 20px;
background: var(--ink); pointer-events: none;
transition: transform var(--t-med) var(--ease-out);
}
.switch input:checked ~ .knob { transform: translateX(32px); }
.calc-out {
position: sticky; top: 5.4rem;
background: var(--ink); color: var(--paper);
border: 4px solid var(--ink);
box-shadow: 12px 12px 0 var(--accent);
padding: clamp(1.4rem, 2.5vw, 2rem);
margin-right: 12px;
}
[data-theme="dark"] .calc-out { background: oklch(0.115 0.006 55); border-color: var(--accent); color: var(--ink); }
.calc-out__title {
font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
font-size: 1.4rem; letter-spacing: 0.02em; margin-bottom: 1.1rem;
}
.lline {
display: flex; justify-content: space-between; gap: 1rem;
font-family: var(--f-mono); font-size: 0.8rem;
padding-block: 0.45rem;
border-bottom: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}
.lline .muted { opacity: 0.6; font-size: 0.92em; }
.lline.is-zero { opacity: 0.4; }
.lline .lcost { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.3rem; }
.calc-total .tlabel {
font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.2em;
text-transform: uppercase; opacity: 0.7;
}
.calc-total .tnum { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; }
.calc-annual, .calc-perep { font-family: var(--f-mono); font-size: 0.74rem; opacity: 0.75; margin-top: 0.45rem; }
.calc-cta { margin-top: 1.7rem; width: 100%; justify-content: center; }
.calc-foot { font-size: 0.78rem; opacity: 0.7; margin-top: 1.1rem; }
/* ---- Compact CTA band (interior pages) ----------------------------------------- */
.cta--compact { padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.cta--compact .cta__title { font-size: clamp(2.6rem, 7vw, 6rem); }

15
projects/acg-website/v2/index.html
View File

@@ -35,15 +35,20 @@
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" aria-label="Primary">
<a class="nav__link" href="#manifesto">Manifesto</a>
<a class="nav__link" href="#services">Index</a>
<a class="nav__link" href="#pricing">Rates</a>
<a class="nav__link" href="#dispatch">Dispatch</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>

101
projects/acg-website/v2/js/calculator.js Normal file
View File

@@ -0,0 +1,101 @@
/* ===========================================================================
ACG v2 estimator (calculator.html). Logic ported intact from v1 app.js;
only the shell around it changed. Rates mirror the published price list.
=========================================================================== */
(function () {
"use strict";
var $ = function (s, c) { return (c || document).querySelector(s); };
var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
var form = $("#calcForm");
if (!form) return;
var EQUIP = 25, M365_RATE = 14, VOIP_RATE = 28;
function money(n) { return "$" + Math.round(n).toLocaleString("en-US"); }
function clampInt(v) { if (isNaN(v) || v < 0) return 0; return v > 500 ? 500 : v; }
function intVal(id) { return clampInt(parseInt(($("#" + id) || {}).value, 10)); }
function numSelect(id) { var v = parseFloat(($("#" + id) || {}).value); return isNaN(v) ? 0 : v; }
function lineRow(name, detail, cost) {
return '<div class="lline' + (cost <= 0 ? " is-zero" : "") + '">' +
'<span class="lname">' + name + (detail ? ' <span class="muted">' + detail + "</span>" : "") + "</span>" +
'<span class="lcost">' + money(cost) + "</span></div>";
}
function recalc() {
var endpoints = intVal("endpoints");
var tier = numSelect("gpsTier");
var equip = $("#equip").checked;
var support = numSelect("support");
var m365 = intVal("m365");
var voip = intVal("voip");
var hosting = numSelect("hosting");
var gpsCost = endpoints * tier;
var equipCost = equip ? EQUIP : 0;
var m365Cost = m365 * M365_RATE;
var voipCost = voip * VOIP_RATE;
var tierName = tier === 19 ? "GPS-Basic" : tier === 39 ? "GPS-Advanced" : "GPS-Pro";
var supportName = support === 0 ? "" : support === 200 ? "Essential" :
support === 380 ? "Standard" : support === 540 ? "Premium" : "Priority";
var hostingName = hosting === 0 ? "" : hosting === 15 ? "Starter" :
hosting === 35 ? "Business" : "Commerce";
var lines = "";
lines += lineRow(tierName + " monitoring", endpoints + " &times; " + money(tier), gpsCost);
lines += lineRow("Equipment monitoring", "up to 10 devices", equipCost);
lines += lineRow((supportName || "Support plan") + " support", supportName ? "bundled labor" : "none", support);
lines += lineRow("Microsoft 365", m365 + " &times; " + money(M365_RATE), m365Cost);
lines += lineRow("Business phones", voip + " &times; " + money(VOIP_RATE), voipCost);
lines += lineRow(hostingName ? hostingName + " hosting" : "Web hosting", hostingName ? "managed" : "none", hosting);
var total = gpsCost + equipCost + support + m365Cost + voipCost + hosting;
$("#ledgerLines").innerHTML = lines;
$("#totalMonthly").textContent = money(total);
$("#totalAnnual").textContent = money(total * 12) + " / year";
$("#perEndpoint").innerHTML = endpoints > 0
? money(total / endpoints) + " all-in, per endpoint / mo"
: "add endpoints to see per-seat cost";
}
$$(".stepper").forEach(function (st) {
var input = $("input", st);
$$("button", st).forEach(function (b) {
b.addEventListener("click", function () {
input.value = clampInt(parseInt(input.value, 10) + parseInt(b.getAttribute("data-dir"), 10));
recalc();
});
});
input.addEventListener("change", function () { input.value = clampInt(parseInt(input.value, 10)); });
});
/* Carry the built estimate across to the contact page. */
var sendBtn = $("#sendEstimate");
if (sendBtn) {
var storeEstimate = function () {
var lines = $$("#ledgerLines .lline")
.filter(function (l) { return !l.classList.contains("is-zero"); })
.map(function (l) {
return "- " + $(".lname", l).textContent.replace(/\s+/g, " ").trim() +
": " + $(".lcost", l).textContent.trim();
});
var summary = "Here is the estimate I built:\n" + lines.join("\n") +
"\n\nMonthly: " + $("#totalMonthly").textContent +
" (" + $("#totalAnnual").textContent + ")\n\nI'd like to talk it through.";
try { sessionStorage.setItem("acg-estimate", summary); } catch (e) {}
};
/* 'click' covers keyboard + left-click; 'pointerdown' also catches
middle-click / cmd-click / open-in-new-tab, which never fire 'click'. */
sendBtn.addEventListener("click", storeEstimate);
sendBtn.addEventListener("pointerdown", storeEstimate);
}
form.addEventListener("input", recalc);
form.addEventListener("change", recalc);
form.addEventListener("submit", function (e) { e.preventDefault(); });
recalc();
})();

88
projects/acg-website/v2/js/v2.js
View File

@@ -1,5 +1,6 @@
/* ===========================================================================
ACG v2 homepage. Theme toggle + robust reveal-on-scroll.
ACG v2, sitewide. Theme toggle, global nav, reveal-on-scroll, FAQ,
contact form. Each block guards on its own DOM.
=========================================================================== */
(function () {
"use strict";
@@ -95,6 +96,91 @@
var yr = $("#year");
if (yr) yr.textContent = String(new Date().getFullYear());
/* ---- Global nav: mark the current page --------------------------------- */
var here = (window.location.pathname.split("/").pop() || "index.html").toLowerCase();
$$(".nav__link").forEach(function (a) {
var target = (a.getAttribute("href") || "").split(/[?#]/)[0].toLowerCase();
if (target && target === here) a.setAttribute("aria-current", "page");
});
/* ---- Mobile nav toggle -------------------------------------------------- */
var header = $(".site-header");
var navToggle = $("#navToggle");
if (navToggle && header) {
var closeNav = function () {
header.classList.remove("nav-open");
navToggle.setAttribute("aria-expanded", "false");
navToggle.setAttribute("aria-label", "Open menu");
};
navToggle.addEventListener("click", function () {
var open = header.classList.toggle("nav-open");
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
$$(".nav a").forEach(function (a) { a.addEventListener("click", closeNav); });
document.addEventListener("keydown", function (e) { if (e.key === "Escape") closeNav(); });
}
/* ---- FAQ accordion (contact.html) --------------------------------------- */
$$(".faq__q").forEach(function (q, i) {
var panel = q.nextElementSibling;
var inner = panel ? panel.firstElementChild : null;
if (panel) {
var pid = "faq-a-" + (i + 1), qid = "faq-q-" + (i + 1);
panel.id = pid; q.id = qid;
panel.setAttribute("role", "region");
panel.setAttribute("aria-labelledby", qid);
q.setAttribute("aria-controls", pid);
}
q.addEventListener("click", function () {
var open = q.getAttribute("aria-expanded") === "true";
q.setAttribute("aria-expanded", String(!open));
if (panel && inner) panel.style.maxHeight = open ? "0px" : (inner.scrollHeight + 8) + "px";
});
});
window.addEventListener("resize", function () {
$$('.faq__q[aria-expanded="true"]').forEach(function (q) {
var panel = q.nextElementSibling, inner = panel ? panel.firstElementChild : null;
if (panel && inner) panel.style.maxHeight = (inner.scrollHeight + 8) + "px";
});
});
/* ---- Contact form (contact.html) ---------------------------------------- */
var contact = $("#contactForm");
if (contact) {
/* Prefill from a calculator estimate, if one was just built. */
var msg = $("#cf-msg");
if (msg) {
try {
var est = sessionStorage.getItem("acg-estimate");
if (est) {
msg.value = est;
sessionStorage.removeItem("acg-estimate");
var fn = $("#formNote");
if (fn) fn.textContent = "Your estimate is attached below. Add your name and we'll take it from there.";
if (contact.scrollIntoView) contact.scrollIntoView({ behavior: "smooth", block: "start" });
var nameField = $("#cf-name");
if (nameField) nameField.focus({ preventScroll: true });
}
} catch (e) {}
}
contact.addEventListener("submit", function (e) {
e.preventDefault();
var name = $("#cf-name"), contactField = $("#cf-contact"), note = $("#formNote");
note.classList.remove("is-err", "is-ok");
if (!name.value.trim() || !contactField.value.trim()) {
note.textContent = "Please add your name and a phone or email so we can reach you.";
note.classList.add("is-err");
(name.value.trim() ? contactField : name).focus();
return;
}
note.textContent = "Thanks, " + name.value.trim().split(" ")[0] +
". In a live build this reaches our Tucson team. (Demo: nothing was sent.)";
note.classList.add("is-ok");
contact.reset();
});
}
/* ---- Reveal on scroll (robust: fallback reveals everything) ------------ */
var reveals = $$(".reveal");
if ("IntersectionObserver" in window && reveals.length) {

284
projects/acg-website/v2/pricing.html Normal file
View File

@@ -0,0 +1,284 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing | Arizona Computer Guru</title>
<meta name="description" content="Published, transparent IT pricing: GPS monitoring tiers, support plans, non-expiring block time, hosting, Microsoft 365, and business phones." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.03 / RATES</span>
<span>PUBLISHED, NOT "CALL FOR QUOTE"</span>
<span class="page-head__meta-wide">PER ENDPOINT</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">Every rate,</span>
<span class="t-hollow reveal">published.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">We think hiding prices is a red flag, in any IT company, including us. Here is the whole list. You pay for exactly what you have.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Build your exact price <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ GPS TIERS ============ -->
<section class="sect grid-bg" aria-labelledby="gps-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">01</span>
<p class="kicker mono">Per endpoint / monitoring &amp; protection</p>
</div>
<h2 id="gps-h" class="sect__title reveal">GPS monitoring<br /><span class="accent-word">tiers.</span></h2>
<p class="lead reveal">You pay for exactly the computers you have. No rounding you up into a bigger package tier.</p>
<div class="tiers" role="list">
<div class="tier reveal" role="listitem">
<h3 class="tier__name">GPS-Basic</h3>
<div class="tier__price"><span class="tier__cur" aria-hidden="true">$</span>19</div>
<div class="tier__per mono">per endpoint / mo</div>
<p class="tier__blurb">Essential monitoring for small, simple environments.</p>
<ul class="tier__list">
<li>Remote monitoring &amp; management</li>
<li>Automated patch management</li>
<li>Business-grade antivirus</li>
<li>8&times;5 help desk</li>
<li>Monthly health reports</li>
</ul>
<span class="tier__tag mono" aria-hidden="true">PLAN.A</span>
</div>
<div class="tier tier--pop reveal" role="listitem">
<div class="tier__flag mono">Most chosen</div>
<h3 class="tier__name">GPS-Pro</h3>
<div class="tier__price"><span class="tier__cur" aria-hidden="true">$</span>26</div>
<div class="tier__per mono">per endpoint / mo</div>
<p class="tier__blurb">Comprehensive protection for growing businesses.</p>
<ul class="tier__list">
<li>Everything in Basic</li>
<li>24&times;7 help desk</li>
<li>Advanced EDR &amp; email security</li>
<li>Dark-web monitoring</li>
<li>Backup &amp; disaster recovery</li>
<li>Security-awareness training</li>
</ul>
<span class="tier__tag mono" aria-hidden="true">PLAN.B</span>
</div>
<div class="tier reveal" role="listitem">
<h3 class="tier__name">GPS-Advanced</h3>
<div class="tier__price"><span class="tier__cur" aria-hidden="true">$</span>39</div>
<div class="tier__per mono">per endpoint / mo</div>
<p class="tier__blurb">Enterprise-grade security and compliance.</p>
<ul class="tier__list">
<li>Everything in Pro</li>
<li>Compliance management (HIPAA/SOC)</li>
<li>Ransomware rollback</li>
<li>Virtual CIO services</li>
<li>Priority response SLA</li>
<li>Dedicated account manager</li>
</ul>
<span class="tier__tag mono" aria-hidden="true">PLAN.C</span>
</div>
</div>
<p class="note reveal">Add equipment monitoring (routers, switches, printers, NAS) for <span class="mono">$25/mo</span> up to 10 devices.</p>
</div>
</section>
<!-- ============ DARK BAND: LABOR ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="labor-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">02</span>
<p class="kicker mono">Labor / predictable rates</p>
</div>
<h2 id="labor-h" class="band-title reveal">Support plans<br />&amp; block time.</h2>
<p class="band-lead reveal">Bundled labor at a lower effective rate, or pre-paid hours you bank and draw down whenever you need them.</p>
<div class="table-slab reveal">
<table class="data-table">
<caption>Support plans / bundled labor at a lower effective rate</caption>
<thead><tr><th scope="col">Plan</th><th class="num" scope="col">Monthly</th><th class="num" scope="col">Hours</th><th class="num" scope="col">Effective rate</th><th scope="col">Response</th></tr></thead>
<tbody>
<tr><td>Essential</td><td class="num">$200</td><td class="num">2</td><td class="num">$100/hr</td><td>Next business day</td></tr>
<tr class="pop"><td>Standard</td><td class="num">$380</td><td class="num">4</td><td class="num">$95/hr</td><td>8 hours</td></tr>
<tr><td>Premium</td><td class="num">$540</td><td class="num">6</td><td class="num">$90/hr</td><td>4 hours</td></tr>
<tr><td>Priority</td><td class="num">$850</td><td class="num">10</td><td class="num">$85/hr</td><td>2 hours, 24/7</td></tr>
</tbody>
</table>
</div>
<div class="table-slab reveal">
<table class="data-table">
<caption>Block time / pre-paid hours that never expire</caption>
<thead><tr><th scope="col">Block</th><th class="num" scope="col">Price</th><th class="num" scope="col">Effective rate</th><th scope="col">Notes</th></tr></thead>
<tbody>
<tr><td>10 hours</td><td class="num">$1,500</td><td class="num">$150/hr</td><td>Use anytime, no expiry</td></tr>
<tr><td>20 hours</td><td class="num">$2,600</td><td class="num">$130/hr</td><td>Bank &amp; draw down</td></tr>
<tr><td>30 hours</td><td class="num">$3,000</td><td class="num">$100/hr</td><td>Best per-hour value</td></tr>
</tbody>
</table>
</div>
<p class="band-punch reveal">Off-plan labor is $175/hr. Plans and block time bring that down, and there is never a charge to find out what something will cost.</p>
</div>
</section>
</div>
<!-- ============ EVERYTHING ELSE ============ -->
<section class="sect" aria-labelledby="more-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">03</span>
<p class="kicker mono">Hosting, email &amp; phones / the rest of the stack</p>
</div>
<h2 id="more-h" class="sect__title reveal">Everything else,<br /><span class="accent-word">also published.</span></h2>
<div class="price-cols">
<div class="price-block reveal">
<h3 class="price-block__title">Web hosting</h3>
<div class="table-slab">
<table class="data-table">
<caption>Managed, with free SSL &amp; daily backups</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Monthly</th><th scope="col">Includes</th></tr></thead>
<tbody>
<tr><td>Starter</td><td class="num">$15</td><td>5 GB, 1 site</td></tr>
<tr class="pop"><td>Business</td><td class="num">$35</td><td>25 GB, 5 sites</td></tr>
<tr><td>Commerce</td><td class="num">$65</td><td>50 GB, unlimited</td></tr>
</tbody>
</table>
</div>
</div>
<div class="price-block reveal">
<h3 class="price-block__title">Microsoft 365 &amp; email</h3>
<div class="table-slab">
<table class="data-table">
<caption>Licensed, configured &amp; supported</caption>
<thead><tr><th scope="col">Plan</th><th class="num" scope="col">Per user</th><th scope="col">For</th></tr></thead>
<tbody>
<tr><td>Hosted email</td><td class="num">$2&ndash;$10</td><td>IMAP/POP, by storage</td></tr>
<tr><td>M365 Basic</td><td class="num">$7</td><td>Web apps, Teams</td></tr>
<tr class="pop"><td>M365 Standard</td><td class="num">$14</td><td>Desktop Office</td></tr>
<tr><td>M365 Premium</td><td class="num">$24</td><td>Security &amp; device mgmt</td></tr>
</tbody>
</table>
</div>
<p class="note">Email security add-on: <span class="mono">$3</span>/mailbox.</p>
</div>
<div class="price-block reveal">
<h3 class="price-block__title">Business phones</h3>
<div class="table-slab">
<table class="data-table">
<caption>GPS-Voice / no per-minute surprises</caption>
<thead><tr><th scope="col">Tier</th><th class="num" scope="col">Per user</th><th scope="col">Highlights</th></tr></thead>
<tbody>
<tr><td>Basic</td><td class="num">$22</td><td>Unlimited US, app, e911</td></tr>
<tr class="pop"><td>Standard</td><td class="num">$28</td><td>Ring groups, recording</td></tr>
<tr><td>Pro</td><td class="num">$35</td><td>SMS, analytics, CRM</td></tr>
<tr><td>Call Center</td><td class="num">$55</td><td>Queues, supervisor tools</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="sect sect--surface" aria-labelledby="cta-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">04</span>
<p class="kicker mono">No email wall / no sales call required</p>
</div>
<h2 id="cta-h" class="sect__title reveal">Add it up for<br /><span class="accent-word">your business.</span></h2>
<p class="lead reveal">Put in your numbers and watch the total. The estimator uses exactly the rates on this page.</p>
<div class="inline-actions reveal">
<a class="btn btn--primary" href="calculator.html">Build an estimate <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="contact.html">Ask a question <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>

227
projects/acg-website/v2/services.html Normal file
View File

@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Services | Arizona Computer Guru</title>
<meta name="description" content="Managed IT, cybersecurity, backup, Microsoft 365, business phones, and hosting for Arizona businesses. One local partner, plainly laid out." />
<meta name="color-scheme" content="light dark" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/v2.css" />
<link rel="icon" href="assets/acg-mark.svg" type="image/svg+xml" />
<script>
(function () { try {
var s = localStorage.getItem("acg-theme");
var m = s || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
document.documentElement.setAttribute("data-theme", m);
document.documentElement.classList.add("js");
} catch (e) {} })();
</script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header class="site-header">
<div class="header-grid">
<a class="brand" href="index.html" aria-label="Arizona Computer Guru home">
<span class="brand__mark" aria-hidden="true"><svg viewBox="0 0 100 104" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(20 50 54)"><path d="M61.2 26.2 A30 30 0 1 1 38.8 26.2"/><line x1="50" y1="14" x2="50" y2="50"/></g></svg></span>
<span class="brand__text">
<span class="brand__name">Arizona Computer Guru</span>
<span class="brand__since">Concierge IT / Tucson / Est. 2001</span>
</span>
</a>
<nav class="nav" id="siteNav" aria-label="Primary">
<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="about.html">About</a>
<a class="nav__link" href="contact.html">Contact</a>
<a class="nav__link nav__link--mobile" href="calculator.html">Estimate your cost</a>
<a class="nav__link nav__link--mobile" href="tel:+15203048300">520.304.8300</a>
</nav>
<div class="header-actions">
<a class="nav__cta" href="calculator.html">Estimate</a>
<a class="nav__phone" href="tel:+15203048300">520.304.8300</a>
<button class="theme-toggle" id="themeToggle" type="button" aria-pressed="false" aria-label="Switch to dark theme"><span aria-hidden="true" data-theme-icon>&#9728;</span></button>
<button class="nav__toggle" id="navToggle" type="button" aria-expanded="false" aria-controls="siteNav" aria-label="Open menu"><span aria-hidden="true">&#9776;</span></button>
</div>
</div>
</header>
<main id="main">
<!-- ============ PAGE HEAD ============ -->
<section class="page-head" aria-labelledby="page-h">
<p class="page-head__meta mono reveal">
<span>DOC.02 / SERVICES</span>
<span>FULL CATALOG</span>
<span class="page-head__meta-wide">ONE LOCAL PARTNER</span>
</p>
<h1 id="page-h" class="page-head__title">
<span class="reveal">The full</span>
<span class="accent-word reveal">index.</span>
</h1>
<div class="page-head__deck">
<p class="page-head__lead reveal">One local partner for the whole stack: the computers, the security, the phones, the email, and the people who keep it all running. No bundles you do not need.</p>
<div class="page-head__aside reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
<figure class="page-head__figure frame frame--duo reveal">
<img src="assets/services.png" width="1248" height="832" alt="A tidy wall-mounted patch panel and small network switch with neatly dressed cables on a wooden shelf in warm light." />
<span class="frame__meta frame__meta--tl mono" aria-hidden="true">FIG.003 / RACK</span>
<span class="frame__meta frame__meta--br mono" aria-hidden="true">7437 E 22ND ST / TUCSON</span>
</figure>
</section>
<!-- ============ DARK BAND: THE CATALOG ============ -->
<div class="band-ink">
<section class="band-sect" aria-labelledby="catalog-h">
<div class="band-wrap">
<div class="section-head">
<span class="section-no" aria-hidden="true">01</span>
<p class="kicker mono">Everything we do / on one page</p>
</div>
<h2 id="catalog-h" class="band-title reveal">Eight lines of business.<br />Zero mystery.</h2>
<div class="svc-group">
<h3 class="svc-group__title reveal">Run your systems<span class="svc-group__tag mono" aria-hidden="true">SYS.RUN</span></h3>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">01</div>
<div class="svc__body">
<h4 class="svc__name">Managed IT (GPS)</h4>
<p class="svc__desc">Guru Protection Services keeps every endpoint healthy: 24/7 monitoring, automated patching, and a help desk that already knows your setup. You get monthly health reports showing what we fixed before it broke.</p>
</div>
<div class="svc__meta mono">from $19<span class="svc__per">/endpoint</span></div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">02</div>
<div class="svc__body">
<h4 class="svc__name">Backup &amp; Recovery</h4>
<p class="svc__desc">Tested backups, offsite copies, and ransomware rollback. A bad day becomes an inconvenience instead of a closure, and we prove the restores actually work.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">03</div>
<div class="svc__body">
<h4 class="svc__name">Projects &amp; Block Time</h4>
<p class="svc__desc">Migrations, network buildouts, new-office setups, and one-off work, billed against pre-paid hours that never expire. Bank the hours, draw them down when you need them.</p>
</div>
<div class="svc__meta mono">from $100<span class="svc__per">/hr</span></div>
</article>
</div>
</div>
<div class="svc-group">
<h3 class="svc-group__title reveal">Protect your business<span class="svc-group__tag mono" aria-hidden="true">SEC.OPS</span></h3>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">04</div>
<div class="svc__body">
<h4 class="svc__name">Cybersecurity</h4>
<p class="svc__desc">Advanced EDR, email security, dark-web monitoring, and security-awareness training. Basic antivirus alone is not enough anymore, so we do not pretend it is.</p>
</div>
<div class="svc__meta mono">in GPS-Pro &amp; up</div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">05</div>
<div class="svc__body">
<h4 class="svc__name">vCIO &amp; Compliance</h4>
<p class="svc__desc">Strategy, budgeting, and cyber-insurance readiness. We help you check the boxes auditors and insurers ask for (HIPAA, SOC, MFA, documented backups) and hand you the paperwork.</p>
</div>
<div class="svc__meta mono">in GPS-Advanced</div>
</article>
</div>
</div>
<div class="svc-group">
<h3 class="svc-group__title reveal">Connect your people<span class="svc-group__tag mono" aria-hidden="true">COM.LINK</span></h3>
<div class="svc-index">
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">06</div>
<div class="svc__body">
<h4 class="svc__name">Microsoft 365 &amp; Email</h4>
<p class="svc__desc">Migrations, Business Standard or Premium licensing, or budget-friendly hosted email. Configured, secured, and supported by people you can call.</p>
</div>
<div class="svc__meta mono">from $2<span class="svc__per">/mailbox</span></div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">07</div>
<div class="svc__body">
<h4 class="svc__name">Business Phones (GPS-Voice)</h4>
<p class="svc__desc">Cloud phone systems with mobile and desktop apps, auto-attendants, and free number porting for managed clients. Four tiers, no per-minute surprises.</p>
</div>
<div class="svc__meta mono">from $22<span class="svc__per">/user</span></div>
</article>
<article class="svc reveal">
<div class="svc__no" aria-hidden="true">08</div>
<div class="svc__body">
<h4 class="svc__name">Web &amp; Email Hosting</h4>
<p class="svc__desc">Managed hosting with free SSL, daily backups, and a real person (not a ticket robot) when something needs a hand.</p>
</div>
<div class="svc__meta mono">from $15<span class="svc__per">/mo</span></div>
</article>
</div>
</div>
<p class="band-punch reveal">Every service above is on our published price list. If it is not on the list, we will quote it before we touch it.</p>
</div>
</section>
</div>
<!-- ============ CTA ============ -->
<section class="sect grid-bg" aria-labelledby="cta-h">
<div class="wrap">
<div class="section-head">
<span class="section-no section-no--ink" aria-hidden="true">02</span>
<p class="kicker mono">No email wall / no sales call</p>
</div>
<h2 id="cta-h" class="sect__title reveal">See what<br /><span class="accent-word">it costs.</span></h2>
<p class="lead reveal">Build your own estimate with the same math we would walk you through in person, or read the full breakdown.</p>
<div class="inline-actions reveal">
<a class="btn btn--primary" href="calculator.html">Estimate your cost <span class="arrow" aria-hidden="true">&rarr;</span></a>
<a class="more-link" href="pricing.html">Full pricing breakdown <span class="arrow" aria-hidden="true">&rarr;</span></a>
</div>
</div>
</section>
<!-- ============ RADIO TICKER ============ -->
<aside class="ticker" aria-label="The Computer Guru Show radio information">
<div class="ticker__track" aria-hidden="true">
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
<span class="ticker__item"><strong>The Computer Guru Show</strong> / Saturdays 9AM / KVOI 1030AM</span>
<span class="ticker__item">Call in live: <strong>520-790-2020</strong></span>
<span class="ticker__item">Tucson's trusted tech talk since 2001</span>
</div>
<p class="sr-only">The Computer Guru Show, Saturdays 9AM on KVOI 1030AM. Call in live: 520-790-2020. Tucson's trusted tech talk since 2001.</p>
</aside>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="footer-col">
<p class="footer-brand">Arizona Computer Guru</p>
<p class="mono footer-line">Tucson-born / Arizona-wide / since 2001</p>
<p class="mono footer-line">7437 E. 22nd St, Tucson, AZ 85710</p>
</div>
<div class="footer-col">
<p class="mono footer-line"><a href="tel:+15203048300">520.304.8300</a></p>
<p class="mono footer-line"><a href="mailto:info@azcomputerguru.com">info@azcomputerguru.com</a></p>
<p class="mono footer-line">The Computer Guru Show / Sat 9AM / KVOI 1030AM</p>
</div>
<div class="footer-col footer-col--meta">
<p class="mono footer-line">&copy; <span id="year">2026</span> ACG / 32.2226N 110.9747W</p>
<p class="mono footer-line">100% local. Never offshore.</p>
</div>
<p class="disclaimer mono">Local demonstration build of a proposed azcomputerguru.com. Pricing reflects published GPS rates and is illustrative for the estimator; a real quote is tailored to your environment. Photography is representational.</p>
</div>
</footer>
<script src="js/v2.js"></script>
</body>
</html>