/* ================================================================
VERDANT STONE PRIVATE — verdant-theme.css v2
Institutional Quantitative Asset Management
----------------------------------------------------------------
OVERRIDE FILE — safe, non-destructive colour + typography theme.
Only touches: color, background-color, background, border-color,
box-shadow, fill, stroke, font-family, font-size, letter-spacing.
Never touches: display, position, padding, margin, width, height,
grid, flex, or z-index.
INSTALLATION
─────────────
Upload to: mixpanel/assets/css/verdant-theme.css
In logo.tpl add as the LAST inside :
PALETTE (from the Verdant Stone Private logo)
─────────────────────────────────────────────
Deep shadow #0d1710 darkest base, footers
Marble bg #12201a page background
Panel surface #192b20 sidebar, secondary panels
Card surface #1e3228 cards, modals, inputs
Elevated surface #243d2e dropdowns, table headers
Emerald dark #2d6040 gem body / success deep
Emerald bright #4e9967 success states, active
Sage accent #6b9e84 info / neutral accent (replaces all blue)
Gold deep #a8872e gold shadow
Gold primary #c9a84c brand — CTAs, headings, links
Gold light #dfc880 hover states
Gold cream #e8d5a3 body text, secondary headings
Gold bright #f5e88a active / focus highlights
================================================================ */
/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');
/* ================================================================
1. ROOT TOKENS
Covers generic template variables AND Bootstrap 5 --bs-* vars.
Every blue Bootstrap uses by default is neutralised here.
================================================================ */
:root {
/* ── Bootstrap 5 core colour tokens (eliminates all blue) ─── */
--bs-blue: #c9a84c !important; /* was #0d6efd */
--bs-indigo: #a8872e !important; /* was #6610f2 */
--bs-purple: #a8872e !important; /* was #6f42c1 */
--bs-cyan: #6b9e84 !important; /* was #0dcaf0 */
--bs-teal: #4e9967 !important; /* was #20c997 */
--bs-primary: #c9a84c !important;
--bs-primary-rgb: 201,168,76 !important;
--bs-secondary: #8a9e8d !important;
--bs-secondary-rgb: 138,158,141 !important;
--bs-success: #4e9967 !important;
--bs-success-rgb: 78,153,103 !important;
--bs-info: #6b9e84 !important; /* sage, not blue */
--bs-info-rgb: 107,158,132 !important;
--bs-warning: #c9a84c !important;
--bs-warning-rgb: 201,168,76 !important;
--bs-danger: #c0504a !important;
--bs-danger-rgb: 192,80,74 !important;
--bs-light: #243d2e !important;
--bs-light-rgb: 36,61,46 !important;
--bs-dark: #0d1710 !important;
--bs-dark-rgb: 13,23,16 !important;
--bs-white: #e8d5a3 !important;
--bs-white-rgb: 232,213,163 !important;
--bs-black: #0d1710 !important;
--bs-body-color: #e8d5a3 !important;
--bs-body-color-rgb: 232,213,163 !important;
--bs-body-bg: #12201a !important;
--bs-body-bg-rgb: 18,32,26 !important;
--bs-emphasis-color: #e8d5a3 !important;
--bs-secondary-color: rgba(232,213,163,0.75) !important;
--bs-secondary-bg: #192b20 !important;
--bs-tertiary-color: rgba(232,213,163,0.50) !important;
--bs-tertiary-bg: #1e3228 !important;
--bs-heading-color: #c9a84c !important;
--bs-link-color: #c9a84c !important;
--bs-link-color-rgb: 201,168,76 !important;
--bs-link-hover-color: #dfc880 !important;
--bs-link-hover-color-rgb: 223,200,128 !important;
--bs-border-color: rgba(201,168,76,0.22) !important;
--bs-border-color-translucent: rgba(201,168,76,0.15) !important;
--bs-focus-ring-color: rgba(201,168,76,0.30) !important;
--bs-focus-ring-width: 3px !important;
--bs-focus-ring-opacity: 0.3 !important;
--bs-box-shadow: 0 4px 16px rgba(13,23,16,0.65) !important;
--bs-box-shadow-sm: 0 1px 4px rgba(13,23,16,0.55) !important;
--bs-box-shadow-lg: 0 8px 32px rgba(13,23,16,0.75) !important;
--bs-box-shadow-inset: inset 0 1px 3px rgba(13,23,16,0.55) !important;
/* ── Generic template variables (non-Bootstrap frameworks) ── */
--background: #12201a !important;
--background-alt: #0d1710 !important;
--body-bg: #12201a !important;
--app-bg: #12201a !important;
--page-bg: #12201a !important;
--surface: #1e3228 !important;
--surface-alt: #192b20 !important;
--card-bg: #1e3228 !important;
--card-background: #1e3228 !important;
--panel-bg: #1e3228 !important;
--modal-bg: #1e3228 !important;
--sidebar-bg: #192b20 !important;
--navbar-bg: #12201a !important;
--header-bg: #12201a !important;
--dropdown-bg: #243d2e !important;
--input-bg: #1e3228 !important;
--overlay-bg: rgba(13,23,16,0.88) !important;
--tooltip-bg: #0d1710 !important;
--table-header-bg: #243d2e !important;
--table-striped-bg: rgba(13,23,16,0.35) !important;
--table-hover-bg: rgba(201,168,76,0.05) !important;
--primary: #c9a84c !important;
--primary-hover: #dfc880 !important;
--primary-active: #f5e88a !important;
--primary-muted: rgba(201,168,76,0.18) !important;
--primary-border: rgba(201,168,76,0.45) !important;
--brand: #c9a84c !important;
--accent: #c9a84c !important;
--link-color: #c9a84c !important;
--link-hover-color: #dfc880 !important;
--text-primary: #e8d5a3 !important;
--text-secondary: #c9a84c !important;
--text-muted: #8a9e8d !important;
--text-disabled: #526057 !important;
--text-inverse: #0d1710 !important;
--heading-color: #c9a84c !important;
--body-color: #e8d5a3 !important;
--border-color: rgba(201,168,76,0.22) !important;
--border-color-hover: rgba(201,168,76,0.45) !important;
--border-color-focus: #c9a84c !important;
--divider-color: rgba(201,168,76,0.18) !important;
--success: #4e9967 !important;
--success-bg: rgba(78,153,103,0.12) !important;
--success-border: rgba(78,153,103,0.35) !important;
--success-text: #4e9967 !important;
--warning: #c9a84c !important;
--warning-bg: rgba(201,168,76,0.12) !important;
--warning-text: #c9a84c !important;
--danger: #c0504a !important;
--danger-bg: rgba(192,80,74,0.12) !important;
--danger-text: #e07a74 !important;
--info: #6b9e84 !important; /* sage — no blue */
--info-bg: rgba(107,158,132,0.12) !important;
--info-border: rgba(107,158,132,0.35) !important;
--info-text: #6b9e84 !important;
--shadow-sm: 0 1px 4px rgba(13,23,16,0.55) !important;
--shadow-md: 0 4px 16px rgba(13,23,16,0.65) !important;
--shadow-lg: 0 8px 32px rgba(13,23,16,0.75) !important;
--box-shadow: 0 4px 16px rgba(13,23,16,0.65) !important;
--focus-ring-color: rgba(201,168,76,0.30) !important;
--focus-ring-shadow: 0 0 0 3px rgba(201,168,76,0.25) !important;
}
/* ================================================================
2. BASE — html, body, global defaults
================================================================ */
html {
background-color: #12201a !important;
/* Sets the rem base: 16px makes all rem values comfortable */
font-size: 16px !important;
}
body {
background-color: #12201a !important;
color: #e8d5a3 !important;
font-family: 'Jost', system-ui, sans-serif !important;
font-size: 15px !important;
line-height: 1.65 !important;
}
/* Marble grain texture overlay */
body::after {
content: '' !important;
position: fixed !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 99999 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") !important;
background-repeat: repeat !important;
}
::selection {
background: rgba(201,168,76,0.28) !important;
color: #e8d5a3 !important;
}
::-webkit-scrollbar-track { background: #0d1710 !important; }
::-webkit-scrollbar-thumb { background: #a8872e !important; }
::-webkit-scrollbar-thumb:hover { background: #c9a84c !important; }
:focus-visible {
outline-color: #c9a84c !important;
box-shadow: 0 0 0 3px rgba(201,168,76,0.25) !important;
}
/* ================================================================
3. TYPOGRAPHY — colour AND readable sizes
================================================================ */
/* ── Headings ────────────────────────────────────────────────── */
h1, .h1 {
font-family: 'Cinzel', serif !important;
font-size: 2.25rem !important; /* 36px */
color: #c9a84c !important;
line-height: 1.2 !important;
}
h2, .h2 {
font-family: 'Cinzel', serif !important;
font-size: 1.75rem !important; /* 28px */
color: #c9a84c !important;
line-height: 1.25 !important;
}
h3, .h3 {
font-family: 'Cinzel', serif !important;
font-size: 1.375rem !important; /* 22px */
color: #e8d5a3 !important;
line-height: 1.3 !important;
}
h4, .h4 {
font-family: 'Cinzel', serif !important;
font-size: 1.125rem !important; /* 18px */
color: #e8d5a3 !important;
line-height: 1.35 !important;
}
h5, .h5 {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important; /* 15px */
color: #8a9e8d !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
}
h6, .h6 {
font-family: 'Jost', sans-serif !important;
font-size: 0.8125rem !important; /* 13px */
color: #8a9e8d !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
/* ── Body text ───────────────────────────────────────────────── */
p {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.0625rem !important; /* 17px — comfortable reading */
color: #e8d5a3 !important;
line-height: 1.75 !important;
}
/* List items in content areas */
li {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 1.0625rem !important;
color: #e8d5a3 !important;
line-height: 1.7 !important;
}
a {
color: #c9a84c !important;
text-decoration: none !important;
}
a:hover, a:focus {
color: #dfc880 !important;
}
strong, b { color: #e8d5a3 !important; }
em, i { color: #e8d5a3 !important; }
/* small text: 12px minimum — never let it go below this */
small, .small {
font-size: 0.8125rem !important; /* 13px */
color: #8a9e8d !important;
}
/* Caption / footnote */
.caption,
.text-caption,
figcaption {
font-family: 'Jost', sans-serif !important;
font-size: 0.75rem !important; /* 12px */
color: #8a9e8d !important;
}
blockquote {
font-size: 1.0625rem !important;
border-left-color: #c9a84c !important;
color: #e8d5a3 !important;
}
code {
font-size: 0.875rem !important;
background-color: rgba(201,168,76,0.10) !important;
border-color: rgba(201,168,76,0.22) !important;
color: #e8d5a3 !important;
}
pre {
font-size: 0.875rem !important;
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.22) !important;
color: #e8d5a3 !important;
}
hr { border-color: rgba(201,168,76,0.20) !important; }
/* Muted text */
.text-muted,
.text-secondary,
.text-gray,
.text-grey,
[class*="text-muted"] {
color: #8a9e8d !important;
font-size: inherit !important;
}
/* ================================================================
4. NAVIGATION
================================================================ */
/* ── Top navbar / header ─────────────────────────────────────── */
.navbar,
.nav,
.header,
.app-header,
.main-header,
.topbar,
.top-bar,
[class*="navbar"],
[class*="header"] {
background-color: rgba(18,32,26,0.97) !important;
border-bottom-color: rgba(201,168,76,0.22) !important;
box-shadow: 0 2px 16px rgba(13,23,16,0.70) !important;
}
/* ── Nav links — key font size fix ──────────────────────────── */
.navbar .nav-link,
.navbar .nav-item > a,
.nav-link,
.menu-link,
.menu-item > a,
[class*="nav-link"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important; /* 14px — clear and readable */
font-weight: 500 !important;
letter-spacing: 0.05em !important;
color: #8a9e8d !important;
}
.navbar .nav-link:hover,
.nav-link:hover,
.menu-link:hover {
color: #c9a84c !important;
background-color: rgba(201,168,76,0.08) !important;
}
.navbar .nav-link.active,
.nav-link.active,
.menu-link.active,
.nav-item.active > a {
color: #c9a84c !important;
background-color: rgba(201,168,76,0.12) !important;
}
.navbar-brand,
.nav-brand,
.logo-text,
.brand-text,
[class*="brand"] {
font-family: 'Cinzel', serif !important;
font-size: 1.0625rem !important; /* 17px */
color: #c9a84c !important;
}
/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar,
.side-nav,
.sidenav,
.aside,
.left-panel,
.nav-sidebar,
[class*="sidebar"],
[class*="side-nav"] {
background-color: #192b20 !important;
border-right-color: rgba(201,168,76,0.18) !important;
}
.sidebar .nav-link,
.sidebar .menu-link,
.sidebar .sidebar-link,
.sidenav .nav-link,
[class*="sidebar"] .nav-link {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important; /* 14px */
font-weight: 400 !important;
letter-spacing: 0.03em !important;
color: #8a9e8d !important;
}
.sidebar .nav-link:hover,
.sidenav .nav-link:hover,
[class*="sidebar"] .nav-link:hover {
color: #e8d5a3 !important;
background-color: rgba(201,168,76,0.08) !important;
}
.sidebar .nav-link.active,
.sidenav .nav-link.active,
[class*="sidebar"] .nav-link.active {
color: #c9a84c !important;
background-color: rgba(201,168,76,0.14) !important;
border-left-color: #c9a84c !important;
}
.sidebar .nav-header,
.sidebar .menu-header,
.sidebar-heading,
[class*="sidebar"] .nav-header {
font-family: 'Jost', sans-serif !important;
font-size: 0.6875rem !important; /* 11px — section label only */
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #526057 !important;
}
/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
background-color: transparent !important;
font-size: 0.875rem !important; /* 14px */
}
.breadcrumb-item,
.breadcrumb-item a { color: #8a9e8d !important; font-family: 'Jost', sans-serif !important; }
.breadcrumb-item a:hover { color: #c9a84c !important; }
.breadcrumb-item.active { color: #e8d5a3 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #526057 !important; }
/* ================================================================
5. CARDS, PANELS, WIDGETS
================================================================ */
.card, .panel, .widget, .box, .tile, .block,
[class*="card"], [class*="panel"], [class*="widget"] {
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.22) !important;
box-shadow: 0 4px 16px rgba(13,23,16,0.60) !important;
color: #e8d5a3 !important;
}
.card-header, .panel-header, .widget-header, .box-header,
[class*="card-header"], [class*="panel-header"] {
background-color: rgba(36,61,46,0.60) !important;
border-bottom-color: rgba(201,168,76,0.22) !important;
color: #c9a84c !important;
}
.card-title, .panel-title, .widget-title, .box-title,
[class*="card-title"] {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important; /* 16px */
color: #c9a84c !important;
}
.card-subtitle,
[class*="card-subtitle"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.8125rem !important; /* 13px */
color: #8a9e8d !important;
}
.card-text, .card-body p,
[class*="card-body"] p {
font-size: 0.9375rem !important; /* 15px */
color: #e8d5a3 !important;
}
.card-footer, .panel-footer,
[class*="card-footer"] {
background-color: rgba(13,23,16,0.35) !important;
border-top-color: rgba(201,168,76,0.18) !important;
font-size: 0.8125rem !important; /* 13px */
color: #8a9e8d !important;
}
.card-body, .panel-body,
[class*="card-body"] {
color: #e8d5a3 !important;
}
/* ================================================================
6. BUTTONS
================================================================ */
.btn,
button[type="submit"],
button[type="button"],
[class*="btn"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important; /* 14px */
font-weight: 600 !important;
letter-spacing: 0.07em !important;
}
/* Sizes */
.btn-sm, [class*="btn-sm"] { font-size: 0.8125rem !important; } /* 13px */
.btn-lg, [class*="btn-lg"] { font-size: 1rem !important; } /* 16px */
/* Primary — gold */
.btn-primary, .btn-brand,
[class*="btn-primary"] {
background: linear-gradient(135deg,#a8872e,#c9a84c,#a8872e) !important;
border-color: #a8872e !important;
color: #0d1710 !important;
box-shadow: 0 2px 12px rgba(201,168,76,0.35) !important;
}
.btn-primary:hover,
.btn-brand:hover {
background: linear-gradient(135deg,#c9a84c,#dfc880,#c9a84c) !important;
border-color: #c9a84c !important;
box-shadow: 0 4px 20px rgba(201,168,76,0.50) !important;
color: #0d1710 !important;
}
.btn-primary:focus, .btn-primary:active {
box-shadow: 0 0 0 3px rgba(201,168,76,0.30) !important;
color: #0d1710 !important;
}
/* Secondary */
.btn-secondary, .btn-outline-primary, .btn-outline-secondary,
[class*="btn-outline"] {
background-color: transparent !important;
border-color: #c9a84c !important;
color: #c9a84c !important;
}
.btn-secondary:hover, .btn-outline-primary:hover,
[class*="btn-outline"]:hover {
background-color: rgba(201,168,76,0.12) !important;
border-color: #dfc880 !important;
color: #dfc880 !important;
}
/* Ghost / link */
.btn-ghost, .btn-link,
[class*="btn-ghost"] {
background-color: transparent !important;
border-color: transparent !important;
color: #8a9e8d !important;
}
.btn-ghost:hover, .btn-link:hover { color: #e8d5a3 !important; }
/* Info — was blue, now sage */
.btn-info, .btn-outline-info {
background-color: rgba(107,158,132,0.15) !important;
border-color: #6b9e84 !important;
color: #6b9e84 !important;
}
.btn-info:hover, .btn-outline-info:hover {
background-color: rgba(107,158,132,0.25) !important;
color: #e8d5a3 !important;
}
/* Success */
.btn-success, .btn-outline-success {
background-color: #2d6040 !important;
border-color: #2d6040 !important;
color: #e8d5a3 !important;
}
.btn-success:hover { background-color: #4e9967 !important; border-color: #4e9967 !important; }
/* Danger */
.btn-danger, .btn-outline-danger {
background-color: transparent !important;
border-color: #c0504a !important;
color: #e07a74 !important;
}
.btn-danger:hover { background-color: rgba(192,80,74,0.15) !important; }
/* Warning */
.btn-warning, .btn-outline-warning {
background-color: rgba(201,168,76,0.15) !important;
border-color: #c9a84c !important;
color: #c9a84c !important;
}
.btn-warning:hover { background-color: rgba(201,168,76,0.25) !important; }
/* Light / dark */
.btn-light { background-color: #243d2e !important; border-color: rgba(201,168,76,0.30) !important; color: #e8d5a3 !important; }
.btn-dark { background-color: #0d1710 !important; border-color: #0d1710 !important; color: #c9a84c !important; }
/* Focus ring — all */
.btn:focus, button:focus {
box-shadow: 0 0 0 3px rgba(201,168,76,0.25) !important;
}
/* ================================================================
7. FORMS & INPUTS
================================================================ */
label,
.form-label,
.col-form-label {
font-family: 'Jost', sans-serif !important;
font-size: 0.75rem !important; /* 12px — uppercase label */
font-weight: 600 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #8a9e8d !important;
}
/* Override Bootstrap's label that can look very small */
.form-floating > label {
font-size: 0.875rem !important; /* 14px for floating labels */
text-transform: none !important;
letter-spacing: 0.02em !important;
color: #8a9e8d !important;
}
input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select,
.form-control, .form-select, .input, .form-input {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important; /* 15px */
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.28) !important;
color: #e8d5a3 !important;
}
input::placeholder, textarea::placeholder,
.form-control::placeholder { color: #526057 !important; }
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-select:focus {
background-color: #243d2e !important;
border-color: #c9a84c !important;
box-shadow: 0 0 0 3px rgba(201,168,76,0.18) !important;
color: #e8d5a3 !important;
}
.input-group-text, .input-addon {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important;
background-color: #243d2e !important;
border-color: rgba(201,168,76,0.28) !important;
color: #8a9e8d !important;
}
select.form-select,
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23c9a84c'/%3E%3C/svg%3E") !important;
}
.is-invalid, .form-control.is-invalid { border-color: #c0504a !important; }
.is-valid, .form-control.is-valid { border-color: #4e9967 !important; }
.invalid-feedback, .form-error { font-size: 0.8125rem !important; color: #e07a74 !important; }
.valid-feedback { font-size: 0.8125rem !important; color: #4e9967 !important; }
.form-text, .form-hint { font-size: 0.8125rem !important; color: #8a9e8d !important; }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #c9a84c !important;
border-color: #c9a84c !important;
accent-color: #c9a84c !important;
}
input[type="range"] { accent-color: #c9a84c !important; }
/* ================================================================
8. TABLES
================================================================ */
table, .table {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important; /* 15px */
color: #e8d5a3 !important;
}
.table > thead, .table thead, thead {
background-color: #243d2e !important;
}
.table thead th, thead th {
font-family: 'Jost', sans-serif !important;
font-size: 0.75rem !important; /* 12px — uppercase column headers */
font-weight: 700 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #c9a84c !important;
border-color: rgba(201,168,76,0.30) !important;
white-space: nowrap !important;
}
.table tbody tr, tbody tr { border-color: rgba(201,168,76,0.12) !important; }
.table tbody tr:hover, tbody tr:hover {
background-color: rgba(201,168,76,0.05) !important;
color: #e8d5a3 !important;
}
.table-striped tbody tr:nth-of-type(even) {
background-color: rgba(13,23,16,0.35) !important;
}
.table td, .table th, td, th {
font-size: 0.9375rem !important;
border-color: rgba(201,168,76,0.12) !important;
color: #e8d5a3 !important;
}
tfoot td, tfoot th {
background-color: rgba(36,61,46,0.50) !important;
border-top-color: rgba(201,168,76,0.30) !important;
color: #e8d5a3 !important;
font-weight: 600 !important;
}
.sortable:hover, [data-sort]:hover {
color: #c9a84c !important;
background-color: rgba(201,168,76,0.06) !important;
}
/* ================================================================
9. BADGES, TAGS, PILLS
================================================================ */
.badge, .tag, .chip, .label, .pill,
[class*="badge"], [class*="label"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.6875rem !important; /* 11px — badges are compact */
font-weight: 700 !important;
letter-spacing: 0.08em !important;
}
.badge-primary, .badge.bg-primary,
.label-primary, [class*="badge-primary"] {
background-color: rgba(201,168,76,0.18) !important;
border: 1px solid rgba(201,168,76,0.40) !important;
color: #c9a84c !important;
}
.badge-success, .badge.bg-success,
[class*="badge-success"] {
background-color: rgba(78,153,103,0.15) !important;
border: 1px solid rgba(78,153,103,0.35) !important;
color: #4e9967 !important;
}
/* Info badge — sage, not blue */
.badge-info, .badge.bg-info,
[class*="badge-info"] {
background-color: rgba(107,158,132,0.15) !important;
border: 1px solid rgba(107,158,132,0.35) !important;
color: #6b9e84 !important;
}
.badge-warning, .badge.bg-warning,
[class*="badge-warning"] {
background-color: rgba(201,168,76,0.18) !important;
border: 1px solid rgba(201,168,76,0.40) !important;
color: #c9a84c !important;
}
.badge-danger, .badge.bg-danger,
[class*="badge-danger"] {
background-color: rgba(192,80,74,0.15) !important;
border: 1px solid rgba(192,80,74,0.35) !important;
color: #e07a74 !important;
}
.badge-secondary, .badge.bg-secondary,
[class*="badge-secondary"] {
background-color: rgba(138,158,141,0.12) !important;
border: 1px solid rgba(138,158,141,0.25) !important;
color: #8a9e8d !important;
}
.badge-light, .badge.bg-light {
background-color: rgba(36,61,46,0.70) !important;
color: #e8d5a3 !important;
}
.badge-dark, .badge.bg-dark {
background-color: #0d1710 !important;
color: #c9a84c !important;
}
/* ================================================================
10. ALERTS / NOTIFICATIONS
================================================================ */
.alert, [class*="alert"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important; /* 15px */
}
/* Info — sage, not blue */
.alert-info, .alert-primary {
background-color: rgba(107,158,132,0.12) !important;
border-color: rgba(107,158,132,0.40) !important;
color: #6b9e84 !important;
}
.alert-success {
background-color: rgba(78,153,103,0.12) !important;
border-color: rgba(78,153,103,0.40) !important;
color: #4e9967 !important;
}
.alert-warning {
background-color: rgba(201,168,76,0.12) !important;
border-color: rgba(201,168,76,0.45) !important;
color: #c9a84c !important;
}
.alert-danger, .alert-error {
background-color: rgba(192,80,74,0.12) !important;
border-color: rgba(192,80,74,0.40) !important;
color: #e07a74 !important;
}
.alert-secondary {
background-color: rgba(18,32,26,0.80) !important;
border-color: rgba(201,168,76,0.22) !important;
color: #8a9e8d !important;
}
/* Heading inside an alert */
.alert-heading {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important;
letter-spacing: 0.06em !important;
}
/* ================================================================
11. MODALS
================================================================ */
.modal-content, .modal-dialog,
[class*="modal-content"] {
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.40) !important;
box-shadow: 0 16px 64px rgba(13,23,16,0.85),
0 0 40px rgba(201,168,76,0.08) !important;
color: #e8d5a3 !important;
}
.modal-header, [class*="modal-header"] {
background-color: rgba(36,61,46,0.60) !important;
border-bottom-color: rgba(201,168,76,0.22) !important;
}
.modal-title, [class*="modal-title"] {
font-family: 'Cinzel', serif !important;
font-size: 1.125rem !important; /* 18px */
letter-spacing: 0.08em !important;
color: #c9a84c !important;
}
.modal-body {
font-size: 0.9375rem !important;
color: #e8d5a3 !important;
}
.modal-footer, [class*="modal-footer"] {
background-color: rgba(13,23,16,0.35) !important;
border-top-color: rgba(201,168,76,0.18) !important;
}
.modal-backdrop, .modal-overlay {
background-color: rgba(13,23,16,0.80) !important;
}
.btn-close {
filter: invert(1) sepia(1) saturate(2) hue-rotate(6deg) !important;
opacity: 0.6 !important;
}
.btn-close:hover { opacity: 1 !important; }
/* ================================================================
12. DROPDOWNS & MENUS
================================================================ */
.dropdown-menu, .dropdown-content, .context-menu,
[class*="dropdown-menu"] {
font-size: 0.9375rem !important; /* 15px */
background-color: #243d2e !important;
border-color: rgba(201,168,76,0.35) !important;
box-shadow: 0 8px 32px rgba(13,23,16,0.80) !important;
}
.dropdown-item, .dropdown-menu a,
[class*="dropdown-item"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important;
color: #e8d5a3 !important;
}
.dropdown-item:hover, .dropdown-item:focus,
[class*="dropdown-item"]:hover {
background-color: rgba(201,168,76,0.10) !important;
color: #c9a84c !important;
}
.dropdown-item.active, [class*="dropdown-item"].active {
background-color: rgba(201,168,76,0.18) !important;
color: #c9a84c !important;
}
.dropdown-divider, [class*="dropdown-divider"] {
border-color: rgba(201,168,76,0.18) !important;
}
.dropdown-header {
font-family: 'Jost', sans-serif !important;
font-size: 0.6875rem !important; /* 11px */
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #526057 !important;
}
/* ================================================================
13. TABS
================================================================ */
.nav-tabs, .tab-list, [class*="nav-tabs"] {
border-bottom-color: rgba(201,168,76,0.22) !important;
}
.nav-tabs .nav-link, .tab-item,
[class*="nav-tabs"] .nav-link {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important; /* 14px */
font-weight: 500 !important;
letter-spacing: 0.05em !important;
color: #8a9e8d !important;
border-color: transparent !important;
background-color: transparent !important;
}
.nav-tabs .nav-link:hover, [class*="nav-tabs"] .nav-link:hover {
color: #e8d5a3 !important;
background-color: rgba(201,168,76,0.05) !important;
border-color: rgba(201,168,76,0.20) rgba(201,168,76,0.20) transparent !important;
}
.nav-tabs .nav-link.active, [class*="nav-tabs"] .nav-link.active {
color: #c9a84c !important;
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.30) rgba(201,168,76,0.30) transparent !important;
}
.tab-content, .tab-pane {
font-size: 0.9375rem !important;
color: #e8d5a3 !important;
}
/* Pills */
.nav-pills .nav-link {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important;
color: #8a9e8d !important;
background-color: transparent !important;
}
.nav-pills .nav-link:hover { background-color: rgba(201,168,76,0.08) !important; color: #e8d5a3 !important; }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background-color: rgba(201,168,76,0.18) !important;
color: #c9a84c !important;
}
/* ================================================================
14. PROGRESS BARS
================================================================ */
.progress, [class*="progress-wrap"] {
background-color: #0d1710 !important;
border: 1px solid rgba(201,168,76,0.15) !important;
}
.progress-bar, [class*="progress-bar"] {
background: linear-gradient(90deg,#a8872e,#c9a84c) !important;
box-shadow: 0 0 8px rgba(201,168,76,0.45) !important;
color: #0d1710 !important;
font-size: 0.75rem !important;
}
.progress-bar.bg-success { background: linear-gradient(90deg,#2d6040,#4e9967) !important; }
.progress-bar.bg-info { background: linear-gradient(90deg,#3d6e58,#6b9e84) !important; } /* sage */
.progress-bar.bg-danger { background: linear-gradient(90deg,#8a3530,#c0504a) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg,#a8872e,#c9a84c) !important; }
/* ================================================================
15. TOOLTIPS & POPOVERS
================================================================ */
.tooltip-inner, .tooltip .tooltip-inner,
[class*="tooltip-inner"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.8125rem !important; /* 13px */
background-color: #0d1710 !important;
border: 1px solid rgba(201,168,76,0.35) !important;
color: #e8d5a3 !important;
}
.tooltip .tooltip-arrow::before,
.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #c9a84c !important; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #c9a84c !important; }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: #c9a84c !important; }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: #c9a84c !important; }
.popover, [class*="popover"] {
font-size: 0.9375rem !important;
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.40) !important;
box-shadow: 0 8px 32px rgba(13,23,16,0.70) !important;
}
.popover-header {
font-family: 'Cinzel', serif !important;
font-size: 0.875rem !important;
background-color: rgba(36,61,46,0.60) !important;
border-bottom-color: rgba(201,168,76,0.22) !important;
color: #c9a84c !important;
}
.popover-body {
font-size: 0.9375rem !important;
color: #e8d5a3 !important;
}
/* ================================================================
16. LIST GROUPS
================================================================ */
.list-group-item, [class*="list-group-item"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important;
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.18) !important;
color: #e8d5a3 !important;
}
.list-group-item:hover { background-color: rgba(201,168,76,0.06) !important; }
.list-group-item.active, [class*="list-group-item"].active {
background-color: rgba(201,168,76,0.16) !important;
border-color: rgba(201,168,76,0.40) !important;
color: #c9a84c !important;
}
/* ================================================================
17. PAGINATION
================================================================ */
.page-link, .pagination a, [class*="page-link"] {
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important; /* 14px */
background-color: transparent !important;
border-color: rgba(201,168,76,0.22) !important;
color: #8a9e8d !important;
}
.page-link:hover, .pagination a:hover {
background-color: rgba(201,168,76,0.10) !important;
border-color: rgba(201,168,76,0.45) !important;
color: #c9a84c !important;
}
.page-item.active .page-link, .pagination .active a {
background-color: #c9a84c !important;
border-color: #c9a84c !important;
color: #0d1710 !important;
}
.page-item.disabled .page-link {
background-color: transparent !important;
border-color: rgba(201,168,76,0.12) !important;
color: #526057 !important;
}
/* ================================================================
18. FOOTER
================================================================ */
footer, .footer, .site-footer, [class*="footer"] {
background-color: #192b20 !important;
border-top-color: rgba(201,168,76,0.20) !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important;
color: #8a9e8d !important;
}
footer a, .footer a { color: #8a9e8d !important; }
footer a:hover, .footer a:hover { color: #c9a84c !important; }
/* ================================================================
19. BOOTSTRAP UTILITY OVERRIDES
bg-* / text-* / border-* helper classes — all blue purged
================================================================ */
.bg-primary { background-color: rgba(201,168,76,0.18) !important; }
.bg-secondary { background-color: #192b20 !important; }
.bg-success { background-color: rgba(78,153,103,0.18) !important; }
.bg-danger { background-color: rgba(192,80,74,0.18) !important; }
.bg-warning { background-color: rgba(201,168,76,0.18) !important; }
.bg-info { background-color: rgba(107,158,132,0.18) !important; } /* sage */
.bg-light { background-color: #243d2e !important; }
.bg-dark { background-color: #0d1710 !important; }
.bg-white { background-color: #1e3228 !important; }
.text-primary { color: #c9a84c !important; }
.text-secondary { color: #8a9e8d !important; }
.text-success { color: #4e9967 !important; }
.text-danger { color: #e07a74 !important; }
.text-warning { color: #c9a84c !important; }
.text-info { color: #6b9e84 !important; } /* sage — was blue */
.text-dark { color: #e8d5a3 !important; }
.text-white { color: #e8d5a3 !important; }
.text-body { color: #e8d5a3 !important; }
.text-light { color: #e8d5a3 !important; }
.text-black { color: #e8d5a3 !important; }
.border { border-color: rgba(201,168,76,0.22) !important; }
.border-primary { border-color: rgba(201,168,76,0.55) !important; }
.border-secondary { border-color: rgba(138,158,141,0.35) !important; }
.border-success { border-color: rgba(78,153,103,0.55) !important; }
.border-danger { border-color: rgba(192,80,74,0.55) !important; }
.border-warning { border-color: rgba(201,168,76,0.55) !important; }
.border-info { border-color: rgba(107,158,132,0.55) !important; } /* sage */
.border-light { border-color: rgba(201,168,76,0.18) !important; }
.border-dark { border-color: rgba(13,23,16,0.80) !important; }
/* Hardcoded blue that sometimes leaks from vendor CSS */
[style*="color: #007bff"],
[style*="color:#007bff"],
[style*="color: #0d6efd"],
[style*="color:#0d6efd"],
[style*="color: rgb(13, 110, 253)"] { color: #c9a84c !important; }
[style*="background-color: #007bff"],
[style*="background-color:#007bff"],
[style*="background-color: #0d6efd"],
[style*="background-color:#0d6efd"] { background-color: rgba(201,168,76,0.18) !important; }
/* ================================================================
20. SVG ICONS
================================================================ */
.icon, .nav-icon, .menu-icon,
svg.icon, [class*="icon"] svg {
fill: currentColor !important;
stroke: currentColor !important;
}
.sidebar .icon, .nav-link .icon, .menu-link .icon { color: #8a9e8d !important; }
.sidebar .nav-link.active .icon, .nav-link.active .icon { color: #c9a84c !important; }
/* ================================================================
21. CHARTS — ApexCharts, Chart.js, Highcharts
================================================================ */
:root {
--apex-chart-background: #1e3228 !important;
--apex-grid-color: rgba(201,168,76,0.10) !important;
--apex-text-color: #8a9e8d !important;
--apex-tooltip-background: #243d2e !important;
--recharts-bg-color: #1e3228 !important;
}
.apexcharts-canvas { background: transparent !important; }
.apexcharts-gridline { stroke: rgba(201,168,76,0.10) !important; }
.apexcharts-text,
.apexcharts-yaxis-label,
.apexcharts-xaxis-label { fill: #8a9e8d !important; font-family: 'Jost', sans-serif !important; font-size: 12px !important; }
.apexcharts-tooltip {
background-color: #243d2e !important;
border-color: rgba(201,168,76,0.40) !important;
color: #e8d5a3 !important;
font-family: 'Jost', sans-serif !important;
font-size: 0.875rem !important;
box-shadow: 0 8px 24px rgba(13,23,16,0.70) !important;
}
.apexcharts-tooltip-title {
background-color: rgba(36,61,46,0.80) !important;
border-bottom-color: rgba(201,168,76,0.25) !important;
color: #c9a84c !important;
font-size: 0.75rem !important;
}
.apexcharts-legend-text { color: #8a9e8d !important; font-size: 0.8125rem !important; }
/* ================================================================
22. MISC UI — Spinners, Skeletons, Accordion, Offcanvas,
DataTables, Select2
================================================================ */
/* Spinner */
.spinner-border, [class*="spinner"] {
border-color: rgba(201,168,76,0.20) !important;
border-top-color: #c9a84c !important;
border-right-color: #c9a84c !important;
}
/* Skeleton shimmer */
.skeleton, .placeholder, [class*="skeleton"], [class*="shimmer"] {
background: linear-gradient(90deg,#1e3228 25%,#243d2e 50%,#1e3228 75%) !important;
background-size: 200% 100% !important;
}
/* Accordion */
.accordion-button {
font-family: 'Jost', sans-serif !important;
font-size: 0.9375rem !important;
background-color: #1e3228 !important;
color: #e8d5a3 !important;
}
.accordion-button:not(.collapsed) {
background-color: rgba(201,168,76,0.10) !important;
color: #c9a84c !important;
box-shadow: inset 0 -1px 0 rgba(201,168,76,0.22) !important;
}
.accordion-button::after {
filter: invert(1) sepia(1) saturate(2) hue-rotate(6deg) !important;
opacity: 0.7 !important;
}
.accordion-body {
font-size: 0.9375rem !important;
background-color: #192b20 !important;
color: #e8d5a3 !important;
}
.accordion-item {
background-color: #1e3228 !important;
border-color: rgba(201,168,76,0.18) !important;
}
/* Offcanvas */
.offcanvas {
background-color: #192b20 !important;
border-color: rgba(201,168,76,0.30) !important;
color: #e8d5a3 !important;
font-size: 0.9375rem !important;
}
.offcanvas-header {
border-bottom-color: rgba(201,168,76,0.20) !important;
}
.offcanvas-title {
font-family: 'Cinzel', serif !important;
font-size: 1rem !important;
color: #c9a84c !important;
}
/* DataTables */
.dataTables_wrapper .dataTables_filter input { background: #1e3228 !important; border-color: rgba(201,168,76,0.28) !important; color: #e8d5a3 !important; font-size: 0.875rem !important; }
.dataTables_wrapper .dataTables_length select { background: #1e3228 !important; border-color: rgba(201,168,76,0.28) !important; color: #e8d5a3 !important; font-size: 0.875rem !important; }
.dataTables_wrapper .dataTables_info { color: #8a9e8d !important; font-size: 0.875rem !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current) { color: #8a9e8d !important; font-size: 0.875rem !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgba(201,168,76,0.18) !important; border-color: rgba(201,168,76,0.40) !important; color: #c9a84c !important; }
/* Select2 */
.select2-container--default .select2-selection { background-color: #1e3228 !important; border-color: rgba(201,168,76,0.28) !important; }
.select2-container--default .select2-selection__rendered { color: #e8d5a3 !important; font-size: 0.9375rem !important; }
.select2-container--default .select2-selection__placeholder { color: #526057 !important; }
.select2-container--default .select2-selection__arrow b { border-top-color: #c9a84c !important; }
.select2-dropdown { background-color: #243d2e !important; border-color: rgba(201,168,76,0.40) !important; }
.select2-results__option { color: #e8d5a3 !important; font-size: 0.9375rem !important; }
.select2-container--default .select2-results__option--highlighted { background-color: rgba(201,168,76,0.12) !important; color: #c9a84c !important; }
.select2-search__field { background: #1e3228 !important; border-color: rgba(201,168,76,0.28) !important; color: #e8d5a3 !important; }