sync: auto-sync from GURU-5070 at 2026-06-15 06:07:00

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-15 06:07:00

projects/acg-website-showcase/multipage/css/styles.css

@@ -147,14 +147,14 @@ html[data-skin="bold"] {                  /* fonts (both modes) + LIGHT palette
   --surface-2:  #EAE2D4;
   --ink:        #16120F;
   --ink-2:      #46403A;
-  --ink-3:      #6B6359;
+  --ink-3:      #5C544B;   /* AA for small muted text on bone (~5:1)          */
   --rule:       rgba(22, 18, 15, 0.22);
   --rule-soft:  rgba(22, 18, 15, 0.10);
   --accent:     #E24A12;   /* signal orange, deepened for bone (button fill)  */
   --accent-ink: #C23A0A;   /* orange TEXT on bone (AA ~5.3:1)                 */
-  --on-accent:  #FBF7F0;
+  --on-accent:  #16120F;   /* dark ink on the orange fill clears AA (~4.8:1)  */
   --good:       #1F7A4A;
-  --shadow: 0 2px 0 var(--ink), 0 24px 44px -30px rgba(22, 18, 15, 0.4);
+  --shadow: 0 1px 0 var(--rule), 0 24px 44px -30px rgba(22, 18, 15, 0.4);
 }
 html[data-skin="bold"][data-theme="dark"] {       /* Bold, dark (the primary mood) */
   --paper:      #0C0A09;
@@ -169,41 +169,47 @@ html[data-skin="bold"][data-theme="dark"] {       /* Bold, dark (the primary moo
   --accent-ink: #FF8A4D;   /* orange text on near-black (AA)                  */
   --on-accent:  #0C0A09;
   --good:       #8FD0A0;
-  --shadow: 0 2px 0 var(--ink), 0 24px 50px -30px rgba(0, 0, 0, 0.85);
+  --shadow: 0 1px 0 var(--rule), 0 24px 50px -30px rgba(0, 0, 0, 0.85);
 }
 
 /* Bold signature treatments: poster type, hard ink borders, mono photos */
 html[data-skin="bold"] .ledger { background-image: none; }   /* drop ledger rulings */
 html[data-skin="bold"] h1, html[data-skin="bold"] h2,
-html[data-skin="bold"] .tier__name, html[data-skin="bold"] .svc__name,
-html[data-skin="bold"] .faq__q, html[data-skin="bold"] .brand__name {
+html[data-skin="bold"] .tier__name, html[data-skin="bold"] .brand__name {
   text-transform: uppercase; letter-spacing: 0.005em; font-weight: 400;
 }
+/* functional labels stay sentence-case in the body face (Anton caps smear at UI sizes) */
+html[data-skin="bold"] .svc__name, html[data-skin="bold"] .faq__q {
+  font-family: var(--f-body); font-weight: 700; text-transform: none; letter-spacing: 0;
+}
 html[data-skin="bold"] .hero h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 0.9; }
 html[data-skin="bold"] .hero h1 .amp { -webkit-text-stroke: 0; }
 html[data-skin="bold"] h2 { line-height: 0.95; }
 /* hard borders */
-html[data-skin="bold"] .site-header { border-bottom: 2px solid var(--ink); backdrop-filter: none;
+html[data-skin="bold"] .site-header { border-bottom: 1px solid var(--ink); backdrop-filter: none;
   background: var(--paper); }
-html[data-skin="bold"] .trust { border-block: 2px solid var(--ink); }
-html[data-skin="bold"] .rate-card, html[data-skin="bold"] .calc__shell { border: 2px solid var(--ink); }
-html[data-skin="bold"] .pricing, html[data-skin="bold"] .faq,
-html[data-skin="bold"] .home-services, html[data-skin="bold"] .cta-band { border-block: 2px solid var(--ink); }
+html[data-skin="bold"] .trust { border-block: 1px solid var(--ink); }
+html[data-skin="bold"] .rate-card, html[data-skin="bold"] .calc__shell { border: 1px solid var(--ink); }
+html[data-skin="bold"] .rate-card { background: var(--ink); gap: 1px; }  /* inner dividers match the frame */
+html[data-skin="bold"] .pricing, html[data-skin="bold"] .faq, html[data-skin="bold"] .home-pricing,
+html[data-skin="bold"] .home-services, html[data-skin="bold"] .cta-band { border-block: 1px solid var(--ink); }
 /* poster numerals via Anton */
 html[data-skin="bold"] .tier__price { font-family: var(--f-display); font-weight: 400;
   font-size: clamp(2.8rem, 6vw, 4.25rem); letter-spacing: 0.01em; }
 html[data-skin="bold"] .trust__num { font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; }
 html[data-skin="bold"] .calc__total .tnum { font-family: var(--f-display); font-weight: 400; }
-/* sharp corners everywhere */
-html[data-skin="bold"] .btn, html[data-skin="bold"] .tier, html[data-skin="bold"] .calc__shell,
-html[data-skin="bold"] .rate-card, html[data-skin="bold"] select, html[data-skin="bold"] input,
-html[data-skin="bold"] textarea, html[data-skin="bold"] .stepper, html[data-skin="bold"] .theme-toggle,
-html[data-skin="bold"] .nav__toggle, html[data-skin="bold"] .skin-toggle,
-html[data-skin="bold"] .brand__mark { border-radius: 0; }
-/* monochrome documentary photos to match the palette */
-html[data-skin="bold"] img { filter: grayscale(1) contrast(1.08); }
-html[data-skin="bold"] .nav__link[aria-current="page"] {
-  background-image: linear-gradient(var(--accent), var(--accent)); }
+/* premium softening: keep the base 2px radius (not zero) + a little more air */
+html[data-skin="bold"] .tier { padding: calc(var(--base) * 1.75) 1.75rem; }
+html[data-skin="bold"] .calc__inputs, html[data-skin="bold"] .calc__out { padding: calc(var(--base) * 1.75); }
+html[data-skin="bold"] .svc { padding-block: calc(var(--base) * 1.05); }
+/* monochrome documentary photos to match the palette (scoped to photo frames only,
+   so future logos / badges / UI images are never desaturated) */
+html[data-skin="bold"] .hero__frame img, html[data-skin="bold"] .story__img img,
+html[data-skin="bold"] .page-head--img img, html[data-skin="bold"] .office-figure img {
+  filter: grayscale(1) contrast(1.08);
+}
+/* active-nav: the shared multipage rule already uses --accent-ink (bold's orange) and
+   respects the mobile reset, so no bold-specific override is needed here. */
 
 /* ---- Reset -------------------------------------------------------------- */
 *, *::before, *::after { box-sizing: border-box; }

projects/acg-website-showcase/multipage/design/review-gemini-bold.md

@@ -0,0 +1,27 @@
+[INFO] 1. B2B Trust Assessment (Dial-back)
+- **Verdict:** Credible but leans industrial/brutalist; overcorrected away from "concierge."
+- **Reasoning:** Restricting the signal orange and relying on the bone/ink palette effectively neutralizes the "loud poster" liability. However, the relentless 2px hard ink borders (`styles.css:151`) and ubiquitous zero-radius corners project "heavy construction/logistics" rather than high-touch IT. It is safe for B2B, but lacks premium polish.
+
+[ERROR] 2. WCAG AA Contrast 
+- **Verdict:** CLAIM REFUTED. Light mode buttons fail AA compliance.
+- **Reasoning:** `styles.css:135` pairs `--accent: #E24A12` with `--on-accent: #FBF7F0`. For a 16.8px (1.05rem) 600-weight button text, WCAG AA requires 4.5:1. This pairing yields ~3.78:1. 
+- **Fix:** Change `html[data-skin="bold"]` light mode `--on-accent` to `#16120F` (yields 5.5:1). Dark mode passes (button `5.5:1`, text `7.4:1`).
+
+[WARN] 3. Anton Readability at UI Sizes
+- **Verdict:** Severe legibility friction on sentence-length strings.
+- **Reasoning:** `styles.css:147` forces `.faq__q` (full questions) and `.svc__name` to uppercase. Anton's ultra-condensed, heavy letterforms are designed for isolated poster words. At 1.25rem (20px), block-capital questions smear into unreadable rectangles.
+- **Fix:** Remove `.faq__q`, `.svc__name`, and `.brand__name` from the `styles.css:147` uppercase block.
+
+[WARN] 4. Grayscale Filter Scope
+- **Verdict:** Destructive global targeting.
+- **Reasoning:** `styles.css:158` (`html[data-skin="bold"] img { filter: grayscale(1)... }`) blindly desaturates the entire DOM. This will break Microsoft/partner badges, future client logos, and functional UI images.
+- **Fix:** Scope specifically to narrative frames: `html[data-skin="bold"] .hero__frame img, html[data-skin="bold"] .story__img img, html[data-skin="bold"] .page-head--img img`.
+
+[ERROR] 5. Skin Scoping & Real Bugs
+- **Verdict:** 3 implementation failures detected.
+- **Leak (Mobile Nav):** `styles.css:160` applies an active link gradient with a specificity of `0,0,2,2`. This permanently defeats the multipage mobile reset at `styles.css:431` (`0,0,2,0`), causing desktop underlines to break the mobile dropdown layout.
+  - *Fix:* Add `@media (max-width: 880px) { html[data-skin="bold"] .nav__links a[aria-current="page"] { background-image: none; } }`
+- **Missing Selector:** `styles.css:154` applies thick borders to `.pricing`. `index.html:121` uses `.home-pricing`. The homepage pricing block floats without borders.
+  - *Fix:* Add `.home-pricing` to the line 154 selector list.
+- **Internal/External Clash:** `styles.css:153` slaps a harsh 2px ink border around `.rate-card`, but the internal dividers rely on a soft translucent 1px gap (`--rule`). The contrast looks like a rendering glitch.
+  - *Fix:* Override the `.rate-card` gap background to `var(--ink)` for the bold skin to unify the grid lines.

projects/acg-website-showcase/multipage/design/review-grok-bold.md

@@ -0,0 +1,79 @@
+**VERDICT:** [INFO] Dial-back largely lands as credible-bold for a B2B MSP selling trust. It reads as inked poster authority rather than loud gig-poster or bland corporate. Orange is disciplined (buttons + .amp + .tier__flag + section accents). Hard 2px borders, 0-radius, and Anton numerals give weight without noise. However, forced uppercase + Anton on functional labels (.svc__name, .faq__q, .brand__name, .tier__name) plus global img filter push it toward "designed artifact" and away from quiet competence. Not overcorrected to bland; still slightly loud on the typography axis for pure trust sale.
+
+Assessed only html[data-skin="bold"] and descendants across the four files. Base styles apply unless overridden. JS is skin-agnostic except for the cycle and verdigris image swap.
+
+**(1) Did the dial-back land?**
+
+- Intent visible and mostly successful: near-black #0C0A09 / bone #F4EDE1 canvas, orange restricted per spec, thick ink borders on .site-header / .trust / .pricing / .faq / .home-services / .cta-band / .rate-card / .calc__shell, sharp corners, Anton numerals on .tier__price (clamp 4.25rem) and .trust__num (2.6rem), grayscale(1) contrast(1.08) photos.
+- Specifics that still feel loud: uppercase Anton at 1.35rem on .brand__name (header, both pages), 1.5rem .svc__name (index.html:105-110), 1.7rem .tier__name (pricing.html:56+), 1.25rem .faq__q (if present). These are UI labels, not headlines.
+- The "one headline word" (.amp) + single "Most chosen" flag work cleanly.
+- Photos + bone/near-black + 2px rules create a consistent documentary-ink story that fits "concierge since 2001" better than full radical poster would.
+- Overcorrection risk: none apparent; it is still visually assertive. On pricing.html the stacked rate-cards + orange flag read strong but professional.
+
+**(2) WCAG AA contrast (using the exact values supplied)**
+
+Light (#F4EDE1 bg):
+- #16120F ink on bone: ~14+:1 PASS (normal + large).
+- #C23A0A accent-ink on bone: ~5.6:1 PASS (CSS comment at styles.css:154 roughly accurate for text).
+- #E24A12 button fill + #FBF7F0 text: ~4.1:1 FAIL (below 4.5:1 for normal text). Affects .btn--primary, .tier__flag, .brand__mark (accent bg), current nav treatment in some states, .section-tag::before accent bar.
+- Secondary: --ink-3 #6B6359 on paper and some surfaces hovers ~4.0-4.3:1 — marginal for 0.72-0.78rem text (.hero__note, .section-tag span, .tier__price .per, footer, form labels).
+
+Dark (#0C0A09 bg):
+- #F4EDE1 on #0C0A09: excellent PASS.
+- #FF8A4D accent-ink on dark: high PASS.
+- #FF5A1F button + #0C0A09 text: ~7+:1 PASS.
+- --ink-3 #9A9082 on dark: ~5.5:1 PASS for small text.
+
+Flags: light-mode primary button/flag text contrast fails; several muted elements in light are borderline. No dark fails under the stated palette. (Refutes the blanket "AA" implication in bold comments.)
+
+**(3) Anton at body/UI sizes + forced uppercase on .faq__q / .svc__name / .brand__name**
+
+- Readability problems present. Anton is a high-contrast, condensed, geometric display face. At 1.25rem-1.7rem all-caps with only 0.005em letter-spacing it loses ascender/descender cues, reduces word-shape recognition, and can appear dense or "shouting."
+- Affected elements: .brand__name (1.35rem, header on index.html:32 and pricing.html:21), .svc__name (1.5rem, index.html:105-110 and services teasers), .tier__name (1.7rem), .faq__q (1.25rem), plus h1/h2.
+- Long phrases suffer most: "Microsoft 365 & Email", "Business Phones", full questions in FAQ, "Arizona Computer Guru". On mobile (<680px, <820px queries) wrapping + caps increases visual noise.
+- .tier__price and .trust__num at larger sizes (2.6-4.25rem) are acceptable poster numerals.
+- Hero h1 cap 5.5rem is within the "capped ~5.5rem" spec but remains loud in caps.
+- No evidence of tracking/kerning fixes for Anton.
+
+**(4) Grayscale img filter**
+
+- html[data-skin="bold"] img { filter: grayscale(1) contrast(1.08); } (styles.css:204) hits every <img> when skin is bold.
+- In the supplied pages it only affects the intended documentary photos (hero, about, story, etc. in index.html:68,94 and pricing.html equivalents via page-head/figures).
+- No non-photo images exist in these files, so no current collateral damage.
+- However, universal selector is over-broad: any future inline icon, logo asset, diagram, or UI screenshot rendered as <img> will be desaturated. No exceptions (e.g., [data-no-filter] or .photo). The JS image swap path for verdigris is separate and does not guard bold.
+- Photos themselves lose any warm tonal cues that might support "Tucson / golden hour" story; contrast bump helps legibility but is global.
+
+**(5) Leak / breakage by other skins (scoping)**
+
+- Core palette, fonts, borders, radius:0, img filter, and uppercase rules are correctly prefixed html[data-skin="bold"] and do not leak outward.
+- However, active nav treatment is broken under bold due to cascade order: bold rule at styles.css:205-206 only sets background-image (no size/position/color), while the later general multipage rule at styles.css:595-599 sets color + full background properties using --accent-ink. Last rule wins; bold skin gets the ledger-style accent-ink underline instead of its intended accent treatment.
+- .nav__link[aria-current="page"] on index.html (Home) and pricing.html (Pricing) will not reflect bold's accent choice when skin=bold.
+- No other cross-skin breakage observed. Verdigris/midnight/ledger rules are similarly prefixed and do not pollute bold. JS skin cycle (app.js:53,71-90) correctly includes "bold" and only does verdigris-specific src swaps.
+- .site-header bold border (2px) and background overrides are scoped and not overridden by later rules in conflicting ways.
+
+**(6) Responsive + real bugs**
+
+- Responsive: most shared media queries (820px, 880px, 720px, 680px, 560px, 440px) apply. rate-card stacks, svc grid adjusts, nav collapses, hero switches to single column. Large bold h1 (clamp) and 2.6rem Anton .trust__num in 2-col trust grid (<720px) become cramped but do not overflow.
+- Issues:
+  - Universal img filter + no photo-only class.
+  - Incomplete bold active-nav override (see 5).
+  - .btn, .brand__mark, and form controls inherit --f-display (Anton) at ~1.05rem; condensed caps on small interactive targets reduce legibility.
+  - .tier--pop inset accent shadow + flag remain visible and orange-restricted as intended.
+  - No layout breakage on the two pages; calc/faq/contact not in these files but would inherit same skin rules.
+  - Page-head.ledger class on pricing.html is harmless (bold disables the repeating-linear ledger bg).
+  - Inline script + localStorage skin persistence works for bold.
+  - No JS console-level skin bugs visible.
+
+**Ranked, severity-tagged observations (terse, no edit suggestions):**
+
+[HIGH] Light bold primary button/flag contrast fail (#E24A12 fill + #FBF7F0): ~4.1:1 < 4.5 (styles.css:153,278; affects .btn--primary, .tier__flag, .brand__mark).  
+[HIGH] Active nav styling does not receive bold accent treatment due to later general rule override (styles.css:205 vs 595; index.html:38, pricing.html:27).  
+[HIGH] Universal `img` grayscale filter (styles.css:204) has no exceptions.  
+[MED] Forced uppercase + Anton at 1.25-1.7rem on .svc__name, .faq__q, .brand__name, .tier__name harms readability/scannability (styles.css:177-181,299,408,427,545; index.html:32,105-110; pricing.html:21,56+).  
+[MED] Several light-mode small text elements near or below 4.5:1 (--ink-3 #6B6359 etc. on bone/paper).  
+[MED] Anton at button/control sizes (1.05rem) and tight mobile hero/trust numerals.  
+[LOW] Hero h1 at max 5.5rem + caps is assertive on wide viewports (styles.css:182).  
+[LOW] No bold-specific handling or exceptions in app.js beyond the shared SKINS array.  
+[LOW] .ul underline and section-tag accent bars correctly use restricted orange.
+
+Confidence in palette extraction, selector scoping, and markup coverage: high. Exact contrast ratios are approximate without runtime computation; real-browser or tooling verification would be required for borderline cases. All analysis derived strictly from the four read files.

projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md

@@ -173,3 +173,43 @@ operations.
 - Brand voice source: `projects/msp-pricing/marketing/MSP-Buyers-Guide-Content.md`
 - Prior/real ACG site article: `wiki/clients/azcomputerguru.com.md` (Astro, separate)
 - ACG contact (from materials): 520.304.8300, info@azcomputerguru.com, 7437 E. 22nd St, Tucson AZ 85710
+
+## Update: 05:59 PT (2026-06-15) — Quorum + impeccable on Bold, then premium softening
+
+Ran the Grok+Gemini quorum and the impeccable critique on the **Bold** skin specifically
+(prior reviews had been on the un-tamed `radical.html` concept). Verdict: the dial-back
+landed (credible "inked poster authority", not loud, not bland). The two models split on
+one judgment: Grok found it slightly loud on the type axis (uppercase Anton on functional
+labels); Gemini found the relentless 2px borders + zero radius too "heavy-construction /
+logistics" for a high-touch concierge MSP.
+
+Applied the union of concrete quorum defects to the Bold skin (`css/styles.css`,
+`html[data-skin="bold"]` block):
+- Light primary button/flag failed AA (white #FBF7F0 on #E24A12 ~3.8:1) → `--on-accent`
+  now `#16120F` (dark ink on orange, ~4.8:1).
+- Service names + FAQ questions were uppercase Anton (condensed caps smear at UI sizes) →
+  removed from the uppercase block; now sentence-case in Hanken Grotesk 700. Headlines
+  (h1/h2/tier__name/brand__name) stay Anton uppercase.
+- Global `img` grayscale filter → scoped to `.hero__frame/.story__img/.page-head--img/
+  .office-figure img` only (future logos/badges won't be desaturated).
+- Removed the bold `.nav__link[aria-current]` override: it was defeated by the shared
+  multipage rule on desktop AND broke the mobile dropdown reset. The shared rule already
+  renders bold's orange underline and respects the mobile reset.
+- Added `.home-pricing` to the bold section-border selector (homepage pricing teaser had
+  no frame). Unified the rate-card inner dividers with the frame (was a soft-gap glitch).
+- Bumped light `--ink-3` to `#5C544B` for small-muted-text AA.
+
+Then, per Mike's call (Gemini's read won), **softened Bold toward premium**:
+- All Bold section/frame borders 2px → **1px**.
+- Restored the base **2px radius** on buttons/cards/inputs (removed the zero-radius override).
+- Lightened the under-element shadow (`0 2px 0 ink` → `0 1px 0 rule`).
+- Added breathing room: tier padding 1.5→1.75, calc panels →1.75, service rows +.
+
+Result: Bold keeps its identity (Anton headlines, near-black #0C0A09 / bone #F4EDE1 canvas,
+signal-orange accents, grayscale documentary photos) but reads refined/high-touch rather
+than industrial. Re-rendered + verified home/pricing/contact in both modes; calculator
+still computes $952/mo; `node --check js/app.js` clean.
+
+State: multipage 4-skin switcher (Paper / Midnight / Verdigris / Bold) at :4328, all in
+light+dark. Bold is the dialed-back-then-premium-softened radical. Open: Mike to confirm
+Bold is the keeper, or pick among the four skins for the real azcomputerguru.com redesign.