Massive AI Overhaul
This commit is contained in:
John OReilly
@@ -18,23 +18,177 @@ html {
|
||||
--green: #63d8a2;
|
||||
--amber: #ffbe68;
|
||||
--glass-header-text: #5f6d7f;
|
||||
--top-bar-bg: linear-gradient(
|
||||
180deg,
|
||||
rgba(252, 255, 255, 0.96) 0%,
|
||||
rgba(244, 249, 255, 0.93) 52%,
|
||||
rgba(231, 240, 251, 0.91) 100%
|
||||
);
|
||||
--top-bar-border: rgba(118, 143, 171, 0.35);
|
||||
--top-bar-meta: var(--glass-header-text);
|
||||
--theme-chip-bg: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(217, 229, 242, 0.82));
|
||||
--theme-chip-hover: linear-gradient(180deg, rgba(252, 254, 255, 0.94), rgba(226, 237, 248, 0.88));
|
||||
--theme-chip-active: linear-gradient(180deg, rgba(226, 236, 248, 0.95), rgba(205, 219, 235, 0.9));
|
||||
--theme-chip-fg: #223142;
|
||||
--theme-chip-border: rgba(83, 117, 150, 0.24);
|
||||
--theme-chip-shadow: 0 10px 24px rgba(6, 18, 31, 0.14);
|
||||
--section-hover-border: rgba(105, 200, 255, 0.34);
|
||||
--section-hover-shadow:
|
||||
-4px 0 0 0 rgba(105, 200, 255, 0.36),
|
||||
0 20px 54px rgba(2, 8, 17, 0.38),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
||||
--section-open-border: rgba(105, 200, 255, 0.5);
|
||||
--section-open-shadow:
|
||||
-4px 0 0 0 rgba(105, 200, 255, 0.5),
|
||||
0 22px 58px rgba(2, 8, 17, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
--selection-bg: rgba(105, 200, 255, 0.28);
|
||||
--selection-text: #f8fbff;
|
||||
--top-bar-shadow: 0 8px 24px rgba(7, 18, 33, 0.1);
|
||||
--glass-page-bg:
|
||||
linear-gradient(142deg, #030b14 0%, #071420 20%, #0a1d2c 46%, #081721 72%, #040b13 100%),
|
||||
linear-gradient(128deg, rgba(58, 182, 255, 0.2) 0%, rgba(58, 182, 255, 0) 30%),
|
||||
linear-gradient(148deg, rgba(22, 205, 164, 0.15) 18%, rgba(22, 205, 164, 0) 48%),
|
||||
radial-gradient(circle at 8% 10%, rgba(84, 200, 255, 0.3), transparent 26%),
|
||||
radial-gradient(circle at 28% 34%, rgba(36, 204, 168, 0.22), transparent 22%),
|
||||
radial-gradient(circle at 78% 18%, rgba(58, 166, 255, 0.2), transparent 24%),
|
||||
radial-gradient(circle at 84% 72%, rgba(24, 188, 150, 0.16), transparent 20%),
|
||||
linear-gradient(160deg, rgba(6, 14, 24, 0.74) 0%, rgba(4, 10, 19, 0.84) 100%);
|
||||
--glass-page-overlay:
|
||||
linear-gradient(132deg, rgba(70, 184, 255, 0.15) 0%, rgba(70, 184, 255, 0) 34%),
|
||||
linear-gradient(148deg, rgba(28, 198, 158, 0.12) 18%, rgba(28, 198, 158, 0) 46%),
|
||||
radial-gradient(circle at 16% 18%, rgba(72, 198, 255, 0.12), transparent 24%),
|
||||
radial-gradient(circle at 82% 24%, rgba(24, 188, 150, 0.1), transparent 22%);
|
||||
--glass-page-bg-mobile:
|
||||
linear-gradient(150deg, #030b13 0%, #091521 28%, #0d1b29 58%, #07121b 100%),
|
||||
linear-gradient(136deg, rgba(62, 186, 255, 0.16) 0%, rgba(62, 186, 255, 0) 36%),
|
||||
linear-gradient(152deg, rgba(24, 198, 160, 0.11) 18%, rgba(24, 198, 160, 0) 46%),
|
||||
radial-gradient(circle at 14% 12%, rgba(78, 196, 255, 0.24), transparent 24%),
|
||||
radial-gradient(circle at 70% 22%, rgba(24, 184, 148, 0.16), transparent 20%),
|
||||
radial-gradient(circle at 30% 48%, rgba(42, 162, 255, 0.15), transparent 22%);
|
||||
--glass-page-overlay-mobile:
|
||||
linear-gradient(138deg, rgba(66, 182, 255, 0.13) 0%, rgba(66, 182, 255, 0) 36%),
|
||||
linear-gradient(154deg, rgba(26, 194, 156, 0.1) 18%, rgba(26, 194, 156, 0) 46%),
|
||||
radial-gradient(circle at 78% 24%, rgba(26, 186, 150, 0.08), transparent 22%);
|
||||
--glass-panel-bg: linear-gradient(180deg, rgba(16, 27, 43, 0.76), rgba(9, 17, 29, 0.68));
|
||||
--glass-section-bg: linear-gradient(180deg, rgba(17, 29, 46, 0.74), rgba(9, 17, 29, 0.66));
|
||||
--glass-panel-border: rgba(143, 183, 221, 0.18);
|
||||
--glass-panel-shadow:
|
||||
0 18px 50px rgba(2, 8, 17, 0.32),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
--glass-section-num: rgba(226, 239, 255, 0.18);
|
||||
--glass-section-num-glow: 0 0 26px rgba(105, 200, 255, 0.1);
|
||||
--glass-heading: #f4f9ff;
|
||||
--glass-heading-soft: #f1f8ff;
|
||||
--glass-client-border: rgba(143, 183, 221, 0.24);
|
||||
--glass-client-placeholder: rgba(159, 179, 201, 0.72);
|
||||
--glass-ghost-bg: rgba(255, 255, 255, 0.04);
|
||||
--glass-ghost-border: rgba(143, 183, 221, 0.18);
|
||||
--glass-ghost-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
--glass-ghost-hover-bg: rgba(105, 200, 255, 0.12);
|
||||
--glass-ghost-hover-border: rgba(105, 200, 255, 0.3);
|
||||
--glass-ghost-hover-text: #f2f8ff;
|
||||
--glass-group-surface: rgba(5, 11, 21, 0.3);
|
||||
--glass-input-surface: rgba(5, 11, 21, 0.34);
|
||||
--surface-term-wrap: linear-gradient(180deg, rgba(12, 21, 34, 0.62), rgba(8, 15, 26, 0.54));
|
||||
--surface-term-tile: rgba(255, 255, 255, 0.02);
|
||||
--surface-term-tile-hover: rgba(105, 200, 255, 0.08);
|
||||
--surface-term-tile-active:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(135deg, rgba(62, 142, 190, 0.58) 0%, rgba(42, 107, 156, 0.62) 58%, rgba(24, 70, 118, 0.68) 100%);
|
||||
--border-term-wrap: rgba(143, 183, 221, 0.18);
|
||||
--border-term-tile-active: rgba(105, 200, 255, 0.16);
|
||||
--shadow-term-wrap: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
--shadow-term-tile-active:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 -1px 0 rgba(3, 10, 20, 0.26);
|
||||
--text-term-name: var(--muted);
|
||||
--text-term-name-active: var(--text-on-accent);
|
||||
--text-term-sub: var(--muted);
|
||||
--text-term-sub-active: var(--text-on-accent);
|
||||
--text-term-discount: #f2f8ff;
|
||||
--text-term-discount-active: var(--text-on-accent);
|
||||
--surface-best-value: rgba(99, 216, 162, 0.12);
|
||||
--border-best-value: rgba(99, 216, 162, 0.26);
|
||||
--text-best-value: #baf0d3;
|
||||
--surface-best-value-active: rgba(255, 255, 255, 0.16);
|
||||
--border-best-value-active: rgba(255, 255, 255, 0.34);
|
||||
--text-best-value-active: #ffffff;
|
||||
--text-pill-savings-active: #a8f0c8;
|
||||
--glass-input-border: rgba(143, 183, 221, 0.2);
|
||||
--glass-input-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
--glass-input-focus-border: rgba(105, 200, 255, 0.55);
|
||||
--glass-input-focus-shadow: 0 0 0 3px rgba(105, 200, 255, 0.16);
|
||||
--glass-cta-gradient: linear-gradient(135deg, #76dbff 0%, #48b8ff 54%, #268ee3 100%);
|
||||
--glass-cta-checked-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(135deg, rgba(94, 206, 255, 0.72) 0%, rgba(55, 156, 233, 0.78) 58%, rgba(28, 104, 190, 0.82) 100%);
|
||||
--glass-cta-checked-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
inset 0 -1px 0 rgba(3, 10, 20, 0.2);
|
||||
--glass-sidebar-header-bg:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(135deg, rgba(63, 133, 175, 0.7) 0%, rgba(47, 113, 156, 0.68) 58%, rgba(31, 82, 126, 0.66) 100%);
|
||||
--glass-sidebar-header-shadow:
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||
--glass-switch-track: rgba(255, 255, 255, 0.12);
|
||||
--surface-switch-off: rgba(255, 255, 255, 0.15);
|
||||
--surface-switch-on: var(--green);
|
||||
--glass-switch-knob: rgba(250, 252, 255, 0.95);
|
||||
--glass-switch-shadow: 0 2px 8px rgba(3, 9, 18, 0.28);
|
||||
--glass-selected-bg: rgba(105, 200, 255, 0.12);
|
||||
--glass-selected-border: rgba(105, 200, 255, 0.28);
|
||||
--glass-selected-text: #f3fbff;
|
||||
--surface-addon-hover: rgba(105, 200, 255, 0.08);
|
||||
--border-addon-hover: rgba(105, 200, 255, 0.24);
|
||||
--glass-feature-bg: linear-gradient(180deg, rgba(19, 31, 49, 0.8), rgba(10, 18, 30, 0.72));
|
||||
--glass-success-bg: linear-gradient(180deg, rgba(15, 48, 42, 0.82), rgba(10, 35, 30, 0.72));
|
||||
--glass-success-border: rgba(99, 216, 162, 0.26);
|
||||
--glass-danger-bg: linear-gradient(180deg, rgba(62, 23, 34, 0.82), rgba(41, 14, 22, 0.74));
|
||||
--glass-danger-border: rgba(230, 117, 138, 0.26);
|
||||
--glass-danger-text: #ffb7c6;
|
||||
--glass-warning-bg: linear-gradient(180deg, rgba(66, 41, 12, 0.84), rgba(43, 27, 8, 0.76));
|
||||
--glass-warning-border: rgba(255, 190, 104, 0.26);
|
||||
--glass-addon-active-bg: rgba(105, 200, 255, 0.16);
|
||||
--glass-addon-active-border: rgba(105, 200, 255, 0.28);
|
||||
--glass-addon-active-text: #dff3ff;
|
||||
--glass-pill-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
--glass-divider: rgba(143, 183, 221, 0.14);
|
||||
--glass-sidebar-placeholder: rgba(255, 255, 255, 0.76);
|
||||
--glass-compare-bg: linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(9, 16, 29, 0.62));
|
||||
--glass-compare-success: rgba(99, 216, 162, 0.14);
|
||||
--glass-compare-warning: rgba(255, 190, 104, 0.14);
|
||||
--glass-export-shadow: 0 14px 28px rgba(29, 108, 186, 0.26);
|
||||
--glass-reset-text: #dceefe;
|
||||
--glass-reset-hover-bg: rgba(105, 200, 255, 0.1);
|
||||
--glass-reset-hover-border: rgba(105, 200, 255, 0.32);
|
||||
--glass-reset-hover-text: #f2f8ff;
|
||||
--sky: #7dd3fc;
|
||||
--glass-modal-backdrop: rgba(2, 7, 15, 0.72);
|
||||
--glass-modal-bg: linear-gradient(180deg, rgba(18, 29, 46, 0.86), rgba(10, 17, 29, 0.8));
|
||||
--glass-pitch-bg: linear-gradient(180deg, rgba(14, 25, 40, 0.72), rgba(9, 16, 28, 0.68));
|
||||
--glass-pitch-footer-bg: linear-gradient(135deg, rgba(11, 42, 34, 0.88), rgba(7, 28, 22, 0.86));
|
||||
--glass-pitch-footer-text: #8ee8bf;
|
||||
--glass-mobile-sheet-bg: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(8, 14, 24, 0.9));
|
||||
--glass-mobile-row-bg: rgba(10, 18, 30, 0.84);
|
||||
--glass-top-bar-mobile-bg: linear-gradient(
|
||||
180deg,
|
||||
rgba(251, 255, 255, 0.95) 0%,
|
||||
rgba(241, 247, 254, 0.91) 56%,
|
||||
rgba(228, 238, 250, 0.89) 100%
|
||||
);
|
||||
--glass-theme-toggle-mobile-shadow: 0 8px 20px rgba(6, 18, 31, 0.12);
|
||||
--glass-mobile-panel-shadow:
|
||||
0 14px 36px rgba(2, 8, 17, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
--sidebar-zone-services: rgba(105, 200, 255, 0.03);
|
||||
--sidebar-zone-invoice: rgba(105, 200, 255, 0.05);
|
||||
--sidebar-zone-value: rgba(105, 200, 255, 0.02);
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
linear-gradient(138deg, #03070f 0%, #071120 14%, #10152a 30%, #1a1324 48%, #1a0d17 64%, #0a111b 82%, #050912 100%),
|
||||
linear-gradient(125deg, rgba(44, 138, 255, 0.22) 0%, rgba(44, 138, 255, 0) 26%),
|
||||
linear-gradient(142deg, rgba(18, 194, 152, 0.16) 18%, rgba(18, 194, 152, 0) 42%),
|
||||
linear-gradient(154deg, rgba(118, 72, 224, 0.16) 34%, rgba(118, 72, 224, 0) 58%),
|
||||
linear-gradient(164deg, rgba(198, 46, 86, 0.16) 52%, rgba(198, 46, 86, 0) 74%),
|
||||
radial-gradient(circle at 8% 10%, rgba(72, 178, 255, 0.34), transparent 26%),
|
||||
radial-gradient(circle at 26% 30%, rgba(32, 196, 144, 0.24), transparent 22%),
|
||||
radial-gradient(circle at 58% 18%, rgba(116, 82, 222, 0.24), transparent 22%),
|
||||
radial-gradient(circle at 88% 16%, rgba(200, 60, 92, 0.24), transparent 20%),
|
||||
radial-gradient(circle at 76% 56%, rgba(42, 126, 255, 0.2), transparent 22%),
|
||||
radial-gradient(circle at 24% 78%, rgba(112, 44, 138, 0.22), transparent 22%),
|
||||
radial-gradient(circle at 92% 86%, rgba(18, 168, 132, 0.2), transparent 20%),
|
||||
linear-gradient(160deg, rgba(7, 14, 25, 0.72) 0%, rgba(5, 10, 19, 0.8) 100%);
|
||||
background: var(--glass-page-bg);
|
||||
background-attachment: fixed;
|
||||
color: var(--ink);
|
||||
position: relative;
|
||||
@@ -45,11 +199,7 @@ body::before {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%),
|
||||
linear-gradient(145deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%),
|
||||
linear-gradient(156deg, rgba(122, 84, 232, 0.12) 38%, rgba(122, 84, 232, 0) 60%),
|
||||
linear-gradient(168deg, rgba(214, 68, 104, 0.12) 58%, rgba(214, 68, 104, 0) 78%);
|
||||
background: var(--glass-page-overlay);
|
||||
opacity: 0.9;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -61,30 +211,17 @@ body::before {
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: rgba(105, 200, 255, 0.28);
|
||||
color: #f8fbff;
|
||||
background: var(--selection-bg);
|
||||
color: var(--selection-text);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
position: sticky !important;
|
||||
top: 0 !important;
|
||||
z-index: 100 !important;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(252, 255, 255, 0.96) 0%,
|
||||
rgba(244, 249, 255, 0.93) 52%,
|
||||
rgba(231, 240, 251, 0.91) 100%
|
||||
) !important;
|
||||
border-bottom: 1px solid rgba(118, 143, 171, 0.35) !important;
|
||||
box-shadow: 0 8px 24px rgba(7, 18, 33, 0.1) !important;
|
||||
border-bottom-width: 1px !important;
|
||||
box-shadow: var(--top-bar-shadow) !important;
|
||||
backdrop-filter: blur(18px) saturate(135%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(135%);
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
color: var(--glass-header-text) !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1101px) {
|
||||
.outer {
|
||||
padding-top: var(--sidebar-top-gap) !important;
|
||||
@@ -95,66 +232,32 @@ body::before {
|
||||
}
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
background: linear-gradient(180deg, rgba(247, 250, 255, 0.88), rgba(217, 229, 242, 0.82)) !important;
|
||||
border: 1px solid rgba(83, 117, 150, 0.24) !important;
|
||||
color: #223142 !important;
|
||||
box-shadow: 0 10px 24px rgba(6, 18, 31, 0.14) !important;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background: linear-gradient(180deg, rgba(252, 254, 255, 0.94), rgba(226, 237, 248, 0.88)) !important;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:active {
|
||||
background: linear-gradient(180deg, rgba(226, 236, 248, 0.95), rgba(205, 219, 235, 0.9)) !important;
|
||||
}
|
||||
|
||||
.section,
|
||||
.quote-settings-bar,
|
||||
.sidebar,
|
||||
.sidebar-utility .btn-reset-quote,
|
||||
.sidebar-utility .btn-export,
|
||||
.sidebar-utility .btn-export-secondary,
|
||||
.mobile-panel-sheet,
|
||||
.mobile-panel-close-row,
|
||||
.mobile-panel-actions,
|
||||
.confirm-modal-card,
|
||||
.feature-card,
|
||||
.addon-row,
|
||||
.vs-comparison-wrap,
|
||||
.export-wrap,
|
||||
.pitch-inner {
|
||||
background: linear-gradient(180deg, rgba(16, 27, 43, 0.76), rgba(9, 17, 29, 0.68)) !important;
|
||||
border-color: rgba(143, 183, 221, 0.18) !important;
|
||||
box-shadow:
|
||||
0 18px 50px rgba(2, 8, 17, 0.32),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
|
||||
background: var(--glass-panel-bg) !important;
|
||||
border-color: var(--glass-panel-border) !important;
|
||||
box-shadow: var(--glass-panel-shadow) !important;
|
||||
backdrop-filter: blur(18px) saturate(135%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(135%);
|
||||
}
|
||||
|
||||
.section {
|
||||
background: linear-gradient(180deg, rgba(17, 29, 46, 0.74), rgba(9, 17, 29, 0.66)) !important;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
border-color: rgba(105, 200, 255, 0.34) !important;
|
||||
box-shadow:
|
||||
-4px 0 0 0 rgba(105, 200, 255, 0.36),
|
||||
0 20px 54px rgba(2, 8, 17, 0.38),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
|
||||
}
|
||||
|
||||
.sec-open {
|
||||
border-color: rgba(105, 200, 255, 0.5) !important;
|
||||
box-shadow:
|
||||
-4px 0 0 0 rgba(105, 200, 255, 0.5),
|
||||
0 22px 58px rgba(2, 8, 17, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||||
background: var(--glass-section-bg) !important;
|
||||
}
|
||||
|
||||
.section-num {
|
||||
color: rgba(226, 239, 255, 0.18) !important;
|
||||
text-shadow: 0 0 26px rgba(105, 200, 255, 0.1);
|
||||
color: var(--glass-section-num) !important;
|
||||
text-shadow: var(--glass-section-num-glow);
|
||||
}
|
||||
|
||||
.section-title,
|
||||
@@ -162,7 +265,7 @@ body::before {
|
||||
.sidebar-mrr,
|
||||
.sidebar-line .val,
|
||||
.vs-svs-label {
|
||||
color: #f4f9ff !important;
|
||||
color: var(--glass-heading) !important;
|
||||
}
|
||||
|
||||
.section-subtitle,
|
||||
@@ -184,12 +287,12 @@ body::before {
|
||||
}
|
||||
|
||||
.client-input {
|
||||
color: #f4f9ff !important;
|
||||
border-bottom-color: rgba(143, 183, 221, 0.24) !important;
|
||||
color: var(--glass-heading) !important;
|
||||
border-bottom-color: var(--glass-client-border) !important;
|
||||
}
|
||||
|
||||
.client-input::placeholder {
|
||||
color: rgba(159, 179, 201, 0.72) !important;
|
||||
color: var(--glass-client-placeholder) !important;
|
||||
}
|
||||
|
||||
.sec-chevron,
|
||||
@@ -199,10 +302,10 @@ body::before {
|
||||
.btn-export-secondary,
|
||||
.mobile-panel-close,
|
||||
.nudge-nav-btn {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
border-color: rgba(143, 183, 221, 0.18) !important;
|
||||
background: var(--glass-ghost-bg) !important;
|
||||
border-color: var(--glass-ghost-border) !important;
|
||||
color: var(--muted) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
box-shadow: var(--glass-ghost-shadow);
|
||||
}
|
||||
|
||||
.sec-open .sec-chevron,
|
||||
@@ -212,16 +315,16 @@ body::before {
|
||||
.btn-export-secondary:hover,
|
||||
.nudge-nav-btn:hover,
|
||||
.mobile-panel-close:hover {
|
||||
background: rgba(105, 200, 255, 0.12) !important;
|
||||
border-color: rgba(105, 200, 255, 0.3) !important;
|
||||
color: #f2f8ff !important;
|
||||
background: var(--glass-ghost-hover-bg) !important;
|
||||
border-color: var(--glass-ghost-hover-border) !important;
|
||||
color: var(--glass-ghost-hover-text) !important;
|
||||
}
|
||||
|
||||
.pill-toggle,
|
||||
.tier-seg-wrap,
|
||||
.qs-fee-input-wrap {
|
||||
background: rgba(5, 11, 21, 0.3) !important;
|
||||
border-color: rgba(143, 183, 221, 0.18) !important;
|
||||
background: var(--glass-group-surface) !important;
|
||||
border-color: var(--glass-ghost-border) !important;
|
||||
}
|
||||
|
||||
.pill-toggle label,
|
||||
@@ -232,7 +335,7 @@ body::before {
|
||||
.pill-toggle label:hover,
|
||||
.tier-seg:hover,
|
||||
.addon-row:hover {
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
background: var(--glass-ghost-bg) !important;
|
||||
}
|
||||
|
||||
.tier-seg.active,
|
||||
@@ -240,28 +343,20 @@ body::before {
|
||||
.confirm-btn-danger,
|
||||
.mobile-quote-pill,
|
||||
.progress-fill {
|
||||
background: linear-gradient(135deg, #7ad6ff 0%, #4da8ff 52%, #337dff 100%) !important;
|
||||
color: #ffffff !important;
|
||||
background: var(--glass-cta-gradient) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
}
|
||||
|
||||
.pill-toggle input:checked + label {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
|
||||
linear-gradient(135deg, rgba(103, 182, 248, 0.7) 0%, rgba(63, 122, 210, 0.76) 58%, rgba(45, 82, 155, 0.82) 100%) !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12),
|
||||
inset 0 -1px 0 rgba(3, 10, 20, 0.2) !important;
|
||||
background: var(--glass-cta-checked-bg) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
box-shadow: var(--glass-cta-checked-shadow) !important;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 44%),
|
||||
linear-gradient(135deg, rgba(105, 188, 250, 0.82) 0%, rgba(71, 132, 224, 0.8) 54%, rgba(67, 72, 156, 0.76) 100%) !important;
|
||||
color: #ffffff !important;
|
||||
box-shadow:
|
||||
inset 0 -1px 0 rgba(255, 255, 255, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
|
||||
background: var(--glass-sidebar-header-bg) !important;
|
||||
color: var(--text-on-accent) !important;
|
||||
box-shadow: var(--glass-sidebar-header-shadow) !important;
|
||||
}
|
||||
|
||||
.pill-toggle input:checked + label .pill-desc,
|
||||
@@ -269,7 +364,7 @@ body::before {
|
||||
.tier-seg.active .tier-name,
|
||||
.tier-seg.active .tier-price,
|
||||
.tier-seg.active .tier-sub {
|
||||
color: #ffffff !important;
|
||||
color: var(--text-on-accent-strong) !important;
|
||||
}
|
||||
|
||||
.num-input,
|
||||
@@ -277,77 +372,89 @@ body::before {
|
||||
.qs-fee-dollar,
|
||||
.qs-fee-input-wrap,
|
||||
.mobile-panel-sheet .sidebar-body {
|
||||
background: rgba(5, 11, 21, 0.34) !important;
|
||||
background: var(--glass-input-surface) !important;
|
||||
}
|
||||
|
||||
.num-input,
|
||||
.qs-fee-input {
|
||||
border-color: rgba(143, 183, 221, 0.2) !important;
|
||||
color: #f2f8ff !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
border-color: var(--glass-input-border) !important;
|
||||
color: var(--glass-ghost-hover-text) !important;
|
||||
box-shadow: var(--glass-input-inset-shadow);
|
||||
}
|
||||
|
||||
.num-input:focus,
|
||||
.qs-fee-input:focus,
|
||||
.client-input:focus-visible {
|
||||
border-color: rgba(105, 200, 255, 0.55) !important;
|
||||
box-shadow: 0 0 0 3px rgba(105, 200, 255, 0.16) !important;
|
||||
border-color: var(--glass-input-focus-border) !important;
|
||||
box-shadow: var(--glass-input-focus-shadow) !important;
|
||||
}
|
||||
|
||||
.qs-switch {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
background: var(--surface-switch-off) !important;
|
||||
}
|
||||
|
||||
.qs-toggle-row input:checked ~ .qs-switch {
|
||||
background: var(--surface-switch-on) !important;
|
||||
}
|
||||
.qs-switch::after {
|
||||
background: rgba(250, 252, 255, 0.95) !important;
|
||||
box-shadow: 0 2px 8px rgba(3, 9, 18, 0.28);
|
||||
background: var(--glass-switch-knob) !important;
|
||||
box-shadow: var(--glass-switch-shadow);
|
||||
}
|
||||
|
||||
.addon-row.selected {
|
||||
background: rgba(105, 200, 255, 0.12) !important;
|
||||
border-color: rgba(105, 200, 255, 0.28) !important;
|
||||
background: var(--glass-selected-bg) !important;
|
||||
border-color: var(--glass-selected-border) !important;
|
||||
}
|
||||
|
||||
.addon-row.selected .addon-name,
|
||||
.addon-row.selected .addon-price {
|
||||
color: #9edcff !important;
|
||||
.addon-row.selected .addon-price,
|
||||
.addon-row.selected .addon-desc {
|
||||
color: var(--glass-selected-text) !important;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: linear-gradient(180deg, rgba(19, 31, 49, 0.8), rgba(10, 18, 30, 0.72)) !important;
|
||||
background: var(--glass-feature-bg) !important;
|
||||
border-color: var(--glass-panel-border) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.addon-row {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.callout-green,
|
||||
.nudge-banner.green,
|
||||
.admin-waive-savings {
|
||||
background: linear-gradient(180deg, rgba(15, 48, 42, 0.82), rgba(10, 35, 30, 0.72)) !important;
|
||||
border-color: rgba(99, 216, 162, 0.26) !important;
|
||||
background: var(--glass-success-bg) !important;
|
||||
border-color: var(--glass-success-border) !important;
|
||||
color: var(--green) !important;
|
||||
}
|
||||
|
||||
.callout-red {
|
||||
background: linear-gradient(180deg, rgba(62, 23, 34, 0.82), rgba(41, 14, 22, 0.74)) !important;
|
||||
border-color: rgba(230, 117, 138, 0.26) !important;
|
||||
color: #ffb7c6 !important;
|
||||
background: var(--glass-danger-bg) !important;
|
||||
border-color: var(--glass-danger-border) !important;
|
||||
color: var(--glass-danger-text) !important;
|
||||
}
|
||||
|
||||
.nudge-banner.amber,
|
||||
.admin-fee-waived-badge {
|
||||
background: linear-gradient(180deg, rgba(66, 41, 12, 0.84), rgba(43, 27, 8, 0.76)) !important;
|
||||
border-color: rgba(255, 190, 104, 0.26) !important;
|
||||
background: var(--glass-warning-bg) !important;
|
||||
border-color: var(--glass-warning-border) !important;
|
||||
color: var(--amber) !important;
|
||||
}
|
||||
|
||||
.admin-waive-savings,
|
||||
.admin-fee-waived-badge,
|
||||
.addon-preview-pill.active {
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
box-shadow: var(--glass-pill-inset-shadow);
|
||||
}
|
||||
|
||||
.addon-preview-pill.active {
|
||||
background: rgba(105, 200, 255, 0.16) !important;
|
||||
border-color: rgba(105, 200, 255, 0.28) !important;
|
||||
color: #dff3ff !important;
|
||||
background: var(--glass-addon-active-bg) !important;
|
||||
border-color: var(--glass-addon-active-border) !important;
|
||||
color: var(--glass-addon-active-text) !important;
|
||||
}
|
||||
|
||||
.collapsible-header,
|
||||
@@ -359,12 +466,12 @@ body::before {
|
||||
.export-wrap,
|
||||
.mobile-panel-close-row,
|
||||
.mobile-panel-actions {
|
||||
border-color: rgba(143, 183, 221, 0.14) !important;
|
||||
border-color: var(--glass-divider) !important;
|
||||
}
|
||||
|
||||
.sidebar-title,
|
||||
.sidebar-client.placeholder {
|
||||
color: rgba(255, 255, 255, 0.76) !important;
|
||||
color: var(--glass-sidebar-placeholder) !important;
|
||||
}
|
||||
|
||||
.sidebar-body,
|
||||
@@ -386,108 +493,119 @@ body::before {
|
||||
}
|
||||
|
||||
.vs-comparison-wrap {
|
||||
background: linear-gradient(180deg, rgba(14, 24, 39, 0.72), rgba(9, 16, 29, 0.62)) !important;
|
||||
background: var(--glass-compare-bg) !important;
|
||||
}
|
||||
|
||||
.vs-save-green td {
|
||||
background: rgba(99, 216, 162, 0.14) !important;
|
||||
background: var(--glass-compare-success) !important;
|
||||
}
|
||||
|
||||
.vs-save-amber td {
|
||||
background: rgba(255, 190, 104, 0.14) !important;
|
||||
background: var(--glass-compare-warning) !important;
|
||||
}
|
||||
|
||||
.export-wrap {
|
||||
border-top: 1px solid rgba(143, 183, 221, 0.14) !important;
|
||||
border-top: 1px solid var(--glass-divider) !important;
|
||||
}
|
||||
body.sidebar-focus-open .side-col .export-wrap {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
border-top: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
box-shadow: 0 14px 28px rgba(29, 108, 186, 0.26) !important;
|
||||
box-shadow: var(--glass-export-shadow) !important;
|
||||
}
|
||||
|
||||
.btn-export:hover,
|
||||
.mobile-quote-pill:hover {
|
||||
filter: brightness(1.05);
|
||||
filter: brightness(1.2) !important;
|
||||
box-shadow: 0 4px 16px rgba(99, 127, 136, 0.35) !important;
|
||||
}
|
||||
.btn-export:active {
|
||||
filter: brightness(0.9) !important;
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.btn-reset-quote {
|
||||
color: #dceefe !important;
|
||||
color: var(--glass-reset-text) !important;
|
||||
}
|
||||
|
||||
.btn-reset-quote:hover {
|
||||
background: rgba(105, 200, 255, 0.1) !important;
|
||||
border-color: rgba(105, 200, 255, 0.32) !important;
|
||||
color: #f2f8ff !important;
|
||||
background: var(--glass-reset-hover-bg) !important;
|
||||
border-color: var(--glass-reset-hover-border) !important;
|
||||
color: var(--glass-reset-hover-text) !important;
|
||||
}
|
||||
|
||||
.btn-import-quote {
|
||||
color: var(--glass-reset-text) !important;
|
||||
}
|
||||
|
||||
.btn-import-quote:hover {
|
||||
background: color-mix(in srgb, var(--sky) 10%, transparent) !important;
|
||||
border-color: color-mix(in srgb, var(--sky) 35%, transparent) !important;
|
||||
color: var(--sky) !important;
|
||||
}
|
||||
|
||||
.confirm-modal-backdrop {
|
||||
background: rgba(2, 7, 15, 0.72) !important;
|
||||
background: var(--glass-modal-backdrop) !important;
|
||||
backdrop-filter: blur(10px) saturate(125%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(125%);
|
||||
}
|
||||
|
||||
.confirm-modal-card {
|
||||
background: linear-gradient(180deg, rgba(18, 29, 46, 0.86), rgba(10, 17, 29, 0.8)) !important;
|
||||
background: var(--glass-modal-bg) !important;
|
||||
}
|
||||
|
||||
.pitch-inner {
|
||||
background: linear-gradient(180deg, rgba(14, 25, 40, 0.72), rgba(9, 16, 28, 0.68)) !important;
|
||||
background: var(--glass-pitch-bg) !important;
|
||||
}
|
||||
|
||||
.pitch-title {
|
||||
color: #f1f8ff !important;
|
||||
color: var(--glass-heading-soft) !important;
|
||||
}
|
||||
|
||||
.pitch-footer {
|
||||
background: linear-gradient(135deg, rgba(11, 42, 34, 0.88), rgba(7, 28, 22, 0.86)) !important;
|
||||
color: #8ee8bf !important;
|
||||
background: var(--glass-pitch-footer-bg) !important;
|
||||
color: var(--glass-pitch-footer-text) !important;
|
||||
}
|
||||
|
||||
.mobile-panel-sheet {
|
||||
background: linear-gradient(180deg, rgba(12, 21, 34, 0.92), rgba(8, 14, 24, 0.9)) !important;
|
||||
background: var(--glass-mobile-sheet-bg) !important;
|
||||
}
|
||||
|
||||
.mobile-panel-close-row,
|
||||
.mobile-panel-actions {
|
||||
background: rgba(10, 18, 30, 0.84) !important;
|
||||
background: var(--glass-mobile-row-bg) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.top-bar {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(251, 255, 255, 0.95) 0%,
|
||||
rgba(241, 247, 254, 0.91) 56%,
|
||||
rgba(228, 238, 250, 0.89) 100%
|
||||
) !important;
|
||||
background: var(--glass-top-bar-mobile-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
body {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
background:
|
||||
linear-gradient(150deg, #03070f 0%, #0a1220 24%, #171226 54%, #110d18 76%, #070c14 100%),
|
||||
linear-gradient(132deg, rgba(58, 154, 255, 0.16) 0%, rgba(58, 154, 255, 0) 34%),
|
||||
linear-gradient(150deg, rgba(28, 201, 154, 0.12) 18%, rgba(28, 201, 154, 0) 44%),
|
||||
linear-gradient(162deg, rgba(214, 68, 104, 0.11) 48%, rgba(214, 68, 104, 0) 72%),
|
||||
radial-gradient(circle at 16% 12%, rgba(72, 178, 255, 0.24), transparent 24%),
|
||||
radial-gradient(circle at 72% 20%, rgba(189, 58, 92, 0.18), transparent 20%),
|
||||
radial-gradient(circle at 34% 46%, rgba(32, 196, 144, 0.18), transparent 22%),
|
||||
radial-gradient(circle at 74% 60%, rgba(116, 82, 222, 0.16), transparent 20%);
|
||||
background-attachment: fixed;
|
||||
background: var(--glass-page-bg-mobile);
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
body::before {
|
||||
background:
|
||||
linear-gradient(138deg, rgba(58, 154, 255, 0.14) 0%, rgba(58, 154, 255, 0) 34%),
|
||||
linear-gradient(154deg, rgba(28, 201, 154, 0.1) 18%, rgba(28, 201, 154, 0) 46%),
|
||||
linear-gradient(166deg, rgba(122, 84, 232, 0.1) 36%, rgba(122, 84, 232, 0) 58%),
|
||||
linear-gradient(174deg, rgba(214, 68, 104, 0.1) 56%, rgba(214, 68, 104, 0) 76%);
|
||||
background: var(--glass-page-overlay-mobile);
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.theme-toggle-btn {
|
||||
box-shadow: 0 8px 20px rgba(6, 18, 31, 0.12) !important;
|
||||
box-shadow: var(--glass-theme-toggle-mobile-shadow) !important;
|
||||
}
|
||||
|
||||
.section,
|
||||
@@ -495,8 +613,6 @@ body::before {
|
||||
.sidebar,
|
||||
.mobile-panel-sheet,
|
||||
.confirm-modal-card {
|
||||
box-shadow:
|
||||
0 14px 36px rgba(2, 8, 17, 0.28),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
|
||||
box-shadow: var(--glass-mobile-panel-shadow) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user