john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Glas Theme Coming Next

Browse Source
This commit is contained in:
John OReilly
2026-03-13 16:05:38 -04:00
parent ac9420c812
commit 591e4155fc
4 changed files with 388 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
SVS-MSP-Calculator.css
View File

@@ -23,12 +23,12 @@
Single source of truth for all colours. Edit here, not inline.
─────────────────────────────────────────────────────────────── */
:root {
--ink: #ddd8d0;
--paper: #22201d;
--accent: #2d7aa8;
--muted: #b0a898; /* lifted slightly — #a09890 was too faint on dark cards */
--border: #3a3630;
--card: #2a2722;
--ink: #e8e3da; /* warm beige-white — brighter for legibility */
--paper: #1c1a17; /* darker base — widens gap vs card for panel float */
--accent: #3d8aba; /* lifted blue — pops on dark backgrounds */
--muted: #9e9588; /* softer secondary — clearly subordinate but readable */
--border: #35322c; /* subtler dividers */
--card: #272420; /* elevated surface — clear separation from paper */
--green: #3ab870;
--amber: #e8920f;
}
@@ -118,6 +118,110 @@
}
.main-col { display: flex; flex-direction: column; gap: 28px; }
.side-col { position: sticky; top: 102px; z-index: 10; align-self: start; }
.sidebar-utility { margin-bottom: 12px; }
.btn-reset-quote {
width: 100%;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 11px 14px;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.btn-reset-quote:hover {
background: rgba(232, 146, 15, 0.08);
border-color: rgba(232, 146, 15, 0.38);
color: var(--amber);
}
.btn-reset-quote:active { transform: translateY(1px); }
.confirm-modal {
position: fixed;
inset: 0;
z-index: 400;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.confirm-modal.open {
opacity: 1;
pointer-events: auto;
}
.confirm-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.confirm-modal-card {
position: relative;
width: min(460px, calc(100% - 32px));
margin: 12vh auto 0;
background: var(--card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 22px 20px;
box-shadow: 0 16px 50px rgba(0,0,0,0.35);
}
.confirm-modal-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
}
.confirm-modal-title {
font-family: 'Poppins', sans-serif;
font-size: 24px;
line-height: 1.3;
color: var(--ink);
margin-bottom: 10px;
}
.confirm-modal-copy {
font-size: 14px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 18px;
}
.confirm-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.confirm-btn {
border-radius: 8px;
padding: 11px 14px;
font-family: 'DM Mono', monospace;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.confirm-btn:active { transform: translateY(1px); }
.confirm-btn-secondary {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
}
.confirm-btn-secondary:hover {
background: rgba(255,255,255,0.05);
color: var(--ink);
border-color: var(--accent);
}
.confirm-btn-danger {
background: var(--amber);
color: #fff;
border: 1px solid transparent;
}
.confirm-btn-danger:hover { filter: brightness(1.05); }
/* ── CLIENT BAR ─────────────────────────────────────────────────
Lives inside .main-col, above section I.
@@ -706,7 +810,7 @@
}
.sidebar-line .val {
font-family: 'DM Mono', monospace;
color: var(--ink);
color: #f2ede4; /* brighter warm white — money figures pop vs labels */
font-size: 14px;
}
.sidebar-line .lbl-icon { margin-right: 5px; }
@@ -723,7 +827,7 @@
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 48px;
color: var(--ink);
color: #f5f0e8; /* brightest text — hero MRR number */
line-height: 1;
margin-bottom: 16px;
}
@@ -1065,15 +1169,15 @@
margin-top: 16px;
margin-bottom: 15px;
padding: 24px 24px 22px;
background: rgba(255, 255, 255, 0.04);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border);
border-radius: 10px;
}
.vs-inline-icon { margin-right: 6px; vertical-align: middle; }
.vs-svs-label { font-size: 14px; color: var(--ink); font-weight: 600; }
.vs-val-accent { color: var(--accent); font-weight: 600; font-size: 14px; }
.vs-td-muted { color: var(--muted); font-size: 12px; }
.vs-td-icon { margin-right: 5px; opacity: 0.55; vertical-align: middle; }
.vs-svs-label { font-size: 14px; color: #f2ede4; font-weight: 600; }
.vs-val-accent { color: #5aaedc; font-weight: 600; font-size: 14px; }
.vs-td-muted { color: #b5ab9e; font-size: 13px; }
.vs-td-icon { margin-right: 5px; opacity: 0.7; vertical-align: middle; }
.vs-footnote {
font-size: 11px;
color: var(--muted);
@@ -1135,8 +1239,8 @@
.vs-val-green — green text for savings value/label
.vs-val-amber — amber text for "costs more" value/label
─────────────────────────────────────────────────────────────── */
.vs-save-green td { background: rgba(39, 174, 96, 0.13); }
.vs-save-amber td { background: rgba(210, 120, 30, 0.13); }
.vs-save-green td { background: rgba(39, 174, 96, 0.16); }
.vs-save-amber td { background: rgba(210, 120, 30, 0.16); }
.vs-val-green { color: var(--green) !important; }
.vs-val-amber { color: var(--amber) !important; }
@@ -1160,7 +1264,7 @@
the checkbox's native accent-color. No pseudo-element needed.
─────────────────────────────────────────────────────────────── */
.addon-row.selected {
background: #1a2a38;
background: #1d2d3a;
border-color: var(--accent);
box-shadow: inset 3px 0 0 0 var(--accent);
}
@@ -1284,8 +1388,28 @@
border-right: 1px solid var(--border);
}
.pitch-item:last-child { border-right: none; }
.pitch-icon { font-size: 20px; margin-bottom: 12px; color: var(--accent); }
.pitch-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.pitch-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
min-height: 28px;
}
.pitch-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 20px;
color: var(--accent);
}
.pitch-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 1.3;
margin: 0;
}
.pitch-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }
.pitch-footer {
background: #162e22; /* match green callout family — was #1a2e20 */
@@ -1588,6 +1712,13 @@
/* Nudge banner */
.nudge-banner { padding: 14px 16px; font-size: 14px; }
.export-wrap { padding: 16px 16px 20px; }
.confirm-modal-card {
margin-top: 8vh;
padding: 20px 18px 18px;
}
.confirm-modal-title { font-size: 21px; }
.confirm-modal-actions { flex-direction: column-reverse; }
.confirm-btn { width: 100%; }
/* Fee table */
.fee-table td { padding: 7px 0; font-size: 13px; }
@@ -1626,6 +1757,7 @@
─────────────────────────────────────────────────────────────── */
.mobile-quote-pill { display: none; }
.mobile-quote-panel { display: none; }
.mobile-panel-actions { display: none; }
/* ═══════════════════════════════════════
MOBILE QUOTE PILL + FULL-SCREEN PANEL
@@ -1751,6 +1883,15 @@
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border);
}
.mobile-panel-actions {
display: block;
padding: 0 20px 12px;
border-bottom: 1px solid var(--border);
background: var(--card);
}
.mobile-panel-actions .btn-reset-quote {
margin-top: 12px;
}
.mobile-panel-close-title {
font-family: 'DM Mono', monospace;
font-size: 12px;