From 722cab36dece55338c3c514604cece635aac8345 Mon Sep 17 00:00:00 2001 From: Mike Swanson Date: Thu, 23 Jul 2026 05:24:04 -0700 Subject: [PATCH] =?UTF-8?q?acg-website:=20full=20multi-page=20v2=20site=20?= =?UTF-8?q?=E2=80=94=20subpages=20redesigned=20+=20polished?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../memory/project_acg_website_redesign.md | 9 +- projects/acg-website/v2/about.html | 237 +++++++++ projects/acg-website/v2/calculator.html | 192 ++++++++ projects/acg-website/v2/contact.html | 184 +++++++ projects/acg-website/v2/css/v2.css | 460 +++++++++++++++++- projects/acg-website/v2/index.html | 15 +- projects/acg-website/v2/js/calculator.js | 101 ++++ projects/acg-website/v2/js/v2.js | 88 +++- projects/acg-website/v2/pricing.html | 284 +++++++++++ projects/acg-website/v2/services.html | 227 +++++++++ 10 files changed, 1788 insertions(+), 9 deletions(-) create mode 100644 projects/acg-website/v2/about.html create mode 100644 projects/acg-website/v2/calculator.html create mode 100644 projects/acg-website/v2/contact.html create mode 100644 projects/acg-website/v2/js/calculator.js create mode 100644 projects/acg-website/v2/pricing.html create mode 100644 projects/acg-website/v2/services.html diff --git a/.claude/memory/project_acg_website_redesign.md b/.claude/memory/project_acg_website_redesign.md index f0a0875a..3b6ad006 100644 --- a/.claude/memory/project_acg_website_redesign.md +++ b/.claude/memory/project_acg_website_redesign.md @@ -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 diff --git a/projects/acg-website/v2/about.html b/projects/acg-website/v2/about.html new file mode 100644 index 00000000..6c58a444 --- /dev/null +++ b/projects/acg-website/v2/about.html @@ -0,0 +1,237 @@ + + + + + + About | Arizona Computer Guru + + + + + + + + + + + + +
+
+ + + + Arizona Computer Guru + Concierge IT / Tucson / Est. 2001 + + + +
+ Estimate + 520.304.8300 + + +
+
+
+ +
+ + +
+

+ DOC.04 / ABOUT + TUCSON, SINCE 2001 + LOCALLY OWNED +

+

+ The IT partner that + actually picks up. +

+
+

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.

+
+ Talk to a human +
+
+
+ A friendly handshake over a wooden desk with a laptop and a handwritten notebook, an Arizona map framed on the wall. + + +
+
+ + +
+
+
+ +

Why we work this way / the short version

+
+
+
+

We used to be the company we now warn you about.

+

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.

+

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.

+

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.

+

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.

+

We built our service the way we'd want to be treated if we were the customer.

+
+
+ Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill. + + +
+
+
+
+ + +
+
+
+
+ +

What concierge means, concretely / five choices

+
+

The promises
behind the work.

+
+
+ +
+

Transparent pricing

+

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.

+
+
$19–$39/endpoint
+
+
+ +
+

Local Tucson team

+

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.

+
+
onsite 1–2 hr
+
+
+ +
+

Proactive, not reactive

+

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.

+
+
24/7 monitoring
+
+
+ +
+

Month-to-month terms

+

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.

+
+
cancel in 30 days
+
+
+ +
+

Plain English, always

+

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.

+
+
no jargon walls
+
+
+
+
+
+ + +
+
+
+ +

On the air / Tucson's tech talk

+
+

Tucson knows
the voice.

+

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.

+
+
+
1030AM
+
KVOI, The Computer Guru Show
+ +
+
+
SAT 9AM
+
Live every Saturday morning
+ +
+
+
520-790-2020
+
Call in live with any tech question
+ +
+
+
+
+ + +
+
+

Our standard

+

You might not choose us. That's okay. But you'll make a better decision because we told you the truth.

+

// Arizona Computer Guru, Tucson

+
+
+ + +
+
+
+

The first conversation is free / there is no pitch

+

+ Come see + for yourself. +

+

Stop by the office, or have us out to look at the server closet that runs hot and the printer that jams every Tuesday.

+
+ Talk to a human + Estimate your cost +
+
+
+
+
+ +
+
+
+

Arizona Computer Guru

+

Tucson-born / Arizona-wide / since 2001

+

7437 E. 22nd St, Tucson, AZ 85710

+
+
+

520.304.8300

+

info@azcomputerguru.com

+

The Computer Guru Show / Sat 9AM / KVOI 1030AM

+
+
+

© 2026 ACG / 32.2226N 110.9747W

+

100% local. Never offshore.

+
+

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.

