css: tokenize admin fee margins + remove redundant inline style — spacing audit pass 3
Replaced 2 hardcoded 6px margin-bottom values with var(--space-xs) in admin-fee-header and admin-waive-savings. Removed redundant inline style="margin-bottom:16px" from sec-01 subtitle (handled by section-content * + * rule). Full visual audit across Dark/Light/Glass at 1920px, print media, and mobile (375px/600px/780px landscape) — no regressions found. Updated SESSION-HANDOFF, CLAUDE.md, DECISION-LOG, KNOWN-ISSUES, and MASTER-SESSION-PROMPT. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -26,7 +26,7 @@ You do not introduce change for its own sake. You improve with purpose, validate
|
||||
|
||||
### What "Beta" Means Here
|
||||
- All active sections (I–III) are visually polished and production-quality
|
||||
- All four themes (Dark, Light, Glass, 70s Retro) are consistent, tested, and professional
|
||||
- All three themes (Dark, Light, Glass) are consistent, tested, and professional
|
||||
- Mobile experience is smooth, reliable, and parity-complete with desktop
|
||||
- Print/PDF invoice is clean, branded, and pixel-accurate
|
||||
- Quote math, persistence, and export are verified and regression-safe
|
||||
@@ -47,7 +47,7 @@ svsmspcalc/
|
||||
├── quote-render.js # DOM rendering + nudge engine (662 lines)
|
||||
├── quote-persistence.js # localStorage save/restore (212 lines)
|
||||
├── quote-export.js # Print/PDF + JSON export (295 lines)
|
||||
├── theme-manager.js # Dark/Light/Glass/70s Retro switching (110 lines)
|
||||
├── theme-manager.js # Dark/Light/Glass switching (110 lines)
|
||||
├── mobile-sync.js # Mobile panel + 100+ element sync (236 lines)
|
||||
├── SVS-MSP-Calculator.css # Manifest: @imports all CSS files
|
||||
├── SVS-MSP-Calculator-tokens.css # Design tokens + CSS vars
|
||||
@@ -58,7 +58,6 @@ svsmspcalc/
|
||||
├── SVS-MSP-Calculator-print.css # Print-specific rules
|
||||
├── SVS-MSP-Calculator-light.css # Light theme overrides
|
||||
├── SVS-MSP-Calculator-glass.css # Glass theme (glassmorphism)
|
||||
├── SVS-MSP-Calculator-70retro.css # 70s Retro theme overrides
|
||||
├── package-prices.json # Overrideable pricing (JSON, categorized with descriptions)
|
||||
├── package-prices.csv # Legacy pricing reference (no longer loaded at runtime)
|
||||
├── tests/
|
||||
@@ -78,7 +77,7 @@ svsmspcalc/
|
||||
- **No build tools.** Open the HTML in a browser — it runs.
|
||||
- **No npm.** No webpack, Vite, Rollup, Parcel, or transpilation.
|
||||
- **No TypeScript.** Plain `.js` files.
|
||||
- **CSS architecture:** Tokenized custom properties. Modular files. Four theme override layers.
|
||||
- **CSS architecture:** Tokenized custom properties. Modular files. Three theme override layers (Dark, Light, Glass).
|
||||
- **State:** localStorage only. Key: `svs-msp-quote-v1`.
|
||||
- **Fonts:** Google Fonts (Cinzel, Poppins, Lato, DM Mono).
|
||||
- **Icons:** Font Awesome 7 Sharp (local SVGs), M365 icon set (local).
|
||||
@@ -95,7 +94,7 @@ debouncedSave() → auto-save to localStorage (debounced 400ms)
|
||||
```
|
||||
node svsmspcalc/tests/test-quote-engine.js
|
||||
```
|
||||
88 tests, zero dependencies. Tests the pure `calculateQuote(state, pricing)` function against known-good expected values using default pricing. Covers: rates, add-ons, admin fee logic, discounts, HST, VoIP, ZT networking, edge cases, and MRR integrity.
|
||||
254 tests, zero dependencies. Tests the pure `calculateQuote(state, pricing)` function against known-good expected values using default pricing. Covers: rates, add-ons, admin fee logic, discounts, HST, VoIP, ZT networking, edge cases, MRR integrity, export schema, persistence shape, import mapping, and quote output invariants.
|
||||
|
||||
Run after any change to `quote-engine.js`, `quote-pricing.js`, or pricing JSON values.
|
||||
|
||||
@@ -146,7 +145,7 @@ These are inviolable. Every change must preserve them:
|
||||
1. **HTML shell is stable.** DOM IDs are a contract. Mobile sync maps 100+ ID pairs (desktop ↔ `_m` suffix). Renaming an ID breaks sync silently and catastrophically.
|
||||
2. **Quote math is correct.** Any change to `quote-engine.js` requires before/after validation of all outputs. Do not "clean up" math without proving equivalence.
|
||||
3. **localStorage persistence is intact.** `saveState()` and `restoreState()` must round-trip cleanly. Verify after any form/state changes.
|
||||
4. **All four themes must work.** Dark (default), Light (soft khaki), Glass (glassmorphism), 70s Retro. Changes to tokens or components cascade to all four.
|
||||
4. **All three themes must work.** Dark (default), Light (soft khaki), Glass (glassmorphism). Changes to tokens or components cascade to all three.
|
||||
5. **Mobile parity is maintained.** The sidebar clone in the mobile panel must stay in sync. Mobile UX must be usable on a 375px viewport.
|
||||
6. **Print/PDF export must be tested after CSS changes.** Print CSS lives in a separate file but is sensitive to component class changes.
|
||||
7. **No framework or build-tool migration.** This is vanilla JS by design.
|
||||
@@ -170,7 +169,7 @@ Work in this order unless directed otherwise. Each priority includes UX, code, a
|
||||
- [ ] Typography hierarchy — Is Cinzel/Poppins/Lato used consistently? Are font sizes, weights, and line-heights harmonious across sections?
|
||||
- [ ] Spacing system — Is padding/margin using tokens consistently? Are section cards visually balanced?
|
||||
- [ ] Color usage — Are `--accent`, `--green`, `--amber`, `--muted` used purposefully, not decoratively?
|
||||
- [ ] Interactive states — Do all buttons, inputs, toggles, and checkboxes have clear hover/focus/active states in all four themes?
|
||||
- [ ] Interactive states — Do all buttons, inputs, toggles, and checkboxes have clear hover/focus/active states in all three themes?
|
||||
- [ ] Card hierarchy — Is there a clear visual distinction between level-1 containers, level-2 cards, and level-3 controls?
|
||||
- [ ] Icon consistency — Are Font Awesome icons used at consistent sizes, weights, and optical alignment?
|
||||
- [ ] Section header design — Are the numbered section headers (I, II, III) visually strong and scannable?
|
||||
@@ -348,7 +347,7 @@ Work in this order unless directed otherwise. Each priority includes UX, code, a
|
||||
|
||||
### After Making Changes
|
||||
1. Verify syntax (especially JS — no console errors on load)
|
||||
2. Check all four themes render correctly
|
||||
2. Check all three themes render correctly
|
||||
3. Check mobile panel renders correctly at ≤780px
|
||||
4. Verify sidebar totals are mathematically correct for a test quote
|
||||
5. If CSS touched: verify print output is unaffected
|
||||
@@ -398,7 +397,7 @@ For manual QA: `docs/regression-checklist.md`
|
||||
The build is ready to call "beta" when:
|
||||
|
||||
- [ ] All Sections I–III are visually polished and functionally complete
|
||||
- [ ] All four themes pass a full visual review at all major breakpoints
|
||||
- [ ] All three themes pass a full visual review at all major breakpoints
|
||||
- [ ] Print/PDF invoice is clean and professionally branded
|
||||
- [ ] Mobile panel is fully synced and usable at 375px
|
||||
- [ ] Quote math passes all combinations in the verification matrix
|
||||
|
||||
Reference in New Issue
Block a user