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:
@@ -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
|
||||
|
||||
@@ -1,43 +1,52 @@
|
||||
# DESIGN.md — "Sonoran Ledger" (multipage)
|
||||
# DESIGN.md — "Bold" (default)
|
||||
|
||||
The locked design language for the ACG site. A trusted local bookkeeper's ledger,
|
||||
rendered for the web: warm paper, precise rules, mono numerals. Pricing, the
|
||||
calculator, and the concierge story are treated as a transparent, permanent record.
|
||||
The locked design language for the ACG site. Premium brutalist: confident authority
|
||||
without arrogance. Anton poster headlines, signal orange accents, grayscale documentary
|
||||
photos, refined 1px borders. Direct, transparent, inked precision.
|
||||
|
||||
## Color strategy: Committed (warm paper carries the surface), one accent as "ink"
|
||||
Use OKLCH; neutrals tinted toward the brand hue (~30 hue). Never pure #000/#fff.
|
||||
## Color strategy: High-contrast refined brutalist
|
||||
Sharp contrasts, near-neutral palette with signal orange as the ONLY accent color.
|
||||
|
||||
- **Light:** paper `#F7F3EB`, surface `#EDE6D9`, surface-2 `#E4DACA`,
|
||||
ink `#2A2521`, ink-2 `#5A5148`, ink-3 `#6D6456` (AA on cream).
|
||||
- **Dark:** paper `#1C1814`, surface `#2A2520`, surface-2 `#322B24`,
|
||||
ink `#E8DFCE`, ink-2 `#C4B8A3`, ink-3 `#9A8C77`.
|
||||
- **Accent (the "ink"):** amber `#F2922E` (light) / `#F2A24E` (dark) for fills,
|
||||
underlines, marks, the single primary CTA. Orange TEXT on light must use
|
||||
`#BD5A00` (AA); on dark `#F4A85C`.
|
||||
- Accent is ≤ ~10% of any view. It marks active data, never fills big blocks.
|
||||
- **Light:** bone `#F4EDE1`, surface `#FBF7F0`, surface-2 `#EAE2D4`,
|
||||
ink `#16120F`, ink-2 `#46403A`, ink-3 `#5C544B` (AA on bone ~5:1).
|
||||
- **Dark:** near-black `#0C0A09`, surface `#16120F`, surface-2 `#1E1814`,
|
||||
ink `#F4EDE1`, ink-2 `#C9C1B5`, ink-3 `#9A9082`.
|
||||
- **Accent:** signal orange `#E24A12` (light) / `#FF5A1F` (dark) — fills, CTA,
|
||||
underlines, marks. Orange TEXT: `#C23A0A` (light, AA) / `#FF8A4D` (dark, AA).
|
||||
- Accent is restrained, authoritative. Never decorative gradients or tints.
|
||||
|
||||
## Theme
|
||||
Both light and dark are first-class. Scene: a Tucson business owner reading at a
|
||||
sunlit desk by day, or late at night deciding on a provider. Warm in both. System
|
||||
preference is honored and remembered, set before first paint (no flash).
|
||||
Both light and dark are first-class. Light = crisp professional confidence. Dark =
|
||||
refined premium authority. System preference honored, set before first paint (no FOUC).
|
||||
|
||||
## Typography
|
||||
- Display: **Barlow Condensed** 600/700 (headlines, tier names, the "since 2001" lockup).
|
||||
- Body: **Lexend** 300/400/500 (body capped 65–75ch).
|
||||
- Mono: **JetBrains Mono**, tabular-nums, for ALL money, the calculator, endpoint
|
||||
counts, eyebrows, and ledger micro-labels.
|
||||
- Scale steps keep ≥1.25 contrast; hierarchy via scale + weight.
|
||||
- Display: **Anton** 400 (headlines, tier names, brand lockup, pricing numerals).
|
||||
Uppercase for h1/h2/tier names. Sentence-case for functional labels (service names,
|
||||
FAQ questions) to avoid condensed-caps smear at UI sizes.
|
||||
- Body: **Hanken Grotesk** 400/500/700 (paragraphs, UI labels, functional copy).
|
||||
- Mono: **JetBrains Mono** tabular-nums for money, calculator, endpoint counts.
|
||||
- Hierarchy via size + case + weight. Large poster numerals lean into Anton's authority.
|
||||
|
||||
## Layout & rhythm
|
||||
- Strict 24px baseline. Faint continuous ledger rulings align to body line-height.
|
||||
- Vary spacing per page; do not repeat one padding everywhere. Avoid identical card
|
||||
grids. Cards only where they are the right affordance (pricing tiers).
|
||||
- Radius 0–2px only. Sharp = precise, manual, honest.
|
||||
- 24px baseline. NO ledger rulings (dropped from the paper aesthetic).
|
||||
- Hard 1px ink borders on major sections, header, rate cards, calculator shell.
|
||||
- Vary spacing per page. Premium softening: extra breathing room on tiers/calc panels.
|
||||
- Radius: 2px on buttons/cards/inputs (refined, not zero-radius industrial).
|
||||
- Rate cards use ink background with 1px gap dividers (frame + inner grid unified).
|
||||
|
||||
## Photography
|
||||
Grayscale documentary photos (scoped to .hero__frame / .story__img / .page-head--img /
|
||||
.office-figure only). `filter: grayscale(1) contrast(1.08)` matches the high-contrast
|
||||
palette. Future logos/badges/UI images stay color.
|
||||
|
||||
## Motion
|
||||
- Reveal on scroll (opacity + small translate), ease-out only, respects reduced-motion.
|
||||
- Never animate layout properties.
|
||||
|
||||
## Alternate skins (header switcher)
|
||||
- **Midnight Concierge** — cool dark-premium slate aesthetic
|
||||
- **Verdigris Gate** — oxidized-copper green/plaster, Fraunces serif, cool color photos
|
||||
|
||||
## House laws (impeccable)
|
||||
- **No em dashes** anywhere in copy. Use commas, colons, semicolons, periods, parentheses.
|
||||
- **No side-stripe accent borders** (no border-left/right > 1px as a colored accent).
|
||||
@@ -45,7 +54,7 @@ preference is honored and remembered, set before first paint (no flash).
|
||||
- No gradient text, no decorative glassmorphism, no hero-metric template, no AI slop.
|
||||
|
||||
## Multipage specifics
|
||||
- Shared sticky header (brand + nav + theme toggle + mobile menu) and footer on every page.
|
||||
- Shared sticky header (brand + nav + theme toggle + skin switcher + mobile menu) and footer on every page.
|
||||
- Active nav state per page (`aria-current="page"`).
|
||||
- Pages: Home, Services, Pricing, Calculator, About, Contact. Each has its own
|
||||
opening rhythm so the set never feels templated.
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" href="assets/logo/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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="sr-only">Skip to content</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" href="assets/logo/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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="sr-only">Skip to content</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" href="assets/logo/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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<script type="application/ld+json">
|
||||
{"@context":"https://schema.org","@type":"LocalBusiness","name":"Arizona Computer Guru","image":"assets/images/contact.png","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>
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
/* ===========================================================================
|
||||
ARIZONA COMPUTER GURU - "Sonoran Ledger"
|
||||
Hand-built. Warm paper, precise rules, mono numerals. No framework.
|
||||
Baseline grid: 24px. Radius: 0–2px. Orange = ink, used sparingly.
|
||||
ARIZONA COMPUTER GURU - "Bold"
|
||||
Hand-built. Premium brutalist: Anton headlines, signal orange, refined edges.
|
||||
Baseline grid: 24px. Radius: 2px. Documentary grayscale photography.
|
||||
=========================================================================== */
|
||||
|
||||
/* ---- Tokens ------------------------------------------------------------- */
|
||||
:root {
|
||||
--paper: #F7F3EB;
|
||||
--surface: #EDE6D9;
|
||||
--surface-2: #E4DACA;
|
||||
--ink: #2A2521;
|
||||
--ink-2: #5A5148;
|
||||
--ink-3: #6D6456; /* AA-safe for small text on cream (~4.6:1) */
|
||||
--rule: rgba(90, 81, 72, 0.16);
|
||||
--rule-soft: rgba(90, 81, 72, 0.09);
|
||||
--accent: #F2922E; /* the amber "ink" - fills, marks, underlines */
|
||||
--accent-ink: #BD5A00; /* orange TEXT on light paper (AA-safe ~4.9:1) */
|
||||
--on-accent: #2A2521; /* text sitting on an amber fill */
|
||||
--good: #4F7A3F;
|
||||
--paper: #F4EDE1;
|
||||
--surface: #FBF7F0;
|
||||
--surface-2: #EAE2D4;
|
||||
--ink: #16120F;
|
||||
--ink-2: #46403A;
|
||||
--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: #16120F; /* dark ink on the orange fill clears AA (~4.8:1) */
|
||||
--good: #1F7A4A;
|
||||
|
||||
--maxw: 1140px;
|
||||
--base: 24px; /* baseline unit */
|
||||
|
||||
--f-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
|
||||
--f-body: "Lexend", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
--f-display: "Anton", "Arial Narrow Bold", system-ui, sans-serif;
|
||||
--f-body: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
--f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
|
||||
|
||||
--shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(40, 33, 25, 0.45);
|
||||
--shadow: 0 1px 0 var(--rule), 0 24px 44px -30px rgba(22, 18, 15, 0.4);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--paper: #1C1814;
|
||||
--surface: #2A2520;
|
||||
--surface-2: #322B24;
|
||||
--ink: #E8DFCE;
|
||||
--ink-2: #C4B8A3;
|
||||
--ink-3: #9A8C77;
|
||||
--rule: rgba(196, 184, 163, 0.16);
|
||||
--rule-soft: rgba(196, 184, 163, 0.08);
|
||||
--accent: #F2A24E;
|
||||
--accent-ink: #F4A85C; /* orange text on dark paper (AA-safe) */
|
||||
--on-accent: #1C1814;
|
||||
--good: #8FB97E;
|
||||
--shadow: 0 1px 0 var(--rule), 0 22px 48px -30px rgba(0, 0, 0, 0.7);
|
||||
--paper: #0C0A09;
|
||||
--surface: #16120F;
|
||||
--surface-2: #1E1814;
|
||||
--ink: #F4EDE1;
|
||||
--ink-2: #C9C1B5;
|
||||
--ink-3: #9A9082;
|
||||
--rule: rgba(244, 237, 225, 0.20);
|
||||
--rule-soft: rgba(244, 237, 225, 0.08);
|
||||
--accent: #FF5A1F;
|
||||
--accent-ink: #FF8A4D; /* orange text on near-black (AA) */
|
||||
--on-accent: #0C0A09;
|
||||
--good: #8FD0A0;
|
||||
--shadow: 0 1px 0 var(--rule), 0 24px 50px -30px rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
/* ---- Skin: Midnight Concierge (cool dark-premium) ----------------------- */
|
||||
@@ -138,78 +138,41 @@ html[data-skin="verdigris"] .nav__link:hover {
|
||||
html[data-skin="verdigris"] h1, html[data-skin="verdigris"] h2 { letter-spacing: -0.005em; }
|
||||
|
||||
/* ---- Skin: Bold (dialed-back radical) ----------------------------------- */
|
||||
html[data-skin="bold"] { /* fonts (both modes) + LIGHT palette */
|
||||
--f-display: "Anton", "Arial Narrow Bold", system-ui, sans-serif;
|
||||
--f-body: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
--f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
|
||||
--paper: #F4EDE1;
|
||||
--surface: #FBF7F0;
|
||||
--surface-2: #EAE2D4;
|
||||
--ink: #16120F;
|
||||
--ink-2: #46403A;
|
||||
--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: #16120F; /* dark ink on the orange fill clears AA (~4.8:1) */
|
||||
--good: #1F7A4A;
|
||||
--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;
|
||||
--surface: #16120F;
|
||||
--surface-2: #1E1814;
|
||||
--ink: #F4EDE1;
|
||||
--ink-2: #C9C1B5;
|
||||
--ink-3: #9A9082;
|
||||
--rule: rgba(244, 237, 225, 0.20);
|
||||
--rule-soft: rgba(244, 237, 225, 0.08);
|
||||
--accent: #FF5A1F;
|
||||
--accent-ink: #FF8A4D; /* orange text on near-black (AA) */
|
||||
--on-accent: #0C0A09;
|
||||
--good: #8FD0A0;
|
||||
--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"] .brand__name {
|
||||
/* ---- Base signature treatments (Bold design) ---------------------------- */
|
||||
.ledger { background-image: none; } /* drop ledger rulings */
|
||||
h1, h2, .tier__name, .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 {
|
||||
.svc__name, .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; }
|
||||
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 0.9; }
|
||||
.hero h1 .amp { -webkit-text-stroke: 0; }
|
||||
h2 { line-height: 0.95; }
|
||||
/* hard borders */
|
||||
html[data-skin="bold"] .site-header { border-bottom: 1px solid var(--ink); backdrop-filter: none;
|
||||
.site-header { border-bottom: 1px solid var(--ink); backdrop-filter: none;
|
||||
background: var(--paper); }
|
||||
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); }
|
||||
.trust { border-block: 1px solid var(--ink); }
|
||||
.rate-card, .calc__shell { border: 1px solid var(--ink); }
|
||||
.rate-card { background: var(--ink); gap: 1px; } /* inner dividers match the frame */
|
||||
.pricing, .faq, .home-pricing,
|
||||
.home-services, .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;
|
||||
.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; }
|
||||
.trust__num { font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; }
|
||||
.calc__total .tnum { font-family: var(--f-display); font-weight: 400; }
|
||||
/* 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); }
|
||||
.tier { padding: calc(var(--base) * 1.75) 1.75rem; }
|
||||
.calc__inputs, .calc__out { padding: calc(var(--base) * 1.75); }
|
||||
.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 {
|
||||
.hero__frame img, .story__img img,
|
||||
.page-head--img img, .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; }
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
(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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");
|
||||
document.documentElement.setAttribute("data-theme",m);document.documentElement.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");
|
||||
} catch (e) {} })();
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
|
||||
@@ -47,11 +47,11 @@
|
||||
else if (mq.addListener) mq.addListener(onChange);
|
||||
}
|
||||
|
||||
/* ---- Skin (Paper / Midnight / Verdigris) ----------------------------- */
|
||||
/* ---- Skin (Bold / Midnight / Verdigris) ------------------------------ */
|
||||
var skinToggle = $("#skinToggle");
|
||||
var SKIN = "acg-skin";
|
||||
var SKINS = ["ledger", "midnight", "verdigris", "bold"];
|
||||
var SKIN_NAME = { ledger: "Paper", midnight: "Midnight", verdigris: "Verdigris", bold: "Bold" };
|
||||
var SKINS = ["bold", "midnight", "verdigris"];
|
||||
var SKIN_NAME = { bold: "Bold", midnight: "Midnight", verdigris: "Verdigris" };
|
||||
// Verdigris uses its own cooler documentary photography.
|
||||
var VERDIGRIS_IMG = {
|
||||
"assets/images/hero.png": "assets/images/verdigris/hero.png",
|
||||
@@ -69,7 +69,7 @@
|
||||
});
|
||||
}
|
||||
function applySkin(skin) {
|
||||
if (SKINS.indexOf(skin) < 0) skin = "ledger";
|
||||
if (SKINS.indexOf(skin) < 0) skin = "bold";
|
||||
root.setAttribute("data-skin", skin);
|
||||
swapSkinImages(skin);
|
||||
if (skinToggle) {
|
||||
@@ -78,8 +78,8 @@
|
||||
skinToggle.setAttribute("title", "Skin: " + name + " (click to switch)");
|
||||
}
|
||||
}
|
||||
var savedSkin = "ledger";
|
||||
try { savedSkin = localStorage.getItem(SKIN) || "ledger"; } catch (e) {}
|
||||
var savedSkin = "bold";
|
||||
try { savedSkin = localStorage.getItem(SKIN) || "bold"; } catch (e) {}
|
||||
applySkin(savedSkin);
|
||||
if (skinToggle) {
|
||||
skinToggle.addEventListener("click", function () {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" href="assets/logo/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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="sr-only">Skip to content</a>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Lexend:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Fraunces:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=Anton&family=Hanken+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
<link rel="icon" href="assets/logo/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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"ledger"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
<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.setAttribute("data-skin",(localStorage.getItem("acg-skin")||"bold"));document.documentElement.classList.add("js");}catch(e){}})();</script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main" class="sr-only">Skip to content</a>
|
||||
|
||||
Reference in New Issue
Block a user