+
+
+ + + diff --git a/projects/acg-website/v2/calculator.html b/projects/acg-website/v2/calculator.html new file mode 100644 index 00000000..ba27135f --- /dev/null +++ b/projects/acg-website/v2/calculator.html @@ -0,0 +1,192 @@ + + + + + + Estimate your IT cost | Arizona Computer Guru + + + + + + + + + + + + +
+
+ + + + Arizona Computer Guru + Concierge IT / Tucson / Est. 2001 + + + +
+ Estimate + 520.304.8300 + + +
+
+
+ +
+ + +
+

+ DOC.06 / ESTIMATOR + LIVE MATH / NO EMAIL WALL + SAME RATES WE PUBLISH +

+

+ Your IT, + accounted for. +

+
+

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.

+
+ Full pricing breakdown +
+
+
+ + +
+
+

IT cost estimator

+
+
+
+ +
+ + + +
+
+
+ +
+
+
+ + + + + +
+
+ +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+
+
+ +
+

Monthly statement

+
+
+ Per month + $0 +
+
$0 / year
+
all-in, per endpoint / mo
+ Send me this estimate +

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.

+
+
+
+
+ + + +
+ +
+
+
+

Arizona Computer Guru

+

Tucson-born / Arizona-wide / since 2001

+

7437 E. 22nd St, Tucson, AZ 85710

+
+
+

520.304.8300

+

info@azcomputerguru.com

+

The Computer Guru Show / Sat 9AM / KVOI 1030AM

+
+
+

© 2026 ACG / 32.2226N 110.9747W

+

100% local. Never offshore.

+
+

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.

+
+
+ + + + diff --git a/projects/acg-website/v2/contact.html b/projects/acg-website/v2/contact.html new file mode 100644 index 00000000..77d3f3d1 --- /dev/null +++ b/projects/acg-website/v2/contact.html @@ -0,0 +1,184 @@ + + + + + + Contact | Arizona Computer Guru + + + + + + + + + + + + + +
+
+ + + + Arizona Computer Guru + Concierge IT / Tucson / Est. 2001 + + + +
+ Estimate + 520.304.8300 + + +
+
+
+ +
+ + +
+

+ DOC.05 / DISPATCH + NO PRESSURE / NO PITCH + SAME-DAY REPLY +

+

+ Talk to + a human. +

+
+

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."

+
+
+ + +
+
+

Contact details and message form

+
+
+
+ +

Where to find us / how to reach us

+
+
+ + +
Office7437 E. 22nd St, Tucson, AZ 85710
+
HoursMon–Fri 9–5 / 24/7 emergency for Priority clients
+
On the radioThe Computer Guru Show / Sat 9AM / KVOI 1030AM
+
Call the show520-790-2020
+
+
+ Warm afternoon desert light raking across a white stucco wall meeting a clean wooden windowsill. + + +
+
+ +
+

Send a message

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

We reply the same business day. (Demo build: this form is not wired to a mailbox.)

+
+
+
+
+ + + + + +
+
+
+
+
+ +

Straight answers / ask us anything

+
+

Questions worth asking
any IT company.

+
+
+
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.
+
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.
+
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.
+
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.
+
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.
+
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.
+
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.
+
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.
+
+
+
+
+
+ +
+
+
+

Arizona Computer Guru

+

Tucson-born / Arizona-wide / since 2001

+

7437 E. 22nd St, Tucson, AZ 85710

+
+
+

520.304.8300

+

info@azcomputerguru.com

+

The Computer Guru Show / Sat 9AM / KVOI 1030AM

+
+
+

© 2026 ACG / 32.2226N 110.9747W

+

100% local. Never offshore.

+
+

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.

+
+
+ + + diff --git a/projects/acg-website/v2/css/v2.css b/projects/acg-website/v2/css/v2.css index c1f2572e..ccd6c5a0 100644 --- a/projects/acg-website/v2/css/v2.css +++ b/projects/acg-website/v2/css/v2.css @@ -561,7 +561,7 @@ html:not(.js) .city-word--final .city-word__t::after { transform: scaleX(1); } .svc__per { color: var(--band-muted); font-weight: 400; font-size: 0.8em; } @media (max-width: 680px) { .svc { grid-template-columns: 2.6rem 1fr; } - .svc__no { font-size: 1.4rem; } + .svc__no { font-size: 1.4rem; } .svc__meta { grid-column: 2; text-align: left; } } @@ -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); } diff --git a/projects/acg-website/v2/index.html b/projects/acg-website/v2/index.html index c3004158..e0ca8366 100644 --- a/projects/acg-website/v2/index.html +++ b/projects/acg-website/v2/index.html @@ -35,15 +35,20 @@ Concierge IT / Tucson / Est. 2001 -