acg-website: remove Paper/Ledger skin, set Bold as default

- CSS: Bold tokens now at :root (bone/near-black palette, signal orange)
- JS: skin switcher cycles Bold/Midnight/Verdigris (default: bold)
- HTML: all 7 pages default to bold skin
- Docs: README + DESIGN.md rewritten for Bold design language
- Deployment: live at ww9.azcomputerguru.com (IX hosting, grey-cloud DNS)

Paper/Sonoran Ledger skin dropped per user direction. Single-page ledger
version in root retained as archived reference pattern.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-06-16 20:29:57 -07:00
parent ef4577cf75
commit c9406d8cd9
10 changed files with 149 additions and 163 deletions

View File

@@ -1,50 +1,64 @@
# Arizona Computer Guru — Website Showcase
A self-contained, hand-built single-page marketing site for Arizona Computer Guru,
produced as a local "what we can do" test piece. No framework, no build step.
Multipage marketing site for Arizona Computer Guru. Hand-built static (HTML/CSS/vanilla JS).
3 design skins, Bold as default. **Live deployment:** http://ww9.azcomputerguru.com
**Art direction:** "Sonoran Ledger" — warm paper, a bookkeeper's-ledger rhythm,
mono numerals, orange used only as sparse accent "ink." Chosen by a Grok + Gemini
design panel and confirmed by Mike. See `DESIGN.md`.
**Active version:** `multipage/` (6 pages: Home, Services, Pricing, Calculator, About, Contact)
**Default design:** Bold — premium brutalist with Anton headlines, signal orange, grayscale photos
**Archived:** Single-page Sonoran Ledger version (root `index.html`) — kept as reference pattern
## View it
From this folder:
```powershell
powershell -ExecutionPolicy Bypass -File serve.ps1 # serves :4327 and opens a browser
```
or any static server, e.g.:
**Live site:** http://ww9.azcomputerguru.com (deployed to IX hosting, grey-cloud Cloudflare DNS)
**Local preview:**
```bash
py -m http.server 4327 # then open http://localhost:4327/
cd multipage/
powershell -ExecutionPolicy Bypass -File serve.ps1 # port 4328
# OR
py -m http.server 4328
```
It also works opened directly as `index.html` (file://), though serving is cleaner
(Google Fonts and JSON-LD behave best over http).
**Archived single-page (Sonoran Ledger):**
```bash
# From project root
powershell -ExecutionPolicy Bypass -File serve.ps1 # port 4327
```
## What's inside
| Path | Purpose |
|---|---|
| `index.html` | The page — semantic, accessible, all sections |
| `css/styles.css` | Sonoran Ledger design system (light + dark themes) |
| `js/app.js` | Theme toggle, IT-cost calculator, FAQ, mobile nav, reveal |
| `assets/images/` | Grok-generated photography (hero, story, trust) + paper texture |
| `design/` | Pipeline artifacts: AI design directions, reviews, render screenshots |
| `DESIGN.md` | Locked design system + anti-slop rules |
**Multipage (active):** `multipage/`
- 6 HTML pages (index, services, pricing, calculator, about, contact)
- 3 skins: **Bold** (default), Midnight, Verdigris — each with light + dark themes
- Bold design: Anton uppercase headlines, signal orange (#E24A12), grayscale photos, bone/near-black palette
- `css/styles.css` — 3-skin token-based system
- `js/app.js` — theme + skin switchers, calculator, mobile nav, FAQ
- `assets/images/` — Grok photography (default warm set + Verdigris cool set)
- `PRODUCT.md`, `DESIGN.md` — brand register + design rules
**Single-page (archived):** Root directory
- `index.html` — Sonoran Ledger design (warm paper aesthetic)
- Kept as reusable pattern for other Guru-related sites
## Features
- Light **and** dark themes (system-aware, remembered, no flash-of-wrong-theme).
- Live **IT cost calculator** — endpoints, GPS tier, support plan, M365, phones,
hosting → monthly/annual/all-in-per-endpoint. "Send me this estimate" hands the
built statement to the contact form.
- Published GPS pricing, services, FAQ, and concierge story from ACG's own materials.
- WCAG-AA contrast in both themes; keyboard-accessible nav, FAQ, and forms.
- **3 design skins** with header switcher (Bold / Midnight / Verdigris)
- **Light + dark themes** for each skin (system-aware, remembered, FOUC-free)
- **Interactive IT cost calculator** — GPS tiers, support plans, M365, phones → monthly/annual totals
- **Estimate handoff** — calculator builds statement for contact form
- Published GPS pricing, services, FAQ
- WCAG-AA contrast in all 6 modes; keyboard-accessible nav, FAQ, forms
- **Grayscale photography** in Bold skin (color in Midnight/Verdigris)
## Build pipeline (how it was made)
Grok (art-direction input + image generation) → Gemini (design-weight decision) →
human pick → hand-built static site → Gemini + Grok design & code review → fixes →
Gemini vision final design gate → polish → local publish.
## Deployment
- **Production:** http://ww9.azcomputerguru.com
- **Server:** IX Web Hosting (ix.azcomputerguru.com, 72.194.62.5)
- **Path:** `/home/azcomputerguru/public_html/ww9/`
- **DNS:** Cloudflare A record (grey cloud / DNS-only)
- **HTTPS:** AutoSSL (Let's Encrypt, auto-provisioned)
## Not production
This is a demonstration build. The contact form is not wired to a mailbox, pricing
is illustrative of published GPS rates, and photography is representational. The live
site project lives at `clients/azcomputerguru.com/` (Astro).
Contact forms are demo only (not wired). Pricing illustrative of published GPS rates.
## History
- 2026-06-16: Deployed to ww9.azcomputerguru.com; Paper/Ledger skin dropped, Bold set as default
- 2026-06-14-15: Built multipage (4 skins), Bold skin added as dialed-back radical
- 2026-06-14: Built single-page Sonoran Ledger via Grok+Gemini pipeline