Pre-Alpha to Alpha Ready
This commit is contained in:
John OReilly
436
pre-alpha/SVS-MSP-Calculator-responsive.css
Normal file
436
pre-alpha/SVS-MSP-Calculator-responsive.css
Normal file
@@ -0,0 +1,436 @@
|
||||
/* SVS MSP Calculator - Responsive */
|
||||
/* Elastic fluid foundation — clamp() tokens in tokens.css handle continuous
|
||||
scaling. Only two structural breakpoints remain:
|
||||
≤1100px — 2-col → 1-col, sidebar → mobile pill/panel
|
||||
≤ 600px — phone layout shifts (stacking, gutter collapse)
|
||||
Plus one orientation rule:
|
||||
≤ 780px landscape — restore 2-col sidebar
|
||||
The old 1350px and 900px breakpoints are eliminated; fluid tokens cover them.
|
||||
═══════════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── TABLET / SINGLE-COLUMN (≤ 1100px) ──────────────────────────
|
||||
Structural shift: grid collapses to 1fr, sidebar hides,
|
||||
mobile pill + panel appear.
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
@media (max-width: 1100px) {
|
||||
.outer {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.pitch-inner { margin-left: 0; }
|
||||
.pitch-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.pitch-item:nth-child(2) { border-right: none; }
|
||||
.pitch-item:nth-child(3) { border-top: 1px solid var(--border); }
|
||||
.pitch-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
|
||||
}
|
||||
|
||||
/* ── PHONE (≤ 600px) ────────────────────────────────────────────
|
||||
True layout shifts only: gutter collapses, controls stack,
|
||||
pill-toggles go vertical, touch targets enforced.
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
@media (max-width: 600px) {
|
||||
:root {
|
||||
--section-offset: 0px;
|
||||
}
|
||||
|
||||
.top-bar-logo { margin-left: 0; }
|
||||
.section { border-radius: 10px; }
|
||||
|
||||
.client-bar { padding: var(--space-xl) 0 var(--space-xl) 0; }
|
||||
.sections-toolbar { margin-left: 0; margin-bottom: var(--space-md); }
|
||||
.client-input { font-size: 1.375rem; max-width: 100%; }
|
||||
.qs-savings-stack { margin-top: var(--space-stack-tight); }
|
||||
.qs-fee-row { padding: 6px 0 0; }
|
||||
|
||||
.main-col > .section:first-of-type { margin-top: var(--space-sm); }
|
||||
#sec-02::after, #sec-03::after, #sec-01::after { display: none; }
|
||||
.group-label { margin-left: 0; }
|
||||
/* Mobile grouping — accent left border on Managed IT sections */
|
||||
#sec-02, #sec-03, #sec-01 {
|
||||
border-left: 3px solid var(--group-strip);
|
||||
}
|
||||
.group-divider { margin-left: 0; margin-right: 0; }
|
||||
.mobile-quote-pill { top: 12vh; }
|
||||
|
||||
/* Pill toggle — stack vertically on tiny screens */
|
||||
.pill-toggle {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.pill-toggle label { border-right: none; border-bottom: 1px solid var(--border); }
|
||||
.pill-toggle label:last-child { border-bottom: none; }
|
||||
|
||||
/* Contract terms — vertical stack on phones */
|
||||
.tier-seg { padding: var(--space-md) 6px; }
|
||||
.tier-seg .tier-price { font-size: 1.125rem; }
|
||||
.tier-seg .tier-name { font-size: 0.6875rem; }
|
||||
.qs-term-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.qs-term-wrap .tier-seg {
|
||||
padding: var(--space-stack) var(--space-stack) 13px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
}
|
||||
.qs-term-wrap .tier-seg:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
.qs-term-wrap .tier-name { font-size: 0.75rem; margin-bottom: var(--space-xs); }
|
||||
.qs-term-wrap .tier-sub { font-size: 0.6875rem; }
|
||||
.qs-toggle-row.qs-fee-waive { padding: 6px 9px; }
|
||||
|
||||
/* Input rows — stack label above input */
|
||||
.input-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.section-body .num-stepper { width: 100%; }
|
||||
.section-body .num-input { width: 100%; font-size: 1.25rem; padding: var(--space-md); flex: 1; }
|
||||
.section-body .step-btn { width: 48px; font-size: 1.375rem; }
|
||||
|
||||
/* Section titles — tighter on phone */
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.section-num {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Controls row — stack full-width on phone */
|
||||
.sec-controls-row {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.sec-controls-row .num-stepper {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
.sec-controls-row .num-input {
|
||||
flex: 1 1 0%;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.sec-controls-row .step-btn {
|
||||
width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.section .sec-controls-row > .section-badge,
|
||||
.section .sec-controls-row > .sec-summary-badge {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
align-self: stretch;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
/* Collapsible */
|
||||
.collapsible-body { padding: var(--space-sm) 0 var(--space-stack-tight) var(--space-stack-roomy); }
|
||||
|
||||
/* Feature cards — single col already, just tighter */
|
||||
.feature-card { padding: var(--space-stack) var(--space-stack-roomy); }
|
||||
.m365-app-strip { padding: var(--space-stack) var(--space-stack-roomy) var(--space-md); }
|
||||
.m365-app-list {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-stack-tight);
|
||||
}
|
||||
.m365-app-item { padding: var(--space-stack-tight) 6px; }
|
||||
.m365-app-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
/* Savings row — stack */
|
||||
.savings-input-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
|
||||
.savings-input-row input { width: 100%; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar-body { padding: var(--space-lg); }
|
||||
.sidebar-header { padding: var(--space-stack) var(--space-xl); }
|
||||
.sidebar-mrr { font-size: 2.25rem; }
|
||||
|
||||
/* VS table — keep readable while fitting the mobile sidebar panel */
|
||||
.vs-comparison-wrap { padding: var(--space-lg) var(--space-stack-roomy); }
|
||||
.vs-header { gap: var(--space-sm); margin-bottom: var(--space-stack); }
|
||||
.vs-brand-name { font-size: 0.9375rem; }
|
||||
.vs-table td { padding: var(--space-sm) 3px; font-size: 0.78125rem; }
|
||||
.vs-save-row td { padding: var(--space-stack-tight) var(--space-md); }
|
||||
.vs-footnote { font-size: 0.65625rem; line-height: 1.55; }
|
||||
|
||||
/* Pitch footer */
|
||||
.pitch-wrap { padding: 0; }
|
||||
.pitch-inner { margin-left: 0; border-radius: 0; }
|
||||
.pitch-grid { grid-template-columns: 1fr 1fr; }
|
||||
.pitch-item { padding: var(--space-xl) var(--space-stack-roomy); }
|
||||
.pitch-item:nth-child(2) { border-right: none; }
|
||||
.pitch-item:nth-child(3) { border-top: 1px solid var(--border); }
|
||||
.pitch-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
|
||||
.pitch-title { font-size: 0.875rem; }
|
||||
.pitch-desc { font-size: 0.8125rem; }
|
||||
.pitch-footer { padding: var(--space-stack) var(--space-stack-roomy); font-size: 0.75rem; }
|
||||
|
||||
/* Touch targets — ensure ≥44px on phone */
|
||||
.collapsible-header {
|
||||
min-height: 44px;
|
||||
}
|
||||
.section-toggle {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Nudge banner */
|
||||
.nudge-banner { padding: var(--space-stack) var(--space-lg); font-size: 0.8125rem; min-height: 0; }
|
||||
.export-wrap { padding: var(--space-stack-roomy) var(--space-stack-roomy) var(--space-lg); }
|
||||
.confirm-modal-card {
|
||||
margin-top: 8vh;
|
||||
padding: var(--space-xl) var(--space-lg) var(--space-lg);
|
||||
}
|
||||
.confirm-modal-title { font-size: 1.3125rem; }
|
||||
.confirm-modal-actions { flex-direction: column-reverse; }
|
||||
.confirm-btn { width: 100%; }
|
||||
|
||||
/* Fee table */
|
||||
.fee-table td { padding: 7px 0; font-size: 0.8125rem; }
|
||||
}
|
||||
|
||||
/* ── LANDSCAPE PHONE (≤ 780px, orientation: landscape) ── */
|
||||
@media (max-width: 780px) and (orientation: landscape) {
|
||||
.outer {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-2xl);
|
||||
padding: var(--space-xl) var(--space-xl) 40px;
|
||||
align-items: start;
|
||||
}
|
||||
.main-col { order: 1; }
|
||||
.side-col {
|
||||
order: 2;
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
align-self: start;
|
||||
}
|
||||
.section {
|
||||
margin-left: 0;
|
||||
padding: var(--space-lg) var(--space-xl) 22px;
|
||||
}
|
||||
.client-bar { padding: var(--space-stack-roomy) 0 var(--space-stack-roomy) 0; }
|
||||
.sidebar { margin-top: 0; }
|
||||
.sidebar-mrr { font-size: 1.875rem; }
|
||||
.pitch-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.pitch-inner { margin-left: 0; }
|
||||
.pitch-wrap { padding: 0; }
|
||||
}
|
||||
|
||||
/* ── MOBILE-ONLY ELEMENTS — hidden at desktop baseline ─────────
|
||||
MUST be display:none here (outside any media query) so that
|
||||
the panel doesn't render on top of desktop layout.
|
||||
The @media (max-width:1100px) block below overrides to display:flex.
|
||||
─────────────────────────────────────────────────────────────── */
|
||||
.mobile-quote-pill { display: none; }
|
||||
.mobile-quote-panel { display: none; }
|
||||
.mobile-panel-actions { display: none; }
|
||||
|
||||
/* ═══════════════════════════════════════
|
||||
MOBILE QUOTE PILL + FULL-SCREEN PANEL
|
||||
═══════════════════════════════════════ */
|
||||
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.sidebar-focus-toggle,
|
||||
.sidebar-focus-backdrop { display: none; }
|
||||
|
||||
/* Hide the static sidebar entirely on mobile/tablet */
|
||||
.side-col { display: none; }
|
||||
|
||||
/* Show the floating pill */
|
||||
.mobile-quote-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-stack-tight);
|
||||
position: fixed;
|
||||
top: calc(var(--top-bar-sticky-offset) + var(--space-lg));
|
||||
right: max(14px, env(safe-area-inset-right, 0px));
|
||||
z-index: 200;
|
||||
background: var(--accent);
|
||||
color: var(--btn-primary-fg);
|
||||
border-radius: 50px;
|
||||
padding: var(--space-stack-tight) var(--space-lg) var(--space-stack-tight) var(--space-stack);
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-floating);
|
||||
border: none;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
transition: background var(--transition-fast), transform var(--transition-fast);
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.mobile-quote-pill:active { transform: scale(0.96); }
|
||||
.mobile-quote-pill:hover { background: var(--btn-primary-hover); }
|
||||
.mobile-pill-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--surface-pill-icon);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mobile-pill-mrr {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
.mobile-pill-label {
|
||||
font-size: 10px;
|
||||
opacity: 0.75;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Full-screen overlay panel */
|
||||
.mobile-quote-panel {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 300;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.mobile-quote-panel.open {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dark backdrop */
|
||||
.mobile-panel-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--surface-mobile-backdrop);
|
||||
backdrop-filter: blur(3px);
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
/* Slide-up sheet */
|
||||
.mobile-panel-sheet {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 100vh;
|
||||
background: var(--surface-mobile-sheet);
|
||||
border-radius: 0;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
will-change: transform;
|
||||
border-top: 1px solid var(--border-mobile-sheet);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
.mobile-quote-panel.open .mobile-panel-sheet {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Drag handle */
|
||||
.mobile-panel-handle {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
margin: var(--space-stack) auto 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Close button row */
|
||||
.mobile-panel-close-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-stack-roomy) var(--space-xl) var(--space-md);
|
||||
border-bottom: 1px solid var(--border-mobile-row);
|
||||
background: var(--surface-mobile-close-row);
|
||||
}
|
||||
.mobile-panel-actions {
|
||||
display: block;
|
||||
padding: 0 var(--space-xl) var(--space-md);
|
||||
border-bottom: 1px solid var(--border-mobile-row);
|
||||
background: var(--surface-mobile-actions);
|
||||
}
|
||||
.mobile-panel-actions .btn-export {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
.mobile-panel-actions .btn-export-secondary {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.mobile-panel-close-title {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.mobile-panel-close-btn {
|
||||
background: var(--surface-mobile-close-btn);
|
||||
border: none;
|
||||
color: var(--ink);
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
.mobile-panel-close-btn:active { background: var(--surface-mobile-close-btn-active); }
|
||||
|
||||
/* Touch targets — minimum 44px on mobile per WCAG */
|
||||
.nudge-nav-btn {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
/* Sidebar inside the mobile sheet — strip all desktop positioning */
|
||||
.mobile-panel-sheet .sidebar {
|
||||
margin-top: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
overflow: visible !important;
|
||||
background: var(--surface-mobile-sidebar) !important;
|
||||
}
|
||||
/* Keep Live Quote header visible in responsive panel so
|
||||
Insight can sit directly below it (matching desktop order). */
|
||||
.mobile-panel-sheet .sidebar-header {
|
||||
display: block !important;
|
||||
}
|
||||
.mobile-panel-sheet .sidebar-body {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.mobile-panel-sheet .nudge-banner {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape phone — restore the static sidebar and suppress the mobile sheet. */
|
||||
@media (max-width: 780px) and (orientation: landscape) {
|
||||
.side-col { display: block; }
|
||||
.mobile-quote-pill,
|
||||
.mobile-quote-panel,
|
||||
.mobile-panel-actions {
|
||||
display: none;
|
||||
}
|
||||
.mobile-panel-sheet { max-height: 88vh; }
|
||||
}
|
||||
Reference in New Issue
Block a user