/* ================================================================= * Rentari chart themes — CSS tokens * ================================================================= * * Every chart card (and every non-Chart.js element that should * follow the active theme) reads these CSS variables. Switching * themes is a single attribute write on : * document.documentElement.setAttribute('data-chart-theme', 'glass') * which is handled centrally by RentariCharts.applyDefaults(). * * Page authors apply the cascade by adding `chart-themed` to a * card container: *
...
* * Variable conventions (cf = chart frame): * --cf-card-bg, --cf-card-border, --cf-card-glow * --cf-text, --cf-muted * --cf-stroke-1, --cf-stroke-2, --cf-stroke-3 (gradient stops) * --cf-ring-fill, --cf-ring-track * --cf-accent (the brand pop) * * Defaults (no data-chart-theme set) match `brand` exactly so a * fresh user without a saved preference still sees the intended * Rentari look. * ================================================================= */ :root, [data-chart-theme="brand"] { --cf-card-bg: #ffffff; --cf-card-border: rgba(140,108,255,.18); --cf-card-glow: 0 1px 0 rgba(15,23,42,.04), 0 30px 60px -45px rgba(140,108,255,.45); --cf-card-radius: 18px; --cf-text: #0f172a; --cf-muted: #94a3b8; --cf-stroke-1: #8C6CFF; --cf-stroke-2: #6A9EFF; --cf-stroke-3: #48E2D9; --cf-stroke-gradient: var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)); --cf-ring-fill: conic-gradient(from -90deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 var(--cf-ring-pct, 100%), #F1F5F9 var(--cf-ring-pct, 100%)); --cf-ring-track: #F1F5F9; --cf-accent: #48E2D9; --cf-chip-bg: linear-gradient(135deg,#e7edff,#E6FBF8); --cf-chip-text: #3730a3; --cf-chip-border: #DDD8FF; --cf-bar-1: #8C6CFF; --cf-bar-2: #6A9EFF; --cf-bar-3: #48E2D9; --cf-bar-radius: 12px; --cf-headline-grad: var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)); } [data-chart-theme="glass"] { --cf-card-bg: radial-gradient(120% 100% at 0% 0%, #1e1b4b 0%, #0b1226 60%, #020617 100%); --cf-card-border: rgba(148,163,184,.18); --cf-card-glow: 0 30px 70px -30px rgba(99,102,241,.35), inset 0 0 0 1px rgba(255,255,255,.04); --cf-card-radius: 22px; --cf-text: #e2e8f0; --cf-muted: rgba(255,255,255,.55); --cf-stroke-1: #67e8f9; --cf-stroke-2: #a78bfa; --cf-stroke-3: #f472b6; --cf-stroke-gradient:linear-gradient(135deg,#67e8f9 0%,#a78bfa 50%,#f472b6 100%); --cf-ring-fill: conic-gradient(from -90deg, #67e8f9 0%, #a78bfa var(--cf-ring-pct, 100%), rgba(255,255,255,.08) var(--cf-ring-pct, 100%)); --cf-ring-track: rgba(255,255,255,.08); --cf-accent: #67e8f9; --cf-chip-bg: rgba(255,255,255,.05); --cf-chip-text: #cbd5e1; --cf-chip-border: rgba(148,163,184,.18); --cf-bar-1: #67e8f9; --cf-bar-2: #6366f1; --cf-bar-3: #6366f1; --cf-bar-radius: 8px; --cf-headline-grad: linear-gradient(135deg,#a5b4fc 0%,#67e8f9 100%); } [data-chart-theme="cinematic"] { --cf-card-bg: radial-gradient(800px 400px at 20% 0%, rgba(140,108,255,.10), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(72,226,217,.10), transparent 60%), linear-gradient(180deg,#f7f5f0 0%,#ece8df 100%); --cf-card-border: #0f172a; --cf-card-glow: none; --cf-card-radius: 8px; --cf-text: #0f172a; --cf-muted: #475569; --cf-stroke-1: #0f172a; --cf-stroke-2: #475569; --cf-stroke-3: #7c3aed; --cf-stroke-gradient:linear-gradient(135deg,#0f172a 0%,#7c3aed 100%); --cf-ring-fill: conic-gradient(from -90deg, #0f172a 0%, #0f172a var(--cf-ring-pct, 100%), #cbb89a var(--cf-ring-pct, 100%)); --cf-ring-track: #cbb89a; --cf-accent: #7c3aed; --cf-chip-bg: transparent; --cf-chip-text: #0f172a; --cf-chip-border: #0f172a; --cf-bar-1: #0f172a; --cf-bar-2: #0f172a; --cf-bar-3: #0f172a; --cf-bar-radius: 0; --cf-headline-grad: linear-gradient(135deg,#0f172a 0%,#7c3aed 100%); } /* ================================================================= * Themed card chrome * ================================================================= * Pages can opt into theme-aware chrome by adding `chart-themed` to * their existing card div. Cards keep their existing classes (e.g. * `report-card`) so layout doesn't shift; chart-themed just adds * the chrome variables on top. * * The decorative ::before border below uses mask-composite to draw * a 1.5px gradient stroke around the card without the inner area * picking up the gradient. * ================================================================= */ .chart-themed { position: relative; background: var(--cf-card-bg); color: var(--cf-text); border-radius: var(--cf-card-radius); box-shadow: var(--cf-card-glow); isolation: isolate; } .chart-themed.chart-themed--with-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--cf-stroke-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* Chip used as a "section label" above each chart (Today's reports, * Portfolio mix, etc). */ .chart-themed .cf-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 9999px; background: var(--cf-chip-bg); color: var(--cf-chip-text); border: 1px solid var(--cf-chip-border); } /* Headline number ("$184,210") — gradient-filled text. */ .chart-themed .cf-headline { background: var(--cf-headline-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; letter-spacing: -.02em; } /* Cinematic-only display serif (no-op for other themes since the * cascade font-family on .cf-headline only fires when * data-chart-theme="cinematic" lives on ). */ [data-chart-theme="cinematic"] .cf-headline, [data-chart-theme="cinematic"] .cf-display { font-family: 'Fraunces', Georgia, serif; } /* ================================================================= * Themed CSS occupancy ring * ================================================================= * Used in landlord_dashboard.html. The ring fill is a conic gradient * that switches with the theme; the percent is set via the inline * --cf-ring-pct variable on the wrapper. * ================================================================= */ .cf-ring { --size: 168px; --thickness: 18px; width: var(--size); height: var(--size); border-radius: 9999px; background: var(--cf-ring-fill); -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px)); mask: radial-gradient(circle, transparent calc(50% - var(--thickness)), #000 calc(50% - var(--thickness) + 1px)); position: relative; display: grid; place-items: center; filter: drop-shadow(0 6px 20px rgba(140,108,255,.18)); } [data-chart-theme="glass"] .cf-ring { filter: drop-shadow(0 0 30px rgba(103,232,249,.4)); } [data-chart-theme="cinematic"] .cf-ring { filter: none; } /* ================================================================= * Chart skeleton loader colors per theme * ================================================================= * The shimmer skeleton in landlord_dashboard.html hard-codes slate * grays. When a dark theme is active we re-tint those so loading * doesn't show a bright white slab on a dark card. * ================================================================= */ [data-chart-theme="glass"] .chart-skeleton-bg { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); } [data-chart-theme="glass"] .chart-skeleton-bg .chart-skeleton-bar { background: rgba(255,255,255,.10); } /* ================================================================= * Switcher button styling (used by _chart_theme_switcher.html) * ================================================================= */ .cf-switcher-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #ffffff; border: 1px solid #e2e8f0; color: #293649; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s ease; } .cf-switcher-btn:hover { border-color: var(--cf-stroke-1); color: var(--cf-text); } .cf-switcher-pop { position: absolute; right: 0; top: calc(100% + 6px); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 20px 50px -10px rgba(15,23,42,.18); padding: 8px; z-index: 50; display: none; width: 280px; } .cf-switcher-pop[data-open="true"] { display: block; } .cf-switcher-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; } .cf-switcher-card:hover { background: #f8fafc; } .cf-switcher-card[data-active="true"] { background: #f8fafc; border-color: var(--cf-stroke-1); } .cf-switcher-swatch { width: 44px; height: 28px; border-radius: 6px; flex: none; border: 1px solid rgba(15,23,42,.06); } .cf-switcher-swatch--brand { background: var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)); } .cf-switcher-swatch--glass { background: radial-gradient(120% 100% at 0% 0%, #1e1b4b 0%, #0b1226 60%, #020617 100%); position: relative; } .cf-switcher-swatch--glass::after { content:""; position:absolute; inset:4px; border-radius:4px; background: linear-gradient(135deg,#67e8f9 0%,#a78bfa 100%); opacity:.6; } .cf-switcher-swatch--cinematic { background: linear-gradient(180deg,#f7f5f0 0%,#ece8df 100%); position: relative; } .cf-switcher-swatch--cinematic::after { content:""; position:absolute; inset:6px 4px; border-top:2px solid #0f172a; border-bottom:2px solid #0f172a; } .cf-switcher-card .cf-switcher-text { display: flex; flex-direction: column; min-width: 0; } .cf-switcher-card .cf-switcher-title { font-size: 13px; font-weight: 700; color: #0f172a; } .cf-switcher-card .cf-switcher-desc { font-size: 11px; color: #354358; line-height: 1.3; } .cf-switcher-locked { opacity: .5; cursor: not-allowed; } .cf-switcher-locked-tag { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #576478; background: #f1f5f9; border-radius: 9999px; padding: 2px 6px; margin-left: auto; flex: none; }