/* ========================================================================== DoCalc — Niche accent colors Applied via . Homepage uses no data-niche attribute and falls back to the brand blue defined in styles.css. Category/calc cards use --card-color per item so the homepage can show all four accents even without a page-level niche. ========================================================================== */ body[data-niche="saas"] { --color-accent: #7c3aed; --color-accent-dark: #6d28d9; --color-accent-light: #f5f3ff; } body[data-niche="finance"] { --color-accent: #2563eb; --color-accent-dark: #1d4ed8; --color-accent-light: #eff6ff; } body[data-niche="insurance"] { --color-accent: #0d9488; --color-accent-dark: #0f766e; --color-accent-light: #f0fdfa; } body[data-niche="real-estate"] { --color-accent: #ea580c; --color-accent-dark: #c2410c; --color-accent-light: #fff7ed; } @media (prefers-color-scheme: dark) { body[data-niche="saas"] { --color-accent-light: rgba(124, 58, 237, 0.14); } body[data-niche="finance"] { --color-accent-light: rgba(37, 99, 235, 0.14); } body[data-niche="insurance"] { --color-accent-light: rgba(13, 148, 136, 0.14); } body[data-niche="real-estate"] { --color-accent-light: rgba(234, 88, 12, 0.14); } } /* Card-level accent hooks so the homepage can render all 4 niche colors at once without a page-level data-niche. Set inline as style="--card-color:…" or via these utility classes on individual cards. */ .accent-saas { --card-color: #7c3aed; } .accent-finance { --card-color: #2563eb; } .accent-insurance { --card-color: #0d9488; } .accent-real-estate { --card-color: #ea580c; }