diff --git a/projects/acg-website-showcase/multipage/css/styles.css b/projects/acg-website-showcase/multipage/css/styles.css index 23c91a0..39bc314 100644 --- a/projects/acg-website-showcase/multipage/css/styles.css +++ b/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; } diff --git a/projects/acg-website-showcase/multipage/design/bo-about-dark.png b/projects/acg-website-showcase/multipage/design/bo-about-dark.png new file mode 100644 index 0000000..4452371 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo-about-dark.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo-calc-dark.png b/projects/acg-website-showcase/multipage/design/bo-calc-dark.png new file mode 100644 index 0000000..f60f379 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo-calc-dark.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo-contact-light.png b/projects/acg-website-showcase/multipage/design/bo-contact-light.png new file mode 100644 index 0000000..cfd3f21 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo-contact-light.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo-mobile.png b/projects/acg-website-showcase/multipage/design/bo-mobile.png new file mode 100644 index 0000000..fda413b Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo-mobile.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo2-contact-dark.png b/projects/acg-website-showcase/multipage/design/bo2-contact-dark.png new file mode 100644 index 0000000..54e757b Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo2-contact-dark.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo2-home-light.png b/projects/acg-website-showcase/multipage/design/bo2-home-light.png new file mode 100644 index 0000000..a9d1fb6 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo2-home-light.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo2-pricing-light.png b/projects/acg-website-showcase/multipage/design/bo2-pricing-light.png new file mode 100644 index 0000000..990cb43 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo2-pricing-light.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo5-home-dark.png b/projects/acg-website-showcase/multipage/design/bo5-home-dark.png new file mode 100644 index 0000000..1b2e5ae Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo5-home-dark.png differ diff --git a/projects/acg-website-showcase/multipage/design/bo5-pricing-dark.png b/projects/acg-website-showcase/multipage/design/bo5-pricing-dark.png new file mode 100644 index 0000000..52e5414 Binary files /dev/null and b/projects/acg-website-showcase/multipage/design/bo5-pricing-dark.png differ diff --git a/projects/acg-website-showcase/multipage/design/review-gemini-bold.md b/projects/acg-website-showcase/multipage/design/review-gemini-bold.md new file mode 100644 index 0000000..858eca5 --- /dev/null +++ b/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. diff --git a/projects/acg-website-showcase/multipage/design/review-grok-bold.md b/projects/acg-website-showcase/multipage/design/review-grok-bold.md new file mode 100644 index 0000000..5c71eb6 --- /dev/null +++ b/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 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 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. diff --git a/projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md b/projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md index e31348b..448db91 100644 --- a/projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md +++ b/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.