/* * SSI Vantage — Shared Theme * Light mode overrides. Dark mode is the default (defined inline per-page). * Toggle managed by vantage-theme.js via [data-theme="light"] on . * * To change a light-mode color without touching dark mode, * just edit the value in the [data-theme="light"] block below. */ /* ── Light mode: CSS variable overrides ───────────────────────────────────── */ [data-theme="light"] { --bg: #f4f0e8; /* warm cream page background */ --bg-mid: #faf7f2; /* soft warm white card / panel surfaces */ --bg-light: #ede8de; /* input fields, hover, subtle fills */ --gold: #8c6420; /* headings & primary accents */ --gold-light: #2a1c08; /* body text (dark warm brown) */ --gold-dim: #b08848; /* borders, secondary labels */ --gold-fill: #f5f0e8; /* tinted fill backgrounds */ --green: #1e7a42; --red: #a02424; } /* ── Body ─────────────────────────────────────────────────────────────────── */ [data-theme="light"] body { background: var(--bg); color: var(--gold-light); } /* ── Desktop nav bar ──────────────────────────────────────────────────────── */ [data-theme="light"] .nav { background: rgba(244,240,232,0.97) !important; border-bottom-color: var(--gold-dim); } [data-theme="light"] .nav-link { color: #5a3e18; } [data-theme="light"] .nav-link:hover { color: var(--gold); border-color: var(--gold-dim); } [data-theme="light"] .nav-link.active { color: var(--gold); border-color: var(--gold-dim); } [data-theme="light"] .nav-logo-text { color: var(--gold); } [data-theme="light"] .nav-logo-text span { color: #5a3e18; } [data-theme="light"] .nav-user-name { color: #5a3e18; } [data-theme="light"] .nav-sep { background: var(--gold-dim); } [data-theme="light"] .nav-hamburger span { background: var(--gold); } [data-theme="light"] .nav-logout { color: #5a3e18; border-color: var(--gold-dim); } [data-theme="light"] .nav-logout:hover { color: var(--gold); border-color: var(--gold); } [data-theme="light"] .admin-badge { background: rgba(140,100,32,0.12); color: var(--gold); } /* ── Mobile drop-down menu (hardcoded rgba in source, needs explicit override) */ [data-theme="light"] .mobile-menu { background: rgba(244,240,232,0.98) !important; border-bottom-color: var(--gold-dim); } [data-theme="light"] .mobile-menu .nav-link { color: #5a3e18; } [data-theme="light"] .mobile-menu .mobile-sep { background: var(--gold-dim); } /* ── Modal overlay ────────────────────────────────────────────────────────── */ [data-theme="light"] .modal-overlay { background: rgba(180,165,140,0.65) !important; } [data-theme="light"] .modal { box-shadow: 0 8px 40px rgba(0,0,0,0.12); } /* ── Inputs & selects ─────────────────────────────────────────────────────── */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="number"], [data-theme="light"] input[type="date"], [data-theme="light"] select, [data-theme="light"] textarea { background: var(--bg-light); color: var(--gold-light); border-color: var(--gold-dim); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #b09060; } [data-theme="light"] select option { background: var(--bg-mid); color: var(--gold-light); } /* ── Tables ───────────────────────────────────────────────────────────────── */ [data-theme="light"] thead { background: var(--bg-light); } [data-theme="light"] td { color: var(--gold-light); border-top-color: var(--gold-dim); } [data-theme="light"] tr:hover td { background: rgba(140,100,32,0.04); } /* ── Hardcoded hint/muted text (dark mode uses #4a7070) ───────────────────── */ [data-theme="light"] .label-hint, [data-theme="light"] .drop-hint, [data-theme="light"] .td-empty, [data-theme="light"] .browser-empty, [data-theme="light"] .folder-note, [data-theme="light"] .modal-sub { color: #907050; } /* ── Drop zone ────────────────────────────────────────────────────────────── */ [data-theme="light"] .drop-zone { border-color: var(--gold-dim); background: var(--bg-light); } [data-theme="light"] .drop-zone:hover, [data-theme="light"] .drop-zone.drag-over { border-color: var(--gold); background: rgba(140,100,32,0.05); } /* ── Proposal builder specific ────────────────────────────────────────────── */ [data-theme="light"] .area-block { background: var(--bg-light) !important; } [data-theme="light"] .option-block { background: var(--bg-mid) !important; } [data-theme="light"] .line-item { background: var(--bg-mid) !important; } [data-theme="light"] .attachment-item { background: var(--bg-light) !important; } [data-theme="light"] .sidebar-panel { background: var(--bg-mid) !important; border-color: var(--gold-dim); } /* ── Proposal sidebar nav (client-facing) ─────────────────────────────────── */ [data-theme="light"] .proposal-nav { background: rgba(244,240,232,0.97) !important; border-right-color: var(--gold-dim); } [data-theme="light"] .pnav-btn { color: rgba(42,28,8,0.55); } [data-theme="light"] .pnav-btn:hover { color: var(--gold-light); background: rgba(140,100,32,0.06); } [data-theme="light"] .pnav-btn.active { color: var(--gold); background: rgba(140,100,32,0.09); } [data-theme="light"] .pnav-area { color: var(--gold-dim); } [data-theme="light"] .pnav-area.active { color: var(--gold); } [data-theme="light"] .pnav-total { background: var(--bg-light); } /* ── Toast / notification ─────────────────────────────────────────────────── */ [data-theme="light"] .toast.success { background: rgba(30,122,66,0.1); border-color: rgba(30,122,66,0.3); color: #1e7a42; } [data-theme="light"] .toast.error { background: rgba(160,36,36,0.1); border-color: rgba(160,36,36,0.3); color: #a02424; } /* ── Scrollbar (webkit) ───────────────────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-light); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ══════════════════════════════════════════════════════════════════════════════ Theme toggle button — visible in both modes, lives in the nav ══════════════════════════════════════════════════════════════════════════ */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid var(--gold-dim); border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--gold-dim); transition: border-color 0.2s, color 0.2s, background 0.2s; flex-shrink: 0; padding: 0; -webkit-tap-highlight-color: transparent; } .theme-toggle-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb),0.08); } /* ── VANTaiGE AI Buttons — shared style for all ✦ VANTaiGE features ─────────── */ .v-ai-btn { display: inline-flex; align-items: center; gap: 0; padding: 8px 16px; background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.13), rgba(var(--gold-rgb),0.07)); border: 1px solid rgba(139,92,246,0.45); border-radius: 6px; color: #c4a8f0; font-family: var(--font); font-size: 11px; letter-spacing: 1.4px; cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; box-shadow: 0 0 8px rgba(139,92,246,0.1); } .v-ai-btn:hover { background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(139,92,246,0.22), rgba(var(--gold-rgb),0.1)); border-color: rgba(139,92,246,0.72); box-shadow: 0 0 14px rgba(139,92,246,0.22); } .v-ai-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .v-ai-btn .v-ai-mark { font-size: 13px; opacity: 0.85; margin-right: 7px; } /* label wrapper — consolidates all text into one flex item so v-ai-lower spans inside it are inline, never separate flex items */ .v-ai-btn .v-ai-label { display: inline; } /* lowercase accent letters — italic, stays lowercase */ .v-ai-btn .v-ai-lower { font-style: italic; } /* light-mode tint */ [data-theme="light"] .v-ai-btn { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.08)); border-color: rgba(99,102,241,0.4); color: #5b5bd6; box-shadow: none; } [data-theme="light"] .v-ai-btn:hover { background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(139,92,246,0.13)); border-color: rgba(99,102,241,0.65); }