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

Before Theme Change

Browse Source
This commit is contained in:
John OReilly
2026-03-13 10:24:58 -04:00
parent 1663c69c63
commit ac9420c812
4 changed files with 411 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
SVS-MSP-Calculator.css
View File

@@ -69,7 +69,7 @@
font-family: 'DM Mono', monospace;
font-size: 12px;
letter-spacing: 0.07em;
color: #555;
color: var(--muted);
text-align: right;
line-height: 1.6;
margin-left: auto;
@@ -111,13 +111,13 @@
display: grid;
grid-template-columns: 3fr 2fr;
gap: 52px;
padding: 52px clamp(20px,2vw,40px) 52px;
padding: 50px clamp(20px,2vw,40px) 52px;
max-width: 1600px;
margin: 0 auto;
align-items: start;
}
.main-col { display: flex; flex-direction: column; gap: 28px; }
.side-col { position: sticky; top: 35px; z-index: 10; align-self: start; }
.side-col { position: sticky; top: 102px; z-index: 10; align-self: start; }
/* ── CLIENT BAR ─────────────────────────────────────────────────
Lives inside .main-col, above section I.
@@ -166,7 +166,7 @@
margin-left: 96px;
border-radius: 12px;
border: 1px solid var(--border);
background: #272420; /* elevated above paper #22201d — was #1e1c18 (sunken) */
background: var(--card); /* elevated above paper — was #272420 hardcoded */
padding: 32px 36px 36px;
}
.main-col > .section:first-of-type { margin-top: 24px; }
@@ -267,14 +267,11 @@
Buttons call stepCount() which stops propagation.
─────────────────────────────────────────────────────────────── */
.sec-collapsed-counter {
display: none;
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
}
.section:not(.sec-open) .sec-collapsed-counter {
display: flex;
}
.sec-count-btn {
width: 44px;
height: 44px;
@@ -321,6 +318,10 @@
gap: 6px;
}
.pill-toggle label:last-child { border-right: none; }
.pill-toggle input:focus-visible + label {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.pill-toggle input:checked + label {
background: var(--accent);
color: #fff;
@@ -350,6 +351,10 @@
margin-bottom: 20px;
}
.tier-seg-wrap input[type=radio] { display: none; }
.tier-seg-wrap input[type=radio]:focus-visible + .tier-seg {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.tier-seg {
padding: 16px 10px;
cursor: pointer;
@@ -424,6 +429,12 @@
border-radius: 2px;
padding: 3px 8px;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.addon-preview-pill.active {
color: var(--green);
border-color: var(--green);
background: rgba(33,112,69,0.10);
}
.collapsible-body {
padding: 16px 0 20px 28px;
@@ -459,6 +470,8 @@
color: var(--green);
font-size: 11px;
}
.byol-mode .m365-feature { text-decoration: line-through; opacity: 0.55; }
.byol-mode .m365-feature::before { color: var(--amber); }
/* ── NUMBER INPUTS ──────────────────────────────────────────────
.input-row — flex row: label left, .num-input right
@@ -660,7 +673,6 @@
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
margin-top: 100px;
}
.sidebar-header {
padding: 20px 24px;
@@ -681,7 +693,7 @@
color: #fff;
line-height: 1.25;
}
.sidebar-client.placeholder { color: rgba(255,255,255,0.35); font-weight: 400; font-style: italic; }
.sidebar-client.placeholder { color: rgba(255,255,255,0.65); font-weight: 400; font-style: italic; }
.sidebar-body { padding: 24px; }
.sidebar-line {
display: flex;
@@ -763,14 +775,13 @@
.nudge-nav-btn — SVG chevron pills (‹ ›), hidden when only 1 nudge.
BOTH #nudgeBanner and #nudgeBanner_m are updated by renderNudge()
via applyNudge('') and applyNudge('_m').
nudgeBanner MUST stay inside .sidebar-body div.
nudgeBanner sits between .sidebar-header and .sidebar-body.
─────────────────────────────────────────────────────────────── */
.nudge-banner {
margin: 0;
margin: 0 0 16px 0;
padding: 18px 24px;
font-size: 15px;
line-height: 1.7;
border-top: 1px solid var(--border);
min-height: 130px;
box-sizing: border-box;
}
@@ -945,6 +956,10 @@
user-select: none;
}
.qs-toggle-row input[type=checkbox] { display: none; }
.qs-toggle-row input[type=checkbox]:focus-visible + .qs-switch {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.qs-switch {
width: 34px;
height: 20px;
@@ -1032,7 +1047,7 @@
─────────────────────────────────────────────────────────────── */
/* Section I — admin fee display row */
.admin-fee-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
/* .admin-fee-header base styles merged into the waived section definition at line ~1079 */
.admin-fee-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; }
.admin-fee-val { font-family: 'DM Mono', monospace; font-size: 22px; color: var(--accent); }
.admin-fee-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
@@ -1078,7 +1093,7 @@
.sl-otf-waived .otf-waived-label { text-decoration: none; font-weight: 600; letter-spacing: 0.06em; }
/* ── ADMIN FEE WAIVED display */
.admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.admin-fee-waive-toggle { margin-left: auto; }
.admin-fee-strike { text-decoration: line-through; color: var(--muted); text-decoration-color: var(--muted); }
.admin-fee-waived-badge { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--green); background: rgba(33,112,69,0.12); border: 1px solid rgba(33,112,69,0.28); border-radius: 4px; padding: 2px 7px; vertical-align: middle; }
@@ -1233,6 +1248,12 @@
color: var(--green);
line-height: 1.65;
}
/* Amber modifier — toggled by JS (classList.add/remove) when VoIP quote > current bill */
.savings-result.savings-amber {
background: #2e1f08;
border-color: #5a3a10;
color: var(--amber);
}
/* ── BOTTOM PITCH BANNER ────────────────────────────────────────
4-column grid (2-col on tablet/mobile) outside the .outer grid.
@@ -1697,9 +1718,9 @@
bottom: 0;
left: 0;
right: 0;
max-height: 92vh;
max-height: 100vh;
background: var(--card);
border-radius: 20px 20px 0 0;
border-radius: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
@@ -1764,12 +1785,16 @@
box-shadow: none !important;
overflow: visible !important;
}
/* Sidebar-header inside panel — hide it, panel has its own header row */
/* Keep Live Quote header visible in responsive panel so
Insight can sit directly below it (matching desktop order). */
.mobile-panel-sheet .sidebar-header {
display: none !important;
display: block !important;
}
.mobile-panel-sheet .sidebar-body {
padding-top: 4px !important;
padding-top: 0 !important;
}
.mobile-panel-sheet .nudge-banner {
margin-bottom: 35px;
}
}