295 lines
12 KiB
CSS
295 lines
12 KiB
CSS
/* ══════════════════════════════════════════════════════════════
|
|
SVS MSP Calculator — Retro Cyberpunk Theme
|
|
Warm parchment paper base with neon-warm accents —
|
|
hot rose highlights, electric amber secondary, warm teal pop,
|
|
dark charcoal header. Vintage paper meets neon signage.
|
|
══════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
/* ── Core palette ────────────────────────────────────────── */
|
|
--retro-cream: #f0e4d0;
|
|
--retro-muted-warm: #c0aa98;
|
|
--retro-dark: #1c1317;
|
|
--retro-dark-mid: #2a1e22;
|
|
--retro-dark-deep: #140e11;
|
|
--retro-cta-gradient: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
|
|
--retro-dark-gradient: linear-gradient(180deg, var(--retro-dark-mid) 0%, var(--retro-dark) 100%);
|
|
--ink: #1c1317;
|
|
--paper: #f0e4c8;
|
|
--accent: #e11d48;
|
|
--muted: #8a7a72;
|
|
--border: #d0c4b0;
|
|
--border-soft: #d8ccb8;
|
|
--card: #e8dcc0;
|
|
--green: #0d9488;
|
|
--amber: #d97706;
|
|
--sky: #6366f1;
|
|
--focus-ring-soft: rgba(225, 29, 72, 0.2);
|
|
|
|
/* ── Top bar ─────────────────────────────────────────────── */
|
|
--top-bar-bg: var(--retro-dark);
|
|
--top-bar-border: rgba(225, 29, 72, 0.35);
|
|
--top-bar-meta: var(--retro-muted-warm);
|
|
--top-bar-shadow: 0 4px 16px rgba(28, 19, 23, 0.2);
|
|
|
|
/* ── Theme chip ──────────────────────────────────────────── */
|
|
--theme-chip-bg: rgba(225, 29, 72, 0.1);
|
|
--theme-chip-hover: rgba(225, 29, 72, 0.18);
|
|
--theme-chip-active: rgba(225, 29, 72, 0.26);
|
|
--theme-chip-fg: var(--retro-cream);
|
|
|
|
/* ── Surfaces ────────────────────────────────────────────── */
|
|
--surface-section: #e4d5b5;
|
|
--surface-feature: #dccda8;
|
|
--surface-settings: #d6c49e;
|
|
--surface-settings-divider: #c4ae8a;
|
|
--surface-input: #efe2c4;
|
|
--surface-term-wrap: #e0d0ad;
|
|
--surface-term-tile: transparent;
|
|
--surface-term-tile-hover: rgba(225, 29, 72, 0.05);
|
|
--surface-term-tile-active: linear-gradient(180deg, #e11d48 0%, #be123c 100%);
|
|
--border-term-wrap: #c4ae8a;
|
|
--border-term-tile-active: rgba(225, 29, 72, 0.3);
|
|
--shadow-term-wrap: inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
|
--shadow-term-tile-active: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
|
|
/* ── Term text ───────────────────────────────────────────── */
|
|
--text-term-name: #8a7a72;
|
|
--text-term-sub: #6a5a50;
|
|
--text-term-sub-active: #fff;
|
|
--text-term-name-active: #fff;
|
|
--text-term-discount: #1c1317;
|
|
--text-term-discount-active: #ffffff;
|
|
|
|
/* ── Best value badge ────────────────────────────────────── */
|
|
--surface-best-value: rgba(13, 148, 136, 0.12);
|
|
--border-best-value: rgba(13, 148, 136, 0.32);
|
|
--text-best-value: #0d9488;
|
|
--surface-best-value-active: rgba(255, 255, 255, 0.2);
|
|
--border-best-value-active: rgba(255, 255, 255, 0.4);
|
|
--text-best-value-active: #ffffff;
|
|
|
|
/* ── Sidebar ─────────────────────────────────────────────── */
|
|
--surface-sidebar: #e0d4b6;
|
|
--surface-sidebar-header: var(--retro-dark);
|
|
--surface-sidebar-body: #e6d8b8;
|
|
--surface-sidebar-utility: #d0be98;
|
|
--surface-export: #ccba94;
|
|
--border-sidebar: #c4ae8a;
|
|
--surface-sidebar-utility-border: #b5a07a;
|
|
--border-export-top: #c4ae8a;
|
|
|
|
/* ── Compare / Modal ─────────────────────────────────────── */
|
|
--surface-compare: #d6c8a6;
|
|
--border-compare: #c4ae8a;
|
|
--surface-modal: var(--surface-input);
|
|
--surface-backdrop: rgba(28, 19, 23, 0.6);
|
|
--shadow-modal: 0 16px 50px rgba(28, 19, 23, 0.35);
|
|
|
|
/* ── Mobile ──────────────────────────────────────────────── */
|
|
--surface-mobile-sheet: var(--surface-section);
|
|
--surface-mobile-close-row: var(--surface-settings);
|
|
--surface-mobile-actions: var(--surface-settings);
|
|
--surface-mobile-sidebar: transparent;
|
|
--surface-mobile-close-btn: rgba(28, 19, 23, 0.08);
|
|
--surface-mobile-close-btn-active: rgba(28, 19, 23, 0.14);
|
|
--border-mobile-sheet: #c4ae8a;
|
|
--border-mobile-row: #c4ae8a;
|
|
|
|
/* ── Ghost / Utility surfaces ────────────────────────────── */
|
|
--surface-accent-soft: rgba(225, 29, 72, 0.05);
|
|
--surface-summary-badge: rgba(225, 29, 72, 0.08);
|
|
--border-summary-badge: rgba(225, 29, 72, 0.2);
|
|
--surface-chevron: rgba(28, 19, 23, 0.05);
|
|
--surface-chevron-active: rgba(28, 19, 23, 0.09);
|
|
--surface-ghost: rgba(28, 19, 23, 0.06);
|
|
--surface-ghost-hover: rgba(28, 19, 23, 0.12);
|
|
--surface-step: var(--surface-input);
|
|
--surface-step-hover: var(--surface-settings);
|
|
--surface-step-active: var(--accent);
|
|
--surface-step-border: #b5a07a;
|
|
--text-step: var(--accent);
|
|
|
|
/* ── State surfaces ──────────────────────────────────────── */
|
|
--surface-success: #dceee6;
|
|
--surface-success-border: #6db89a;
|
|
--surface-danger: #f5dcd6;
|
|
--surface-danger-border: #d4827a;
|
|
--text-danger: #b91c1c;
|
|
--surface-warning: #f0e4c4;
|
|
--surface-warning-panel: #ecdcb8;
|
|
--surface-warning-border: #d4a860;
|
|
--surface-compare-success: rgba(13, 148, 136, 0.12);
|
|
--surface-compare-warning: rgba(217, 119, 6, 0.12);
|
|
--surface-selected: rgba(225, 29, 72, 0.06);
|
|
--surface-addon-hover: rgba(225, 29, 72, 0.04);
|
|
--border-addon-hover: rgba(225, 29, 72, 0.18);
|
|
--text-selected-accent: #9f1239;
|
|
|
|
/* ── Text colours ────────────────────────────────────────── */
|
|
--text-sidebar-kicker: rgba(255, 255, 255, 0.84);
|
|
--text-sidebar-heading: #fff;
|
|
--text-sidebar-placeholder: rgba(255, 255, 255, 0.72);
|
|
--text-money: var(--ink);
|
|
--text-money-hero: var(--ink);
|
|
--text-vs-heading: var(--ink);
|
|
--text-vs-accent: #be123c;
|
|
--text-vs-muted: var(--muted);
|
|
--text-incentive: #0d9488;
|
|
--text-pill-savings-active: #ccfbf1;
|
|
|
|
/* ── Section interaction ─────────────────────────────────── */
|
|
--group-strip: rgba(225, 29, 72, 0.12);
|
|
--section-hover-border: rgba(225, 29, 72, 0.18);
|
|
--section-hover-shadow: -3px 0 0 0 rgba(225, 29, 72, 0.2);
|
|
--section-open-border: rgba(225, 29, 72, 0.3);
|
|
--section-open-shadow: -3px 0 0 0 rgba(225, 29, 72, 0.35);
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────── */
|
|
--btn-primary-fg: #ffffff;
|
|
--btn-primary-hover: #be123c;
|
|
--surface-pill-icon: rgba(255, 255, 255, 0.2);
|
|
--sidebar-zone-services: rgba(0, 0, 0, 0.04);
|
|
--sidebar-zone-invoice: rgba(0, 0, 0, 0.06);
|
|
--sidebar-zone-value: rgba(13, 148, 136, 0.04);
|
|
--sidebar-zone-summary: rgba(0, 0, 0, 0.025);
|
|
--sidebar-row-stripe: rgba(0, 0, 0, 0.025);
|
|
--sidebar-line-rule: color-mix(in srgb, var(--border) 60%, transparent);
|
|
--sidebar-total-rule: color-mix(in srgb, var(--border) 85%, transparent);
|
|
--surface-switch-off: #c0b4a0;
|
|
--surface-switch-on: var(--green);
|
|
}
|
|
|
|
/* ── Retro cyberpunk typography ───────────────────────────── */
|
|
.top-bar,
|
|
.section-header .section-title,
|
|
.sidebar-header,
|
|
.sidebar-mrr,
|
|
.sidebar-hero-label {
|
|
font-family: 'Poppins', sans-serif;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* ── Top bar — warm dark with hot rose neon edge ─────────── */
|
|
.top-bar {
|
|
background: linear-gradient(180deg, var(--retro-dark-mid) 0%, var(--retro-dark) 60%, var(--retro-dark-deep) 100%) !important;
|
|
border-bottom: 1px solid rgba(225, 29, 72, 0.3) !important;
|
|
box-shadow: 0 2px 16px rgba(225, 29, 72, 0.06) !important;
|
|
color: var(--retro-cream) !important;
|
|
}
|
|
.top-bar .top-bar-meta { color: var(--retro-muted-warm) !important; }
|
|
|
|
/* ── Logo fix — SVG text paths hardcoded #0c0c0c,
|
|
override to cream so they pop on the dark header ─────── */
|
|
.top-bar-logo path {
|
|
fill: var(--retro-cream) !important;
|
|
}
|
|
|
|
/* ── Sidebar header — matches top bar ────────────────────── */
|
|
.sidebar-header {
|
|
background: var(--retro-dark-gradient) !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
/* ── Section number — hot rose (faded on paper) ──────────── */
|
|
.section-num {
|
|
color: rgba(225, 29, 72, 0.15) !important;
|
|
}
|
|
|
|
/* ── Pill toggle checked — hot rose gradient ─────────────── */
|
|
.pill-toggle input:checked + label {
|
|
background: var(--retro-cta-gradient) !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
.pill-toggle input:checked + label .pill-price,
|
|
.pill-toggle input:checked + label .pill-desc {
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
/* ── Export buttons — hot rose CTA ───────────────────────── */
|
|
.btn-export {
|
|
background: var(--retro-cta-gradient) !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
.btn-export:hover {
|
|
filter: brightness(1.1) !important;
|
|
box-shadow: 0 2px 12px rgba(225, 29, 72, 0.3) !important;
|
|
}
|
|
|
|
/* ── Tier segment active — hot rose gradient ─────────────── */
|
|
.tier-seg.active {
|
|
background: var(--retro-cta-gradient) !important;
|
|
color: var(--text-on-accent) !important;
|
|
}
|
|
|
|
/* ── Import button hover — teal accent ───────────────────── */
|
|
.btn-import-quote:hover {
|
|
background: color-mix(in srgb, var(--sky) 8%, transparent);
|
|
border-color: color-mix(in srgb, var(--sky) 30%, transparent);
|
|
color: var(--sky);
|
|
}
|
|
|
|
/* ── Addon selected — rose tint on paper ─────────────────── */
|
|
.addon-row.selected {
|
|
background: rgba(225, 29, 72, 0.04) !important;
|
|
border-color: rgba(225, 29, 72, 0.18) !important;
|
|
box-shadow: inset 3px 0 0 0 var(--accent) !important;
|
|
}
|
|
|
|
/* ── Paper texture with warm scanlines ───────────────────── */
|
|
body {
|
|
background-color: var(--paper);
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
0deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(180, 150, 100, 0.03) 2px,
|
|
rgba(180, 150, 100, 0.03) 4px
|
|
);
|
|
}
|
|
|
|
/* ── Switch knob — hot rose when active ──────────────────── */
|
|
.switch input:checked + .switch-track {
|
|
background: var(--accent) !important;
|
|
}
|
|
|
|
/* ── Nudge banners — warm paper tints ────────────────────── */
|
|
.nudge-banner.amber {
|
|
background: #f0dab0 !important;
|
|
border-color: #d4a040 !important;
|
|
}
|
|
.nudge-banner.green {
|
|
background: #d6ece4 !important;
|
|
border-color: #5aaa98 !important;
|
|
}
|
|
|
|
/* ── Callout boxes ───────────────────────────────────────── */
|
|
.callout-green {
|
|
background: var(--surface-success) !important;
|
|
border-color: var(--surface-success-border) !important;
|
|
color: var(--green) !important;
|
|
}
|
|
.callout-red {
|
|
background: var(--surface-danger) !important;
|
|
border-color: var(--surface-danger-border) !important;
|
|
}
|
|
|
|
/* ── Mobile quote pill — hot rose with glow ──────────────── */
|
|
.mobile-quote-pill {
|
|
background: var(--retro-cta-gradient) !important;
|
|
color: var(--text-on-accent) !important;
|
|
box-shadow: 0 0 10px rgba(225, 29, 72, 0.25) !important;
|
|
}
|
|
|
|
/* ── Progress bar — rose to teal gradient ────────────────── */
|
|
.progress-fill {
|
|
background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%) !important;
|
|
}
|
|
|
|
/* ── Full-screen sidebar export-wrap ─────────────────────── */
|
|
body.sidebar-focus-open .side-col .export-wrap {
|
|
background: transparent !important;
|
|
border-top: none !important;
|
|
}
|