azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-15 06:07:00
This commit is contained in:
Mike Swanson
2026-06-15 06:07:20 -07:00
parent c5d4d3527c
commit 57322c66f5
13 changed files with 173 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
projects/acg-website-showcase/multipage/css/styles.css
View File

@@ -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; }