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,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; }
|
||||
|
||||
Reference in New Issue
Block a user