/* ============================================================================ brand-themes.css — Central per-site brand palette for the dashboard header. ONE file holds every site's LOGO + TITLE colors. The shell sets data-site="" on (injected server-side per site for a flash-free first paint, with a JS fallback from the nav payload's site_code), and each site keys its brand off that attribute: --dash-brand-grad-start / --dash-brand-grad-end The logo-mark gradient (consumed by .header-brand-icon in dashboard-shell.css) AND the wordmark gradient (the per-site .header-brand-name rule below). The :root defaults reproduce the neutral shell look, so a site with no entry here is visually unchanged (no fleet regression). To brand a new site, copy the TEMPLATE block at the bottom and fill in its two colors. ============================================================================ */ :root { --dash-brand-grad-start: var(--dash-accent); --dash-brand-grad-end: var(--icon-purple); } /* --- IndianMarriage — love-pink → marriage-gold (matches the landing page) --- */ html[data-site="indianmarriage"] { --dash-brand-grad-start: #EC4899; --dash-brand-grad-end: #D4AF37; } html[data-site="indianmarriage"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- AICHUMS — AI indigo → violet (source: AICHUMS/frontend/css/aichums.css :root --ai-primary #6366f1 L10 / --ai-secondary #8b5cf6 L13; the same pair drives the site's .gradient-text-primary wordmark) --- */ html[data-site="aichums"] { --dash-brand-grad-start: #6366f1; --dash-brand-grad-end: #8b5cf6; } html[data-site="aichums"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- TubeRaker — brand blue → violet (source: TUBERAKER/frontend/static/css/ landing.css L34 --gradient-brand: linear-gradient(135deg,#3b82f6,#8b5cf6); also variables.css --color-brand-primary #3b82f6 / -secondary #8b5cf6) --- */ html[data-site="tuberaker"] { --dash-brand-grad-start: #3b82f6; --dash-brand-grad-end: #8b5cf6; } html[data-site="tuberaker"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- NoidNoggin — knowledge blue → teal-cyan (source: NOIDNOGGIN/frontend/css/ base.css :root --color-primary #3B82F6 L3 / --color-secondary #06B6D4 L4) --- */ html[data-site="noidnoggin"] { --dash-brand-grad-start: #3b82f6; --dash-brand-grad-end: #06b6d4; } html[data-site="noidnoggin"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- IndianShopping — commerce saffron → deep orange (source: INDIANSHOPPING/ frontend/index.html L11 #FF9933; frontend/css/ design-system.css L12 --is-saffron-600 #ea580c) --- */ html[data-site="indianshopping"] { --dash-brand-grad-start: #ff9933; --dash-brand-grad-end: #ea580c; } html[data-site="indianshopping"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------------------------------------------------------------------------- TEMPLATE — to brand another site, copy this block, replace "yoursite" with the site_code, and set the two brand colors. The logo mark picks up the gradient automatically via --dash-brand-grad-*; the second rule paints the wordmark to match. html[data-site="yoursite"] { --dash-brand-grad-start: #RRGGBB; --dash-brand-grad-end: #RRGGBB; } html[data-site="yoursite"] .header-brand-name { background: linear-gradient(135deg, var(--dash-brand-grad-start), var(--dash-brand-grad-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } ---------------------------------------------------------------------------- */