/* ========================================================================== Vantage skin — custom interface layer (design-only, no functional change). Everything is scoped under `.skin-vantage` (added to ) so it can be removed by deleting one class + one without touching any logic. Loaded AFTER app.css so it wins the cascade via higher-specificity, scoped selectors (mostly without !important). ========================================================================== */ .skin-vantage { --sk-canvas: #EDF0F6; --sk-surface: #FFFFFF; --sk-border: #E4E8F1; --sk-border-soft: #EDF0F6; --sk-ink: #10182A; --sk-ink-soft: #5A6478; --sk-ink-faint: #8A93A6; /* Header flattened + desaturated toward a premium near-navy, derived from the business's chosen theme colour so per-business branding still works. */ --sk-header: color-mix(in srgb, var(--theme-900, #10182A) 82%, #0B1020); --sk-header-2: color-mix(in srgb, var(--theme-800, #1b2540) 82%, #0B1020); --sk-accent: var(--theme-700, #2F5BEA); --sk-accent-weak: color-mix(in srgb, var(--theme-700, #2F5BEA) 12%, transparent); /* Dark left rail (sidebar) tokens */ --sk-rail: #0F1C30; --sk-rail-card: #17293F; --sk-rail-line: rgba(255, 255, 255, 0.08); --sk-rail-text: #9DAABF; --sk-rail-text-strong:#F2F5FA; --sk-rail-icon: #6E7D93; /* Brightened brand accent so it reads on the dark rail (derived from theme). */ --sk-rail-accent: color-mix(in srgb, var(--theme-700, #16A34A) 55%, #FFFFFF); --sk-wa-green: #25D366; background-color: var(--sk-canvas); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ---- Canvas surfaces ---------------------------------------------------- */ .skin-vantage main, .skin-vantage #scrollable-container { background-color: var(--sk-canvas); } /* ========================================================================== HEADER — WHITE top bar + white dashboard band (matches the attachment). Scoped to `.theme-header-bg` which is used ONLY by the top bar + dashboard welcome band, so no primary buttons elsewhere are affected. ========================================================================== */ .skin-vantage .theme-header-bg { background-image: none; background-color: #FFFFFF; } /* Top navigation bar: recolour its existing bottom border to a neutral hairline. */ .skin-vantage .theme-header-bg.no-print { border-color: var(--sk-border); } /* Flip header text (icons + labels) from white to dark ink. */ .skin-vantage .theme-header-bg .tw-text-white, .skin-vantage .theme-header-bg .text-white, .skin-vantage .theme-header-bg h1 { color: var(--sk-ink) !important; } /* Header action buttons: light pills with a hairline border instead of solid theme blocks. */ .skin-vantage .theme-header-bg .theme-btn-bg { background-color: #F3F5F9; border: 1px solid var(--sk-border); border-radius: 9px; color: var(--sk-ink); transition: background-color .16s ease, border-color .16s ease; } .skin-vantage .theme-header-bg .theme-btn-bg:hover { background-color: #E9EDF4; border-color: #D5DBE6; } .skin-vantage .theme-header-bg .theme-btn-bg:active, .skin-vantage .theme-header-bg .theme-btn-bg:focus, .skin-vantage .theme-header-bg .theme-btn-bg:focus-visible { background-color: #E4E9F1; outline: 2px solid var(--sk-accent-weak); outline-offset: 0; } /* Dashboard "Filter by date" button: add a hairline so it reads on white. */ .skin-vantage #dashboard_date_filter { border: 1px solid var(--sk-border); } /* Welcome heading on the dashboard band. */ .skin-vantage .theme-header-bg h1 { letter-spacing: -0.02em; font-weight: 700; } /* ========================================================================== SIDEBAR — DARK left rail with left-bar active state ========================================================================== */ .skin-vantage aside.side-bar { background-color: var(--sk-rail); background-image: linear-gradient(to bottom, #12213A 0%, var(--sk-rail) 40%); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 8px 0 28px -22px rgba(0, 0, 0, 0.7); } .skin-vantage #side-bar { border-right: none; } /* Neutralise the stock light hairline borders inside the dark rail. */ .skin-vantage aside.side-bar .tw-border-gray-200, .skin-vantage aside.side-bar .tw-border-r { border-color: var(--sk-rail-line); } /* Logo / brand block: blend into the dark rail with a divider line. */ .skin-vantage .theme-logo-bg { background-color: transparent; box-shadow: inset 0 -1px 0 var(--sk-rail-line); } .skin-vantage .side-bar-heading { letter-spacing: 0.01em; font-weight: 600; color: var(--sk-rail-text-strong); } /* Search box in the sidebar → dark variant. */ .skin-vantage aside.side-bar .tw-bg-gray-100 { background-color: rgba(255, 255, 255, 0.05); border-color: var(--sk-rail-line); border-radius: 9px; } .skin-vantage aside.side-bar #sidebar-search { color: var(--sk-rail-text-strong); } .skin-vantage aside.side-bar #sidebar-search::placeholder { color: var(--sk-rail-icon); } .skin-vantage aside.side-bar .tw-bg-gray-100 svg { color: var(--sk-rail-icon); } /* Menu items */ .skin-vantage #side-bar a.theme-sidebar-hover, .skin-vantage #side-bar a.drop_down { position: relative; border-radius: 9px; font-weight: 500; color: var(--sk-rail-text); } .skin-vantage #side-bar .theme-sidebar-hover:hover, .skin-vantage #side-bar .theme-sidebar-hover:focus { background-color: rgba(255, 255, 255, 0.05); color: var(--sk-rail-text-strong); } /* Active parent/link: subtle fill + bright accent left bar + white text. */ .skin-vantage #side-bar .theme-sidebar-active { background-color: rgba(255, 255, 255, 0.08); color: var(--sk-rail-text-strong); font-weight: 600; } .skin-vantage #side-bar a.theme-sidebar-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background-color: var(--sk-rail-accent); } .skin-vantage #side-bar a svg, .skin-vantage #side-bar a i { color: var(--sk-rail-icon); } .skin-vantage #side-bar a:hover svg, .skin-vantage #side-bar a:hover i { color: var(--sk-rail-text-strong); } .skin-vantage #side-bar a.theme-sidebar-active svg, .skin-vantage #side-bar a.theme-sidebar-active i { color: var(--sk-rail-accent); } /* Child items */ .skin-vantage #side-bar .theme-sidebar-child-hover { color: var(--sk-rail-text); } .skin-vantage #side-bar .theme-sidebar-child-active { color: var(--sk-rail-accent); font-weight: 600; } .skin-vantage #side-bar .theme-sidebar-child-hover:hover { color: var(--sk-rail-text-strong); } /* Child connector line */ .skin-vantage #side-bar .chiled .tw-bg-gray-100 { background-color: var(--sk-rail-line); } /* Section header labels + no-results text */ .skin-vantage #side-bar .tw-uppercase { color: var(--sk-rail-icon); letter-spacing: 0.08em; } .skin-vantage #sidebar-no-results { color: var(--sk-rail-icon); } /* ========================================================================== NEED HELP card (bottom of the dark rail) ========================================================================== */ .skin-vantage .skin-help-wrap { flex-shrink: 0; padding: 12px; margin-top: auto; } .skin-vantage .skin-help-card { background-color: var(--sk-rail-card); border: 1px solid var(--sk-rail-line); border-radius: 14px; padding: 16px 14px 14px; text-align: center; } .skin-vantage .skin-help-avatar { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sk-rail-accent); background-color: color-mix(in srgb, var(--sk-rail-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sk-rail-accent) 30%, transparent); } .skin-vantage .skin-help-avatar svg { width: 24px; height: 24px; } .skin-vantage .skin-help-title { margin: 0 0 4px; color: var(--sk-rail-text-strong); font-size: 14.5px; font-weight: 700; } .skin-vantage .skin-help-text { margin: 0 0 12px; color: var(--sk-rail-text); font-size: 12px; line-height: 1.5; } .skin-vantage a.skin-help-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .12s ease; } .skin-vantage a.skin-help-btn svg { width: 16px; height: 16px; flex: none; } .skin-vantage a.skin-help-btn span { font-variant-numeric: tabular-nums; } .skin-vantage a.skin-help-call { background-color: rgba(255, 255, 255, 0.06); border: 1px solid var(--sk-rail-line); color: var(--sk-rail-text-strong); margin-bottom: 8px; } .skin-vantage a.skin-help-call:hover { background-color: rgba(255, 255, 255, 0.12); transform: translateY(-1px); } .skin-vantage a.skin-help-call svg { color: var(--sk-rail-accent); } .skin-vantage a.skin-help-wa { background-color: var(--sk-wa-green); color: #05270F; border: 1px solid transparent; } .skin-vantage a.skin-help-wa:hover { background-color: #1EBE5A; transform: translateY(-1px); } /* Hide the help card when the rail is collapsed to an icon strip. */ .skin-vantage.sidebar-collapse .skin-help-wrap { display: none; } /* ========================================================================== CARDS / PANELS — the pattern used by stat tiles, charts, widgets, tables ========================================================================== */ .skin-vantage .tw-rounded-xl.tw-ring-1.tw-ring-gray-200 { border-radius: 14px; box-shadow: 0 0 0 1px var(--sk-border), 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 26px -20px rgba(16, 24, 40, 0.20); transition: box-shadow .2s ease, transform .2s ease; } .skin-vantage .tw-rounded-xl.tw-ring-1.tw-ring-gray-200:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-accent) 30%, var(--sk-border)), 0 1px 2px rgba(16, 24, 40, 0.05), 0 20px 34px -20px rgba(16, 24, 40, 0.26); } /* Card / panel titles */ .skin-vantage .box-title, .skin-vantage h3.tw-font-bold { color: var(--sk-ink); letter-spacing: -0.01em; } /* ========================================================================== STAT TILES — turn the pastel *circular* badges into brand squircle tiles (this is the single strongest visual "tell" of the stock template) ========================================================================== */ .skin-vantage .tw-rounded-full.tw-bg-sky-100, .skin-vantage .tw-rounded-full.tw-bg-green-100, .skin-vantage .tw-rounded-full.tw-bg-yellow-100, .skin-vantage .tw-rounded-full.tw-bg-red-100 { border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.04); } /* Slightly richer, more saturated tint so tiles read as intentional. */ .skin-vantage .tw-rounded-full.tw-bg-sky-100 { background-color: #E3F0FF; color: #1D6FD6; } .skin-vantage .tw-rounded-full.tw-bg-green-100 { background-color: #E3F6EC; color: #1C9E63; } .skin-vantage .tw-rounded-full.tw-bg-yellow-100 { background-color: #FCEFD6; color: #C9860B; } .skin-vantage .tw-rounded-full.tw-bg-red-100 { background-color: #FDE7E7; color: #D6473C; } /* The big stat number */ .skin-vantage .tw-font-mono.tw-text-xl { font-family: "Inter", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: -0.02em; color: var(--sk-ink); } /* Chart-card round icon frames: soften to squircle to match the new language. */ .skin-vantage .tw-border-2.tw-rounded-full.tw-w-10.tw-h-10 { border-radius: 12px; border-color: var(--sk-border); background-color: var(--sk-canvas); } /* ========================================================================== TABLES — lighter, more modern header row (uses vendor `.table`) ========================================================================== */ .skin-vantage table.table > thead > tr > th { background-color: var(--sk-canvas); color: var(--sk-ink-soft); border-bottom: 1px solid var(--sk-border); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.04em; font-weight: 600; } .skin-vantage table.table > tbody > tr > td { border-color: var(--sk-border-soft); } /* ========================================================================== Small polish ========================================================================== */ .skin-vantage .form-control { border-radius: 9px; } .skin-vantage ::selection { background: color-mix(in srgb, var(--sk-accent) 22%, transparent); }